/* ============================================================ fonts
   Poppins and Noto Kufi Arabic ship with the site instead of loading from
   Google. One less third-party request on first paint, identical rendering
   on a restricted network, and no layout shift while a webfont arrives.
   Subsets: Latin, Latin-Extended and Arabic. Weights: the ones the design
   system actually uses — 200 for display thin, 400/500/600 for product UI,
   700 for the card lockup. Noto Kufi covers the Sorani letters (ڕ ێ ۆ ڵ ڤ).
   ============================================================ */
@font-face{font-family:"Poppins";font-style:normal;font-weight:200;font-display:swap;
  src:url("assets/fonts/poppins-latin-ext-200.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:200;font-display:swap;
  src:url("assets/fonts/poppins-latin-200.woff2") format("woff2");
  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:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/poppins-latin-ext-400.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/poppins-latin-400.woff2") format("woff2");
  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:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url("assets/fonts/poppins-latin-ext-500.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url("assets/fonts/poppins-latin-500.woff2") format("woff2");
  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:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("assets/fonts/poppins-latin-ext-600.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("assets/fonts/poppins-latin-600.woff2") format("woff2");
  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:"Poppins";font-style:normal;font-weight:700;font-display:swap;
  src:url("assets/fonts/poppins-latin-ext-700.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;
  src:url("assets/fonts/poppins-latin-700.woff2") format("woff2");
  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:"Noto Kufi Arabic";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/noto-kufi-400.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Noto Kufi Arabic";font-style:normal;font-weight:500;font-display:swap;
  src:url("assets/fonts/noto-kufi-500.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Noto Kufi Arabic";font-style:normal;font-weight:600;font-display:swap;
  src:url("assets/fonts/noto-kufi-600.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Noto Kufi Arabic";font-style:normal;font-weight:700;font-display:swap;
  src:url("assets/fonts/noto-kufi-700.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* ============================================================
   EVL DESIGN SYSTEM — tokens
   Dark is the only theme. One saturated green, spent on a budget.
   ============================================================ */
:root{
  /* brand */
  --evl-brand:#51FF8C;
  --evl-brand-300:#8CFFB4;
  --evl-brand-400:#51FF8C;
  --evl-brand-500:#2BE96E;
  --evl-dark:#1C3218;
  --evl-grey:#27282A;
  --evl-secondary:#797775;

  --evl-brand-06:rgba(81,255,140,.06);
  --evl-brand-12:rgba(81,255,140,.12);
  --evl-brand-24:rgba(81,255,140,.24);
  --evl-brand-40:rgba(81,255,140,.40);

  --evl-white-4:rgba(255,255,255,.04);
  --evl-white-8:rgba(255,255,255,.08);
  --evl-white-12:rgba(255,255,255,.12);

  /* surfaces */
  --surface-page:#0A0A0B;
  --surface-raised:#101112;
  --surface-card:#1A1B1D;
  --surface-inset:#27282A;
  --surface-glass:rgba(16,17,18,.66);

  /* text */
  --text-primary:#FFFFFF;
  --text-secondary:#B9BABC;
  --text-muted:#797775;

  /* semantic pairs (always used as a pair) */
  --info-fg:#51F3FF;   --info-bg:#0A464B;
  --warning-fg:#FBB03B;--warning-bg:#57390D;
  --error-fg:#CE1126;  --error-bg:#47000B;

  /* radius */
  --radius-xs:6px; --radius-sm:10px; --radius-md:16px;
  --radius-lg:24px; --radius-xl:32px; --radius-2xl:44px; --radius-pill:999px;

  /* elevation */
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.24);
  --shadow-md:0 2px 6px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.36);
  --shadow-lg:0 8px 24px rgba(0,0,0,.48), 0 32px 80px rgba(0,0,0,.5);
  --glow-brand:0 0 0 1px rgba(81,255,140,.22), 0 8px 28px rgba(81,255,140,.18);
  --glow-brand-strong:0 0 0 1px rgba(81,255,140,.38), 0 14px 44px rgba(81,255,140,.34);

  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-ui:320ms; --dur-reveal:600ms; --dur-scene:1200ms;

  /* space & layout */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px;
  --section-pad:clamp(80px,10vw,160px);
  --page-max:1440px; --prose-max:820px; --gutter:24px;
  --tracking-wide:.14em;

  --font:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --focus-ring:0 0 0 2px var(--surface-page), 0 0 0 6px var(--evl-brand-40);
}
html[lang="ku"], html[lang="ar"]{
  --font:"Noto Kufi Arabic","Poppins",system-ui,sans-serif;
}

/* ============================================================ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-snap-type:y proximity}
body{
  margin:0;background:var(--surface-page);color:var(--text-primary);
  font-family:var(--font);font-size:16px;line-height:1.45;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
[dir="rtl"]{letter-spacing:0 !important}
[dir="rtl"] .display,[dir="rtl"] .h2,[dir="rtl"] .h3,[dir="rtl"] .eyebrow,[dir="rtl"] .num{letter-spacing:0 !important}
/* Arabic-script line boxes need more room than the Latin display leading */
[dir="rtl"] .display{line-height:1.32;font-size:clamp(3rem,5.6vw,5.5rem)}
[dir="rtl"] .h2{line-height:1.3}
[dir="rtl"] .h3{line-height:1.4}
[dir="rtl"] .h4,[dir="rtl"] .lead,[dir="rtl"] .body{line-height:1.7}
/* keep mixed number+Latin-unit runs (58.4 kW, 250 IQD) in reading order */
[dir="rtl"] .num,[dir="rtl"] .stat .v,[dir="rtl"] .specs .v,[dir="rtl"] .hero-strip .v,
[dir="rtl"] .charger .big,[dir="rtl"] .scratch .amt,[dir="rtl"] .codeline,
[dir="rtl"] .station .end .p,[dir="rtl"] .ring-pct,[dir="rtl"] /* the logo lockup is a fixed mark, never mirrored */
.logo{direction:ltr}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
::selection{background:var(--evl-brand);color:#08170D}
svg.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* brand marks (App Store, Google Play) are filled, not stroked */
svg.ic.solid{fill:currentColor;stroke:none}

/* ============================================================ scrollbars
   A hairline rail in the same language as the card system: white-alpha at
   rest, brand green only while you are actually dragging it. The gutter is
   reserved permanently so opening a route sheet never shifts the layout. */
:root{
  --sb-size:12px;
  --sb-thumb:rgba(255,255,255,.14);
  --sb-thumb-hover:rgba(255,255,255,.26);
  --sb-thumb-active:var(--evl-brand);
  --sb-inset:3px;
}
@media(max-width:640px){:root{--sb-size:9px;--sb-inset:2px}}

html{scrollbar-gutter:stable}

/* Firefox only. Setting scrollbar-width in Chromium switches the engine to the
   standard scrollbar and silently drops every ::-webkit-scrollbar rule below,
   so this is fenced behind a query only Firefox passes. */
@supports (scrollbar-color: white black) and (not selector(::-webkit-scrollbar)){
  html,.sheet,.textarea,.lang-menu,.mobnav,.map-cards{
    scrollbar-width:thin;
    scrollbar-color:var(--sb-thumb) transparent;
  }
}

/* WebKit / Blink */
::-webkit-scrollbar{width:var(--sb-size);height:var(--sb-size)}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{
  background-color:var(--sb-thumb);
  border:var(--sb-inset) solid transparent;
  background-clip:padding-box;
  border-radius:var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover{background-color:var(--sb-thumb-hover)}
::-webkit-scrollbar-thumb:active{background-color:var(--sb-thumb-active)}
/* inside a route sheet the rail is one step brighter, so it reads as part of
   the floating panel rather than the dimmed page behind it */
.sheet::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.20)}
.sheet::-webkit-scrollbar-thumb:hover{background-color:rgba(255,255,255,.32)}
.sheet::-webkit-scrollbar-thumb:active{background-color:var(--sb-thumb-active)}
.textarea::-webkit-scrollbar{width:8px}

/* nothing scrolls behind an open lightbox */
body.lb-open{overflow:hidden}
body.lb-open .sheet{overflow:hidden}

/* ============================================================ type */
.display{
  font-size:clamp(3.5rem,7vw,7rem);line-height:1.02;letter-spacing:-.03em;
  font-weight:600;margin:0;
}
.display .thin{font-weight:200;color:var(--text-secondary)}
.h2{font-size:clamp(2.25rem,4.2vw,3.75rem);line-height:1.06;letter-spacing:-.03em;font-weight:600;margin:0}
.h3{font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.2;letter-spacing:-.02em;font-weight:600;margin:0}
.h4{font-size:1.125rem;line-height:1.3;letter-spacing:-.01em;font-weight:600;margin:0}
.lead{font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.6;color:var(--text-secondary);margin:0;max-width:52ch}
.body{font-size:1rem;line-height:1.55;color:var(--text-secondary);margin:0}
.small{font-size:.875rem;line-height:1.5;color:var(--text-muted);margin:0}
.eyebrow{
  font-size:.6875rem;font-weight:600;text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--evl-brand);margin:0;
}
.eyebrow.muted{color:var(--text-muted)}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.03em;font-weight:600}

/* ============================================================ layout */
.wrap{width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--gutter)}
section{position:relative}
.sec{padding-block:var(--section-pad)}
.brandwash::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 120% at 20% 0%, var(--evl-brand-12), transparent 60%);
}
.brandwash > *{position:relative;z-index:1}
.sechead{max-width:var(--prose-max);margin-bottom:clamp(40px,5vw,26px)}
.sechead .eyebrow{margin-bottom:var(--s4)}
.sechead .lead{margin-top:var(--s5)}

/* FAQ — native <details>, so the answers are in the page for crawlers and open without script */
.faq{display:grid;gap:10px;max-width:var(--prose-max)}
.faq details{border:1px solid var(--evl-white-12);border-radius:var(--radius-md);background:var(--evl-white-4)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;
  padding:16px 20px;cursor:pointer;list-style:none;font-weight:600;color:var(--text-primary);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{flex:none;transition:transform var(--dur-ui) var(--ease-out)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq details p{padding:0 20px 20px;line-height:1.6;color:var(--text-secondary)}

/* ============================================================ core: button */
/* the hidden attribute must win over every display rule below */
[hidden]{display:none !important}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:52px;padding-inline:26px;border-radius:var(--radius-pill);
  font-weight:500;font-size:.9375rem;letter-spacing:-.01em;white-space:nowrap;
  transition:background var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) var(--ease-out),
             transform 140ms var(--ease-out),color var(--dur-ui) var(--ease-out),border-color var(--dur-ui) var(--ease-out);
}
.btn:active{transform:scale(.97)}
.btn svg.ic{width:18px;height:18px}
.btn-primary{background:var(--evl-brand-400);color:#08170D;box-shadow:var(--glow-brand);font-weight:600}
.btn-primary:hover{background:var(--evl-brand-300);box-shadow:var(--glow-brand-strong)}
.btn-secondary{background:var(--evl-white-4);color:var(--text-primary);border:1px solid var(--evl-white-8)}
.btn-secondary:hover{background:var(--evl-white-8);border-color:var(--evl-white-12)}
.btn-ghost{color:var(--text-secondary);padding-inline:16px}
.btn-ghost:hover{background:var(--evl-white-4);color:var(--text-primary)}
.btn-sm{height:42px;padding-inline:18px;font-size:.875rem}
.btn[disabled],.btn.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.iconbtn{
  display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-pill);
  background:var(--evl-white-4);border:1px solid var(--evl-white-8);color:var(--text-secondary);
  transition:background var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out);
}
.iconbtn:hover{background:var(--evl-white-8);color:var(--text-primary)}
.linkarrow{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--evl-brand);font-size:.9375rem}
.linkarrow svg.ic{width:16px;height:16px;transition:transform var(--dur-ui) var(--ease-out)}
.linkarrow:hover svg.ic{transform:translateX(4px)}
[dir="rtl"] .linkarrow svg.ic{transform:scaleX(-1)}
[dir="rtl"] .linkarrow:hover svg.ic{transform:scaleX(-1) translateX(4px)}

