/* RideUz landing - "the page is the road".
   A night map of Uzbekistan with the real highways, then one real trip (Toshkent -> Samarqand)
   told stop by stop as you scroll. Design language taken from Uzbek roads: blue direction
   signs, kilometre posts, the number plate, the white town-entry sign. */

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin.woff2") format("woff2");
    font-weight: 400 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-cyrillic.woff2") format("woff2");
    font-weight: 400 800;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Overpass";
    src: url("../fonts/overpass-latin.woff2") format("woff2");
    font-weight: 600 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Overpass";
    src: url("../fonts/overpass-cyrillic.woff2") format("woff2");
    font-weight: 600 900;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
    --night: #061220;
    --navy: #0a1f33;
    --navy-2: #12304d;
    --sign: #0b5fb0;          /* road direction sign blue */
    --brand: #0071e3;
    --sky: #5ab0ff;
    --head: #ffd36b;          /* headlights */
    --tail: #ff5a4f;          /* tail lights */
    --ink: #0e1726;
    --muted: #4a5565;
    --paper: #f4f6f9;
    --line: #d5dbe3;
    --ok: #22c55e;
    --sos: #dc2626;
    --display: "Overpass", "Inter", system-ui, sans-serif;
    --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --wrap: 1200px;
    --gutter: clamp(16px, 4vw, 32px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--ink); font: 16px/1.6 var(--body); }
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--brand); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }

