/* ── Landing Page Styles ───────────────────────────── */
.py-6 { padding-top: 5rem; padding-bottom: 5rem; }

.landing-body { margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; }

/* Nav */
.landing-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(26,26,46,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.landing-brand { font-size: 1.5rem; font-weight: 800; color: #e94560; letter-spacing: -1px; }
.landing-brand-sm { font-size: 1.1rem; font-weight: 800; color: #e94560; }

/* Buttons */
.btn-ghost-white { color: #fff; border: 1px solid rgba(255,255,255,.3); background: transparent; }
.btn-ghost-white:hover { background: rgba(255,255,255,.1); color: #fff; }
.btn-white { background: #fff; color: #1a1a2e; font-weight: 600; }
.btn-white:hover { background: #f0f0f0; color: #1a1a2e; }
.btn-accent { background: #e94560; color: #fff; font-weight: 600; border: none; }
.btn-accent:hover { background: #c73652; color: #fff; }
.btn-outline-white { border: 2px solid rgba(255,255,255,.5); color: #fff; background: transparent; font-weight: 600; }
.btn-outline-white:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Hero */
.hero-section {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
  position: relative; overflow: hidden; padding-top: 80px;
}
.hero-bg-shapes { position: absolute; inset: 0; pointer-events: none; }
.shape { position: absolute; border-radius: 50%; opacity: .12; }
.shape-1 { width: 600px; height: 600px; background: #e94560; top: -200px; right: -150px; animation: float 8s ease-in-out infinite; }
.shape-2 { width: 300px; height: 300px; background: #4cc9f0; bottom: -100px; left: -50px; animation: float 10s ease-in-out infinite reverse; }
.shape-3 { width: 200px; height: 200px; background: #f72585; top: 40%; left: 40%; animation: float 6s ease-in-out infinite 2s; }
@keyframes float { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-30px) scale(1.05)} }

.hero-badge {
  background: rgba(233,69,96,.2); color: #e94560;
  border: 1px solid rgba(233,69,96,.4); padding: .4rem 1rem;
  border-radius: 50px; font-size: .8rem; font-weight: 600;
}
.hero-title { font-size: clamp(2.5rem,6vw,4rem); font-weight: 900; line-height: 1.1; }
.text-accent { color: #e94560; }
.hero-subtitle { font-size: 1.1rem; opacity: .75; max-width: 480px; }
.stat-num { font-size: 1.8rem; font-weight: 800; color: #fff; }
.stat-label { font-size: .75rem; opacity: .6; color: #fff; }
.stat-divider { width: 1px; background: rgba(255,255,255,.2); margin: 0 .5rem; }

/* Phone mock */
.hero-phone-mock {
  width: 280px; height: 500px;
  background: #0a0a1a;
  border-radius: 36px;
  border: 6px solid #2a2a4a;
  box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
  overflow: hidden; position: relative;
  animation: phone-float 5s ease-in-out infinite;
}
@keyframes phone-float { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-15px) rotate(2deg)} }
.phone-screen { position: absolute; inset: 0; }
.phone-map-bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #1a3a2e 0%, #0d2419 100%);
  background-image:
    radial-gradient(circle at 30% 40%, rgba(40,167,69,.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(13,110,253,.15) 0%, transparent 50%);
}
.phone-card {
  position: absolute; bottom: 20px; left: 12px; right: 12px;
  background: rgba(255,255,255,.95); border-radius: 16px; padding: 14px;
  backdrop-filter: blur(8px);
}
.driver-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #28a745;
  box-shadow: 0 0 0 3px rgba(40,167,69,.3);
  animation: pulse-dot 1.5s ease infinite;
}
@keyframes pulse-dot { 0%,100%{box-shadow:0 0 0 3px rgba(40,167,69,.3)} 50%{box-shadow:0 0 0 6px rgba(40,167,69,.1)} }
.phone-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #e94560, #f72585);
  color: #fff; font-weight: 700; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
}
@keyframes progress-anim { from{width:40%} to{width:85%} }

/* Steps */
.step-card {
  background: #fff; border-radius: 16px;
  padding: 2rem 1.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s;
  position: relative; overflow: hidden;
}
.step-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.step-num {
  font-size: 3rem; font-weight: 900; color: rgba(233,69,96,.1);
  position: absolute; top: 10px; right: 16px; line-height: 1;
}
.step-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, #e94560, #f72585);
  color: #fff; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
}

/* Features */
.feature-icon { font-size: 1.5rem; width: 48px; min-width: 48px; }
.feature-card {
  background: #fff; border-radius: 16px; padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  border-top: 3px solid var(--card-color, #e94560);
  transition: transform .3s, box-shadow .3s;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.12); }
.feature-card-icon { font-size: 2rem; color: var(--card-color, #e94560); }
.section-badge {
  background: rgba(233,69,96,.1); color: #e94560;
  border: 1px solid rgba(233,69,96,.3); padding: .3rem .9rem;
  border-radius: 50px; font-size: .75rem; font-weight: 600;
  display: inline-block; margin-bottom: .75rem;
}
.section-title { font-size: 2rem; font-weight: 800; color: #1a1a2e; }

/* CTA */
.cta-section { background: linear-gradient(135deg, #1a1a2e, #0f3460); }
.cta-card {
  background: linear-gradient(135deg, #e94560, #f72585);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(233,69,96,.4);
}

/* Footer */
.landing-footer { background: #0a0a1a; border-top: 1px solid rgba(255,255,255,.06); }

/* Scroll animations */
[data-animate] { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }
[data-animate="fade-left"] { transform: translateX(30px); }
[data-animate="fade-right"] { transform: translateX(-30px); }
[data-animate].animated { opacity: 1; transform: none; }