/* ============================================================ core: badge / tag */
.badge{
  display:inline-flex;align-items:center;gap:8px;width:fit-content;height:30px;padding-inline:12px;
  border-radius:var(--radius-pill);background:var(--evl-brand-12);color:var(--evl-brand);
  font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-wide);
}
.badge.neutral{background:var(--evl-white-8);color:var(--text-secondary)}
.tag{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding-inline:12px;
  border-radius:var(--radius-pill);background:var(--evl-white-4);border:1px solid var(--evl-white-8);
  font-size:.8125rem;color:var(--text-secondary);
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--evl-brand);flex:none}
.dot{position:relative}
.dot.live::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 2px var(--evl-brand-40);
  animation:pulse 2.4s var(--ease-out) infinite;
}
.dot.busy{background:var(--warning-fg)}
.dot.off{background:var(--text-muted)}
@keyframes pulse{0%{transform:scale(1);opacity:.9}70%{transform:scale(3.4);opacity:0}100%{transform:scale(3.4);opacity:0}}

/* ============================================================ core: card */
.card{
  background:var(--surface-card);border:1px solid var(--evl-white-8);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:clamp(20px,2.2vw,28px);
  transition:transform var(--dur-ui) var(--ease-out),border-color var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) var(--ease-out);
}
a.card:hover,.card.interactive:hover{transform:translateY(-4px);border-color:var(--evl-brand-40)}
.card.glass{background:var(--surface-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-color:var(--evl-white-12)}
.tile{
  width:44px;height:44px;border-radius:var(--radius-md);display:grid;place-items:center;
  background:var(--evl-brand-12);color:var(--evl-brand);flex:none;
}
.tile.neutral{background:var(--evl-white-8);color:var(--text-secondary)}

/* ============================================================ loader
   A charge gauge, not a spinner. Everything is driven by one custom property,
   --p, written on #preload once a frame: the arc's dash, the head's angle, the
   wash and the glow. The wash and the glow only ever change opacity and scale,
   so the whole thing is compositor work over a flat background.

   The old markup had a bolt glyph in here that came out the size of the ring:
   `.loader svg` is (0,1,1) and beat `.loader-bolt` at (0,1,0), so the icon
   inherited inset:0, width:100% and the ring's rotation. Nothing here selects
   a bare element type for that reason — every rule is on its own class. */
#preload{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden;
  background:var(--surface-page);
  --p:0;
  transition:opacity 620ms var(--ease-out),visibility 620ms;
}

/* texture, held right at the edge of visible */
.ld-mesh{
  position:absolute;inset:0;pointer-events:none;
  background-image:var(--hex-tile);background-size:102px 59px;
  opacity:.7;
}
/* the field brightening as the charge goes in — opacity and scale only */
.ld-wash{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,var(--evl-brand-12),transparent 58%);
  opacity:var(--p);
  transform:scale(calc(.72 + var(--p) * .5));
}

.loader{
  position:relative;display:grid;justify-items:center;
  gap:clamp(18px,3.4vmin,30px);
}
.ld-mark{width:44px;height:44px;object-fit:contain}

.ld-gauge{
  position:relative;display:grid;place-items:center;
  width:clamp(196px,44vmin,264px);aspect-ratio:1;
}
.ld-glow{
  position:absolute;inset:-18%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--evl-brand-12),transparent 62%);
  /* squared, so the ring only really lights once it is most of the way round */
  opacity:calc(var(--p) * var(--p));
}
/* not mirrored in RTL: a gauge reads like a clock, and clocks do not flip.
   The site opens in English regardless, so the loader is only ever LTR anyway. */
.ld-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ld-track{fill:none;stroke:var(--evl-white-8);stroke-width:1.4}
.ld-arc{
  fill:none;stroke:var(--evl-brand);stroke-width:4;stroke-linecap:round;
}
/* the lit head riding the leading edge — it fades up over the first tenth so
   it does not sit on the ring before there is any charge behind it */
.ld-head{opacity:calc(var(--p) * 8)}

.ld-num{
  position:relative;display:flex;align-items:baseline;gap:.06em;
  font-size:clamp(2.5rem,7.6vmin,3.5rem);font-weight:600;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;direction:ltr;
}
.ld-num i{font-style:normal;font-size:.42em;font-weight:500;color:var(--text-muted);letter-spacing:0}

.ld-lbl{
  margin:0;font-size:.6875rem;font-weight:500;text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--text-muted);
}

/* the moment it fills: one pulse out of the ring, then the whole panel lifts */
#preload.is-full .ld-glow{animation:ldFlash 620ms var(--ease-out) forwards}
@keyframes ldFlash{
  0%{opacity:1;transform:scale(1)}
  38%{opacity:1;transform:scale(1.1)}
  100%{opacity:0;transform:scale(1.34)}
}
#preload.done{opacity:0;visibility:hidden}
#preload.done .loader{transform:scale(1.06);transition:transform 620ms var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  #preload{transition:opacity 200ms linear,visibility 200ms}
  .ld-wash,.ld-glow{transform:none}
  #preload.is-full .ld-glow{animation:none}
  #preload.done .loader{transform:none}
}

/* ============================================================ header */
.hdr{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  transition:background var(--dur-ui) var(--ease-out),border-color var(--dur-ui) var(--ease-out),
             backdrop-filter var(--dur-ui) var(--ease-out);
  border-bottom:1px solid transparent;
}
.hdr.stuck{
  background:rgba(12,13,14,.82);-webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);border-bottom-color:var(--evl-white-8);
}
.hdr-in{display:flex;align-items:center;gap:var(--s6);height:84px;transition:height var(--dur-ui) var(--ease-out)}
.hdr.stuck .hdr-in{height:66px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo img{width:34px;height:34px;object-fit:contain;transition:width var(--dur-ui) var(--ease-out),height var(--dur-ui) var(--ease-out)}
.hdr.stuck .logo img{width:28px;height:28px}
.logo .word{font-weight:600;font-size:1.1875rem;letter-spacing:.02em}
.nav{display:none;gap:4px;margin-inline-start:var(--s8)}
@media(min-width:1020px){.nav{display:flex}}
.nav a{
  padding:8px 14px;border-radius:var(--radius-pill);font-size:.9375rem;color:var(--text-secondary);
  transition:background var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out);
}
.nav a:hover{background:var(--evl-white-4);color:var(--text-primary)}
.hdr-end{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.hdr .btn-primary{display:none}
@media(min-width:640px){.hdr .btn-primary{display:inline-flex}}

/* lang switcher */
.lang{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;gap:8px;height:42px;padding-inline:14px;
  border-radius:var(--radius-pill);background:var(--evl-white-4);border:1px solid var(--evl-white-8);
  font-size:.875rem;color:var(--text-secondary);transition:background var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out);
}
.lang-btn:hover{background:var(--evl-white-8);color:var(--text-primary)}
.lang-btn svg.ic{width:18px;height:18px}
.lang-btn .chev{width:14px;height:14px;transition:transform var(--dur-ui) var(--ease-out)}
.lang.open .chev{transform:rotate(180deg)}
.lang-menu{
  position:absolute;inset-block-start:calc(100% + 10px);inset-inline-end:0;min-width:200px;
  background:var(--surface-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--evl-white-12);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out),visibility var(--dur-ui);
}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu button{
  display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border-radius:var(--radius-sm);
  font-size:.9375rem;color:var(--text-secondary);text-align:start;
  transition:background var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out);
}
.lang-menu button:hover{background:var(--evl-white-8);color:var(--text-primary)}
.lang-menu button[aria-current="true"]{color:var(--evl-brand)}
.lang-menu .flagdot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.0;flex:none}
.lang-menu button[aria-current="true"] .flagdot{opacity:1}
.lang-menu .code{margin-inline-start:auto;font-size:.6875rem;letter-spacing:var(--tracking-wide);color:var(--text-muted);text-transform:uppercase}

/* mobile menu */
.mobtoggle{display:inline-grid}
@media(min-width:1020px){.mobtoggle{display:none}}
.mobnav{
  position:fixed;inset:0;z-index:99;background:rgba(10,10,11,.92);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  padding:110px var(--gutter) var(--s10);display:flex;flex-direction:column;gap:6px;
  opacity:0;visibility:hidden;transition:opacity var(--dur-ui) var(--ease-out),visibility var(--dur-ui);
}
.mobnav.open{opacity:1;visibility:visible}
.mobnav a{padding:16px 18px;border-radius:var(--radius-md);font-size:1.25rem;font-weight:500;border:1px solid var(--evl-white-8);background:var(--evl-white-4)}
/* background restated: .mobnav a outranks .btn-primary and greys the fill */
.mobnav .btn-primary{margin-top:14px;height:56px;border:0;font-size:1rem;background:var(--evl-brand-400)}

/* ============================================================ marquee */
.marquee{border-block:1px solid var(--evl-white-8);background:var(--surface-raised);overflow:hidden;padding-block:16px}
.marquee-track{display:flex;gap:var(--s10);width:max-content;animation:slide 42s linear infinite}
[dir="rtl"] .marquee-track{animation-direction:reverse}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee .item{display:flex;align-items:center;gap:10px;font-size:.875rem;color:var(--text-secondary);white-space:nowrap}
.marquee .item svg.ic{width:16px;height:16px;color:var(--text-muted)}
.marquee .item b{font-weight:500;color:var(--text-primary)}

/* ============================================================ two-track */
.track-grid{display:grid;gap:var(--s6);grid-template-columns:1fr}
@media(min-width:900px){.track-grid{grid-template-columns:1fr 1fr}}
.track{
  position:relative;overflow:hidden;padding:clamp(28px,3vw,40px);
  display:flex;flex-direction:column;gap:var(--s6);min-height:100%;
}
.track::after{
  content:"";position:absolute;inset-block-start:-30%;inset-inline-end:-20%;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--evl-brand-12),transparent 62%);opacity:0;
  transition:opacity var(--dur-ui) var(--ease-out);pointer-events:none;
}
.track:hover::after{opacity:1}
.track ul{display:grid;gap:14px}
.track li{display:flex;gap:12px;align-items:flex-start;font-size:.9375rem;color:var(--text-secondary)}
.track li svg.ic{width:18px;height:18px;color:var(--evl-brand);margin-top:2px}
.track .foot{margin-top:auto;padding-top:var(--s4)}

/* ============================================================ phone */
.phone{
  position:relative;width:300px;max-width:86vw;aspect-ratio:390/844;flex:none;margin-inline:auto;
  background:var(--surface-page);border:1px solid var(--evl-white-12);border-radius:44px;
  box-shadow:var(--shadow-lg),0 0 90px rgba(81,255,140,.10);
  overflow:hidden;padding:14px 12px 0;
}
.phone::before{
  content:"";position:absolute;inset-block-start:14px;inset-inline:0;margin-inline:auto;width:96px;height:24px;
  background:#000;border-radius:var(--radius-pill);z-index:5;
}
.ph-row{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* ============================================================ specs / feature lists */
.featlist{display:grid;gap:var(--s5)}
.feat{display:flex;gap:16px;align-items:center}
/* .feat .h4{margin-bottom:6px} */
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--evl-white-8);border:1px solid var(--evl-white-8);border-radius:var(--radius-lg);overflow:hidden}
@media(min-width:560px){.specs{grid-template-columns:repeat(4,1fr)}}
.specs .cell{background:var(--surface-raised);padding:20px 16px;text-align:start}
.specs .v{font-size:1.375rem;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.specs .k{margin-top:5px;font-size:.625rem;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted)}

