/* ==========================================================================
   وين / Wain — Sana'a ride-hailing
   Identity: Sana'a at night. Indigo stone, amber light through qamariya glass.
   All 3D is CSS transforms + inline SVG. No WebGL. Keeps the site light
   for users paying ~10% of income for mobile data.
   ========================================================================== */

:root{
  /* Night — the stone */
  --night:      #0E1830;
  --night-2:    #16213D;
  --night-3:    #1E2B4D;
  --night-line: #2A3A61;

  /* Light — the qamariya */
  --amber:      #E8A33D;
  --amber-soft: #F5C97B;
  --amber-deep: #B87A1E;

  /* The wheel */
  --sky:        #4A9BE8;
  --sky-deep:   #2C6FB0;

  /* Plaster */
  --plaster:    #EFE7D8;
  --muted:      #9AA6C0;
  --muted-2:    #6E7C9C;

  --ok:         #4FBF8B;
  --warn:       #E86D5A;

  --shell: 1140px;
  --r:  14px;
  --r-lg: 22px;

  --f-display: "Rubik", system-ui, sans-serif;
  --f-body: "IBM Plex Sans Arabic", "Rubik", system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--night);
  color:var(--plaster);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.85;
  font-weight:400;
  overflow-x:hidden;
  background-image:
    radial-gradient(1100px 500px at 82% -8%, rgba(232,163,61,.13), transparent 62%),
    radial-gradient(900px 460px at 10% 4%, rgba(74,155,232,.10), transparent 60%);
  background-attachment:fixed;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:800;
  line-height:1.25;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{ font-size:clamp(2.1rem,5.4vw,4rem); line-height:1.14; }
h2{ font-size:clamp(1.65rem,3.4vw,2.7rem); }
h3{ font-size:clamp(1.15rem,2vw,1.45rem); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--amber); color:var(--night); }

:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
  border-radius:6px;
}

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:24px; }
.section{ padding:clamp(64px,9vw,120px) 0; position:relative; }
.section--tight{ padding:clamp(44px,6vw,76px) 0; }

.skip{
  position:absolute; inset-block-start:-100px; inset-inline-start:12px; z-index:200;
  background:var(--amber); color:var(--night); padding:12px 20px; border-radius:0 0 var(--r) var(--r);
  font-weight:600;
}
.skip:focus{ inset-block-start:0; }

/* ---------- Eyebrow / arch device -------------------------------------- */
/* The qamariya arch is the repeating structural mark of the whole site. */

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-display); font-weight:700;
  font-size:.78rem; letter-spacing:.12em;
  color:var(--amber); text-transform:uppercase;
  margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:26px; height:13px;
  border:2px solid var(--amber); border-bottom:0;
  border-radius:26px 26px 0 0;
  opacity:.85;
}

.lead{ font-size:clamp(1.02rem,1.9vw,1.22rem); color:var(--muted); max-width:62ch; }
.center{ text-align:center; }
.center .lead{ margin-inline:auto; }
.center .eyebrow{ justify-content:center; }

/* ---------- Buttons ----------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-display); font-weight:700; font-size:1rem;
  padding:15px 30px; border-radius:100px; border:2px solid transparent;
  cursor:pointer; transition:transform .2s var(--ease), background .2s, box-shadow .25s, border-color .2s;
  text-align:center; line-height:1.2;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--primary{
  background:var(--amber); color:#241703;
  box-shadow:0 10px 34px -12px rgba(232,163,61,.8);
}
.btn--primary:hover{ background:var(--amber-soft); box-shadow:0 16px 42px -12px rgba(232,163,61,.95); }

.btn--ghost{ border-color:var(--night-line); color:var(--plaster); background:rgba(255,255,255,.02); }
.btn--ghost:hover{ border-color:var(--amber); color:var(--amber); }

.btn--wa{ background:#1FA855; color:#fff; }
.btn--wa:hover{ background:#25c464; }

.btn--block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.center .btn-row{ justify-content:center; }

/* ---------- Nav ---------------------------------------------------------- */

