/* ===== HERO ===== */
.hero{
  position:relative;
  overflow:hidden;
  padding:100px 0 80px;
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-bg picture,.hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(26,26,46,.7) 0%,rgba(26,26,46,.85) 50%,var(--c-bg) 100%);
}
.hero .container{position:relative;z-index:1}
.hero-content{max-width:700px}
.hero-content h1{margin-bottom:20px;font-size:2.8rem;line-height:1.15}
.hero-content h1 .gradient-text{
  background:var(--c-gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-content .subtitle{font-size:1.2rem;color:var(--c-text-muted);margin-bottom:32px;max-width:560px}
.hero-buttons{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.hero-stat{display:flex;gap:32px;margin-top:32px}
.hero-stat-item{text-align:left}
.hero-stat-item .num{font-size:1.5rem;font-weight:700;color:var(--c-green)}
.hero-stat-item .label{font-size:.85rem;color:var(--c-text-muted)}

/* ===== PRICING CARDS ===== */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.price-card{
  background:var(--c-surface);
  border:2px solid var(--c-border);
  border-radius:var(--radius-lg);
  padding:36px 28px;
  text-align:center;
  transition:var(--transition);
  position:relative;
}
.price-card:hover{border-color:var(--c-cyan);transform:translateY(-4px)}
.price-card.featured{border-color:var(--c-green);background:rgba(0,255,136,.06)}
.price-card.featured::before{
  content:'BEST VALUE';
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  background:var(--c-gradient);
  color:var(--c-bg);
  font-size:.75rem;
  font-weight:700;
  padding:4px 16px;
  border-radius:50px;
}
.price-card h3{font-size:1.2rem;margin-bottom:16px;color:var(--c-text-muted)}
.price-amount{font-size:2.8rem;font-weight:700;color:var(--c-green);line-height:1}
.price-period{font-size:.9rem;color:var(--c-text-muted);margin-top:4px;margin-bottom:16px}
.price-includes{text-align:left;margin:20px 0;font-size:.9rem}
.price-includes li{padding:6px 0;color:var(--c-text-muted);display:flex;align-items:center;gap:8px}
.price-includes li::before{content:'';display:inline-block;width:6px;height:6px;background:var(--c-green);border-radius:50%;flex-shrink:0}

/* ===== WHY SECTION ===== */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.why-card{
  background:var(--c-surface);
  border-radius:var(--radius-lg);
  padding:32px 24px;
  text-align:center;
  transition:var(--transition);
}
.why-card:hover{background:var(--c-surface-hover)}
.why-card .icon{font-size:2.2rem;margin-bottom:16px}
.why-card h3{font-size:1.05rem;margin-bottom:8px}
.why-card p{font-size:.9rem;color:var(--c-text-muted)}

/* ===== HOW IT WORKS (home) ===== */
.steps-grid{display:flex;gap:32px;justify-content:center}
.step-card{flex:1;max-width:320px;text-align:center}
.step-num{
  width:56px;height:56px;
  background:var(--c-gradient);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;font-weight:700;color:var(--c-bg);
  margin:0 auto 20px;
}
.step-card h3{margin-bottom:8px}
.step-card p{color:var(--c-text-muted);font-size:.95rem}

/* ===== DRIVERS PREVIEW ===== */
.drivers-preview{
  background:var(--c-surface);
  border-radius:var(--radius-lg);
  padding:48px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
.drivers-preview-text h2{margin-bottom:16px}
.drivers-preview-text p{color:var(--c-text-muted);margin-bottom:20px}
.drivers-preview-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.driver-stat{
  background:rgba(0,255,136,.08);
  border-radius:var(--radius);
  padding:20px;
  text-align:center;
}
.driver-stat .num{font-size:1.6rem;font-weight:700;color:var(--c-green)}
.driver-stat .label{font-size:.8rem;color:var(--c-text-muted);margin-top:4px}

/* ===== NEIGHBORHOODS ===== */
.hood-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
.hood-tag{
  padding:8px 20px;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:50px;
  font-size:.9rem;
  color:var(--c-text-muted);
  transition:var(--transition);
}
.hood-tag:hover{border-color:var(--c-cyan);color:var(--c-white)}

/* ===== TESTIMONIALS ===== */
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testimonial{
  background:var(--c-surface);
  border-radius:var(--radius-lg);
  padding:32px;
}
.testimonial p{color:var(--c-text-muted);font-style:italic;margin-bottom:16px;font-size:.95rem}
.testimonial .author{font-weight:600;color:var(--c-white);font-size:.9rem}
.testimonial .role{color:var(--c-text-dim);font-size:.8rem}
.stars{color:#fbbf24;margin-bottom:12px;font-size:.9rem;letter-spacing:2px}

/* ===== CTA BANNER ===== */
.cta-banner{
  background:var(--c-gradient);
  border-radius:var(--radius-lg);
  padding:56px 48px;
  text-align:center;
}
.cta-banner h2{color:var(--c-bg);margin-bottom:12px}
.cta-banner p{color:rgba(26,26,46,.7);margin-bottom:24px;font-size:1.1rem}
.cta-banner .btn{
  background:var(--c-bg);
  color:var(--c-white);
}
.cta-banner .btn:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .testimonial-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .hero{padding:60px 0 48px}
  .hero-content h1{font-size:2rem}
  .hero-buttons{flex-direction:column}
  .hero-buttons .btn{width:100%}
  .hero-stat{gap:20px}
  .pricing-grid{grid-template-columns:1fr}
  .pricing-grid .price-card.featured{order:-1}
  .why-grid{grid-template-columns:1fr}
  .steps-grid{flex-direction:column;align-items:center}
  .drivers-preview{grid-template-columns:1fr;padding:32px}
  .testimonial-grid{grid-template-columns:1fr}
  .cta-banner{padding:40px 24px}
}
@media(max-width:480px){
  .hero-content h1{font-size:1.6rem}
  .price-amount{font-size:2.2rem}
}