/* ============================================================ dashboard mock */
.dash{background:var(--surface-raised);border:1px solid var(--evl-white-8);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.dash-top{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--evl-white-8);background:var(--surface-card)}
.dash-top .pip{width:9px;height:9px;border-radius:50%;background:var(--surface-inset)}
.dash-top .ttl{margin-inline-start:8px;font-size:.8125rem;color:var(--text-muted)}
.dash-body{padding:18px;display:grid;gap:14px}
.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:560px){.stat-row{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--surface-card);border:1px solid var(--evl-white-8);border-radius:var(--radius-md);padding:14px}
.stat .k{display:flex;align-items:center;gap:7px;font-size:.625rem;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted)}
.stat .k svg.ic{width:14px;height:14px}
.stat .v{margin-top:9px;font-size:1.375rem;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat .v.brand{color:var(--evl-brand)}
.bars{display:flex;align-items:flex-end;gap:6px;height:120px;padding-top:8px}
.bars i{flex:1;border-radius:var(--radius-xs) var(--radius-xs) 2px 2px;background:var(--evl-white-8);transition:height var(--dur-scene) var(--ease-out)}
.bars i.hot{background:linear-gradient(180deg,var(--evl-brand),var(--evl-brand-500));box-shadow:0 0 18px rgba(81,255,140,.28)}
.dash-list{display:grid;gap:8px}
.dash-item{display:flex;align-items:center;gap:12px;background:var(--surface-card);border:1px solid var(--evl-white-8);border-radius:var(--radius-md);padding:12px 14px}
.dash-item .nm{font-size:.875rem;font-weight:500}
.dash-item .mt{font-size:.75rem;color:var(--text-muted)}
.dash-item .end{margin-inline-start:auto;text-align:end}

/* ============================================================ payments */
.pay-grid{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media(min-width:640px){.pay-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.pay-grid{grid-template-columns:repeat(4,1fr)}}
.pay{display:flex;flex-direction:column;gap:16px;min-height:100%}
.pay .h4{margin-top:2px}
.pay .chip{margin-top:auto;padding-top:14px}

/* scratch card visual */
.scratch{
  position:relative;border-radius:var(--radius-md);padding:16px;overflow:hidden;
  background:linear-gradient(140deg,var(--evl-dark),#0E1A0C);border:1px solid var(--evl-brand-24);
}
.scratch .amt{font-size:1.5rem;font-weight:600;letter-spacing:-.03em;color:var(--evl-brand)}
.scratch .codeline{
  margin-top:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;letter-spacing:.12em;
  color:var(--text-secondary);background:rgba(0,0,0,.35);border-radius:var(--radius-xs);padding:7px 10px;white-space:nowrap;
}

/* ============================================================ CTA + footer */
.cta{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);
  background:linear-gradient(150deg,var(--evl-dark),#0C1109 62%);border:1px solid var(--evl-brand-24);
  padding:clamp(36px,5vw,72px);text-align:center;
}
.cta::before{
  content:"";position:absolute;inset-block-start:-40%;inset-inline-start:50%;transform:translateX(-50%);
  width:min(760px,120%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--evl-brand-12),transparent 60%);
}
.cta > *{position:relative}
.cta .lead{margin-inline:auto;margin-top:var(--s5)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:var(--s8)}
footer{border-top:1px solid var(--evl-white-8);margin-top:clamp(60px,8vw,120px);padding-block:var(--s16) var(--s10)}
.foot-grid{display:grid;gap:var(--s10);grid-template-columns:1fr}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot-col h5{margin:0 0 16px;font-size:.625rem;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted);font-weight:600}
.foot-col li + li{margin-top:11px}
.foot-col a{font-size:.9375rem;color:var(--text-secondary);transition:color var(--dur-ui) var(--ease-out)}
.foot-col a:hover{color:var(--evl-brand)}
.foot-bot{
  margin-top:var(--s16);padding-top:var(--s6);border-top:1px solid var(--evl-white-8);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
}
.foot-bot .small{color:var(--text-muted)}
.socials{display:flex;gap:8px}

/* ============================================================ route sheets
   Every page other than Home pops up over the one below it. The layer beneath
   scales back and dims, so depth reads as hierarchy. */
:root{--sheet-top:74px}
@media(max-width:639px){:root{--sheet-top:62px}}
html{background:#000}
#base{transform-origin:50% 0;border-radius:0;
  transition:transform 620ms var(--ease-out),filter 620ms var(--ease-out),border-radius 620ms var(--ease-out)}
body.has-sheet{overflow:hidden}
body.has-sheet #base{transform:scale(.962) translateY(6px);filter:brightness(.4) saturate(.75);border-radius:var(--radius-xl);overflow:hidden}
body.has-sheet .hdr{
  background:rgba(12,13,14,.82);-webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);border-bottom-color:var(--evl-white-8);
}
body.has-sheet .hdr-in{height:66px}
body.has-sheet .nav{display:none}
/* the burger stays reachable inside a route so the whole map is one tap away */
@media(max-width:560px){#langNow{display:none}.lang-btn{padding-inline:12px}}

#stack{position:fixed;inset:0;z-index:80;pointer-events:none}
.sheet{
  position:absolute;inset-block-start:var(--top,var(--sheet-top));inset-inline:0;inset-block-end:0;
  background:var(--surface-page);border-top:1px solid var(--evl-white-12);
  border-start-start-radius:var(--radius-xl);border-start-end-radius:var(--radius-xl);
  box-shadow:0 -26px 70px rgba(0,0,0,.7);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  transform:translateY(102%);transform-origin:50% 0;pointer-events:auto;
  transition:transform 620ms var(--ease-out),filter 520ms var(--ease-out);
}
.sheet.in{transform:translateY(0)}
.sheet.under{transform:translateY(-14px) scale(.968);filter:brightness(.42) saturate(.75)}
.sheet-grab{
  position:sticky;inset-block-start:0;z-index:9;display:grid;place-items:center;
  height:34px;width:100%;border:0;background:linear-gradient(to bottom,var(--surface-page) 55%,transparent);
}
.sheet-grab span{display:block;width:44px;height:4px;border-radius:var(--radius-pill);background:var(--evl-white-12);transition:background var(--dur-ui) var(--ease-out),width var(--dur-ui) var(--ease-out)}
.sheet-grab:hover span{background:var(--evl-brand-40);width:56px}

/* header in route mode */
.hdr-route{display:none;align-items:center;gap:12px;margin-inline-start:var(--s6);min-width:0}
body.has-sheet .hdr-route{display:flex}
.backbtn{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding-inline:14px;border-radius:var(--radius-pill);
  background:var(--evl-white-4);border:1px solid var(--evl-white-8);font-size:.875rem;color:var(--text-secondary);
  transition:background var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out);
}
.backbtn:hover{background:var(--evl-white-8);color:var(--text-primary)}
.backbtn svg.ic{width:16px;height:16px}
[dir="rtl"] .backbtn svg.ic{transform:scaleX(-1)}
.crumb{font-size:.9375rem;font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumb .sep{color:var(--text-muted);margin-inline:8px}
@media(max-width:719px){.crumb{display:none}}

/* ============================================================ route page furniture */
.rhero{padding-block:clamp(28px,4vw,26px) clamp(28px,4vw,26px)}
.rhero .display{font-size:clamp(2.75rem,5.4vw,5rem);margin-block:18px 0}
[dir="rtl"] .rhero .display{font-size:clamp(2.25rem,4.4vw,4rem)}
.rhero .lead{margin-top:20px}
.rmeta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;margin-bottom:26px;}
.sheet .sec{padding-block:clamp(48px,6vw,52px)}
.sheet .sec:first-of-type{padding-block-start:0}
.rsplit{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:1fr}
@media(min-width:920px){.rsplit{grid-template-columns:1.05fr .95fr;align-items:start}}
/* a device's specification table runs far longer than its feature list, so the
   left column rides down beside it instead of leaving a screen of dead space */
@media(min-width:920px){
  .rsplit--sticky > :first-child{position:sticky;inset-block-start:calc(var(--hdr-h) + 28px)}
}

/* numbered steps */
.steps{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:680px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.steps{grid-template-columns:repeat(4,1fr)}}
/* three-step sequences read as a row, not a stack of full-width bars */
@media(min-width:900px){.steps--3{grid-template-columns:repeat(3,1fr)}}
.step{display:flex;flex-direction:column;gap:14px}
.step .n{
  width:36px;height:36px;border-radius:var(--radius-pill);display:grid;place-items:center;flex:none;
  border:1px solid var(--evl-brand-40);color:var(--evl-brand);font-size:.8125rem;font-weight:600;
  font-variant-numeric:tabular-nums;background:var(--evl-brand-06);
}

/* spec rows */
.rows{display:grid;gap:1px;background:var(--evl-white-8);border:1px solid var(--evl-white-8);border-radius:var(--radius-lg);overflow:hidden}
.rows .r{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface-raised);padding:15px 18px}
.rows .r .k{font-size:.875rem;color:var(--text-muted)}
.rows .r .v{font-size:.9375rem;font-weight:500;font-variant-numeric:tabular-nums;text-align:end}
[dir="rtl"] .rows .r .v{direction:ltr;unicode-bidi:isolate}

/* link cards on Home */
.linkgrid{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media(min-width:720px){.linkgrid{grid-template-columns:repeat(3,1fr)}}
.linkcard{display:flex;flex-direction:column;gap:16px;min-height:100%;text-align:start}
.linkcard .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.linkcard .go{color:var(--text-muted);transition:color var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out)}
.linkcard:hover .go{color:var(--evl-brand);transform:translateX(4px)}
[dir="rtl"] .linkcard .go{transform:scaleX(-1)}
[dir="rtl"] .linkcard:hover .go{transform:scaleX(-1) translateX(4px)}
.mini{display:flex;align-items:center;gap:12px;padding:16px;text-align:start}
.mini .h4{font-size:.9375rem}

/* ============================================================ gallery
   Ported 1:1 from sohub.digital's `.gallery.gallery--grid.gallery--breakout`:
   a 100vh section, flex-centred, holding a shrink-wrapped 3x3 grid of
   31vw x 31vh tiles with a 1vw gap and a 16px radius. Inside a route sheet
   the viewport height is the sheet's, so the height feeds through --gal-h
   and the tiles keep the same 31% proportion of it. */
.gallery-wrap{
  --gal-h:100svh;
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;height:var(--gal-h);overflow:hidden;
}
.sheet .gallery-wrap{--gal-h:calc(100svh - var(--sheet-top))}
.gallery{position:relative;flex:0 0 auto;width:100%;height:100%}
.gallery--breakout{width:min-content}
.gallery--grid{
  display:grid;height:auto;gap:1vw;
  grid-template-columns:repeat(3,auto);grid-template-rows:repeat(3,auto);
}
.gallery--grid .gallery__item{width:31vw;height:calc(var(--gal-h) * 0.31)}
.gallery__item{
  position:relative;flex:0 0 auto;padding:0;border:0;cursor:zoom-in;
  border-radius:16px;background-size:cover;background-position:50% 50%;
  transition:transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) var(--ease-out);
}
.gallery__item-cut{display:grid;place-items:center;overflow:hidden}
.gallery__item-inner{position:relative;width:100%;height:100%}
.gallery__item-inner img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 700ms var(--ease-out);
}
.gallery__item:hover{box-shadow:0 0 0 1px var(--evl-brand-40),var(--shadow-lg)}
.gallery__item:hover .gallery__item-inner img{transform:scale(1.045)}
.gallery__item::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.86),transparent 58%);
  opacity:0;transition:opacity var(--dur-ui) var(--ease-out);
}
.gallery__item:hover::after,.gallery__item:focus-visible::after{opacity:1}
.gallery__item .cap{
  position:absolute;inset-block-end:0;inset-inline:0;z-index:2;
  padding:14px 16px;text-align:start;font-size:.8125rem;font-weight:500;color:#fff;
  opacity:0;transform:translateY(6px);
  transition:opacity var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out);
}
.gallery__item:hover .cap,.gallery__item:focus-visible .cap{opacity:1;transform:none}
.gallery__item .zoom{
  position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:2;width:32px;height:32px;
  border-radius:var(--radius-pill);display:grid;place-items:center;
  background:rgba(10,10,11,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--evl-white-12);color:#fff;opacity:0;
  transition:opacity var(--dur-ui) var(--ease-out);
}
.gallery__item:hover .zoom,.gallery__item:focus-visible .zoom{opacity:1}
.gnote{
  margin-top:18px;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:.8125rem;color:var(--text-muted);text-align:center;
}
.gnote svg.ic{width:15px;height:15px}
/* no hover on touch: captions stay on so the tiles are still labelled */
@media(hover:none){
  .gallery__item .cap{opacity:1;transform:none}
  .gallery__item::after{opacity:1}
}
/* 31vw tiles are ~120px on a phone — drop to a two-up grid that still fits */
@media(max-width:760px){
  .gallery-wrap{--gal-h:auto;height:auto;padding-inline:var(--gutter)}
  .gallery--breakout{width:100%}
  .gallery--grid{grid-template-columns:repeat(2,1fr);grid-template-rows:none;gap:10px;width:100%}
  .gallery--grid .gallery__item{width:auto;height:auto;aspect-ratio:3/2}
  .gallery__item .cap{opacity:1;transform:none;padding:10px 12px;font-size:.75rem}
  .gallery__item::after{opacity:1}
}