.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(14,24,48,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.is-stuck{ border-bottom-color:var(--night-line); background:rgba(14,24,48,.95); }
.nav__in{ display:flex; align-items:center; gap:20px; height:74px; }

.brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand svg{ height:38px; width:auto; }
.brand__word{ font-family:var(--f-display); font-weight:800; font-size:1.5rem; letter-spacing:-.02em; }

.nav__links{
  display:flex; align-items:center; gap:4px;
  margin-inline-start:auto; list-style:none; padding:0; margin-block:0;
}
.nav__links a{
  display:block; padding:9px 15px; border-radius:100px;
  font-size:.95rem; font-weight:500; color:var(--muted);
  transition:color .2s, background .2s;
}
.nav__links a:hover{ color:var(--plaster); background:rgba(255,255,255,.05); }
.nav__links a[aria-current="page"]{ color:var(--amber); }

.nav__cta{ flex-shrink:0; padding:11px 22px; font-size:.92rem; }

.burger{
  display:none; background:none; border:1px solid var(--night-line);
  border-radius:10px; padding:9px; cursor:pointer; margin-inline-start:auto;
}
.burger span{ display:block; width:20px; height:2px; background:var(--plaster); border-radius:2px; }
.burger span+span{ margin-top:5px; }

@media (max-width:940px){
  .nav__links{
    position:fixed; inset:74px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--night-2); border-bottom:1px solid var(--night-line);
    padding:12px 20px 22px; display:none;
  }
  .nav__links.is-open{ display:flex; }
  .nav__links a{ padding:14px 8px; border-radius:8px; font-size:1.05rem; }
  .burger{ display:block; }
  .nav__cta{ display:none; }
}

/* ---------- Hero + the 3D qamariya lantern ------------------------------ */

.hero{ position:relative; padding:clamp(56px,8vw,104px) 0 clamp(70px,9vw,120px); overflow:hidden; }
.hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,72px); align-items:center;
}
.hero h1 .lit{
  color:var(--amber);
  text-shadow:0 0 44px rgba(232,163,61,.45);
}
.hero .lead{ margin-top:6px; }

.hero__note{
  display:flex; align-items:center; gap:9px;
  margin-top:26px; font-size:.9rem; color:var(--muted-2);
}
.hero__note .dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); flex-shrink:0; }

/* The lantern: stacked CSS-3D planes behind a glowing arch. */
.lantern{
  position:relative; aspect-ratio:1/1.06; width:100%; max-width:440px;
  margin-inline:auto;
  perspective:1100px;
}
.lantern__stage{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform:rotateX(11deg) rotateY(-15deg);
  animation:drift 16s var(--ease) infinite alternate;
}
@keyframes drift{
  from{ transform:rotateX(11deg) rotateY(-15deg) translateY(0); }
  to  { transform:rotateX(7deg)  rotateY(-7deg)  translateY(-14px); }
}
.plane{
  position:absolute; inset:8% 10%;
  border:1.5px solid var(--night-line);
  border-radius:50% 50% 16px 16px / 42% 42% 16px 16px;
  background:rgba(22,33,61,.5);
}
.plane--1{ transform:translateZ(-90px) scale(1.12); opacity:.35; }
.plane--2{ transform:translateZ(-48px) scale(1.06); opacity:.6; }
.plane--3{
  transform:translateZ(0);
  background:linear-gradient(180deg, rgba(232,163,61,.20), rgba(22,33,61,.85) 68%);
  border-color:var(--amber-deep);
  box-shadow:0 0 90px -14px rgba(232,163,61,.55), inset 0 0 60px -20px rgba(232,163,61,.6);
}
.plane__glass{ position:absolute; inset:0; }
.plane__glass svg{ width:100%; height:100%; }

.lantern__pin{
  position:absolute; inset-inline-end:2%; inset-block-start:6%;
  transform:translateZ(120px);
  animation:hover 4.5s ease-in-out infinite alternate;
}
.lantern__pin svg{ width:78px; height:auto; filter:drop-shadow(0 18px 30px rgba(0,0,0,.6)); }
@keyframes hover{ from{ translate:0 0; } to{ translate:0 -14px; } }

@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; }
  .lantern{ max-width:320px; order:-1; }
}

/* ---------- Stat strip --------------------------------------------------- */

.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px; background:var(--night-line);
  border:1px solid var(--night-line); border-radius:var(--r-lg); overflow:hidden;
}
.stat{ background:var(--night-2); padding:28px 24px; }
.stat__n{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.7rem,3.2vw,2.4rem); color:var(--amber); line-height:1.1;
}
.stat__l{ font-size:.9rem; color:var(--muted); margin-top:6px; }

/* ---------- Cards -------------------------------------------------------- */

.grid{ display:grid; gap:22px; }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(216px,1fr)); }

