/* home.css - styles scoped to #page-home */

#page-home .hero { padding:70px 0 90px; position:relative; overflow:hidden }
#page-home .hero:before { content:""; position:absolute; width:520px; height:520px; background:var(--soft-yellow); border-radius:50%; right:-180px; top:-180px; z-index:-1 }
#page-home .hero-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center }
#page-home .eyebrow { display:inline-flex; align-items:center; gap:9px; background:var(--soft-yellow); color:var(--dark-green); padding:8px 14px; border-radius:50px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:22px }
#page-home .hero h1 { font-size:clamp(45px,5vw,74px); line-height:.98; letter-spacing:-3.5px; font-weight:800; margin-bottom:25px }
#page-home .hero h1 span { color:var(--green) }
#page-home .hero-description { color:var(--muted); font-size:17px; max-width:480px; margin-bottom:32px }
#page-home .hero-buttons { display:flex; gap:13px; flex-wrap:wrap }
#page-home .btn { display:inline-flex; align-items:center; justify-content:center; padding:15px 25px; border-radius:50px; font-size:14px; font-weight:700; transition:.25s }
#page-home .btn-primary:hover { background:var(--dark-green); transform:translateY(-2px) }
#page-home .btn-secondary { background:#fff; border:1px solid var(--border) }
#page-home .btn-secondary:hover { border-color:var(--green); color:var(--green) }
#page-home .hero-image-wrap { position:relative }
#page-home .hero-image { height:570px; width:100%; object-fit:cover; border-radius:30px }
#page-home .hero-floating-card { position:absolute; left:-35px; bottom:35px; background:#fff; padding:17px 20px; border-radius:18px; box-shadow:0 20px 50px rgba(28,48,33,.13); display:flex; align-items:center; gap:13px }
#page-home .floating-icon { width:42px; height:42px; background:var(--yellow); border-radius:50%; display:flex; align-items:center; justify-content:center }
#page-home .floating-text strong { display:block; font-size:14px }
#page-home .floating-text span { font-size:12px; color:var(--muted) }
#page-home .stats { padding:0 0 90px }
#page-home .stats-box { background:var(--light-green); border-radius:24px; padding:30px 40px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
#page-home .stat { text-align:center; border-right:1px solid #dce7dd }
#page-home .stat:last-child { border:0 }
#page-home .stat strong { display:block; font-family:Manrope; font-size:30px; color:var(--dark-green) }
#page-home .stat span { color:var(--muted); font-size:13px }
#page-home section { padding:100px 0 }
#page-home .section-heading { max-width:650px; margin-bottom:50px }
#page-home .section-heading.center { margin-left:auto; margin-right:auto; text-align:center }
#page-home .section-heading h2, #page-home .why-content h2 { font-size:clamp(34px,4vw,50px); line-height:1.08; letter-spacing:-2px; margin-bottom:17px }
#page-home .section-heading p, #page-home .why-content > p { color:var(--muted); font-size:16px }
#page-home .bikes-section, #page-home .gallery-section { background:#fafcf9 }
#page-home .bike-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
#page-home .bike-card { background:#fff; border:1px solid var(--border); border-radius:24px; overflow:hidden; transition:.3s }
#page-home .bike-card:hover { transform:translateY(-7px); box-shadow:0 20px 45px rgba(30,50,35,.09) }
#page-home .bike-image-wrap { height:260px; overflow:hidden; position:relative }
#page-home .bike-image-wrap img { width:100%; height:100%; object-fit:cover; transition:.5s }
#page-home .bike-card:hover img { transform:scale(1.05) }
#page-home .bike-tag { position:absolute; top:16px; left:16px; background:var(--yellow); padding:7px 12px; border-radius:30px; font-size:11px; font-weight:800 }
#page-home .bike-info { padding:23px }
#page-home .bike-info h3 { font-size:21px; margin-bottom:7px }
#page-home .bike-meta { display:flex; gap:15px; color:var(--muted); font-size:12px; margin-bottom:20px }
#page-home .bike-bottom { border-top:1px solid var(--border); padding-top:17px; display:flex; justify-content:space-between }
#page-home .bike-price strong { font-size:19px; color:var(--dark-green) }
#page-home .bike-price span { font-size:11px; color:var(--muted) }
#page-home .bike-link { color:var(--green); font-weight:700; font-size:13px }
#page-home .why-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center }
#page-home .why-image { height:580px; width:100%; object-fit:cover; border-radius:28px }
#page-home .why-content > p { margin-bottom:30px }
#page-home .feature-list { display:grid; gap:20px }
#page-home .feature { display:flex; gap:17px }
#page-home .feature-icon { flex-shrink:0; width:48px; height:48px; background:var(--light-green); color:var(--green); border-radius:14px; display:flex; align-items:center; justify-content:center }
#page-home .feature h3 { font-size:16px; margin-bottom:3px }
#page-home .feature p { color:var(--muted); font-size:13px }
#page-home .destination-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; grid-template-rows:260px 260px; gap:18px }
#page-home .destination { position:relative; overflow:hidden; border-radius:22px }
#page-home .destination:first-child { grid-row:span 2 }
#page-home .destination img { width:100%; height:100%; object-fit:cover; transition:.5s }
#page-home .destination:hover img { transform:scale(1.05) }
#page-home .destination-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(10,30,15,.75),transparent 70%); display:flex; align-items:flex-end; padding:25px; color:#fff }
#page-home .destination-overlay h3 { font-size:22px }
#page-home .destination-overlay span { font-size:12px }
#page-home .how-section { background:var(--light-green) }
#page-home .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:30px }
#page-home .step { background:#fff; border-radius:24px; padding:35px; border:1px solid #e5ece5 }
#page-home .step-number { font-family:Manrope; font-size:50px; font-weight:800; color:#dceade; line-height:1; margin-bottom:20px }
#page-home .step h3 { font-size:20px; margin-bottom:9px }
#page-home .step p { color:var(--muted); font-size:14px }
#page-home .review { border:1px solid var(--border); border-radius:22px; padding:28px }
#page-home .stars { color:#e6b800; letter-spacing:2px; margin-bottom:17px }
#page-home .review p { color:#4f5b52; font-size:14px; line-height:1.8; margin-bottom:22px }
#page-home .review-author { display:flex; align-items:center; gap:12px }
#page-home .author-avatar { width:38px; height:38px; border-radius:50%; background:var(--light-green); display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--green) }
#page-home .review-author strong { display:block; font-size:13px }
#page-home .review-author span { color:var(--muted); font-size:11px }
#page-home .gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
#page-home .gallery-item { height:280px; border-radius:18px; overflow:hidden }
#page-home .gallery-item img { width:100%; height:100%; object-fit:cover; transition:.5s }
#page-home .gallery-item:hover img { transform:scale(1.06) }
#page-home .cta { background:var(--dark-green); color:#fff; border-radius:30px; padding:65px 70px; display:flex; align-items:center; justify-content:space-between; gap:40px }
#page-home .cta h2 { font-size:clamp(32px,4vw,48px); letter-spacing:-2px; line-height:1.05; margin-bottom:13px }
#page-home .cta p { color:rgba(255,255,255,.72); font-size:14px }
#page-home .cta .btn { background:var(--yellow); color:var(--dark) }