/* lightbox */
#lightbox{
  position:fixed;inset:0;z-index:200;display:grid;grid-template-rows:1fr auto;gap:14px;
  padding:clamp(14px,3vw,36px);background:rgba(6,6,7,.94);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  opacity:0;visibility:hidden;transition:opacity var(--dur-ui) var(--ease-out),visibility var(--dur-ui);
}
#lightbox.open{opacity:1;visibility:visible}
.lb-stage{position:relative;display:flex;justify-content:center;min-height:0}
.lb-stage img{max-width:100%;max-height:100%;border-radius:var(--radius-lg);border:1px solid var(--evl-white-12);box-shadow:var(--shadow-lg)}
.lb-bar{display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap}
.lb-bar .lb-cap{font-size:.9375rem;color:var(--text-secondary);text-align:center;flex:1 1 240px}
.lb-bar .lb-count{font-size:.75rem;letter-spacing:var(--tracking-wide);color:var(--text-muted);font-variant-numeric:tabular-nums}
.lb-close{position:absolute;inset-block-start:clamp(14px,3vw,36px);inset-inline-end:clamp(14px,3vw,36px);z-index:3}
[dir="rtl"] .lb-nav svg.ic{transform:scaleX(-1)}

/* ============================================================ forms */
.form{display:grid;gap:16px}
@media(min-width:640px){.form .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}}
.field{display:grid;gap:8px}
.field > label{font-size:.6875rem;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted);font-weight:600}
.input,.select,.textarea{
  width:100%;background:var(--surface-inset);border:1px solid var(--evl-white-8);border-radius:var(--radius-md);
  color:var(--text-primary);font:inherit;font-size:.9375rem;padding:14px 16px;
  transition:border-color var(--dur-ui) var(--ease-out),background var(--dur-ui) var(--ease-out);
}
.textarea{min-height:132px;resize:vertical}
.select{appearance:none;padding-inline-end:44px;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-size:6px 6px,6px 6px;background-position:right 20px center,right 14px center;background-repeat:no-repeat}
[dir="rtl"] .select{background-position:left 20px center,left 14px center}
.input:hover,.select:hover,.textarea:hover{border-color:var(--evl-white-12)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--evl-brand-40);box-shadow:var(--focus-ring)}
.input::placeholder,.textarea::placeholder{color:var(--text-muted)}

/* toast */
.toast{
  position:fixed;inset-block-end:24px;inset-inline:0;margin-inline:auto;width:max-content;max-width:calc(100vw - 32px);
  z-index:220;display:flex;align-items:center;gap:12px;padding:14px 20px;border-radius:var(--radius-pill);
  background:var(--evl-dark);border:1px solid var(--evl-brand-40);color:var(--text-primary);
  box-shadow:var(--shadow-lg),var(--glow-brand);font-size:.9375rem;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-spring),visibility var(--dur-ui);
}
.toast.show{opacity:1;visibility:visible;transform:none}
.toast svg.ic{width:19px;height:19px;color:var(--evl-brand)}

/* chips row */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips .tag{height:34px;padding-inline:15px;font-size:.875rem}

/* ============================================================ catalogue controls
   The search field, the filter chips and the result header started life on the
   old map page. They are the only parts of it the device catalogue needs, so
   they are restated here rather than left buried in a page that no longer
   exists. */
.searchrow{position:relative}
.searchrow .input{padding-inline-start:46px;height:52px}
.searchrow svg.ic{
  position:absolute;inset-block-start:50%;inset-inline-start:16px;transform:translateY(-50%);
  width:18px;height:18px;color:var(--text-muted);pointer-events:none;
}
.chip-toggle{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding-inline:15px;
  border-radius:var(--radius-pill);background:var(--evl-white-4);border:1px solid var(--evl-white-8);
  font-size:.875rem;color:var(--text-secondary);white-space:nowrap;
  transition:background var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out),
             border-color var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) var(--ease-out);
}
.chip-toggle:hover{background:var(--evl-white-8);color:var(--text-primary)}
.chip-toggle[aria-pressed="true"]{background:var(--evl-brand);color:#08170D;border-color:transparent;font-weight:600;box-shadow:var(--glow-brand)}
.chip-toggle svg.ic{width:15px;height:15px}
.fgroup{display:grid;gap:12px}
.fgroup > .eyebrow{color:var(--text-muted)}
.resulthead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block:clamp(24px,3vw,36px) 16px;flex-wrap:wrap}
.resulthead .n{font-size:.8125rem;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted)}
.emptystate{padding:44px 20px;text-align:center;border:1px dashed var(--evl-white-12);border-radius:var(--radius-lg);grid-column:1 / -1}

/* ============================================================ device catalogue */
.devbar{
  display:grid;gap:clamp(18px,2.2vw,26px);padding:clamp(18px,2.2vw,26px);
  background:var(--surface-card);border:1px solid var(--evl-white-8);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
}
.devfilters{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:1fr}
@media(min-width:760px){.devfilters{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1180px){.devfilters{grid-template-columns:repeat(4,1fr);align-items:start}}
.chiprow{display:flex;flex-wrap:wrap;gap:8px}

.devgrid{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media(min-width:640px){.devgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.devgrid{grid-template-columns:repeat(3,1fr)}}

.devcard{
  display:grid;grid-template-rows:auto 1fr;background:var(--surface-card);
  border:1px solid var(--evl-white-8);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-md);
  transition:transform var(--dur-ui) var(--ease-out),border-color var(--dur-ui) var(--ease-out);
}
.devcard:hover{transform:translateY(-4px);border-color:var(--evl-brand-40)}
.devcard-shot{
  /* an auto grid track sizes to the image's intrinsic width, which makes
     max-width:100% circular and blows the card open on narrow screens */
  display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);
  place-items:center;aspect-ratio:4/3;padding:clamp(16px,2vw,26px);
  background:
    radial-gradient(90% 80% at 50% 0%,var(--evl-brand-06),transparent 62%),
    linear-gradient(170deg,#141618,#0D0E10 70%);
  border-bottom:1px solid var(--evl-white-8);
}
.devcard-shot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  transition:transform 700ms var(--ease-out)}
.devcard:hover .devcard-shot img{transform:scale(1.05)}
.devcard-body{display:grid;gap:10px;align-content:start;padding:clamp(18px,2.2vw,24px)}
.devcard-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.devcard-kw{font-size:.9375rem;font-weight:600;color:var(--evl-brand)}
.devcard-body .h4{display:block}
.devcard-body .small{display:block}
.devcard-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.devcard-meta .tag{height:26px;padding-inline:10px;font-size:.75rem}
.devcard .linkarrow{margin-top:4px}

/* the device page */
.dev-top{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:1fr;align-items:center}
@media(min-width:920px){.dev-top{grid-template-columns:1.05fr .95fr}}
.dev-top .grow{min-width:0}
.dev-hero{width:100%;max-width:460px;justify-self:center}
.dev-hero img{width:min(100%,300px);height:auto}
.officelist{display:grid;gap:16px;margin-top:16px}
.office{display:flex;gap:14px;align-items:flex-start}
.tag.brand{border-color:var(--evl-brand-40);color:var(--evl-brand);background:var(--evl-brand-06)}

/* the horizontal device rail, on Home and at the foot of a device page */
.rangerail{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding-block:6px}
.rangerail-track{display:flex;gap:clamp(14px,1.8vw,22px);width:max-content;padding-inline:var(--gutter);margin-top:26px;}
.rangerail-track .devcard{width:clamp(232px,26vw,320px);flex:none;scroll-snap-align:center}
.rangerail-track .devcard-body .small{display:none}
.rangerail-track .devcard-meta{display:none}

/* ============================================================ product cards */
.prod{display:grid;gap:0;overflow:hidden;padding:0;text-align:start}
.prod-shot{position:relative;display:block;overflow:hidden;background:#0D0E10;aspect-ratio:16/9}
.prod-shot img{width:100%;height:100%;object-fit:cover;transition:transform 800ms var(--ease-out)}
.prod-shot.is-contain{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;}
.prod-shot.is-contain img{width:100%;height:100%;max-width:100%;object-fit:cover}
.prod:hover .prod-shot img{transform:scale(1.04)}
.prod-body{display:grid;gap:12px;align-content:start;padding:clamp(22px,2.8vw,36px)}
.prod-body .h2,.prod-body .h3,.prod-body .lead,.prod-body .body,.prod-body .eyebrow{display:block}
.prod-body .chips{margin-top:6px}
.prod-body .linkarrow{margin-top:8px}
.prod--lead{margin-bottom:var(--s5)}
@media(min-width:960px){
  .prod--lead{grid-template-columns:1.1fr .9fr;align-items:stretch}
  .prod--lead .prod-shot{aspect-ratio:auto;height:100%}
}
.prodpair{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media(min-width:860px){.prodpair{grid-template-columns:1fr 1fr}}
.track-grid--3{grid-template-columns:1fr}
@media(min-width:820px){.track-grid--3{grid-template-columns:1fr 1fr}}
@media(min-width:1180px){.track-grid--3{grid-template-columns:repeat(3,1fr)}}
.mobnav a.sub{font-size:1rem;color:var(--text-secondary);margin-inline-start:18px;padding-block:12px}
.foot-col .offices{display:grid;gap:12px}
.foot-col .offices li{margin:0}
.foot-col .offices b{display:block;font-size:.8125rem;font-weight:600;color:var(--text-secondary)}
.foot-col .offices span{display:block;margin-top:2px;font-size:.8125rem;color:var(--text-muted);direction:ltr}
[dir="rtl"] .foot-col .offices span{text-align:start}
.small.brand{color:var(--evl-brand)}

/* ============================================================ hex mesh
   The honeycomb from the physical EVL card, as a seamless tile. */
:root{--hex-tile:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDIuMDAiIGhlaWdodD0iNTguODkiIHZpZXdCb3g9IjAgMCAxMDIuMDAgNTguODkiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wMzAiPjxwYXRoIGQ9Ik0zMi40NywyOS40NEwxNi4yNCw1Ny41NkwtMTYuMjMsNTcuNTZMLTMyLjQ3LDI5LjQ0TC0xNi4yNCwxLjMzTDE2LjI0LDEuMzNaIi8+PHBhdGggZD0iTTgzLjQ3LDAuMDBMNjcuMjMsMjguMTJMMzQuNzcsMjguMTJMMTguNTMsMC4wMEwzNC43NiwtMjguMTJMNjcuMjMsLTI4LjEyWiIvPjxwYXRoIGQ9Ik04My40Nyw1OC44OUw2Ny4yMyw4Ny4wMUwzNC43Nyw4Ny4wMUwxOC41Myw1OC44OUwzNC43NiwzMC43N0w2Ny4yMywzMC43N1oiLz48cGF0aCBkPSJNMTM0LjQ3LDI5LjQ0TDExOC4yMyw1Ny41Nkw4NS43Nyw1Ny41Nkw2OS41MywyOS40NEw4NS43NiwxLjMzTDExOC4yMywxLjMzWiIvPjwvZz48L3N2Zz4=")}
.hexmesh{position:relative;isolation:isolate}
.hexmesh > *{position:relative;z-index:1}
.hexmesh::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--hex-tile);background-size:102px 59px;
}

/* The mesh lights under the pointer. motion.js builds one small cluster of
   real hexagons on the same lattice the tile repeats on and snaps it to the
   nearest cell; each cell's brightness is baked in from its distance to the
   middle, so following the pointer is a single transform.

   The cluster sits under the tile, which is white at 3% — the green shows
   through it rather than replacing it, so the mesh keeps its own drawing and
   only gains a charge. */
.hexlight{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  opacity:0;
  /* content-visibility, not visibility. The payments mesh sits inside a scene
     that writes --p every frame, and a custom property invalidates style for
     everything that inherits it — 124 hidden hexagons under that scene added
     ~18 ms of style recalculation to a scroll of it. content-visibility:hidden
     takes the subtree out of style, layout and paint until it is wanted, which
     puts the cost back at zero. allow-discrete lets it still fade out rather
     than cut. */
  content-visibility:hidden;
  transition:opacity 240ms var(--ease-out),content-visibility 240ms allow-discrete;
}
.hexmesh.is-lit .hexlight{opacity:1;content-visibility:visible}
/* physical, not logical: the tile repeats from the left in both directions,
   so the lattice origin is the left edge whatever the text direction is */
.hexcluster{position:absolute;top:0;left:0}
.is-lit .hexcluster{will-change:transform}
.hexset{position:absolute;top:0;left:0}
.hexset:last-child{visibility:hidden}
.hexcell{
  position:absolute;display:block;
  width:64.94px;height:56.34px;
  /* flat-topped: the left and right points sit at 50% height, the flat edges
     run between 25% and 75% */
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  background:var(--evl-brand);
  opacity:calc(var(--i) * .17);
  transform:translate3d(calc(var(--dx) * 1px - 32.47px),
                        calc(var(--dy) * 1px - 28.17px), 0);
}

/* ============================================================ EVL card */
.evlcard{
  position:relative;width:100%;max-width:520px;aspect-ratio:1.586;overflow:hidden;
  border-radius:var(--radius-lg);border:1px solid var(--evl-white-8);
  box-shadow:var(--shadow-lg);
  background:
    radial-gradient(80% 120% at 88% 26%, rgba(81,255,140,.22), transparent 58%),
    linear-gradient(150deg,#122016 0%,#0C1410 46%,#0A0B0A 100%);
  padding:clamp(20px,3.4vw,30px);display:flex;flex-direction:column;justify-content:space-between;
}
.evlcard::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--hex-tile);background-size:96px 55px;opacity:.85;
}
.evlcard > *{position:relative;z-index:1}
.evlcard-label{
  margin:0;font-size:.6875rem;font-weight:600;text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--evl-brand);
}
.evlcard-name{margin:6px 0 0;font-size:clamp(1.375rem,3vw,2rem);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.evlcard-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.evlcard-sup{display:grid;gap:2px}
.evlcard-sup .evlcard-label + .evlcard-num{margin-block:2px 10px}
.evlcard-num{margin:0;font-size:clamp(.9375rem,1.6vw,1.125rem);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.evlcard-stores{display:flex;gap:12px;color:var(--evl-brand);flex:none}
.evlcard-stores svg.ic{width:26px;height:26px}
.evlcard-mark{
  position:absolute;inset-block-start:clamp(16px,2.6vw,26px);inset-inline-end:clamp(16px,2.6vw,26px);
  z-index:2;width:clamp(64px,12%,96px);
}
.evlcard-mark img{width:100%;height:auto}
.evlcard.is-back{align-items:center;justify-content:center;text-align:center;gap:26px}
.evlcard.is-back .lock{font-size:clamp(1.25rem,2.6vw,1.75rem);font-weight:600;letter-spacing:-.01em}
.evlcard.is-back .lock b{color:var(--evl-brand)}
.evlcard.is-back .tagline{display:grid;gap:2px}
.evlcard.is-back .tagline .a{font-size:.9375rem;font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--evl-brand)}
.evlcard.is-back .tagline .b{font-size:clamp(2rem,5vw,3.25rem);font-weight:700;letter-spacing:-.02em;line-height:1}
.cardstack{display:grid;gap:18px;justify-items:center}

.storebadge{
  display:inline-flex;align-items:center;gap:12px;height:56px;padding-inline:20px;
  border-radius:var(--radius-md);background:var(--evl-white-4);border:1px solid var(--evl-white-8);
  transition:background var(--dur-ui) var(--ease-out),border-color var(--dur-ui) var(--ease-out);
}
.storebadge:hover{background:var(--evl-white-8);border-color:var(--evl-white-12)}
.storebadge svg.ic{width:26px;height:26px}
.storebadge .txt{display:grid;text-align:start;line-height:1.15}
.storebadge .txt .a{font-size:.625rem;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted)}
.storebadge .txt .b{font-size:1rem;font-weight:600;letter-spacing:-.01em}