.card{
  background:var(--night-2);
  border:1px solid var(--night-line);
  border-radius:var(--r-lg);
  padding:30px 28px;
  transition:border-color .25s, transform .25s var(--ease), background .25s;
}
.card:hover{ border-color:var(--amber-deep); transform:translateY(-4px); }
.card h3{ margin-bottom:.45em; }
.card p{ color:var(--muted); font-size:.98rem; }

.card__ico{
  width:50px; height:50px; border-radius:14px;
  background:rgba(232,163,61,.12); border:1px solid rgba(232,163,61,.3);
  display:grid; place-items:center; margin-bottom:18px;
}
.card__ico svg{ width:25px; height:25px; stroke:var(--amber); fill:none; stroke-width:1.8; }

/* 3D tilt card — pointer-driven, disabled for reduced motion */
.tilt{ transform-style:preserve-3d; will-change:transform; }
.tilt__in{ transform:translateZ(28px); }

/* ---------- Steps (Arabic-Indic numerals — true to the audience) --------- */

.steps{ counter-reset:s; display:grid; gap:2px; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start;
  padding:28px 4px; border-bottom:1px solid var(--night-line);
}
.step:last-child{ border-bottom:0; }
.step__n{
  font-family:var(--f-display); font-weight:800; font-size:1.5rem;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; flex-shrink:0;
  color:var(--amber); border:1.5px solid var(--amber-deep);
  background:rgba(232,163,61,.08);
}
.step h3{ margin-bottom:.3em; }
.step p{ color:var(--muted); margin:0; }

/* ---------- The 3D city -------------------------------------------------- */

.city{ perspective:1500px; margin-top:52px; padding-block:34px; }
.city__stage{
  transform-style:preserve-3d;
  transform:rotateX(6deg) rotateY(-26deg);
  display:flex; align-items:flex-end; justify-content:center; gap:30px;
  height:300px;
  transition:transform 1.1s var(--ease);
}
.city.is-in .city__stage{ transform:rotateX(9deg) rotateY(-20deg); }