@media (max-width:1000px) {
  #page-home .hero-grid { grid-template-columns:1fr; gap:40px }
  #page-home .bike-grid { grid-template-columns:repeat(2,1fr) }
  #page-home .why-grid { gap:40px }
  #page-home .destination-grid { grid-template-columns:1fr 1fr; grid-template-rows:250px 250px }
  #page-home .destination:first-child { grid-row:auto; grid-column:span 2 }
}

@media (max-width:700px) {
  #page-home .hero { padding:50px 0 65px }
  #page-home .hero h1 { font-size:48px; letter-spacing:-2.5px }
  #page-home .hero-description { font-size:15px }
  #page-home .hero-image { height:420px; border-radius:22px }
  #page-home .hero-floating-card { left:15px; bottom:20px }
  #page-home .stats { padding-bottom:60px }
  #page-home .stats-box { grid-template-columns:repeat(2,1fr); padding:25px 15px; gap:25px 10px }
  #page-home .stat { border:0 }
  #page-home section { padding:70px 0 }
  #page-home .bike-grid, #page-home .why-grid, #page-home .steps, #page-home .review-grid { grid-template-columns:1fr }
  #page-home .why-image { height:400px }
  #page-home .destination-grid { grid-template-columns:1fr 1fr; grid-template-rows:220px 180px }
  #page-home .destination:first-child { grid-column:span 2 }
  #page-home .gallery-grid { grid-template-columns:1fr 1fr }
  #page-home .gallery-item { height:190px }
  #page-home .cta { padding:45px 28px; flex-direction:column; align-items:flex-start }
}