:root{
    --ground:#F6F8F4; --surface:#FFFFFF; --surface-2:#EFF3EC;
    --ink:#16201B; --muted:#586a60; --faint:#7d8f84;
    --border:#E2E8DE; --border-strong:#cfd8cb;
    --go:#0FB86A; --go-deep:#0a8f52; --go-soft:#e2f6ec;
    --smile:#F5A623; --smile-soft:#fcefd8;
    --ink-invert:#F1F6F1;
    --shadow: 0 1px 2px rgba(20,40,28,.06), 0 12px 32px -12px rgba(20,40,28,.16);
    --shadow-lift: 0 2px 4px rgba(20,40,28,.08), 0 28px 60px -20px rgba(16,120,80,.28);
    --r:18px; --r-lg:26px;
    --maxw:1140px;
    --dispfont:"Gabarito",system-ui,sans-serif;
    --bodyfont:"Hanken Grotesk",system-ui,sans-serif;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#0E1512; --surface:#16201B; --surface-2:#1c2822;
      --ink:#EAF1EC; --muted:#9db0a5; --faint:#7d9186;
      --border:#26332c; --border-strong:#33443a;
      --go:#2AD07F; --go-deep:#5fe3a1; --go-soft:#123024;
      --smile:#FBB040; --smile-soft:#2a2413;
      --ink-invert:#0E1512;
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -16px rgba(0,0,0,.6);
      --shadow-lift: 0 2px 6px rgba(0,0,0,.5), 0 34px 70px -22px rgba(0,0,0,.7);
    }
  }
  :root[data-theme="dark"]{
    --ground:#0E1512; --surface:#16201B; --surface-2:#1c2822;
    --ink:#EAF1EC; --muted:#9db0a5; --faint:#7d9186;
    --border:#26332c; --border-strong:#33443a;
    --go:#2AD07F; --go-deep:#5fe3a1; --go-soft:#123024;
    --smile:#FBB040; --smile-soft:#2a2413;
    --ink-invert:#0E1512;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -16px rgba(0,0,0,.6);
    --shadow-lift: 0 2px 6px rgba(0,0,0,.5), 0 34px 70px -22px rgba(0,0,0,.7);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--ground); color:var(--ink);
    font-family:var(--bodyfont); font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }

  h1,h2,h3{font-family:var(--dispfont); font-weight:700; line-height:1.05; text-wrap:balance; margin:0; letter-spacing:-.02em}
  p{margin:0}
  a{color:inherit; text-decoration:none}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
  .eyebrow{font-family:var(--bodyfont); text-transform:uppercase; letter-spacing:.16em; font-size:12.5px; font-weight:700; color:var(--go-deep)}
  .lead{color:var(--muted); font-size:19px}

  /* ---- nav ---- */
  header.nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.4) blur(10px);
    background:color-mix(in srgb, var(--ground) 82%, transparent); border-bottom:1px solid var(--border)}
  .nav-in{display:flex; align-items:center; gap:28px; height:68px}
  .brand{display:flex; align-items:center; gap:9px; font-family:var(--dispfont); font-weight:800; font-size:21px; letter-spacing:-.02em}
  .mark{width:30px; height:30px; flex:0 0 auto; display:block}
  .nav-links{display:flex; gap:26px; margin-left:8px}
  .nav-links a{color:var(--muted); font-weight:500; font-size:15px; transition:color .15s}
  .nav-links a:hover{color:var(--ink)}
  .nav-right{margin-left:auto; display:flex; align-items:center; gap:14px}
  .lang{display:inline-flex; gap:2px; align-items:center; font-size:13px; font-weight:700; border:1px solid var(--border-strong); border-radius:999px; padding:5px 4px}
  .lang a{padding:2px 8px; border-radius:999px; color:var(--faint)}
  .lang a.on{background:var(--ink); color:var(--ink-invert)}
  .btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--bodyfont); font-weight:700; font-size:15px;
    padding:11px 20px; border-radius:999px; cursor:pointer; border:1px solid transparent; transition:transform .12s ease, box-shadow .18s, background .18s}
  .btn-go{background:var(--go); color:#04160d; box-shadow:0 8px 20px -8px color-mix(in srgb, var(--go) 70%, transparent)}
  .btn-go:hover{transform:translateY(-1px)}
  .btn-ghost{background:transparent; border-color:var(--border-strong); color:var(--ink)}
  .btn-ghost:hover{border-color:var(--ink); background:var(--surface)}
  .nav-links a, .lang{ }
  @media (max-width:860px){ .nav-links{display:none} .lang{display:none} }

  /* ---- hero ---- */
  .hero{position:relative; overflow:hidden}
  .hero::before{content:""; position:absolute; inset:0; z-index:0;
    background:
      radial-gradient(60% 55% at 82% 8%, color-mix(in srgb,var(--go) 22%, transparent), transparent 70%),
      radial-gradient(46% 40% at 6% 82%, color-mix(in srgb,var(--smile) 16%, transparent), transparent 70%);
    pointer-events:none}
  .hero-in{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
    padding:76px 24px 88px}
  .hero h1{font-size:clamp(40px,6vw,68px); font-weight:800}
  .hero h1 .hl{position:relative; white-space:nowrap}
  .hero h1 .hl::after{content:""; position:absolute; left:0; right:0; bottom:.08em; height:.30em; z-index:-1;
    background:var(--go-soft); border-radius:6px}
  .hero p.lead{margin-top:22px; max-width:33ch}
  .cta-row{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap}
  .store{display:inline-flex; align-items:center; gap:11px; background:var(--ink); color:var(--ink-invert);
    padding:11px 18px; border-radius:14px; transition:transform .12s, box-shadow .18s; box-shadow:var(--shadow)}
  .store:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift)}
  .store svg{width:24px; height:24px; flex:0 0 auto}
  .store .s1{font-size:11px; letter-spacing:.04em; opacity:.72; line-height:1}
  .store .s2{font-family:var(--dispfont); font-weight:700; font-size:17px; line-height:1.1}
  .hero-badges{display:flex; gap:22px; margin-top:34px; flex-wrap:wrap}
  .hbadge{display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--muted); font-weight:500}
  .hbadge svg{width:19px; height:19px; color:var(--go)}

  @media (max-width:860px){ .hero-in{grid-template-columns:1fr; gap:44px; padding:52px 24px 64px} .hero p.lead{max-width:46ch} }

  /* ---- phone ---- */
  .phone-stage{position:relative; display:flex; justify-content:center}
  .phone{position:relative; width:288px; height:590px; border-radius:44px; background:var(--surface);
    border:1px solid var(--border); box-shadow:var(--shadow-lift); padding:12px; z-index:2}
  .phone .screen{position:relative; width:100%; height:100%; border-radius:33px; overflow:hidden; background:var(--surface-2)}
  .phone .notch{position:absolute; top:12px; left:50%; transform:translateX(-50%); width:96px; height:22px; border-radius:999px; background:var(--ink); opacity:.9; z-index:5}
  .map{position:absolute; inset:0}
  .map svg{width:100%; height:100%; display:block}
  .car{fill:var(--ink)}
  .route-dash{stroke:var(--go); stroke-width:5; fill:none; stroke-linecap:round;
    stroke-dasharray:5 11; animation:flow 1.1s linear infinite}
  @keyframes flow{to{stroke-dashoffset:-16}}
  .carDot{offset-path:path('M 44 96 C 92 150, 60 250, 150 300 S 250 400, 236 470'); offset-rotate:auto;
    animation:drive 7.5s ease-in-out infinite}
  @keyframes drive{0%{offset-distance:0%}55%{offset-distance:100%}100%{offset-distance:100%}}
  .pin{animation:pop .5s ease .2s both}
  @keyframes pop{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
  .sheet{position:absolute; left:12px; right:12px; bottom:12px; background:var(--surface); border:1px solid var(--border);
    border-radius:22px; padding:15px 16px; box-shadow:0 -8px 24px -14px rgba(0,0,0,.25); z-index:6}
  .sheet-top{display:flex; align-items:center; gap:10px}
  .avatar{width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--go),var(--smile)); flex:0 0 auto}
  .sheet-top .nm{font-family:var(--dispfont); font-weight:700; font-size:15px}
  .sheet-top .sub{font-size:12px; color:var(--faint)}
  .eta{margin-left:auto; text-align:right}
  .eta .big{font-family:var(--dispfont); font-weight:800; font-size:18px; color:var(--go-deep); line-height:1}
  .eta .lbl{font-size:10.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.08em}
  .sheet-fare{display:flex; align-items:center; justify-content:space-between; margin-top:13px; padding-top:12px; border-top:1px dashed var(--border-strong)}
  .sheet-fare .f1{font-size:12.5px; color:var(--muted)}
  .sheet-fare .f2{font-family:var(--dispfont); font-weight:800; font-size:19px}
  .float{position:absolute; z-index:3; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);
    border-radius:14px; padding:10px 13px; display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600}
  .float svg{width:18px;height:18px}
  .float.f-a{top:40px; left:-6px; animation:bob 4.5s ease-in-out infinite}
  .float.f-b{bottom:96px; right:-10px; animation:bob 4.5s ease-in-out .8s infinite}
  @keyframes bob{50%{transform:translateY(-9px)}}
  @media (max-width:400px){ .phone{width:256px;height:524px} }

  /* ---- section frame ---- */
  section{padding:84px 0}
  .sec-head{max-width:640px; margin-bottom:46px}
  .sec-head h2{font-size:clamp(29px,4vw,42px); margin-top:14px}
  .sec-head p{margin-top:14px}

  /* how it works */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
  .step{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:30px 26px; position:relative; box-shadow:var(--shadow)}
  .step .n{font-family:var(--dispfont); font-weight:800; font-size:15px; color:var(--go-deep); letter-spacing:.02em}
  .step .ic{width:46px; height:46px; border-radius:13px; background:var(--go-soft); color:var(--go-deep);
    display:grid; place-items:center; margin:16px 0 18px}
  .step .ic svg{width:24px; height:24px}
  .step h3{font-size:20px; margin-bottom:8px}
  .step p{color:var(--muted); font-size:15.5px}
  @media (max-width:820px){ .steps{grid-template-columns:1fr} }

  /* passengers grid */
  .feat{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:26px 24px; transition:transform .16s, box-shadow .2s, border-color .2s}
  .card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--border-strong)}
  .card .ci{width:42px;height:42px;border-radius:11px;background:var(--surface-2);display:grid;place-items:center;margin-bottom:16px;color:var(--go-deep)}
  .card .ci svg{width:22px;height:22px}
  .card h3{font-size:18px; margin-bottom:7px}
  .card p{color:var(--muted); font-size:15px}
  .card.smile .ci{background:var(--smile-soft); color:var(--smile)}
  @media (max-width:820px){ .feat{grid-template-columns:1fr 1fr} }
  @media (max-width:560px){ .feat{grid-template-columns:1fr} }

  /* drivers band (dark, committed) */
  .band{background:#0E1512; color:#EAF1EC; border-radius:34px; margin:0 24px; overflow:hidden; position:relative}
  .band-in{max-width:var(--maxw); margin:0 auto; padding:70px 40px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
  .band::before{content:"";position:absolute; inset:0; background:radial-gradient(50% 60% at 88% 15%, rgba(42,208,127,.18), transparent 68%); pointer-events:none}
  .band .eyebrow{color:#5fe3a1}
  .band h2{font-size:clamp(28px,3.6vw,40px); color:#fff; margin-top:14px}
  .band p{color:#9db0a5; margin-top:16px; font-size:17px; max-width:44ch}
  .band-list{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:13px}
  .band-list li{display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:#d3ddd6}
  .band-list svg{width:20px;height:20px;color:#2AD07F;flex:0 0 auto;margin-top:1px}
  .band .btn-go{margin-top:30px}
  .band-visual{position:relative; z-index:1; display:grid; gap:14px}
  .stat{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:18px; padding:22px 24px}
  .stat .k{font-family:var(--dispfont); font-weight:800; font-size:34px; color:#fff; line-height:1; letter-spacing:-.02em}
  .stat .k .u{color:#2AD07F}
  .stat .d{color:#9db0a5; font-size:14px; margin-top:8px}
  .stat-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  @media (max-width:820px){ .band-in{grid-template-columns:1fr; padding:52px 26px} }

  /* download cta */
  .dl{margin-top:14px}
  .dl-box{background:linear-gradient(135deg, var(--go-soft), color-mix(in srgb,var(--smile-soft) 70%, var(--surface)));
    border:1px solid var(--border); border-radius:34px; padding:60px 40px; text-align:center; position:relative; overflow:hidden}
  .dl-box h2{font-size:clamp(28px,4vw,44px)}
  .dl-box p{color:var(--muted); margin:16px auto 0; max-width:46ch}
  .dl-box .cta-row{justify-content:center; margin-top:32px}
  [data-theme="dark"] .dl-box, :root:not([data-theme="light"]) .dl-box{}
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .dl-box{background:linear-gradient(135deg,#123024, #1c2822)} }
  :root[data-theme="dark"] .dl-box{background:linear-gradient(135deg,#123024,#1c2822)}

  /* footer */
  footer{border-top:1px solid var(--border); margin-top:96px; padding:56px 0 40px}
  .foot{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px}
  .foot h4{font-family:var(--dispfont); font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); margin:0 0 14px; font-weight:700}
  .foot ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
  .foot a{color:var(--muted); font-size:15px}
  .foot a:hover{color:var(--ink)}
  .foot .about p{color:var(--muted); font-size:14.5px; margin-top:14px; max-width:34ch}
  .foot-note{display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between;
    margin-top:44px; padding-top:22px; border-top:1px solid var(--border); color:var(--faint); font-size:13.5px}
  .todo{color:var(--smile); font-weight:600}
  @media (max-width:820px){ .foot{grid-template-columns:1fr 1fr} }
  @media (max-width:520px){ .foot{grid-template-columns:1fr} }

  /* reveal */
  .rv{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
  .rv.in{opacity:1; transform:none}

/* ===== premium enhancements ===== */
.phone{animation:phoneFloat 6s ease-in-out infinite}
@keyframes phoneFloat{50%{transform:translateY(-10px)}}
.phone-stage::after{content:"";position:absolute;width:340px;height:340px;left:50%;top:44%;transform:translate(-50%,-50%);background:radial-gradient(circle,color-mix(in srgb,var(--go) 28%,transparent),transparent 62%);filter:blur(32px);z-index:0;animation:glow 6s ease-in-out infinite;pointer-events:none}
@keyframes glow{50%{opacity:.7;transform:translate(-50%,-50%) scale(1.09)}}
.pulse-ring{transform-box:fill-box;transform-origin:center;animation:pulsering 2.6s ease-out infinite}
@keyframes pulsering{0%{transform:scale(.5);opacity:.7}100%{transform:scale(3);opacity:0}}
.stats{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stats-in{max-width:var(--maxw);margin:0 auto;padding:46px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat-item{text-align:center;position:relative}
.stat-item::after{content:"";position:absolute;right:-12px;top:14%;height:72%;width:1px;background:var(--border)}
.stat-item:last-child::after{display:none}
.stat-num{font-family:var(--dispfont);font-weight:800;font-size:clamp(36px,4.4vw,54px);color:var(--go-deep);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat-num .u{color:var(--ink);font-size:.52em}
.stat-lbl{color:var(--muted);font-size:14px;margin-top:10px;text-wrap:balance}
@media(max-width:760px){.stats-in{grid-template-columns:1fr 1fr;gap:30px 16px}.stat-item:nth-child(2)::after{display:none}}
.band-list.feat2 li{align-items:flex-start;gap:13px}
.band-list.feat2 .ic2{width:24px;height:24px;flex:0 0 auto;color:#2AD07F;margin-top:1px}
.band-list.feat2 b{display:block;color:#fff;font-family:var(--dispfont);font-weight:700;font-size:16px;margin-bottom:3px;letter-spacing:-.01em}
.band-list.feat2 span{color:#9db0a5;font-size:14px}
.dash{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:22px;padding:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.dash-top{display:flex;align-items:center;gap:9px;color:#eaf1ec;font-weight:700;font-size:14px}
.dash-dot{width:9px;height:9px;border-radius:50%;background:#2AD07F;animation:live 1.8s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(42,208,127,.5)}100%{box-shadow:0 0 0 10px rgba(42,208,127,0)}}
.dash-count{margin-left:auto;color:#9db0a5;font-weight:600;font-size:12.5px}
.dash-map{position:relative;height:132px;margin:13px 0;border-radius:14px;overflow:hidden;background:#0e1a14;border:1px solid rgba(255,255,255,.06)}
.dash-map svg{width:100%;height:100%;display:block}
.dcar{fill:#2AD07F}.dcar.b{fill:#8fe9bf}.dcar.c{fill:#f5c451}
.dblink{animation:blink 2.2s ease-in-out infinite}.dblink.d2{animation-delay:.7s}.dblink.d3{animation-delay:1.3s}
@keyframes blink{50%{opacity:.35}}
.dash-orders{display:grid;gap:8px}
.ord{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:9px 12px}
.ord-ic{width:26px;height:26px;flex:0 0 auto;border-radius:8px;background:rgba(42,208,127,.16);color:#2AD07F;display:grid;place-items:center;font-size:14px}
.ord b{display:block;color:#eaf1ec;font-size:13.5px;font-weight:700}
.ord small{color:#9db0a5;font-size:11.5px}
.ord-fare{margin-left:auto;color:#fff;font-family:var(--dispfont);font-weight:800;font-size:14.5px}
.pay-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:760px){.pay-row{grid-template-columns:1fr}}
/* mobile menu */
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--ink);align-items:center}
.burger svg{width:26px;height:26px}
.mnav{position:fixed;inset:0;z-index:200;visibility:hidden}
.mnav-bg{position:absolute;inset:0;background:rgba(10,20,14,.5);opacity:0;transition:opacity .3s}
.mnav-panel{position:absolute;top:0;right:0;height:100%;width:min(86vw,340px);background:var(--surface);box-shadow:-20px 0 60px -20px rgba(0,0,0,.4);transform:translateX(100%);transition:transform .34s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;padding:22px 22px 26px}
.mnav.open{visibility:visible}
.mnav.open .mnav-bg{opacity:1}
.mnav.open .mnav-panel{transform:none}
.mnav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.mnav-close{background:none;border:0;cursor:pointer;color:var(--muted);padding:6px}
.mnav-close svg{width:24px;height:24px}
.mnav a.ml{display:flex;align-items:center;justify-content:space-between;font-family:var(--dispfont);font-weight:700;font-size:21px;color:var(--ink);text-decoration:none;padding:13px 0;border-bottom:1px solid var(--border)}
.mnav a.ml:hover{color:var(--go-deep)}
.mnav-foot{margin-top:auto;display:grid;gap:14px;padding-top:20px}
.mnav-foot .btn-go{justify-content:center;padding:13px}
.mnav-lang{display:inline-flex;gap:2px;border:1px solid var(--border-strong);border-radius:999px;padding:4px;width:max-content}
.mnav-lang a{padding:6px 14px;border-radius:999px;font-weight:700;font-size:13px;color:var(--faint);text-decoration:none}
.mnav-lang a.on{background:var(--ink);color:var(--ink-invert)}
body.mnav-lock{overflow:hidden}
@media(max-width:860px){.burger{display:inline-flex}.nav-right .btn-go{display:none}}

/* ===== more motion ===== */
.droute{stroke-dasharray:5 7;animation:dflow 1.1s linear infinite}
@keyframes dflow{to{stroke-dashoffset:-24}}
.dmove{offset-path:path('M20 110 C90 96, 120 40, 210 30 S300 20, 312 14');offset-rotate:auto;animation:dmove 6.5s cubic-bezier(.45,0,.55,1) infinite}
.dmove .dcar{fill:#eafaf1}
@keyframes dmove{0%{offset-distance:0%}72%{offset-distance:100%}100%{offset-distance:100%}}
.dping{transform-box:fill-box;transform-origin:center;animation:dping 3s ease-out infinite}
@keyframes dping{0%{transform:scale(.4);opacity:.5}80%,100%{transform:scale(2.6);opacity:0}}
.dots{display:inline-flex;gap:1px;margin-left:1px}
.dots i{font-style:normal;opacity:.2;animation:dotp 1.4s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dotp{0%,60%,100%{opacity:.2}30%{opacity:1}}
.ord.live{position:relative;overflow:hidden}
.ord.live::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(42,208,127,.10) 50%,transparent 70%);transform:translateX(-100%);animation:sweep 3.6s ease-in-out infinite;pointer-events:none}
@keyframes sweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(115%)}}
.ord.live .ord-ic{animation:pingdot 1.9s ease-out infinite}
@keyframes pingdot{0%{box-shadow:0 0 0 0 rgba(42,208,127,.45)}100%{box-shadow:0 0 0 9px rgba(42,208,127,0)}}
/* staggered card reveals */
.steps .step.rv:nth-child(2),.pay-row .card.rv:nth-child(2),.feat .card.rv:nth-child(3n+2){transition-delay:.09s}
.steps .step.rv:nth-child(3),.pay-row .card.rv:nth-child(3),.feat .card.rv:nth-child(3n+3){transition-delay:.18s}
/* icon pop on reveal */
.card .ci,.step .ic{transition:transform .55s cubic-bezier(.2,.85,.25,1),opacity .4s}
.card.rv:not(.in) .ci,.step.rv:not(.in) .ic{transform:scale(.45);opacity:0}

/* ===== SEO landing pages: breadcrumbs, hero, faq, route infographic ===== */
.crumbs{max-width:var(--maxw);margin:0 auto;padding:18px 24px 0;font-size:13px;color:var(--faint)}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 6px;opacity:.6}
.phero{position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(58% 60% at 88% 0%,color-mix(in srgb,var(--go) 20%,transparent),transparent 68%),radial-gradient(46% 40% at 4% 90%,color-mix(in srgb,var(--smile) 14%,transparent),transparent 70%);pointer-events:none}
.phero-in{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:44px 24px 56px;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.phero h1{font-size:clamp(32px,5vw,52px);font-weight:800;line-height:1.05;letter-spacing:-.02em}
.phero p.lead{margin-top:18px;max-width:40ch}
.phero .cta-row{margin-top:28px}
@media(max-width:860px){.phero-in{grid-template-columns:1fr;gap:34px;padding:32px 24px 44px}}

/* route infographic */
.route-info{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow)}
.route-line{display:flex;align-items:center;gap:0;margin-bottom:20px}
.route-node{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto;width:96px;text-align:center}
.route-node .rdot{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--go-soft);color:var(--go-deep)}
.route-node .rdot svg{width:22px;height:22px}
.route-node small{font-size:12.5px;color:var(--muted);font-weight:600}
.route-mid{flex:1;height:3px;background:repeating-linear-gradient(90deg,var(--go) 0 8px,transparent 8px 16px);border-radius:2px;position:relative;margin-top:-18px}
.route-mid b{position:absolute;top:-30px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--dispfont);font-weight:800;color:var(--ink);font-size:15px}
.route-facts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;border-top:1px solid var(--border);padding-top:18px}
.rf .k{font-family:var(--dispfont);font-weight:800;font-size:22px;color:var(--go-deep);line-height:1}
.rf .d{font-size:12.5px;color:var(--muted);margin-top:4px}
@media(max-width:520px){.route-facts{grid-template-columns:1fr}}

/* FAQ accordion */
.faq{display:grid;gap:12px;max-width:820px}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:border-color .2s}
.faq details[open]{border-color:var(--border-strong)}
.faq summary{list-style:none;cursor:pointer;padding:18px 20px;font-family:var(--dispfont);font-weight:700;font-size:17px;color:var(--ink);display:flex;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;width:11px;height:11px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);transition:transform .25s;flex:0 0 auto}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .fa{padding:0 20px 18px;color:var(--muted);font-size:15.5px;line-height:1.6}
.faq .fa a{color:var(--go-deep)}

/* guides links in footer */
.foot .guides a{color:var(--muted)}

/* phero visual polish */
.phero-visual .steps{grid-template-columns:1fr;gap:12px}
.phero-visual .step{padding:16px 18px}
.phero-visual .step p{font-size:14.5px}
.foot .guides h4,.foot .guides ul{}

/* ===== page motion ===== */
.stats{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stats-in{max-width:var(--maxw);margin:0 auto;padding:40px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat-item{text-align:center;position:relative}
.stat-item::after{content:"";position:absolute;right:-12px;top:14%;height:72%;width:1px;background:var(--border)}
.stat-item:last-child::after{display:none}
.stat-num{font-family:var(--dispfont);font-weight:800;font-size:clamp(30px,4vw,46px);color:var(--go-deep);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat-num .u{color:var(--ink);font-size:.55em}
.stat-lbl{color:var(--muted);font-size:13.5px;margin-top:9px;text-wrap:balance}
@media(max-width:760px){.stats-in{grid-template-columns:1fr 1fr;gap:26px 16px}.stat-item:nth-child(2)::after{display:none}}
.card .ci,.step .ic{transition:transform .55s cubic-bezier(.2,.85,.25,1),opacity .4s}
.card.rv:not(.in) .ci,.step.rv:not(.in) .ic{transform:scale(.45);opacity:0}
.steps .step.rv:nth-child(2),.pay-row .card.rv:nth-child(2),.feat .card.rv:nth-child(3n+2){transition-delay:.09s}
.steps .step.rv:nth-child(3),.pay-row .card.rv:nth-child(3),.feat .card.rv:nth-child(3n+3){transition-delay:.18s}
.route-mid{position:relative;overflow:visible;background-size:16px 3px;animation:rflow .9s linear infinite}
@keyframes rflow{to{background-position:16px 0}}
.route-mid .rcar{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:22px;height:11px;background:var(--ink);border-radius:4px;animation:rdrive 4.5s cubic-bezier(.45,0,.55,1) infinite;z-index:2}
.route-mid .rcar::before{content:"";position:absolute;left:5px;top:-4px;width:11px;height:6px;background:var(--ink);border-radius:3px}
.route-mid .rcar i{position:absolute;bottom:-2px;width:4px;height:4px;border-radius:50%;background:var(--go)}
.route-mid .rcar i:first-child{left:3px}.route-mid .rcar i:last-child{right:3px}
@keyframes rdrive{0%{left:0}70%{left:100%}100%{left:100%}}

/* ===== premium nav dropdowns + full footer ===== */
.nav-links{gap:4px}
.navbtn{background:none;border:0;cursor:pointer;font-family:inherit;color:var(--muted);font-weight:500;font-size:15px;padding:8px 12px;border-radius:10px;display:inline-flex;align-items:center;gap:5px;transition:color .15s,background .15s}
.navbtn:hover,.has-drop:hover .navbtn,.has-drop:focus-within .navbtn,.has-drop.open .navbtn{color:var(--ink);background:var(--surface-2)}
.navbtn .chev{width:14px;height:14px;transition:transform .2s}
.has-drop:hover .navbtn .chev,.has-drop:focus-within .navbtn .chev,.has-drop.open .navbtn .chev{transform:rotate(180deg)}
.nav-links a.navlink{color:var(--muted);font-weight:500;font-size:15px;padding:8px 12px;border-radius:10px;text-decoration:none;transition:color .15s,background .15s}
.nav-links a.navlink:hover{color:var(--ink);background:var(--surface-2)}
.has-drop{position:relative}
.has-drop .drop{position:absolute;top:calc(100% + 6px);left:0;min-width:312px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lift);padding:10px;display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:70}
.has-drop:hover .drop,.has-drop:focus-within .drop,.has-drop.open .drop{opacity:1;visibility:visible;transform:none}
.has-drop .drop a{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:11px;text-decoration:none;color:var(--ink);font-size:14px}
.has-drop .drop a:hover{background:var(--surface-2)}
.drop .di{width:34px;height:34px;border-radius:9px;background:var(--go-soft);color:var(--go-deep);display:grid;place-items:center;flex:0 0 auto}
.drop .di svg{width:18px;height:18px}
.drop b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.2}
.drop small{color:var(--muted);font-size:12.5px}
.foot.foot5{grid-template-columns:1.5fr 1fr 1fr 1fr 1.15fr}
@media(max-width:900px){.foot.foot5{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot.foot5{grid-template-columns:1fr}}
.mnav-panel{overflow-y:auto}
.mnav .mnav-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);margin:16px 0 2px}
.mnav a.ml{font-size:18px;padding:11px 0}
@media(max-width:860px){.nav-links{display:none}}

/* ===== blog / article ===== */
.article{font-size:16.5px;line-height:1.7;color:var(--ink)}
.article h2{font-size:26px;margin:34px 0 12px}
.article h3{font-size:20px;margin:26px 0 10px}
.article p{margin:0 0 16px;color:var(--muted)}
.article p strong,.article li strong{color:var(--ink)}
.article ul{margin:0 0 18px;padding-left:22px;color:var(--muted)}
.article li{margin:0 0 8px}
.article a{color:var(--go-deep);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--go) 40%,transparent)}
.article a:hover{border-bottom-color:var(--go)}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.bgrid{grid-template-columns:1fr}}
.bcard{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;text-decoration:none;color:var(--ink);transition:transform .16s,box-shadow .2s,border-color .2s}
.bcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--border-strong)}
.bcard .beye{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--go-deep)}
.bcard h3{font-size:20px;margin:12px 0 8px}
.bcard p{color:var(--muted);font-size:14.5px;margin:0 0 16px}
.bcard .bmore{font-weight:700;color:var(--go-deep);font-size:14px}

/* ===== article infographics ===== */
.fixfare{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow);max-width:440px;margin:24px 0}
.ff-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:14px;font-weight:600}
.ff-badge{background:var(--go-soft);color:var(--go-deep);font-weight:700;font-size:12px;padding:3px 10px;border-radius:999px}
.ff-price{font-family:var(--dispfont);font-weight:800;font-size:46px;color:var(--ink);letter-spacing:-.03em;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.ff-price small{font-size:.4em;color:var(--muted);font-weight:600}
.ff-sub{color:var(--muted);font-size:13.5px;margin-bottom:18px}
.ff-row{display:flex;align-items:center;gap:12px;margin:10px 0;font-size:13px;color:var(--muted)}
.ff-row>span:first-child{width:120px;flex:0 0 auto}
.ff-bar{flex:1;height:7px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.ff-fill{display:block;height:100%;background:var(--go);border-radius:4px;width:40%}
.ff-fill.traffic{animation:fft 4s ease-in-out infinite}
.ff-fill.time{animation:fft2 5s ease-in-out infinite}
@keyframes fft{0%,100%{width:28%}50%{width:86%}}
@keyframes fft2{0%,100%{width:46%}50%{width:72%}}
.ff-row.surge{border-top:1px dashed var(--border-strong);padding-top:13px;margin-top:14px;justify-content:space-between}
.ff-off{background:var(--surface-2);color:var(--faint);font-weight:800;font-size:11px;padding:3px 10px;border-radius:6px;letter-spacing:.06em}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}
@media(max-width:680px){.modes{grid-template-columns:1fr}}
.mode{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px;transition:transform .16s,box-shadow .2s,border-color .2s}
.mode:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.mode.hot{border-color:color-mix(in srgb,var(--go) 45%,var(--border))}
.mode .mi{width:44px;height:44px;border-radius:12px;background:var(--surface-2);color:var(--go-deep);display:grid;place-items:center;margin-bottom:14px}
.mode.hot .mi{background:var(--go-soft)}
.mode .mi svg{width:24px;height:24px}
.mode b{display:block;font-family:var(--dispfont);font-size:17px}
.mode small{color:var(--muted);font-size:13.5px;display:block;margin-top:4px}
.mode.hot .mi{animation:mpulse 2.2s ease-out infinite}
@keyframes mpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--go) 45%,transparent)}100%{box-shadow:0 0 0 10px transparent}}