.tower{
  --depth:34px;
  position:relative; width:70px;
  transform-style:preserve-3d;
  background:linear-gradient(180deg,#26355c,#18243f);
  border-radius:3px 3px 0 0;
}
/* right side face — turns the flat div into a solid block */
.tower::before{
  content:""; position:absolute; top:0; bottom:0; right:0;
  width:var(--depth);
  transform-origin:right center;
  transform:rotateY(90deg);
  background:linear-gradient(180deg,#16203a,#0d1526);
  border-radius:3px 3px 0 0;
}
/* roof */
.tower i{
  position:absolute; left:0; right:0; top:0; height:var(--depth);
  transform-origin:top center;
  transform:rotateX(90deg);
  background:#2E3E68;
  border-radius:2px;
}
/* the lit qamariya */
.tower::after{
  content:""; position:absolute; left:14px; right:14px; top:16px;
  height:26px;
  border-radius:22px 22px 3px 3px;
  background:radial-gradient(ellipse at 50% 40%, var(--amber-soft), var(--amber-deep));
  box-shadow:0 0 28px rgba(232,163,61,.85);
  transform:translateZ(1px);
  animation:flicker 6s ease-in-out infinite;
}
.tower:nth-child(1){ height:130px; }
.tower:nth-child(2){ height:210px; }
.tower:nth-child(3){ height:164px; }
.tower:nth-child(4){ height:248px; }
.tower:nth-child(5){ height:150px; }
.tower:nth-child(6){ height:196px; }
.tower:nth-child(2)::after{ animation-delay:-1.4s; }
.tower:nth-child(3)::after{ animation-delay:-2.9s; }
.tower:nth-child(4)::after{ animation-delay:-.7s; }
.tower:nth-child(5)::after{ animation-delay:-3.6s; }
.tower:nth-child(6)::after{ animation-delay:-2.1s; }
@keyframes flicker{ 0%,100%{ opacity:.9; } 45%{ opacity:.55; } 70%{ opacity:1; } }

@media (max-width:700px){
  .city__stage{ height:200px; gap:14px; }
  .tower{ width:46px; }
}

/* ---------- 3D phone ----------------------------------------------------- */

.phone-wrap{ perspective:1200px; display:grid; place-items:center; }
.phone{
  width:270px; aspect-ratio:9/18.5;
  border-radius:34px; padding:11px;
  background:linear-gradient(155deg,#26314f,#131d36);
  border:1px solid var(--night-line);
  box-shadow:0 50px 90px -34px rgba(0,0,0,.95);
  transform-style:preserve-3d;
  transform:rotateY(-19deg) rotateX(7deg);
  transition:transform .8s var(--ease);
}
.phone:hover{ transform:rotateY(-6deg) rotateX(2deg); }
.phone__screen{
  height:100%; border-radius:24px; overflow:hidden;
  background:var(--night); border:1px solid #0a1120;
  display:flex; flex-direction:column;
}
.phone__map{
  flex:1; position:relative;
  background:
    linear-gradient(var(--night-2) 1px, transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg,var(--night-2) 1px, transparent 1px) 0 0/34px 34px,
    var(--night);
}
.phone__route{ position:absolute; inset:0; }
.phone__route svg{ width:100%; height:100%; }
.phone__sheet{
  background:var(--night-2); border-top:1px solid var(--night-line);
  padding:16px 15px 20px; font-size:.78rem;
}
.phone__row{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:11px; }
.phone__row b{ font-family:var(--f-display); color:var(--amber); font-size:1.05rem; }
.phone__row span{ color:var(--muted); }
.phone__go{
  background:var(--amber); color:#241703; text-align:center;
  border-radius:100px; padding:11px; font-family:var(--f-display); font-weight:700; font-size:.9rem;
}

/* ---------- Flip cards (top-up methods) ---------------------------------- */

.flip{ perspective:1000px; min-height:230px; }
.flip__in{
  position:relative; width:100%; height:100%; min-height:230px;
  transform-style:preserve-3d; transition:transform .7s var(--ease);
}
.flip:hover .flip__in,
.flip:focus-within .flip__in{ transform:rotateY(180deg); }
.flip__face{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:var(--r-lg); padding:28px;
  border:1px solid var(--night-line); background:var(--night-2);
  display:flex; flex-direction:column; justify-content:center;
}
.flip__face--back{
  transform:rotateY(180deg);
  background:linear-gradient(160deg,rgba(232,163,61,.16),var(--night-2));
  border-color:var(--amber-deep);
}
.flip__face p{ color:var(--muted); font-size:.95rem; margin:0; }
.flip__hint{ margin-top:14px; font-size:.8rem; color:var(--muted-2); }

/* ---------- Panels, notes, tables ---------------------------------------- */

.panel{
  background:var(--night-2); border:1px solid var(--night-line);
  border-radius:var(--r-lg); padding:clamp(26px,4vw,46px);
}
.panel--lit{
  background:linear-gradient(155deg,rgba(232,163,61,.13),rgba(22,33,61,.9));
  border-color:var(--amber-deep);
}

.note{
  border-inline-start:3px solid var(--amber);
  background:rgba(232,163,61,.07);
  padding:18px 22px; border-radius:0 var(--r) var(--r) 0;
  color:var(--muted); font-size:.96rem;
}

.tbl{ width:100%; border-collapse:collapse; font-size:.95rem; }
.tbl th,.tbl td{ padding:15px 16px; text-align:start; border-bottom:1px solid var(--night-line); }
.tbl th{ font-family:var(--f-display); font-weight:700; color:var(--amber); font-size:.88rem; }
.tbl td{ color:var(--muted); }
.tbl tr:last-child td{ border-bottom:0; }
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.checks{ list-style:none; padding:0; margin:0; display:grid; gap:13px; }
.checks li{ display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start; color:var(--muted); }
.checks li::before{
  content:""; width:21px; height:21px; border-radius:50%; margin-top:5px;
  background:rgba(79,191,139,.14); border:1px solid rgba(79,191,139,.5);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FBF8B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:13px; background-position:center; background-repeat:no-repeat;
}

/* ---------- Accordion ----------------------------------------------------- */

.acc{ border-top:1px solid var(--night-line); }
.acc__item{ border-bottom:1px solid var(--night-line); }
.acc__q{
  width:100%; background:none; border:0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:24px 4px; text-align:start;
  font-family:var(--f-display); font-weight:700; font-size:1.05rem; color:var(--plaster);
}
.acc__q:hover{ color:var(--amber); }
.acc__q i{
  flex-shrink:0; width:26px; height:26px; position:relative;
  border:1px solid var(--night-line); border-radius:50%;
}
.acc__q i::before,.acc__q i::after{
  content:""; position:absolute; inset:50% 6px auto 6px; height:1.5px;
  background:var(--amber); transition:transform .25s;
}
.acc__q i::after{ transform:rotate(90deg); }
.acc__q[aria-expanded="true"] i::after{ transform:rotate(0); }
.acc__a{ display:none; padding:0 4px 26px; color:var(--muted); max-width:78ch; }
.acc__a.is-open{ display:block; }

/* ---------- Forms --------------------------------------------------------- */

.form{ display:grid; gap:18px; }
.field{ display:grid; gap:7px; }
.field label{ font-size:.9rem; font-weight:500; color:var(--plaster); }
.field small{ color:var(--muted-2); font-size:.82rem; }
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; font-family:inherit; font-size:1rem;
  background:var(--night); color:var(--plaster);
  border:1px solid var(--night-line); border-radius:var(--r);
  transition:border-color .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--amber); outline:none; }
.field textarea{ min-height:120px; resize:vertical; }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA6C0' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-size:18px; background-repeat:no-repeat; background-position:left 16px center; }
.field--err input,.field--err select{ border-color:var(--warn); }
.err{ color:var(--warn); font-size:.85rem; display:none; }
.field--err .err{ display:block; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:620px){ .form__row{ grid-template-columns:1fr; } }

/* ---------- Prose (legal pages) ------------------------------------------- */

.prose{ max-width:74ch; }
.prose h2{ margin-top:2.2em; font-size:1.5rem; }
.prose h3{ margin-top:1.7em; font-size:1.15rem; }
.prose p,.prose li{ color:var(--muted); }
.prose ul,.prose ol{ padding-inline-start:1.3em; margin-bottom:1.2em; }
.prose li{ margin-bottom:.5em; }
.prose strong{ color:var(--plaster); font-weight:600; }

/* ---------- CTA band ------------------------------------------------------ */

.band{
  border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(232,163,61,.18),rgba(30,43,77,.95));
  border:1px solid var(--amber-deep);
  padding:clamp(36px,6vw,66px);
  text-align:center; position:relative; overflow:hidden;
}
.band::before{
  content:""; position:absolute; inset-block-start:-60%; inset-inline-start:50%;
  width:340px; height:340px; translate:-50% 0;
  background:radial-gradient(circle, rgba(232,163,61,.35), transparent 68%);
  pointer-events:none;
}
.band > *{ position:relative; }