/* ============================================================ alert */
.alert{
  display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-radius:var(--radius-md);
  background:var(--warning-bg);border:1px solid rgba(251,176,59,.28);color:var(--warning-fg);
}
.alert svg.ic{width:20px;height:20px;flex:none;margin-top:2px}
.alert .h4{color:var(--warning-fg)}
.alert p{margin:6px 0 0;font-size:.9375rem;line-height:1.5;color:rgba(255,255,255,.82)}

/* ============================================================ wallet mock */
.wallet{
  background:var(--surface-raised);border:1px solid var(--evl-white-8);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:clamp(18px,2.4vw,26px);display:grid;gap:20px;
}
.wal-head{display:flex;align-items:center;gap:16px}
.wal-head .tile{width:52px;height:52px}
.wal-head .k{font-size:.625rem;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted)}
.wal-head .v{margin-top:5px;font-size:clamp(1.375rem,2.4vw,1.75rem);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.wal-head .s{margin-top:3px;font-size:.8125rem;color:var(--text-muted)}
[dir="rtl"] .wal-head .v,[dir="rtl"] .wal-head .s{direction:ltr;unicode-bidi:isolate}
.wal-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:340px}
.wal-act{
  display:grid;justify-items:center;gap:7px;padding:14px 6px;border-radius:var(--radius-md);
  background:var(--surface-card);border:1px solid var(--evl-white-8);font-size:.75rem;color:var(--text-secondary);
  transition:border-color var(--dur-ui) var(--ease-out),background var(--dur-ui) var(--ease-out);
}
.wal-act svg.ic{width:20px;height:20px;color:var(--evl-brand)}
.wal-act:hover{background:var(--evl-white-8);border-color:var(--evl-brand-40)}
.wal-tabs{display:flex;gap:22px;overflow-x:auto;border-bottom:1px solid var(--evl-white-8);padding-bottom:2px}
.wal-tab{
  position:relative;padding-block:10px;font-size:1rem;font-weight:500;color:var(--text-muted);white-space:nowrap;
  transition:color var(--dur-ui) var(--ease-out);
}
.wal-tab[aria-selected="true"]{color:var(--evl-brand)}
.wal-tab[aria-selected="true"]::after{
  content:"";position:absolute;inset-block-end:-3px;inset-inline:0;height:2px;border-radius:2px;background:var(--evl-brand);
}
.wal-panel[hidden]{display:none}
.txlist{display:grid;gap:10px}
.txrow{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface-card);border:1px solid var(--evl-white-8);border-radius:var(--radius-md)}
.txrow svg.ic{width:19px;height:19px;color:var(--text-secondary);flex:none}
.txrow .nm{font-size:.9375rem;font-weight:500}
.txrow .mt{margin-top:3px;font-size:.75rem;color:var(--text-muted)}
.txrow .amt{margin-inline-start:auto;font-size:1.0625rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
[dir="rtl"] .txrow .amt,[dir="rtl"] .txrow .mt{direction:ltr;unicode-bidi:isolate}

/* ============================================================ reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:80ms}.rv[data-d="2"]{transition-delay:160ms}
.rv[data-d="3"]{transition-delay:240ms}.rv[data-d="4"]{transition-delay:320ms}
.par{will-change:transform}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:none}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:200ms !important}
  .rv{transform:none !important;transition:opacity 200ms linear}
  .marquee-track{animation:none}
  #base,body.has-sheet #base{transform:none;border-radius:0}
  .sheet{transform:none;opacity:0;visibility:hidden;transition:opacity 200ms linear,visibility 200ms}
  .sheet.in{opacity:1;visibility:visible}
  .sheet.under{transform:none;filter:brightness(.42)}
}
/* ============================================================ scroll scenes
   Every scene is a tall block with a sticky child. js/scroll.js writes one
   number onto the block — --p, 0 to 1 across its travel — and the rules below
   read it with calc(). No JS touches a style here except the five scenes that
   genuinely need per-child maths.

   Heights are in vh because a scene's length IS its pacing: a taller block
   means the same animation takes more scrolling. They shrink on small screens
   so a phone does not have to scroll a metre to get through one idea.
   ============================================================ */
.scene{position:relative}
/* Scroll snapping, proximity only. A stepped scene parks a zero-size marker at
   each of its resting positions (scroll.js builds them from data-snap-at), so
   letting go near a step settles onto it while a deliberate scroll straight
   past is never caught. Nothing else on the page carries scroll-snap-align, so
   the rest of the scroll is untouched. */
.snapstop{
  position:absolute;inset-inline-start:0;inline-size:1px;block-size:1px;
  pointer-events:none;visibility:hidden;scroll-snap-align:start;
}
.pin{
  position:sticky;inset-block-start:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:calc(var(--hdr-h) + 16px) 40px;
  /* opaque, so the next scene wipes over the one it replaces instead of
     showing two headings through each other on the hand-off */
  background:var(--surface-page);
}
:root{--hdr-h:84px}
@media(max-width:1019px){:root{--hdr-h:70px}}

.scene-seq{min-height:340vh}
.scene-rail{min-height:300vh}
.scene-film{min-height:240vh}
.scene-deck{min-height:280vh}
.scene-dash{min-height:340vh}
.scene-pay{min-height:380vh}
@media(max-width:900px){
  .scene-seq{min-height:300vh}
  .scene-rail{min-height:260vh}
  .scene-film{min-height:200vh}
  .scene-deck{min-height:220vh}
  .scene-dash{min-height:300vh}
  .scene-pay{min-height:340vh}
}

/* ============================================================ hero
   Full-bleed motion, a two-line headline that rises out of its own line box,
   and a protection gradient instead of a slab behind the type. */
.hero{
  position:relative;min-height:100svh;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(30px,4vw,56px);
  padding-block:calc(var(--hdr-h) + 48px) 104px;
}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#08090A}
.hero-media img{
  width:100%;height:100%;object-fit:cover;transform-origin:62% 42%;
  transform:scale(calc(1 + var(--p,0) * .17)) translate3d(0,calc(var(--p,0) * -5vh),0);
}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(4,5,6,.97) 3%,rgba(4,5,6,.70) 32%,rgba(4,5,6,.30) 66%,rgba(4,5,6,.66)),
    linear-gradient(to right,rgba(4,5,6,.90),rgba(4,5,6,.44) 48%,rgba(4,5,6,.06) 78%);
  opacity:calc(.9 + var(--p,0) * .1);
}
[dir="rtl"] .hero-scrim{
  background:
    linear-gradient(to top,rgba(4,5,6,.97) 3%,rgba(4,5,6,.70) 32%,rgba(4,5,6,.30) 66%,rgba(4,5,6,.66)),
    linear-gradient(to left,rgba(4,5,6,.90),rgba(4,5,6,.44) 48%,rgba(4,5,6,.06) 78%);
}
.hero-wash{position:absolute;inset:0;background:radial-gradient(120% 120% at 18% 6%,var(--evl-brand-12),transparent 58%)}

.hero-in{
  position:relative;display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr;align-items:end;
  transform:translate3d(0,calc(var(--p,0) * -80px),0);opacity:calc(1 - var(--p,0) * 1.5);
}
@media(min-width:1020px){.hero-in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.hero-copy{min-width:0}
.hero .lead{margin-top:var(--s6);max-width:44ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s8)}
.hero-h1{margin-block:var(--s5) 0}
.hero-h1 .ln{display:block;overflow:hidden;padding-block-end:.09em;margin-block-end:-.09em}
.hero-h1 .ln i{
  display:block;font-style:normal;transform:translateY(108%);opacity:0;
  transition:transform 1100ms var(--ease-out),opacity 640ms var(--ease-out);
}
.hero-h1 .ln:nth-child(2) i{transition-delay:110ms}
body.ready .hero-h1 .ln i{transform:none;opacity:1}
.hero-live{display:grid;gap:12px;padding:18px 20px;justify-self:end;width:min(100%,340px)}
.kv{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-block:12px;border-top:1px solid var(--evl-white-8);font-size:.875rem}
.kv .k{display:inline-flex;align-items:center;gap:8px;color:var(--text-muted)}
.kv .v{font-weight:500;font-variant-numeric:tabular-nums}
.hero-live .kv{padding-block:0;border-top:0}

.hero-strip{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--evl-white-8);border:1px solid var(--evl-white-8);
  border-radius:var(--radius-lg);overflow:hidden;
}
@media(min-width:680px){.hero-strip{grid-template-columns:repeat(4,1fr)}}
.hero-strip .cell{background:rgba(10,10,11,.72);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);padding:18px}
.hero-strip .v{font-size:clamp(1.375rem,2.4vw,1.75rem);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hero-strip .k{margin-top:6px;font-size:.625rem;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted)}
.hero > .wrap:has(.hero-strip){
  position:relative;transform:translate3d(0,calc(var(--p,0) * -46px),0);opacity:calc(1 - var(--p,0) * 2);
}