/* ---------- top bar ---------- */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background-color .3s, box-shadow .3s; }
.topbar.scrolled { background: rgba(6, 18, 32, .82); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.topbar .wrap { display: flex; align-items: center; gap: 24px; height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 800 20px/1 var(--display); letter-spacing: -0.02em; }
.logo i { width: 34px; height: 34px; border-radius: 10px; background: #fff; display: grid; place-items: center; }
.logo b { color: var(--sky); font-weight: 800; }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { color: rgba(255,255,255,.82); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:hover { color: #fff; }
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); color: #fff; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.lang summary::-webkit-details-marker { display: none; }
.lang ul { position: absolute; right: 0; top: 46px; margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.45); min-width: 150px; }
.lang li a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; }
.lang li a:hover, .lang li a[aria-current] { background: var(--paper); }
@media (max-width: 860px) { .nav { display: none; } .lang { margin-left: auto; } }

/* ---------- hero: the living map ---------- */
.hero { position: relative; overflow: hidden; color: #fff; background:
    radial-gradient(1200px 700px at 72% 55%, rgba(11, 95, 176, .28), transparent 65%), var(--night);
    padding: 108px 0 40px; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto; gap: 28px 0; align-items: start; }
.hero-map { grid-column: 2; grid-row: 1; margin: 10px -4% 0 -30%; position: relative; z-index: 1; }
.hero-copy { grid-column: 1; grid-row: 1; padding-top: 28px; }
.hero-copy { position: relative; z-index: 3; max-width: 560px; display: flex; flex-direction: column; gap: 22px; pointer-events: none; }
.hero-copy > * { pointer-events: auto; }
.pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #a9d4ff; background: rgba(90,176,255,.12); border: 1px solid rgba(90,176,255,.3); }
.pill i { width: 8px; height: 8px; border-radius: 999px; background: var(--sky); animation: blink 1.6s ease-in-out infinite; }
.hero h1 { font-size: clamp(38px, 5.4vw, 66px); line-height: 1.02; font-weight: 900; }
.hero h1 em { font-style: normal; color: var(--sky); }
.lede { margin: 0; font-size: clamp(15.5px, 1.7vw, 20px); line-height: 1.55; color: rgba(255,255,255,.82); }
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store { display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 20px; border-radius: 14px; text-decoration: none; transition: transform .2s; }
.store:hover { transform: translateY(-2px); }
.store span { display: flex; flex-direction: column; line-height: 1.15; }
.store small { font-size: 12px; opacity: .75; }
.store strong { font-size: 18px; }
.store.light { background: #fff; color: var(--ink); }
.store.dark { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.24); color: #fff; }
.follow { margin: 0; font-size: 15px; color: rgba(255,255,255,.75); }
.follow a { color: #a9d4ff; font-weight: 600; }

/* the map stage: svg (land + roads), canvas (traffic), html buttons (cities) */
.stage { position: relative; width: 100%; aspect-ratio: 1000 / 653; }
.stage svg, .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.region { vector-effect: non-scaling-stroke; fill: #0c2238; stroke: #1d4268; stroke-width: .8; transition: fill .4s; }
.region.lit { fill: #123456; }
.road-minor { vector-effect: non-scaling-stroke; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.road-minor.l1 { stroke: #2d6fae; stroke-width: 1.2; opacity: .8; }
.road-minor.l2 { stroke: #275f94; stroke-width: .9; opacity: .75; }
.road-minor.l3 { stroke: #1f5080; stroke-width: .7; opacity: .7; }
.road-base { vector-effect: non-scaling-stroke; fill: none; stroke: #1f5d96; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.road-glow { vector-effect: non-scaling-stroke; fill: none; stroke: #2f86d6; stroke-width: 7; stroke-linecap: round; opacity: .18; filter: blur(3px); }
.route { vector-effect: non-scaling-stroke; fill: none; stroke: #8fcbff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 9 7; animation: flow .9s linear infinite; filter: drop-shadow(0 0 6px rgba(90,176,255,.9)); }
.city { position: absolute; transform: translate(-9px, -50%); display: flex; align-items: center; gap: 6px; padding: 4px; border: 0; background: none; color: #dbeafe; font: 600 13px/1 var(--body); cursor: pointer; white-space: nowrap; }
.city::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 4px rgba(90,176,255,.22); transition: transform .2s, background-color .2s; flex: none; }
.city.capital { transform: translate(-11px, -50%); }
.city:disabled { color: #dbeafe; opacity: 1; }
.city.capital::before { width: 14px; height: 14px; background: var(--sky); animation: pulse 2s ease-out infinite; }
.city:hover::before, .city.on::before { transform: scale(1.35); background: var(--head); }
.city.on { color: #fff; }
.city span { padding: 2px 6px; border-radius: 6px; transition: background-color .2s; }
.city.on span { background: rgba(255, 211, 107, .18); }
@media (max-width: 700px) { .city:not(.on):not(.capital) span { display: none; } .city { padding: 8px; font-size: 12px; transform: translate(-8px, -50%); } .city::before { width: 8px; height: 8px; } .city.capital { transform: translate(-10px, -50%); } }

.planner { position: absolute; top: 3%; right: 0; width: min(400px, 44%); z-index: 4; display: flex; flex-direction: column; gap: 10px; }
.ticket { min-height: 132px; border-radius: 20px; background: rgba(10, 31, 51, .78); border: 1px solid rgba(90,176,255,.25); backdrop-filter: blur(10px); padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.ticket .hint { font-size: 13px; color: #a9d4ff; font-weight: 600; letter-spacing: .02em; }
.ticket .fromto { font: 800 clamp(22px, 2.6vw, 30px)/1.1 var(--display); color: #fff; }
.ticket .meta { font-size: 16px; color: rgba(255,255,255,.85); }
.ticket .meta b { color: var(--head); font-weight: 700; }
.ticket .via { font-size: 13px; color: rgba(255,255,255,.6); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 6px; font-size: 13px; color: rgba(255,255,255,.7); }
.legend span { display: flex; align-items: center; gap: 10px; }
.legend i { width: 10px; height: 10px; border-radius: 999px; flex: none; }

/* ---------- section basics ---------- */
section { position: relative; }
.light { background: #fff; }
.paper { background: var(--paper); }
.section-head { display: flex; flex-direction: column; gap: 12px; max-width: 720px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.05; font-weight: 900; }
.section-head p { margin: 0; font-size: 18px; color: var(--muted); }
.dark .section-head p { color: rgba(255,255,255,.75); }
.pad { padding: clamp(72px, 10vw, 120px) 0; }

/* road sign + km post */
.sign { display: inline-flex; align-items: center; gap: 14px; background: var(--sign); color: #fff; border-radius: 10px; padding: 9px 16px; box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 5px #fff, 0 10px 24px -12px rgba(11,95,176,.8); font: 800 20px/1 var(--display); letter-spacing: .01em; }
.sign small { font: 800 15px/1 var(--display); opacity: .92; }
.sign svg { width: 18px; height: 18px; }
.kmpost { display: inline-flex; flex-direction: column; align-items: center; width: 54px; border-radius: 6px 6px 3px 3px; background: #fff; border: 2px solid #111; font: 900 18px/1 var(--display); color: #111; padding: 6px 0 5px; }
.kmpost small { font-size: 10px; font-weight: 800; letter-spacing: .06em; margin-top: 2px; }

/* ---------- the journey ---------- */
.journey { background: linear-gradient(#0d2338, #19406a 18%, #cfe3f5 52%, #f4f6f9 70%); color: var(--ink); }
.journey .section-head { color: #fff; }
.journey .section-head p { color: rgba(255,255,255,.8); }
.journey-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.trip-map { position: sticky; top: 92px; border-radius: 28px; overflow: hidden; background: #0a1f33; box-shadow: 0 30px 60px -30px rgba(6,18,32,.7); }
.trip-map .stage { aspect-ratio: auto; height: min(72vh, 620px); }
.trip-map .region { fill: #0e2a45; }
.dash { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; display: flex; flex-wrap: wrap; gap: 10px; }
.gauge { flex: 1 1 120px; border-radius: 16px; background: rgba(6,18,32,.82); border: 1px solid rgba(255,255,255,.12); padding: 10px 14px; color: #fff; }
.gauge small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #a9d4ff; }
.gauge b { font: 900 30px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.gauge b span { font-size: 15px; font-weight: 800; color: rgba(255,255,255,.7); margin-left: 4px; }
.car { position: absolute; z-index: 2; width: 0; height: 0; }
.car::before { content: ""; position: absolute; left: -16px; top: -38px; width: 32px; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,211,107,.55), rgba(255,211,107,0)); }  /* headlights ahead of the car */
.car img { position: absolute; left: -11px; top: -22px; width: 22px; max-width: none; height: auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)); }
@media (max-width: 640px) { .car img { left: -9px; top: -18px; width: 18px; } .car::before { top: -32px; } }
.stops { display: flex; flex-direction: column; gap: clamp(80px, 22vh, 220px); padding: 10vh 0 18vh; }
.stop { border-radius: 26px; background: #fff; padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 24px 48px -30px rgba(6,18,32,.45); border: 1px solid rgba(14,23,38,.06); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; transform: translateY(24px) scale(.98); }
.stop.active { transform: none; box-shadow: 0 30px 60px -28px rgba(11,95,176,.55); }
.stop-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stop-time { font: 800 15px/1 var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.stop h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; font-weight: 900; }
.stop p { margin: 0; font-size: 17px; color: var(--muted); }
.demo { border-radius: 18px; background: var(--paper); padding: 16px; }

/* driver card with the Uzbek plate */
.driver { display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; background: #e6f1fc; color: #0060c0; flex: none; }
.driver .who { flex: 1; min-width: 0; }
.driver .who b { display: block; font-size: 16px; }
.driver .who span { font-size: 13px; color: var(--muted); }
.price { text-align: right; font: 900 22px/1 var(--display); color: #0062c4; }
.price small { display: block; font: 600 11px/1.3 var(--body); color: var(--muted); }
.plate { display: inline-flex; align-items: stretch; height: 34px; border: 2px solid #111; border-radius: 6px; background: #fff; font: 900 19px/1 var(--display); color: #111; overflow: hidden; margin-top: 12px; }
.plate .reg { display: grid; place-items: center; padding: 0 8px; border-right: 2px solid #111; }
.plate .num { display: grid; place-items: center; padding: 0 10px; letter-spacing: .06em; }
.plate .uz { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 6px; border-left: 2px solid #111; font-size: 9px; }
.plate .flag { width: 16px; height: 10px; background: linear-gradient(#1eb4e6 0 31%, #ce1126 31% 35%, #fff 35% 65%, #ce1126 65% 69%, #1eb53a 69%); }
/* parcel tag (Guliston stop): the stub holds the recipient's 6-digit code; when the stop is
   active the parcel moves on, the driver enters the digits, and the tag is stamped delivered */
.stop { container-type: inline-size; }
.parcel { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-radius: 18px; background: var(--paper); }
.parcel-main { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.parcel-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #a26412; }
.parcel-head b { font: 800 16px/1 var(--display); color: var(--ink); }
.parcel-head span { font-size: 13px; color: var(--muted); }
.parcel-route { display: flex; align-items: center; gap: 10px; font: 800 15px/1 var(--display); }
.parcel-route i { position: relative; flex: 1; min-width: 28px; height: 2px; background: repeating-linear-gradient(90deg, var(--brand) 0 6px, transparent 6px 11px); }
.parcel-route i::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-right: 0; border-left: 7px solid var(--brand); }
.parcel-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.parcel-steps li { position: relative; padding-top: 11px; }
.parcel-steps li::before, .parcel-steps li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 4px; background: var(--line); }
.parcel-steps li::after { background: var(--brand); transform: scaleX(0); transform-origin: left; }
.parcel-steps li:first-child::after { transform: none; }
.parcel-steps li:last-child::after { background: var(--ok); }
.parcel-code { position: relative; padding: 16px 18px; border-left: 2px dashed #e4cf9f; border-radius: 0 18px 18px 0; background: #fff6e2; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.parcel-code::before, .parcel-code::after { content: ""; position: absolute; left: -9px; width: 16px; height: 16px; border-radius: 999px; background: #fff; }
.parcel-code::before { top: -8px; } .parcel-code::after { bottom: -8px; }
.parcel-code small { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #a26412; }
.digits { display: flex; gap: 4px; }
.digits span { width: 26px; height: 36px; border-radius: 8px; background: #fff; display: grid; place-items: center; font: 900 20px/1 var(--display); color: var(--ink); box-shadow: inset 0 0 0 1.5px #ecd9b0; }
.digits span:nth-child(3) { margin-right: 6px; }
.ok { font-size: 13px; font-weight: 800; color: #15803d; background: #e2f5e9; border-radius: 999px; padding: 4px 10px; opacity: 0; transform: scale(.8); }
.stop.active .parcel-steps li:nth-child(2)::after { animation: fill .6s .3s forwards; }
.stop.active .parcel-steps li:nth-child(3)::after { animation: fill .5s 2s forwards; }
.stop.active .digits span { animation: key .3s forwards; }
.stop.active .digits span:nth-child(1) { animation-delay: 1s; } .stop.active .digits span:nth-child(2) { animation-delay: 1.12s; } .stop.active .digits span:nth-child(3) { animation-delay: 1.24s; }
.stop.active .digits span:nth-child(4) { animation-delay: 1.36s; } .stop.active .digits span:nth-child(5) { animation-delay: 1.48s; } .stop.active .digits span:nth-child(6) { animation-delay: 1.6s; }
.stop.active .ok { animation: pop .35s 2.3s forwards; }
@container (max-width: 470px) {
    .parcel { grid-template-columns: minmax(0, 1fr); }
    .parcel-code { border-left: 0; border-top: 2px dashed #e4cf9f; border-radius: 0 0 18px 18px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    .parcel-code small { flex-basis: 100%; }
    .parcel-code::before { left: -8px; top: -9px; } .parcel-code::after { left: auto; right: -8px; top: -9px; bottom: auto; }
}
.sos { position: relative; width: 84px; height: 84px; display: grid; place-items: center; flex: none; }
.sos::before, .sos::after { content: ""; position: absolute; inset: 10px; border-radius: 999px; background: var(--sos); animation: wave 1.8s ease-out infinite; }
.sos::after { animation-delay: .9s; }
.sos b { position: relative; width: 64px; height: 64px; border-radius: 999px; background: var(--sos); color: #fff; display: grid; place-items: center; font: 900 18px/1 var(--display); letter-spacing: .05em; box-shadow: 0 10px 24px -6px rgba(220,38,38,.7); }
.share { display: flex; align-items: center; gap: 16px; }
.share p { font-size: 15px; }
.town { display: inline-flex; flex-direction: column; align-items: center; padding: 12px 26px; background: #fff; border: 3px solid #111; border-radius: 6px; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #111; font: 900 26px/1 var(--display); letter-spacing: .06em; color: #111; text-transform: uppercase; }
/* rating (Samarqand stop): both sides rate, as in the app */
.rate { border-radius: 18px; background: var(--paper); padding: 4px 16px; }
.rate-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.rate-row + .rate-row { border-top: 1px solid var(--line); }
.rate-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rate-who b { font-size: 15px; }
.rate-who span { font-size: 13px; color: var(--muted); }
.avatar.you { background: #fff1d6; color: #a26412; font-size: 13px; }
.stars { display: flex; gap: 2px; font-size: 22px; line-height: 1; color: #d3dae3; flex: none; }
.stop.active .stars span { animation: star-on .35s forwards; }
.stop.active .stars span:nth-child(1) { animation-delay: .4s; } .stop.active .stars span:nth-child(2) { animation-delay: .52s; } .stop.active .stars span:nth-child(3) { animation-delay: .64s; } .stop.active .stars span:nth-child(4) { animation-delay: .76s; } .stop.active .stars span:nth-child(5) { animation-delay: .88s; }
.stop.active .back .stars span:nth-child(1) { animation-delay: 1.5s; } .stop.active .back .stars span:nth-child(2) { animation-delay: 1.62s; } .stop.active .back .stars span:nth-child(3) { animation-delay: 1.74s; } .stop.active .back .stars span:nth-child(4) { animation-delay: 1.86s; } .stop.active .back .stars span:nth-child(5) { animation-delay: 1.98s; }
.note { font-size: 13px; color: var(--muted); }

/* ---------- trust ---------- */
.dark { background: var(--navy); color: #fff; }
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.trust { border-radius: 22px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; transition: transform .25s, background-color .25s; }
.trust:hover { transform: translateY(-6px); background: rgba(255,255,255,.08); }
.trust .tag { align-self: flex-start; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 10px; color: var(--navy); }
.trust h3 { font-size: clamp(16px, 1.3vw, 19px); font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
.trust p { margin: 0; font-size: 15px; color: rgba(255,255,255,.75); }
@media (max-width: 980px) { .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .trust-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- routes board (departure board look) ---------- */
.board-from { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 18px 22px; background: #0b1726; border-bottom: 1px solid rgba(255,255,255,.08); }
.board-from-label { font: 800 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #8fb7dc; margin-right: 6px; }
.from-chip { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: transparent; color: #dbeafe; font: 600 14px/1 var(--body); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.from-chip:hover { border-color: var(--sky); color: #fff; }
.from-chip[aria-pressed="true"] { background: var(--head); border-color: var(--head); color: #2b2000; }
.board-rows { min-height: 200px; }
.board { border-radius: 24px; background: #0b1726; color: #fff; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(6,18,32,.7); }
.board-head, .board-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.3fr) 44px; gap: 12px; align-items: center; padding: 14px 22px; }
.board-head { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8fb7dc; background: #0f2236; }
.board-row { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; border-top: 1px solid rgba(255,255,255,.06); font: 700 18px/1.2 var(--display); text-decoration: none; color: #fff; transition: background-color .2s; }
.board-row:hover { background: rgba(90,176,255,.08); }
.board-row .km, .board-row .t { font-variant-numeric: tabular-nums; color: var(--head); }
.board-row .go { justify-self: end; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; font-size: 16px; transition: transform .2s; }
.board-row:hover .go { transform: translateX(4px); background: var(--brand); }
.board-foot { padding: 14px 22px; font-size: 13px; color: #8fb7dc; border-top: 1px solid rgba(255,255,255,.06); }
@media (max-width: 640px) { .board-head { display: none; } .board-row { grid-template-columns: minmax(0, 1fr) auto; font-size: 16px; } .board-row .t { grid-column: 2; } .board-row .km { grid-row: 2; grid-column: 1; font-size: 14px; } .board-row .go { display: none; } }

/* ---------- drivers ---------- */
.drivers { background: var(--sign); color: #fff; overflow: hidden; }
.drivers-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.drivers .section-head p { color: rgba(255,255,255,.9); }
.drive { position: relative; width: min(100%, 340px); margin: 0 auto; }
.drive::before, .drive::after { content: ""; position: absolute; top: -40px; bottom: 30px; width: 5px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.5) 0 34px, transparent 34px 70px); background-size: 5px 70px; animation: lane-v .7s linear infinite; }
.drive::before { left: -6%; } .drive::after { right: -6%; }
.cobalt { position: relative; width: 100%; aspect-ratio: 563 / 1143; isolation: isolate; filter: drop-shadow(0 34px 34px rgba(0, 20, 50, .45)); animation: idle 3.2s ease-in-out infinite; }
/* the app's seat map (rideuz-app CarSeatMap): the sedan photo with each seat tinted on top of it;
   "color" keeps the seat's own shading, the dark trunk floor needs "screen" to light up */
.cobalt img, .cobalt .tint { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.cobalt .tint { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: #ffc21a; mix-blend-mode: color; opacity: 0; animation: seatlit 7s ease-in-out infinite; }
.cobalt .s1 { -webkit-mask-image: url(/assets/road/car-seat-front.webp); mask-image: url(/assets/road/car-seat-front.webp); animation-delay: .3s; }
.cobalt .s2 { -webkit-mask-image: url(/assets/road/car-seat-rear-left.webp); mask-image: url(/assets/road/car-seat-rear-left.webp); animation-delay: 1.1s; }
.cobalt .s3 { -webkit-mask-image: url(/assets/road/car-seat-rear-middle.webp); mask-image: url(/assets/road/car-seat-rear-middle.webp); animation-delay: 1.9s; }
.cobalt .s4 { -webkit-mask-image: url(/assets/road/car-seat-rear-right.webp); mask-image: url(/assets/road/car-seat-rear-right.webp); animation-delay: 2.7s; }
.cobalt .trunk { -webkit-mask-image: url(/assets/road/car-trunk.webp); mask-image: url(/assets/road/car-trunk.webp); background: #e8a93a; mix-blend-mode: screen; animation-name: trunklit; }
.cobalt::before, .cobalt::after { content: ""; position: absolute; bottom: 96%; width: 34%; height: 19%; background: linear-gradient(to top, rgba(255,233,166,.75), rgba(255,233,166,0)); clip-path: polygon(30% 100%, 0 0, 100% 0, 70% 100%); animation: beam 3.2s ease-in-out infinite; }
.cobalt::before { left: 2%; } .cobalt::after { right: 2%; }
.drive figcaption { margin-top: 18px; text-align: center; font-size: 14px; color: rgba(255,255,255,.85); }
.drive figcaption b { font-family: var(--display); font-weight: 800; color: #fff; }
@keyframes lane-v { to { background-position: 0 70px; } }
@keyframes idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes seatlit { 0%, 10% { opacity: 0; } 18%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes beam { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes trunklit { 0%, 40% { opacity: 0; } 48%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
.points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.points li { display: flex; gap: 14px; align-items: flex-start; background: rgba(255,255,255,.1); border-radius: 18px; padding: 16px 18px; }
.points i { width: 26px; height: 26px; border-radius: 999px; background: #fff; color: var(--sign); display: grid; place-items: center; font-style: normal; font-weight: 900; flex: none; }
.points b { display: block; font-size: 17px; }
.points span { font-size: 15px; color: rgba(255,255,255,.88); }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 24px; border-radius: 14px; font-weight: 700; font-size: 16px; text-decoration: none; transition: transform .2s; }
.btn:hover { transform: translateY(-2px); }
.btn.white { background: #fff; color: var(--sign); }
.btn.ghost { gap: 8px; color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.btn.ghost:hover { border-color: #fff; }
.driver-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
@media (max-width: 900px) { .drivers-grid, .journey-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- faq ---------- */
.faq-sec { background: var(--paper); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.faq-side { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 16px; }
.info-sign { width: 64px; height: 64px; border-radius: 10px; background: var(--sign); color: #fff; display: grid; place-items: center; font: 900 38px/1 var(--display); box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 5px #fff, 0 12px 24px -10px rgba(11,95,176,.7); }
.faq-side h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.05; font-weight: 900; }
.faq-side > p { margin: 0; font-size: 18px; color: var(--muted); }
.ask { margin-top: 8px; border-radius: 22px; background: #fff; padding: 22px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 18px 40px -30px rgba(6,18,32,.5); }
.ask b { font: 800 18px/1.2 var(--display); }
.ask > span { color: var(--muted); font-size: 15px; }
.ask-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ask-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; transition: transform .2s, border-color .2s; }
.ask-btn:hover { transform: translateY(-2px); border-color: var(--brand); }
.ask-btn.ig { background: var(--ink); color: #fff; border-color: var(--ink); }
.ask-btn.tg { background: #229ed9; color: #fff; border-color: #229ed9; }
.faq { display: flex; flex-direction: column; gap: 12px; }
.qa { border-radius: 20px; background: #fff; box-shadow: 0 1px 0 rgba(14,23,38,.06); transition: box-shadow .3s, transform .3s; interpolate-size: allow-keywords; }
.qa:hover { transform: translateY(-2px); }
.qa[open] { box-shadow: 0 24px 48px -30px rgba(11,95,176,.55); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; font: 800 19px/1.3 var(--display); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; width: 34px; height: 34px; flex: none; border-radius: 999px; background: var(--paper); transition: background-color .3s, transform .35s cubic-bezier(.2,.8,.2,1); }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; border-radius: 2px; background: var(--ink); transform: translate(-50%, -50%); transition: background-color .3s; }
.qa summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] summary i { background: var(--sign); transform: rotate(45deg); }
.qa[open] summary i::before, .qa[open] summary i::after { background: #fff; }
.qa::details-content { block-size: 0; overflow: hidden; transition: block-size .4s cubic-bezier(.2,.8,.2,1), content-visibility .4s allow-discrete; }
.qa[open]::details-content { block-size: auto; }
.qa-body { padding: 0 24px 22px; }
.qa-body p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 62ch; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } .faq-side { position: static; } }

/* ---------- final + footer ---------- */
.final { text-align: center; color: #fff; background: radial-gradient(800px 400px at 50% 100%, rgba(11,95,176,.45), transparent 70%), var(--night); }
.final h2 { font-size: clamp(34px, 5vw, 60px); font-weight: 900; line-height: 1.05; }
.final p { color: rgba(255,255,255,.8); font-size: 18px; }
.final .stores { justify-content: center; }
.roadline { height: 6px; margin: 48px auto 0; max-width: 700px; background: repeating-linear-gradient(90deg, rgba(255,211,107,.85) 0 34px, transparent 34px 60px); background-size: 60px 6px; border-radius: 3px; animation: lane 1.2s linear infinite; }
/* footer: brand + QR card, link columns, an info panel with facts, bottom line */
.foot { background: #040c16; color: rgba(255,255,255,.62); font-size: 15px; padding-block: 64px 28px; }
.foot a { color: rgba(255,255,255,.88); text-decoration: none; transition: color .2s; }
.foot a:hover { color: #fff; }
.foot-top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.foot-brand p { margin: 0; max-width: 30ch; }
.qr-card { display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; border-radius: 22px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); max-width: 340px; transition: background-color .2s, transform .2s; }
.qr-card:hover { background: rgba(255,255,255,.08); transform: translateY(-2px); }
.qr-card img { width: 96px; height: 96px; border-radius: 12px; background: #fff; padding: 6px; flex: none; }
.qr-card b { display: block; font: 800 17px/1.2 var(--display); color: #fff; }
.qr-card small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.62); }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.foot-cols div { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.foot-cols h3 { margin: 0 0 4px; font: 600 14px/1.2 var(--body); color: rgba(255,255,255,.45); }
.foot-panel { margin-top: 56px; border-radius: 26px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.foot-info { padding: 28px 32px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.6; max-width: 96ch; }
.foot-info p { margin: 0; }
.foot-info a { text-decoration: underline; text-underline-offset: 3px; }
.foot-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.08); }
.foot-facts li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 22px 28px; }
.foot-facts li + li { border-left: 1px solid rgba(255,255,255,.08); }
.foot-facts svg { grid-row: 1 / 3; color: var(--sky); }
.foot-facts b { font: 900 24px/1 var(--display); color: #fff; }
.foot-facts span { font-size: 13px; line-height: 1.35; }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 28px; font-size: 13px; }
.attr { color: rgba(255,255,255,.42); }
.foot-lang { display: flex; gap: 6px; margin-left: auto; }
.foot-lang a { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); font-size: 13px; }
.foot-lang a[aria-current] { background: #fff; color: var(--navy); border-color: #fff; }
@media (max-width: 980px) {
    .foot-top { grid-template-columns: minmax(0, 1fr); }
    .foot-facts { grid-template-columns: minmax(0, 1fr); }
    .foot-facts li + li { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
}
@media (max-width: 640px) {
    .foot { padding-top: 48px; }
    .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .foot-info { padding: 22px 20px; }
    .foot-facts li { padding: 18px 16px; column-gap: 10px; }
    .foot-lang { margin-left: 0; }
}

/* ---------- motion ---------- */
@keyframes flow { to { stroke-dashoffset: -36; } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(90,176,255,.6); } 100% { box-shadow: 0 0 0 16px rgba(90,176,255,0); } }
@keyframes wave { from { transform: scale(1); opacity: .55; } to { transform: scale(2.3); opacity: 0; } }
@keyframes fill { to { transform: none; } }
@keyframes key { 50% { transform: translateY(-4px); } to { transform: none; box-shadow: inset 0 0 0 2px var(--brand); } }
@keyframes pop { to { opacity: 1; transform: none; } }
@keyframes star-on { 50% { transform: scale(1.35); } to { color: #f59e0b; transform: none; } }
@keyframes seat { 0%, 12% { background: rgba(255,255,255,.14); color: rgba(255,255,255,.65); } 22%, 82% { background: var(--head); color: #3b2a00; } 92%, 100% { background: rgba(255,255,255,.14); color: rgba(255,255,255,.65); } }
@keyframes lane { to { background-position: -60px 0; } }
@keyframes rise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.rise { animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }
.rise.d1 { animation-delay: .1s; } .rise.d2 { animation-delay: .2s; } .rise.d3 { animation-delay: .3s; } .rise.d4 { animation-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .stop { transform: none; }
    .parcel-steps li::after { transform: none; }
    .ok { opacity: 1; transform: none; }
    .stars { color: #f59e0b; }
    .cobalt .tint { opacity: 1; }
}

@media (max-width: 900px) {
    .hero { padding-top: 96px; }
    .hero-grid { grid-template-columns: minmax(0, 1fr); }
    .hero-copy, .hero-map { grid-column: 1; grid-row: auto; }
    .planner { position: static; width: auto; margin: 12px var(--gutter) 0; }
    .hero-map { margin: 8px calc(-1 * var(--gutter)) 0; }
    .hero-copy { padding-top: 0; }
    .trip-map { top: 72px; }
    .trip-map .stage { height: 34vh; }
    .stops { gap: 40px; padding: 24px 0 40px; }
    .gauge b { font-size: 22px; }
}