/* ---------- Footer -------------------------------------------------------- */

.foot{ border-top:1px solid var(--night-line); background:#0B1428; padding:64px 0 34px; margin-top:40px; }
.foot__grid{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:38px; }
.foot h4{ font-size:.83rem; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); margin-bottom:16px; }
.foot ul{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.foot a{ color:var(--muted); font-size:.94rem; }
.foot a:hover{ color:var(--amber); }
.foot__note{ color:var(--muted-2); font-size:.9rem; margin-top:16px; max-width:36ch; }
.foot__base{
  margin-top:44px; padding-top:26px; border-top:1px solid var(--night-line);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  color:var(--muted-2); font-size:.86rem;
}
@media (max-width:820px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot__grid{ grid-template-columns:1fr; } }

/* ---------- Page header --------------------------------------------------- */

.phead{ padding:clamp(52px,7vw,92px) 0 clamp(28px,4vw,48px); border-bottom:1px solid var(--night-line); }
.phead .lead{ margin-top:4px; }

/* ---------- Reveal on scroll ---------------------------------------------- */

/* Content is visible by default. Only when JS is confirmed running do we hide
   it to animate it in. A failed or slow script must never blank the page. */
.js .rv{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .rv.is-in{ opacity:1; transform:none; }

/* ---------- Reduced motion ------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .rv{ opacity:1; transform:none; }
  .lantern__stage{ transform:none; }
  .city__stage{ transform:rotateX(46deg) rotateZ(-38deg); }
}

/* ---------- Print ---------------------------------------------------------- */
@media print{
  body{ background:#fff; color:#000; }
  .nav,.foot,.band,.lantern,.city{ display:none; }
}

/* ==========================================================================
   v2 — motion, vehicles, life
   ========================================================================== */

/* ---- scroll progress ---- */
.nav__bar{
  position:absolute; inset-block-end:-1px; inset-inline-start:0;
  height:2px; width:0%; background:linear-gradient(90deg,var(--amber),var(--sky));
  transition:width .1s linear; z-index:2;
}

/* ---- live dot ---- */
.live{ position:relative; width:9px; height:9px; border-radius:50%; background:var(--ok); flex-shrink:0; }
.live::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--ok); animation:ping 2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{ 70%,100%{ transform:scale(2.8); opacity:0; } }

/* ---- neighbourhood ticker ---- */
.ticker{
  overflow:hidden; border-block:1px solid var(--night-line);
  background:rgba(22,33,61,.55); padding:15px 0; direction:ltr;
}
.ticker__track{ display:flex; width:max-content; animation:tick 34s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
@keyframes tick{ to{ transform:translateX(-50%); } }
.ticker__set{ display:flex; align-items:center; gap:38px; padding-inline-end:38px; }
.ticker__set span{
  font-family:var(--f-display); font-weight:700; font-size:1.02rem;
  color:var(--muted); white-space:nowrap;
}
.ticker__set b{ color:var(--amber); font-size:.7rem; }

/* ---- 3D vehicle stage ---- */
.stage3d{ perspective:1100px; padding-block:18px; }
.stage3d__in{
  transform-style:preserve-3d;
  transform:rotateX(7deg) rotateY(-13deg);
  transition:transform .9s var(--ease);
}
.stage3d:hover .stage3d__in{ transform:rotateX(3deg) rotateY(-4deg) scale(1.02); }
.veh{ width:100%; height:auto; overflow:visible; filter:drop-shadow(0 34px 30px rgba(0,0,0,.6)); }

.veh .wheel{ transform-box:fill-box; transform-origin:center; animation:roll 1.15s linear infinite; }
@keyframes roll{ to{ transform:rotate(360deg); } }

.veh .road{ stroke-dasharray:26 20; animation:rush 1.15s linear infinite; }
@keyframes rush{ to{ stroke-dashoffset:-46; } }

.veh .hop{ transform-box:fill-box; transform-origin:center bottom; animation:hop 2.4s ease-in-out infinite; }
@keyframes hop{ 50%{ transform:translateY(-3.5px); } }

.veh .beam{ animation:beam 2.8s ease-in-out infinite; }
@keyframes beam{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

.veh:hover .wheel{ animation-duration:.5s; }
.veh:hover .road{ animation-duration:.5s; }

/* ---- vehicle choice cards ---- */
.pick{
  display:block; background:var(--night-2); border:1px solid var(--night-line);
  border-radius:var(--r-lg); padding:34px 30px 26px; overflow:hidden;
  transition:border-color .3s, transform .3s var(--ease), background .3s;
}
.pick:hover{ border-color:var(--amber); transform:translateY(-6px); background:var(--night-3); }
.pick__art{ margin:-8px -14px 18px; }
.pick h3{ margin-bottom:.35em; }
.pick p{ color:var(--muted); font-size:.98rem; }
.pick__go{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-family:var(--f-display); font-weight:700; color:var(--amber); font-size:.98rem;
}
.pick__go svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.2; transition:transform .25s; }
.pick:hover .pick__go svg{ transform:translateX(-5px); }

/* ---- animated route in the phone ---- */
.phone__route .dash{ stroke-dasharray:1 11; animation:dashflow 3.4s linear infinite; }
@keyframes dashflow{ to{ stroke-dashoffset:-48; } }
.phone__route .car{ animation:ride 6s ease-in-out infinite; }
@keyframes ride{
  0%{ offset-distance:0%; } 100%{ offset-distance:100%; }
}

/* ---- glow pulse on the lantern ---- */
.plane--3{ animation:lamp 7s ease-in-out infinite; }
@keyframes lamp{
  0%,100%{ box-shadow:0 0 90px -14px rgba(232,163,61,.55), inset 0 0 60px -20px rgba(232,163,61,.6); }
  50%    { box-shadow:0 0 120px -10px rgba(232,163,61,.8), inset 0 0 70px -16px rgba(232,163,61,.85); }
}

/* ---- count-up numerals keep their width ---- */
.stat__n{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:reduce){
  .ticker__track,.veh .wheel,.veh .road,.veh .hop,.veh .beam,
  .plane--3,.phone__route .dash,.phone__route .car,.live::after{ animation:none !important; }
}

/* ---- language switch ---- */
.nav__lang{
  flex-shrink:0; padding:8px 14px; border:1px solid var(--night-line); border-radius:100px;
  font-family:var(--f-display); font-weight:700; font-size:.82rem; color:var(--muted);
  transition:border-color .2s,color .2s;
}
.nav__lang:hover{ border-color:var(--amber); color:var(--amber); }
@media (max-width:940px){ .nav__lang{ margin-inline-start:auto; } }