.scrollcue{
  position:absolute;inset-block-end:26px;inset-inline-start:0;inset-inline-end:0;margin-inline:auto;
  width:max-content;display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:calc(1 - var(--p,0) * 4);pointer-events:none;
}
.scrollcue .rail{position:relative;display:block;width:1px;height:46px;background:var(--evl-white-12);overflow:hidden}
.scrollcue .rail i{position:absolute;inset-inline:0;height:16px;background:var(--evl-brand);animation:cue 2.4s var(--ease-out) infinite}
@keyframes cue{0%{transform:translateY(-18px)}100%{transform:translateY(48px)}}
.scrollcue .lbl{font-size:.625rem;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted)}

.btn-glass{
  background:rgba(255,255,255,.10);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--evl-white-12);color:var(--text-primary);
}
.btn-glass:hover{background:rgba(255,255,255,.18);border-color:var(--evl-white-12)}

/* ============================================================ the session HUD
   The signature. Scrolling the page is charging a car: the ring fills with the
   scrollbar, and the power figure tapers past 55% the way a real pack does. */
.hud{
  position:fixed;
  inset-block-end:20px;
  inset-inline-end:20px;
  z-index:70;
  /* width:246px; */
  /* padding:14px 16px; */
  /* border-radius:var(--radius-lg); */
  /* background:rgba(14,15,16,.86) */
  /* -webkit-backdrop-filter:blur(10px); */
  /* backdrop-filter:blur(10px); */
  /* border:1px solid var(--evl-white-12); */
  /* box-shadow:var(--shadow-lg),var(--glow-brand); */
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:center;
  opacity:clamp(0,calc(var(--p,0) * 26),1);
  transform:translate3d(0,calc((1 - clamp(0,calc(var(--p,0) * 26),1)) * 26px),0);
  transition:box-shadow var(--dur-ui) var(--ease-out);
  pointer-events:none;
}
/* .hud.is-full{box-shadow:var(--shadow-lg),var(--glow-brand-strong)} */
body.has-sheet .hud,body.lb-open .hud{opacity:0;visibility:hidden}
.hud-ring{position:relative;width:62px;height:62px;flex:none}
.hud-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
[dir="rtl"] .hud-ring svg{transform:rotate(-90deg) scaleY(-1)}
.hud-ring circle[data-hud-arc]{filter:drop-shadow(0 0 8px rgba(81,255,140,.55))}
.hud-pct{
  position:absolute;inset:0;display:grid;place-items:center;font-size:.8125rem;
  color:var(--text-muted);font-variant-numeric:tabular-nums;direction:ltr;
}
.hud-pct b{
  font-size:1.0625rem;
  font-weight:600;
  color:var(--text-primary);
  letter-spacing:-.02em;
  margin-top:.25rem;
}
.hud-pct span{
  margin-top:-1.25rem;
}
.hud-rows{display:grid;gap:5px;min-width:0}
.hud-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:.6875rem;color:var(--text-muted)}
.hud-row b{font-size:.8125rem;font-weight:600;color:var(--text-primary);direction:ltr;unicode-bidi:isolate}
.hud-meter{margin-top:5px;height:3px;border-radius:var(--radius-pill);background:var(--surface-inset);overflow:hidden}
.hud-meter i{display:block;height:100%;background:var(--evl-brand);box-shadow:0 0 12px rgba(81,255,140,.6)}
@media(max-width:720px){
  .hud{width:auto;grid-template-columns:auto;padding:10px;inset-block-end:14px;inset-inline-end:14px}
  .hud-rows{display:none}
  .hud-ring{width:48px;height:48px}
}

/* ============================================================ track cards */
.track{padding-top:0;overflow:hidden}
.track-shot{display:block;position:relative;margin:0 calc(-1 * clamp(28px,3vw,40px));height:clamp(150px,17vw,210px);overflow:hidden}
.track-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--surface-card),rgba(26,27,29,.1) 58%)}
.track-shot img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-out)}
.track:hover .track-shot img{transform:scale(1.06)}

/* ============================================================ sequence scene */
.seq-in{display:grid;gap:clamp(24px,4vw,64px);grid-template-columns:1fr;align-items:center;width:100%}
@media(min-width:960px){.seq-in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.seq-copy .lead{margin-top:18px}
.seq-copy .h2{margin-top:14px}
.seq-steps{display:grid;gap:6px;margin-top:clamp(20px,2.6vw,34px)}
.seq-steps li{
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:5px;
  padding:12px 14px;border-radius:var(--radius-md);border:1px solid transparent;opacity:.42;
  transition:opacity var(--dur-ui) var(--ease-out),background var(--dur-ui) var(--ease-out),border-color var(--dur-ui) var(--ease-out);
}
.seq-steps li .n{
  grid-row:1 / span 2;align-self:start;width:32px;height:32px;border-radius:var(--radius-pill);
  display:grid;place-items:center;font-size:.6875rem;font-weight:600;font-variant-numeric:tabular-nums;
  border:1px solid var(--evl-white-12);color:var(--text-muted);direction:ltr;
  transition:border-color var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out),background var(--dur-ui) var(--ease-out);
}
.seq-steps li .h4{grid-column:2;display:block}
/* the detail belongs to the step you are on; the rest stay one line each so
   all five fit a single screen without the list scrolling */
.seq-steps li .small{grid-column:2;display:none}
.seq-steps li[aria-current="true"]{opacity:1;background:var(--evl-white-4);border-color:var(--evl-brand-40)}
.seq-steps li[aria-current="true"] .small{display:block}
.seq-steps li[aria-current="true"] .n{border-color:var(--evl-brand-40);color:var(--evl-brand);background:var(--evl-brand-06)}
@media(max-width:959px){
  .seq-steps li:not([aria-current="true"]){display:none}
  .seq-copy .lead{display:none}
}
/* scene headings are set one step down from a page heading — they share the
   screen with a picture, so they cannot take the full display scale */
.scene .h2{font-size:clamp(1.875rem,3.4vw,3rem)}
.scene .lead{font-size:clamp(1rem,1.15vw,1.125rem)}
.seq-stage{
  position:relative;width:100%;aspect-ratio:4/3;max-height:min(58svh,560px);margin-inline:auto;
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--evl-white-12);
  box-shadow:var(--shadow-lg);background:var(--surface-raised);
}
.seq-stage figure{position:absolute;inset:0;margin:0}
.seq-stage img{width:100%;height:100%;object-fit:cover}
.seq-frame{
  position:absolute;inset:0;z-index:30;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--evl-white-8);
  background:linear-gradient(to top,rgba(0,0,0,.45),transparent 46%);
}

/* ============================================================ horizontal rail */
.rail-pin{justify-content:center;gap:clamp(20px,3vw,40px)}
.rail-head{display:grid;gap:16px;width:100%}
@media(min-width:960px){.rail-head{grid-template-columns:1fr;align-items:end;gap:16px}}
.rail-head .h2{margin-top:14px}
/* The stage takes the height the pin has left and the panels are stretched to
   it, so a panel can never run past the bottom of the scene and have its last
   line cut off by .pin's overflow. The picture is the flexible row and the
   copy takes what it needs — text is what must not be clipped, and Kurdish and
   Arabic need about a third more of it than English. */
.rail-stage{width:100%;overflow:hidden;flex:1 1 0%;min-block-size:0;display:flex;align-items:center}
.rail-track{display:flex;gap:clamp(16px,2vw,28px);padding-inline:var(--gutter);width:max-content;
  max-block-size:100%;align-items:stretch}
.rail-panel{
  flex:0 0 auto;width:min(80vw,540px);display:grid;grid-template-rows:minmax(88px,1fr) auto;
  background:var(--surface-card);border:1px solid var(--evl-white-8);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-md);
  transition:border-color var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out);
}
.rail-panel:hover{border-color:var(--evl-brand-40);transform:translateY(-4px)}
.rail-shot{position:relative;display:block;aspect-ratio:16/10;min-block-size:0;overflow:hidden;background:#0D0E10}
.rail-shot img{width:100%;height:100%;object-fit:cover;transition:transform 800ms var(--ease-out)}
/* .rail-shot.is-contain img{object-fit:contain;} */
.rail-panel:hover .rail-shot img{transform:scale(1.05)}
.rail-body{display:grid;gap:10px;align-content:start;padding:clamp(20px,2.4vw,30px)}
.rail-body .h3{display:block}
.rail-body .body{display:block}
.rail-body .linkarrow{margin-top:6px}
.rail-bar{height:2px;border-radius:2px;background:var(--evl-white-8);overflow:hidden;margin-top:4px}
.rail-bar i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--evl-brand);box-shadow:0 0 12px rgba(81,255,140,.55)}

/* ============================================================ film scene */
.film-pin{position:sticky;inset-block-start:0;height:100svh;display:grid;align-items:center;overflow:hidden;padding-block:calc(var(--hdr-h) + 16px) 40px}
.film-media{position:absolute;inset:0;background:#08090A}
.film-media img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.2 - var(--p,0) * .2))}
.film-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(4,5,6,.92),rgba(4,5,6,.55) 50%,rgba(4,5,6,.18)),
    linear-gradient(to top,rgba(4,5,6,.9),transparent 58%);
}
[dir="rtl"] .film-scrim{
  background:
    linear-gradient(to left,rgba(4,5,6,.92),rgba(4,5,6,.55) 50%,rgba(4,5,6,.18)),
    linear-gradient(to top,rgba(4,5,6,.9),transparent 58%);
}
.film-copy{
  position:relative;max-width:min(760px,92%);
  opacity:min(clamp(0,calc((var(--p,0) - .06) * 6),1),clamp(0,calc((.95 - var(--p,0)) * 9),1));
  transform:translate3d(0,calc((1 - clamp(0,calc((var(--p,0) - .06) * 6),1)) * 44px),0);
}
.film-h{font-size:clamp(2.5rem,5.4vw,5rem);margin-block:16px}
[dir="rtl"] .film-h{font-size:clamp(2rem,4.4vw,4rem)}
.film-chips{margin-top:26px}

/* ============================================================ phone deck */
/* the gap is height-driven, not width-driven — on a short laptop screen it is
   the vertical budget that is scarce, and every pixel it gives back goes to
   the cards */
.deck-pin{gap:clamp(14px,2.6svh,44px)}
@media(min-width:900px) and (max-height:840px){.deck-head .lead{display:none}}
.deck-head{width:100%;max-width:var(--prose-max)}
.deck-head .h2{margin-top:14px}
.deck-head .lead{margin-top:16px}
/* The stage is a size container, so the whole fan is expressed in its own
   width and height rather than in viewport units. That is what makes it
   responsive: a card can never be taller than the stage, and the spread is
   derived from the card's own width, so the outermost card lands inside the
   frame at any size instead of being clipped by .pin's overflow.

   The screens are 430 x 932, exactly 1 : 2.1674 — driving the card from its
   height with width:auto keeps that ratio intact. The previous rule set a
   width and then capped max-height, which broke the ratio the moment the
   stage was short and left object-fit cropping the tops off the screenshots. */
.deck-stage{
  position:relative;flex:1 1 0%;min-block-size:0;display:grid;place-items:center;
  container-type:size;
  /* The caps come from the geometry of the open fan, which is wider and taller
     than one card: the outermost card is pushed out 3 spreads, rotated by 3
     tilts (so it claims some of its own height as width) and dropped 3 lifts.
     Solved for both axes, then rounded down for margin. */
  --cardh:min(70cqh, 26cqw);
  --cardw:calc(var(--cardh) / 2.1674);
  --sf:0.5;                      /* spread, as a fraction of the card's width */
  --spread:calc(var(--cardw) * var(--sf));
  --lift:calc(var(--cardh) * .05);
  --tilt:6.5deg;--dir:1;
}
[dir="rtl"] .deck-stage{--dir:-1}
/* narrow screens want a tighter hand, so the cards can stay legible */
@media(max-width:899px){
  .deck-stage{--cardh:min(78cqh, 84cqw);--sf:.20;--lift:calc(var(--cardh) * .03);--tilt:3deg}
}
.deck-card{
  position:absolute;margin:0;
  block-size:var(--cardh);inline-size:auto;aspect-ratio:430/932;
  border-radius:clamp(18px,2vw,28px);border:1px solid var(--evl-white-12);
  background:#0D0E10;
  /* One shadow, not three, and the corners are rounded on the picture rather
     than clipped on the card. A rotating layer that is both clipped and
     triple-shadowed is re-rasterised every frame; this reads the same and
     halves the cost of the scene. */
  box-shadow:0 20px 44px rgba(0,0,0,.6);
}
.deck-card img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* --o is the card's place in the fan, --e the scene's eased progress. Both are
   set from JS: --o once, --e once per frame for the whole deck. */
