:root {
  --black: #050505;
  --black-2: #0b0b0d;
  --panel: rgba(16, 16, 18, .82);
  --panel-2: rgba(25, 25, 28, .72);
  --gold: #f5c84b;
  --gold-2: #d69a15;
  --gold-3: #ffe293;
  --white: #f7f4ec;
  --muted: #b8b4aa;
  --line: rgba(245, 200, 75, .34);
  --shadow: 0 28px 90px rgba(0, 0, 0, .58);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--white);
  background:
    radial-gradient(circle at 74% 8%, rgba(245, 200, 75, .16), transparent 28rem),
    radial-gradient(circle at 20% 28%, rgba(245, 200, 75, .09), transparent 25rem),
    linear-gradient(135deg, #000 0%, #080808 46%, #101010 100%);
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}
.page-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 28px 0; }
.brand { display: inline-flex; gap: 14px; align-items: center; color: inherit; text-decoration: none; }
.brand-mark { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-family: Cinzel, serif; font-size: 30px; color: var(--gold); box-shadow: inset 0 0 22px rgba(245,200,75,.14); }
.brand-text strong { display: block; font-family: Cinzel, serif; text-transform: uppercase; letter-spacing: .16em; font-size: 18px; color: var(--gold); }
.brand-text span { display: block; text-transform: uppercase; letter-spacing: .28em; font-size: 10px; color: var(--white); margin-top: 3px; }
.topbar-link { color: #060606; background: linear-gradient(135deg, var(--gold-3), var(--gold), var(--gold-2)); padding: 12px 18px; border-radius: 999px; text-decoration: none; font-weight: 800; box-shadow: 0 12px 30px rgba(245,200,75,.22); }
.hero { min-height: 760px; position: relative; }
.hero-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 44px; align-items: center; padding: 28px 0 70px; }
.eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .22em; font-weight: 700; font-size: 13px; margin: 0 0 16px; }
h1, h2, h3 { margin: 0; }
h1 { font-family: Cinzel, serif; font-size: clamp(60px, 9vw, 122px); line-height: .86; letter-spacing: .08em; text-transform: uppercase; }
h1 span:first-child { display: block; color: var(--white); text-shadow: 0 0 30px rgba(255,255,255,.2); }
h1 span:last-child { display: block; color: var(--gold); }
.hero-lead { color: var(--white); font-size: clamp(18px, 2vw, 23px); line-height: 1.5; max-width: 580px; margin: 28px 0; }
.trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid rgba(255,255,255,.08); padding: 22px 0; }
.trust-row div { text-align: center; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .08em; }
.trust-row strong { display: block; margin-top: 8px; font-size: 11px; }
.line-icon { width: 38px; height: 38px; display: inline-block; border: 2px solid var(--gold); border-radius: 12px; position: relative; }
.line-icon.shield { clip-path: polygon(50% 0, 93% 18%, 83% 75%, 50% 100%, 17% 75%, 7% 18%); }
.line-icon.medal { border-radius: 50%; }
.line-icon.medal::after { content:""; position:absolute; inset:10px; border:2px solid var(--gold); transform: rotate(45deg); }
.line-icon.person { border-radius:50%; border-top-color:transparent; }
.line-icon.person::after { content:""; position:absolute; width:18px; height:18px; border:2px solid var(--gold); border-radius:50%; left:8px; top:-9px; }
.line-icon.clock { border-radius:50%; }
.line-icon.clock::before { content:""; position:absolute; width:2px; height:12px; background:var(--gold); left:17px; top:7px; transform-origin:bottom; transform:rotate(0deg); }
.line-icon.clock::after { content:""; position:absolute; width:11px; height:2px; background:var(--gold); left:17px; top:18px; transform-origin:left; transform:rotate(-35deg); }
.glass-card, .feature-card, .notify-panel { background: linear-gradient(145deg, var(--panel), rgba(8,8,8,.62)); border: 1px solid rgba(245,200,75,.2); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.intro-card { padding: 28px; border-radius: 24px; margin-top: 28px; }
.intro-card h2 { color: var(--gold); font-size: 25px; text-transform: uppercase; letter-spacing: .12em; }
.intro-card p { color: var(--white); line-height: 1.7; margin-bottom: 0; }
.hero-visual { min-height: 600px; position: relative; overflow: hidden; border-radius: 34px; background: radial-gradient(circle at 78% 54%, rgba(245,200,75,.2), transparent 11rem), linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.01)); border: 1px solid rgba(245,200,75,.18); box-shadow: var(--shadow); }
.skyline { position: absolute; left: 8%; right: 5%; top: 14%; height: 220px; display: flex; align-items: flex-end; gap: 12px; opacity: .95; }
.skyline span { width: 9%; border: 1px solid rgba(245,200,75,.85); background: linear-gradient(180deg, rgba(245,200,75,.45), rgba(245,200,75,.04)); box-shadow: 0 0 22px rgba(245,200,75,.18); animation: shimmer 3.5s ease-in-out infinite alternate; }
.skyline span:nth-child(1){height:42%}.skyline span:nth-child(2){height:62%}.skyline span:nth-child(3){height:78%}.skyline span:nth-child(4){height:48%}.skyline span:nth-child(5){height:96%}.skyline span:nth-child(6){height:56%}.skyline span:nth-child(7){height:70%}.skyline span:nth-child(8){height:45%}
.sunset { position:absolute; width:140px; height:140px; border-radius:50%; right:10%; top:36%; background: radial-gradient(circle, var(--gold), rgba(214,154,21,.05) 70%); filter: blur(.2px); opacity:.8; }
.road-sweep { position:absolute; width: 92%; height: 260px; left: 4%; bottom: 10%; border-bottom: 18px solid rgba(245,200,75,.85); border-radius: 50%; transform: rotate(-7deg); }
.car-card { position:absolute; width:min(620px, 82%); height:240px; right:4%; bottom:15%; animation: floatCar 5s ease-in-out infinite; }
.car-body { position:absolute; width:92%; height:74px; left:3%; bottom:50px; border-radius: 90px 130px 36px 28px; background: linear-gradient(180deg, #171717, #020202); border: 2px solid rgba(245,200,75,.88); box-shadow: 0 30px 60px rgba(0,0,0,.65), inset 0 9px 20px rgba(255,255,255,.08); }
.car-top { position:absolute; width:48%; height:86px; left:24%; bottom:105px; border-radius: 90px 100px 6px 8px; border: 2px solid rgba(245,200,75,.82); background: linear-gradient(180deg, #101010, #030303); transform: skewX(-13deg); }
.car-window { position:absolute; height:48px; bottom:124px; background: linear-gradient(135deg, rgba(245,200,75,.24), rgba(255,255,255,.05)); border: 1px solid rgba(245,200,75,.6); }
.window-left { width:115px; left:34%; transform:skewX(-16deg); border-radius:42px 0 0 4px; }
.window-right { width:95px; left:54%; transform:skewX(-16deg); border-radius:0 48px 4px 0; }
.car-light { position:absolute; bottom:82px; width:56px; height:11px; background:var(--gold-3); box-shadow:0 0 25px var(--gold); }
.car-light.front { right:5%; border-radius:20px 60px 60px 20px; }.car-light.rear { left:4%; border-radius:60px 20px 20px 60px; opacity:.7; }
.wheel { position:absolute; width:74px; height:74px; border-radius:50%; bottom:17px; border: 10px solid #090909; outline: 3px solid var(--gold); background: radial-gradient(circle, var(--gold) 0 8%, #111 9%); }
.wheel.left { left:16%; }.wheel.right { right:18%; }
.app-section { padding: 40px 0 64px; }
.section-heading { text-align:center; margin-bottom:28px; }
.section-heading h2 { font-family:Cinzel,serif; font-size: clamp(32px, 5vw, 62px); color:var(--white); text-transform:uppercase; letter-spacing:.06em; }
.feature-layout { display:grid; grid-template-columns: 1fr 1.42fr 1fr; gap: 22px; align-items:center; }
.feature-card { border-radius: 26px; padding: 26px; min-height: 330px; }
.feature-title { display:flex; gap:14px; align-items:center; color:var(--gold); text-transform:uppercase; letter-spacing:.12em; }
.feature-title .line-icon { width:32px; height:32px; border-radius:50%; }
ul { margin: 24px 0 0; padding:0 0 0 18px; color:var(--white); line-height:1.8; }
li::marker { color:var(--gold); }
.phone-stage { display:flex; justify-content:center; align-items:flex-end; gap:16px; min-height:520px; }
.phone { width:235px; height:470px; border: 8px solid #111; border-radius: 38px; background:#000; box-shadow: 0 28px 65px rgba(0,0,0,.7), 0 0 0 1px rgba(245,200,75,.22); position:relative; padding:15px; }
.driver-phone { transform: translateY(28px); }
.phone-notch { position:absolute; top:7px; left:50%; transform:translateX(-50%); width:88px; height:22px; background:#040404; border-radius:0 0 16px 16px; z-index:2; }
.phone-screen { height:100%; border-radius:27px; padding:42px 16px 16px; background: linear-gradient(180deg, #141414, #050505); border:1px solid rgba(245,200,75,.16); overflow:hidden; }
.mini-brand { font-family:Cinzel,serif; color:var(--gold); font-size:42px; text-align:center; line-height:1; margin-bottom:12px; }
.phone h3 { font-size:15px; margin-bottom:12px; }
.phone label, .metric-label, .next-trip span { color:var(--muted); font-size:11px; }
.input-line { height:38px; border:1px solid rgba(255,255,255,.12); border-radius:10px; margin:6px 0 13px; background:rgba(255,255,255,.04); }
button { border:0; cursor:pointer; border-radius: 11px; padding: 13px 18px; font-weight:800; background:linear-gradient(135deg,var(--gold-3),var(--gold),var(--gold-2)); color:#070707; transition: transform .2s ease, box-shadow .2s ease; }
button:hover { transform: translateY(-2px); box-shadow:0 12px 25px rgba(245,200,75,.22); }
.mini-ride-card, .next-trip { margin-top:18px; padding:14px; min-height:90px; border-radius:14px; background:linear-gradient(135deg, rgba(245,200,75,.12), rgba(255,255,255,.04)); border:1px solid rgba(245,200,75,.16); }
.mini-ride-card span, .mini-ride-card strong { display:block; margin-bottom:8px; }
.driver-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }.driver-head span { color:#9bd883; font-size:11px; }
.metric { font-size:28px; display:block; margin:5px 0 12px; }.stat-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:6px; color:var(--gold); font-size:11px; margin-bottom:14px; }
.next-trip p { margin:0 0 8px; color:var(--white); }.next-trip strong { display:block; font-size:12px; color:var(--gold); margin-bottom:4px; }
.phone-badge { position:absolute; bottom:-32px; left:50%; transform:translateX(-50%); border:1px solid var(--gold); color:var(--gold); background:#080808; border-radius:999px; padding:10px 16px; font-weight:800; text-transform:uppercase; font-size:11px; white-space:nowrap; }
.notify-panel { margin: 28px 0 36px; border-radius: 28px; padding: 30px; display:grid; grid-template-columns: .9fr 1.1fr; gap:24px; align-items:center; }
.notify-panel h2 { color:var(--gold); text-transform:uppercase; letter-spacing:.12em; font-size:28px; }.notify-panel p { color:var(--white); line-height:1.6; margin-bottom:0; }
.notify-form { display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:start; }
.notify-form input { width:100%; border:1px solid rgba(245,200,75,.26); background:rgba(255,255,255,.06); color:var(--white); border-radius:13px; padding:16px 17px; font-size:16px; outline:none; }
.notify-form input:focus { border-color:var(--gold); box-shadow:0 0 0 4px rgba(245,200,75,.12); }
.form-message { grid-column:1 / -1; min-height:22px; font-weight:700; color:var(--gold); margin:0; }
.footer { display:flex; justify-content:space-between; gap:16px; padding: 24px 0 42px; border-top:1px solid rgba(245,200,75,.18); color:var(--muted); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.reveal { opacity:0; transform: translateY(28px); transition: opacity .85s ease, transform .85s ease; }.reveal.visible { opacity:1; transform:translateY(0); }
@keyframes shimmer { from { filter: brightness(.8); } to { filter: brightness(1.25); } }
@keyframes floatCar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 980px) {
  .hero { min-height:auto; }.hero-grid, .feature-layout, .notify-panel { grid-template-columns:1fr; }.hero-visual { min-height:520px; order:-1; }.feature-card { min-height:auto; }.phone-stage { min-height:530px; }.notify-form { grid-template-columns:1fr; }
}
@media (max-width: 680px) {
  .page-shell { width:min(100% - 22px, 1180px); }.topbar { align-items:flex-start; gap:16px; flex-direction:column; }.brand-mark { width:54px; height:54px; font-size:25px; }.topbar-link { width:100%; text-align:center; }
  .hero-grid { gap:28px; padding-top:8px; }.hero-visual { min-height:380px; border-radius:24px; }.skyline { height:145px; gap:7px; }.sunset { width:86px; height:86px; }.car-card { width:92%; height:170px; bottom:12%; }.car-body { height:52px; }.car-top { height:58px; bottom:84px; }.car-window { height:32px; bottom:96px; }.window-left { width:80px; }.window-right { width:62px; }.wheel { width:50px; height:50px; border-width:7px; }
  .trust-row { grid-template-columns:repeat(2,1fr); }.intro-card, .feature-card, .notify-panel { padding:21px; border-radius:20px; }
  .phone-stage { flex-direction:column; align-items:center; min-height:auto; gap:54px; padding-bottom:34px; }.driver-phone { transform:none; }.phone { width:min(285px, 100%); height:500px; }
  .footer { flex-direction:column; text-align:center; }
}
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } .reveal { opacity:1; transform:none; } }