.deck-card{
  transform:
    translate3d(calc(var(--o,0) * var(--dir,1) * var(--spread) * var(--e,0)),
                calc(var(--ao,0) * var(--lift) * var(--e,0)), 0)
    rotate(calc(var(--o,0) * var(--dir,1) * var(--tilt) * var(--e,0)));
  /* Depth used to come from scale(), which forces a fresh raster every frame.
     Opacity gives the same recession and stays on the compositor. */
  /* opacity:calc(1 - var(--ao,0) * .11 * var(--e,0)); */
}
.deck-foot{width:100%;display:flex;justify-content:center}

/* ============================================================ operator view */
.dash-in{display:grid;gap:clamp(24px,4vw,60px);grid-template-columns:1fr;align-items:center;width:100%}
@media(min-width:1000px){.dash-in{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}}
.dash-copy .h2{margin-top:14px}
.dash-copy .lead{margin-top:16px}
.dash-rows{display:grid;gap:4px;margin-block:clamp(20px,2.6vw,32px) 22px}
.dash-rows li{
  padding:11px 14px;border-radius:var(--radius-md);border:1px solid transparent;opacity:.38;
  transition:opacity var(--dur-ui) var(--ease-out),background var(--dur-ui) var(--ease-out),border-color var(--dur-ui) var(--ease-out);
}
.dash-rows li b{display:block;font-size:.9375rem;font-weight:600;letter-spacing:-.01em}
.dash-rows li span{display:block;margin-top:4px;font-size:.8125rem;line-height:1.45;color:var(--text-muted)}
.dash-rows li[aria-current="true"]{opacity:1;background:var(--evl-white-4);border-color:var(--evl-brand-40)}
@media(max-width:999px){.dash-rows li:not([aria-current="true"]){display:none}}
/* No frame. The captures are 1600 x 1045 transparent windows that carry their
   own corners and drop shadow, so the stage only has to hold the ratio and
   stack them — object-fit is contain, because cover on a window screenshot
   shaves the chrome off its own edges. */
.dash-stage{position:relative;width:100%;aspect-ratio:1600 / 1045}
.dash-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* ============================================================ vehicles rail */
/* the rail is the section's bottom edge, so it takes the padding's place */
.sec:has(.brandrail){padding-block-end:0}
.brandrail{overflow:hidden;border-block:1px solid var(--evl-white-8);background:var(--surface-raised);padding-block:clamp(18px,2.4vw,28px);margin-top:clamp(30px,4vw,52px)}
.brandrail-track{display:flex;align-items:center;gap:clamp(34px,5vw,74px);width:max-content;animation:slide 56s linear infinite}
[dir="rtl"] .brandrail-track{animation-direction:reverse}
.brandrail:hover .brandrail-track{animation-play-state:paused}
.brand-cell{
  flex:none;display:grid;place-items:center;width:clamp(58px,7vw,92px);height:100%;
  opacity:.45;transition:opacity var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out);
}
.brand-cell:hover{opacity:1;transform:scale(1.08)}
.brand-cell img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* ============================================================ payments scene
   Four rails deal into one balance. Every artefact reads two numbers written
   by the frame loop: --in is its own arrival (0 below the fold, 1 landed) and
   --nx is the next artefact's arrival, which is what lets a card that has
   already landed step back instead of competing with the one coming in.
   Nothing here is a photograph — the kit has no picture of a scratch card or a
   cash slip, and a stock one would be the first dishonest image on the page. */

/* the mesh belongs on the sticky panel, not the 380vh section behind it —
   .pin is opaque by design and would paint straight over it */
.scene-pay .pin{background:var(--surface-page)}
.pay-in{display:grid;gap:clamp(28px,4vw,60px);grid-template-columns:1fr;align-items:center}
@media(min-width:960px){.pay-in{grid-template-columns:1.02fr .98fr}}

/* ---- the rail list, left */
.pay-rails{display:grid;gap:6px;margin-top:clamp(20px,2.6vw,34px);padding-inline-start:0;list-style:none}
.pay-rails li{
  display:grid;grid-template-columns:auto 1fr auto;column-gap:14px;row-gap:6px;align-items:center;
  padding:12px 14px;border-radius:var(--radius-md);border:1px solid transparent;opacity:.42;
  transition:opacity var(--dur-ui) var(--ease-out),background var(--dur-ui) var(--ease-out),
             border-color var(--dur-ui) var(--ease-out);
}
.pay-rails li .tile{
  grid-row:1 / span 2;align-self:start;width:36px;height:36px;
  background:var(--evl-white-8);color:var(--text-secondary);
  transition:background var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out);
}
.pay-rails li .h4{grid-column:2;display:block}
.pay-rails li .pay-amt{
  grid-column:3;grid-row:1;font-size:.875rem;font-weight:600;color:var(--text-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:color var(--dur-ui) var(--ease-out);
}
/* the detail belongs to the rail you are on; the rest stay one line each so
   all four fit a single screen without the list scrolling */
.pay-rails li .small{grid-column:2 / span 2;display:none}
.pay-rails li[aria-current="true"]{opacity:1;background:var(--evl-white-4);border-color:var(--evl-brand-40)}
.pay-rails li[aria-current="true"] .small{display:block}
.pay-rails li[aria-current="true"] .tile{background:var(--evl-brand-12);color:var(--evl-brand)}
.pay-rails li[aria-current="true"] .pay-amt{color:var(--evl-brand)}
@media(max-width:959px){
  .pay-rails li:not([aria-current="true"]){display:none}
  .pay-copy .lead{display:none}
}

/* ---- the stage, right */
.pay-stage{display:grid;gap:clamp(12px,1.6vw,18px);align-content:center}

.pay-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:clamp(15px,1.9vw,21px) clamp(18px,2.2vw,26px);
  border-radius:var(--radius-lg);border:1px solid var(--evl-brand-40);
  background:linear-gradient(180deg,var(--evl-brand-06),transparent 70%),var(--surface-card);
  box-shadow:var(--glow-brand);
}
.pay-num{
  font-size:clamp(1.625rem,3vw,2.5rem);font-weight:600;letter-spacing:-.03em;line-height:1;
  color:var(--evl-brand);font-variant-numeric:tabular-nums;
}

.pay-arts{display:grid;gap:clamp(9px,1.1vw,13px)}
.pay-art{
  --in:0;--nx:0;
  margin:0;position:relative;
  display:grid;grid-template-columns:auto 1fr auto;column-gap:14px;row-gap:10px;align-items:center;
  padding:clamp(13px,1.6vw,18px) clamp(15px,1.8vw,20px);
  border-radius:var(--radius-md);border:1px solid var(--evl-white-8);
  background:var(--surface-card);box-shadow:var(--shadow-md);
  transform-origin:50% 100%;
  opacity:calc(var(--in) * (1 - var(--nx) * .48));
  transform:translate3d(0,calc((1 - var(--in)) * 30px),0)
            rotate(calc((1 - var(--in)) * -1.1deg))
            scale(calc(1 - var(--nx) * .028));
}
.pay-mark{
  width:38px;height:38px;border-radius:var(--radius-md);display:grid;place-items:center;
  background:var(--evl-brand-12);color:var(--evl-brand);
  grid-row:1;
}
.pay-art-k{grid-column:2;font-size:.9375rem;font-weight:500;letter-spacing:-.01em}
.pay-art-v{
  grid-column:3;font-size:.9375rem;font-weight:600;color:var(--evl-brand);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.pay-art-tag{grid-column:2 / span 2;display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:.8125rem}
.pay-art-tag .ic{width:15px;height:15px}

/* scratch card — the strip wipes off as the card arrives */
.pay-art--scratch{
  background:
    radial-gradient(70% 140% at 92% 12%,rgba(81,255,140,.14),transparent 60%),
    var(--surface-card);
}
.pay-pin{
  grid-column:2 / span 2;position:relative;display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--radius-sm);
  background:#0A0B0C;border:1px solid var(--evl-white-8);overflow:hidden;
}
.pay-pin-lab{font-size:.625rem;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted)}
.pay-pin-v{font-size:.9375rem;font-weight:600;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.pay-pin-strip{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:.625rem;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:rgba(255,255,255,.5);
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.10) 0 2px,transparent 2px 6px),
    linear-gradient(180deg,#2A2C2F,#1D1F21);
  clip-path:inset(0 0 0 calc(var(--in) * 100%));
}
[dir="rtl"] .pay-pin-strip{clip-path:inset(0 calc(var(--in) * 100%) 0 0)}

/* in-app top-up — the balance bar fills with the card's own arrival */
.pay-fill{
  grid-column:2 / span 2;height:4px;border-radius:var(--radius-pill);
  background:var(--evl-white-8);overflow:hidden;
}
.pay-fill i{
  display:block;height:100%;border-radius:inherit;background:var(--evl-brand);
  transform-origin:0 50%;transform:scaleX(var(--in));
}
[dir="rtl"] .pay-fill i{transform-origin:100% 50%}

/* bank card — a chip instead of an icon, so it reads as a card not a row */
.pay-art--card{width:93%;justify-self:start;background:linear-gradient(150deg,#16181B,#0E0F11 70%)}
.pay-art--card .pay-mark{background:var(--evl-white-8)}
.pay-chip{
  width:23px;height:17px;border-radius:3px;position:relative;
  background:linear-gradient(150deg,#8A9095,#4A4F53);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
.pay-chip::before,.pay-chip::after{
  content:"";position:absolute;background:rgba(0,0,0,.34);
}
.pay-chip::before{inset-inline:3px;top:50%;height:1px;transform:translateY(-.5px)}
.pay-chip::after{inset-block:3px;left:50%;width:1px;transform:translateX(-.5px)}
.pay-art--card .pay-art-k{letter-spacing:.14em;font-variant-numeric:tabular-nums}

/* cash slip — a torn bottom edge, because it is a printed receipt */
.pay-art--cash{width:85%;justify-self:start;padding-block-end:clamp(17px,2.1vw,23px)}
.pay-art--cash::after{
  content:"";position:absolute;inset-block-end:-1px;inset-inline:0;height:5px;
  background:repeating-linear-gradient(90deg,var(--surface-page) 0 5px,transparent 5px 10px);
}
.pay-code{
  font-size:1rem;font-weight:600;letter-spacing:.22em;color:var(--text-primary);
  font-variant-numeric:tabular-nums;
}

/* ---- the payoff row under the pin */
.pay-after{padding-block-start:0}
.payfacts{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,28px);
  padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,28px);
  border-radius:var(--radius-lg);border:1px solid var(--evl-white-8);
  background:var(--surface-raised);
}
.payfacts .pf{display:flex;align-items:center;gap:10px;font-size:.9375rem;color:var(--text-secondary)}
.payfacts .pf .ic{width:18px;height:18px;color:var(--evl-brand);flex:none}
.payfacts .linkarrow{margin-inline-start:auto}
@media(max-width:719px){.payfacts .linkarrow{margin-inline-start:0}}


/* ============================================================ duo block */
.duo{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:1fr;align-items:center}
@media(min-width:920px){.duo{grid-template-columns:1.05fr .95fr}}
.duo-shot{margin:0;position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--evl-white-8);box-shadow:var(--shadow-lg)}
.duo-shot img{width:100%;display:block}
.duo-cap{
  position:absolute;inset-block-end:0;inset-inline:0;padding:16px 18px;font-size:.8125rem;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.86),transparent);
}

/* ============================================================ corridor band */
.scene-band{position:relative;min-height:86svh;display:grid;align-items:center;overflow:hidden}
.band-media{position:absolute;inset:-14% 0;background:#08090A}
.band-media img{width:100%;height:100%;object-fit:cover;transform:translate3d(0,calc((var(--p,0) - .5) * 18vh),0)}
.band-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,5,6,.95),rgba(4,5,6,.42) 58%,rgba(4,5,6,.76))}
.band-copy{position:relative;padding-block:clamp(70px,9vw,140px)}
.band-copy .h2{margin-top:14px}
.band-copy .lead{margin-top:18px}

/* ============================================================ image strips
   Two rows that slide in opposite directions with the scrollbar, and lean into
   the scroll with --vel. Tiles open the same lightbox as the route galleries. */
.sec-strips{overflow:hidden;padding-block-end:clamp(48px,6vw,90px)}
.strips{display:grid;gap:clamp(10px,1.2vw,18px);margin-top:clamp(28px,4vw,48px)}
.strip{overflow:hidden}
.strip-track{display:flex;gap:clamp(10px,1.2vw,18px);width:max-content;transform:translate3d(calc(var(--p,0) * -30%),0,0)}
.strip--rev .strip-track{transform:translate3d(calc(-30% + var(--p,0) * 30%),0,0)}
[dir="rtl"] .strip-track{transform:translate3d(calc(var(--p,0) * 30%),0,0)}
[dir="rtl"] .strip--rev .strip-track{transform:translate3d(calc(30% - var(--p,0) * 30%),0,0)}
.strip-tile{
  position:relative;flex:none;margin:0;padding:0;display:block;
  width:clamp(196px,24vw,352px);aspect-ratio:16/10;
  border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--evl-white-8);cursor:zoom-in;
  transition:box-shadow var(--dur-ui) var(--ease-out);
}
.strip-tile img{
  width:100%;height:100%;object-fit:cover;
  transform:skewY(calc(var(--vel,0) * -.55deg)) scale(1.06);
  transition:transform 260ms var(--ease-out);
}
.strip-tile:hover{box-shadow:0 0 0 1px var(--evl-brand-40),var(--shadow-lg)}
.strip-tile .cap{
  position:absolute;inset-block-end:0;inset-inline:0;z-index:2;padding:12px 14px;font-size:.75rem;
  font-weight:500;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.88),transparent);
  opacity:0;transform:translateY(6px);
  transition:opacity var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out);
}
.strip-tile:hover .cap,.strip-tile:focus-visible .cap{opacity:1;transform:none}
@media(hover:none){.strip-tile .cap{opacity:1;transform:none}}

/* ============================================================ split headings */
[data-split] .wd{display:inline-block;overflow:hidden;vertical-align:bottom;padding-block-end:.08em;margin-block-end:-.08em}
[data-split] .wd i{
  display:inline-block;font-style:normal;transform:translateY(112%);opacity:0;
  transition:transform 820ms var(--ease-out),opacity 520ms var(--ease-out);
  transition-delay:calc(var(--i,0) * 55ms);
}
.rv.in [data-split] .wd i,[data-split].rv.in .wd i,.in [data-split] .wd i{transform:none;opacity:1}

/* ============================================================ media loading
   A frame holds its aspect ratio and fades its picture in, so nothing on the
   page jumps as the network catches up. */
img[data-src]{opacity:0}
img.is-loaded{animation:mediafade 520ms var(--ease-out) both}
@keyframes mediafade{from{opacity:0}to{opacity:1}}

/* ============================================================ route media */
.rmedia{
  position:relative;margin-top:clamp(28px,4vw,52px);border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--evl-white-8);box-shadow:var(--shadow-lg);aspect-ratio:21/9;background:var(--surface-raised);
}
.rmedia img{width:100%;height:100%;object-fit:cover}
.rmedia.is-contain{background:#0D0E10}
.rmedia.is-contain img{object-fit:contain;padding:clamp(16px,2.4vw,36px)}
.rmedia::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 52%)}
.rmedia.is-contain::after{display:none}
.rshot{margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--evl-white-8);box-shadow:var(--shadow-md);background:#0D0E10}
.rshot img{width:100%;display:block}
.rshot.is-contain img{padding:clamp(14px,2vw,26px)}
.shotgrid{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media(min-width:720px){.shotgrid{grid-template-columns:repeat(3,1fr)}}
.shotgrid--1{grid-template-columns:1fr;max-width:760px;margin-inline:auto}
.shotgrid--2{grid-template-columns:1fr}
@media(min-width:720px){.shotgrid--2{grid-template-columns:repeat(2,1fr)}}
.phonerow{display:flex;gap:clamp(12px,1.6vw,22px);flex-wrap:wrap;justify-content:center}
.phoneshot{
  margin:0;flex:0 0 auto;width:clamp(132px,15vw,196px);aspect-ratio:430/932;
  border-radius:clamp(16px,1.8vw,26px);overflow:hidden;border:1px solid var(--evl-white-12);
  box-shadow:var(--shadow-lg);background:#0D0E10;
  transition:transform var(--dur-ui) var(--ease-out),border-color var(--dur-ui) var(--ease-out);
}
.phoneshot:hover{transform:translateY(-6px);border-color:var(--evl-brand-40)}
.phoneshot img{width:100%;height:100%;object-fit:cover}

/* ============================================================ still mode
   html.is-still (core.js) — reduced motion, phones and touch tablets. Every
   scene is unpinned and parked at the resting frame scroll.js gives it —
   except the phone deck, which keeps its fan unless motion is reduced. */
html.is-still{scroll-snap-type:none}
.is-still .pin:not(.deck-pin),.is-still .film-pin{position:static;height:auto;min-height:0;padding-block:clamp(60px,8vw,110px)}
.is-still .scene:not(.scene-deck),.is-still .scene-seq,.is-still .scene-rail,.is-still .scene-film,
.is-still .scene-dash,.is-still .scene-pay{min-height:0}
.is-still .hero-media img,.is-still .film-media img,.is-still .band-media img{transform:none}
.is-still .hero-in,.is-still .hero > .wrap:has(.hero-strip),.is-still .film-copy{transform:none;opacity:1}
.is-still .scrollcue{display:none}
.is-still .hud{display:none}
.is-still .seq-stage{max-height:none}
.is-still .seq-steps li,.is-still .dash-rows li{opacity:1;display:grid}
.is-still .seq-steps li:not([aria-current="true"]),.is-still .dash-rows li:not([aria-current="true"]){display:grid}
.is-still .seq-copy .lead{display:block}
/* .strip--rev .strip-track is (0,2,0) and would otherwise outrank this and
   keep its -30% offset, which left the second strip parked off its start
   while the first sat at zero */
.is-still .rail-track,.is-still .strip-track,.is-still .strip--rev .strip-track{transform:none;animation:none}
.is-still .rail-stage,.is-still .strip{overflow-x:auto}
/* The pin is static here, so the stage has no definite height — a size
   container with no height makes every cqh zero and collapses the cards to
   nothing, and a flex item with basis 0 in an auto-height column collapses
   the same way. Both stages go back to sizing from their content. */
.is-still .rail-stage{flex:0 0 auto}
.is-still .rail-track{max-block-size:none}
.is-still .rail-panel{grid-template-rows:auto auto}
.is-still .strip-tile img{transform:none}
@media (prefers-reduced-motion:reduce){
  .is-still .deck-pin{position:static;height:auto;min-height:0;padding-block:clamp(60px,8vw,110px)}
  .is-still .scene-deck{min-height:0}
  .is-still .deck-stage{flex:0 0 auto;position:static;display:flex;flex-wrap:wrap;gap:14px;
    justify-content:center;container-type:normal}
  .is-still .deck-card{position:static;transform:none !important;
    block-size:auto;inline-size:clamp(150px,19vw,220px)}
  .hero-h1 .ln i{transform:none;opacity:1}
  .brandrail-track{transform:none;animation:none}
  img[data-src]{opacity:1}
  img.is-loaded{animation:none}
}

/* ============================================================ route media, part two
   Figures added when the real photography arrived: the unit render on its own
   plinth, the app hero showing an actual screen instead of a CSS mock-up, and
   captions that read from the media manifest. */
.rmedia,.rshot,.unitshot,.phone.is-shot,.shotgrid figure,.phonerow figure{margin:0}

.mcap{display:block;margin-top:12px;font-size:.8125rem;line-height:1.45;color:var(--text-muted)}
.rmedia .mcap{
  position:absolute;inset-block-end:0;inset-inline:0;z-index:2;margin:0;padding:16px 18px;
  color:#fff;background:linear-gradient(to top,rgba(0,0,0,.86),transparent);
}
.rshot .mcap{padding:0 clamp(14px,2vw,10px) clamp(16px,2vw,12px);margin-top:12px}
.rshot .mcap b{display:block;font-size:.9375rem;font-weight:600;letter-spacing:-.01em;color:var(--text-primary)}
.rshot .mcap span{display:block;margin-top:4px}
.unitshot .mcap{text-align:center;margin-top:16px}

.unitshot{
  position:relative;display:grid;place-items:center;padding:clamp(22px,3vw,46px);
  border-radius:var(--radius-2xl);border:1px solid var(--evl-white-12);
  background:
    radial-gradient(120% 100% at 50% 8%,rgba(81,255,140,.12),transparent 62%),
    linear-gradient(160deg,#17191B,#0C0D0E 64%);
  box-shadow:var(--shadow-lg),0 0 110px rgba(81,255,140,.10);
}
.unitshot img{width:min(100%,300px);height:auto}

/* the empty device frame is 390 x 844; one holding a real capture takes the
   capture's own 430 x 932 so nothing is cropped */
.phone.is-shot{padding:0;overflow:hidden;background:#0D0E10;display:block;aspect-ratio:430/932}
.phone.is-shot::before{display:none}
.phone.is-shot img{width:100%;height:100%;object-fit:cover}


/* ============================================================ corner shape
   Every rounded corner on the site is a squircle where the browser can draw
   one — a continuous superellipse rather than a quarter circle, which is what
   the logo's leaf and the hardware's own mouldings already are.

   corner-shape only does anything where there is a border-radius, so the
   universal selector is free on square elements. The exception is anything
   genuinely circular: a 7px status dot or a window pip drawn as a squircle
   reads as a rendering fault, not as a style. Those are put back to round.

   No @supports fallback is needed beyond the query itself — a browser without
   corner-shape keeps the rounded corners it already had. */
@supports (corner-shape: squircle){
  *,*::before,*::after{corner-shape:squircle}

  .dot,.dot::before,
  .lang-menu .flagdot,
  .dash-top .pip,
  .ld-glow,.ld-wash,
  .track::after,
  .cta::before{corner-shape:round}
}

/* ============================================================ performance
   Three rules, all of them about doing less per frame.

   1. will-change is a promise to the compositor, and a promise costs GPU
      memory for as long as it stands. The engine adds .is-live to a scene
      only while its progress is strictly between 0 and 1, so a scene holds
      a layer while it is moving and gives it back when it is not.

   2. An animated AVIF keeps decoding frames while it is off screen, and an
      infinite marquee keeps the compositor awake for the whole page. Both
      are switched off by the absence of .is-onscreen, which an
      IntersectionObserver in scroll.js maintains.

   3. Nothing here changes how anything looks. */

.is-live .rail-track,
.is-live .strip-track,
.is-live .deck-card,
.is-live .film-media img,
.is-live .band-media img,
.hero .hero-media img{will-change:transform}
/* the payment artefacts move and fade together, so they need both */
.is-live .pay-art{will-change:transform,opacity}

/* An animated AVIF keeps decoding while it is off screen, so it is taken out
   of the box tree entirely — it is absolutely positioned, so that costs no
   layout. The switch is watched on the section rather than on the media: an
   element that has been display:none'd has no box, so an observer looking at
   it directly would never see it come back. */
.hero:not(.is-onscreen) .hero-media,
.scene-film:not(.is-onscreen) .film-media{display:none}

.marquee:not(.is-onscreen) .marquee-track,
.brandrail:not(.is-onscreen) .brandrail-track{animation-play-state:paused}

/* THE PAGE BEHIND AN OPEN SHEET
   ---------------------------------------------------------------------------
   A route sheet covers the viewport completely. "Covered" is not "off screen"
   as far as the browser is concerned, so with a route open the whole of Home
   was still being rendered underneath it: an animated AVIF decoding a
   1280x640 frame every ~70 ms, two marquees running, and a 24,000px document
   rasterising. Scrolling a route page ran at 6 fps because of it — 166 ms a
   frame against Home's 16.7.

   Every route was pixel-diffed with the page behind hidden, in both languages,
   at 1440 and 390, with a stacked sheet as well as a single one: not one pixel
   of it is ever visible. So it is hidden — visibility, not display, so the
   page keeps its layout and its scroll position for when the sheet closes,
   and its focusable content drops out of the tab order while it is covered.

   The AVIFs and the marquees are switched off by name as well. visibility
   stops the painting, but an animated image can still be decoded and a
   running animation still ticks the compositor; those two rules make it
   certain that nothing underneath a sheet is doing any work at all. */
body.has-sheet main,
body.has-sheet footer{visibility:hidden}
body.has-sheet .hero-media,
body.has-sheet .film-media{display:none}
body.has-sheet .marquee-track,
body.has-sheet .brandrail-track{animation-play-state:paused}