/* Fonts (Rubik covers hebrew + latin + cyrillic + arabic, Orbitron is the
   latin-only HUD face) are loaded from index.html via <link> so the browser
   does not have to wait for this stylesheet before requesting them. */

/* ==========================================================================
   OptiCity · Dynamic Lines
   Design system: "Neon Transit HUD"
   Deep-navy void, electric-blue neon, holographic glass, live route lines.
   RTL-first: every directional rule uses CSS logical properties so the
   Hebrew/Arabic (rtl) and Russian/English (ltr) locales both lay out
   correctly when app.js flips document.dir.
   ========================================================================== */

/* --------------------------------------------------------------- 1. RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; }
body { min-height: 100vh; min-height: 100svh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; background: none; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; line-height: 1.15; text-wrap: balance; }
p { text-wrap: pretty; }
:where(svg) { fill: none; }
[hidden] { display: none !important; }

/* -------------------------------------------------------------- 2. TOKENS */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

:root {
  color-scheme: dark;

  /* Ink — deep navy scale */
  --ink-1000: #02060D;
  --ink-900:  #040914;
  --ink-800:  #070E1F;
  --ink-700:  #0A1529;
  --ink-600:  #0E1C36;
  --ink-500:  #142443;
  --ink-400:  #1B3054;

  /* Neon — electric blue family, derived from the OptiCity mark */
  --neon-ice:   #B6E6FF;
  --neon-cyan:  #4FE9FF;
  --neon-sky:   #68C4FF;
  --neon-blue:  #2E9EFF;
  --neon-core:  #0C79D8;
  --neon-deep:  #0B4FBF;
  --neon-abyss: #062A73;

  /* Text — all pairings verified >= 4.5:1 on --ink-800 */
  --text-1: #EDF6FF;   /* 15.8:1 */
  --text-2: #9FBEE4;   /* 10.1:1 */
  --text-3: #7793BC;   /*  6.1:1 */
  --text-on-neon: #03070F;

  /* Glass surfaces */
  --glass-1: rgb(14 28 54 / .48);
  --glass-2: rgb(10 21 41 / .70);
  --glass-3: rgb(7 14 31 / .86);
  --hairline:     rgb(104 196 255 / .16);
  --hairline-mid: rgb(104 196 255 / .32);
  --hairline-hot: rgb(79 233 255 / .58);

  /* Glows */
  --glow-sm: 0 0 12px rgb(46 158 255 / .38);
  --glow-md: 0 0 26px rgb(46 158 255 / .32), 0 0 62px rgb(12 121 216 / .22);
  --glow-lg: 0 0 44px rgb(79 233 255 / .26), 0 0 120px rgb(11 79 191 / .36);
  --glow-text: 0 0 18px rgb(104 196 255 / .55);

  /* Elevation */
  --lift-1: 0 1px 0 rgb(255 255 255 / .05) inset, 0 12px 30px -12px rgb(2 6 13 / .9);
  --lift-2: 0 1px 0 rgb(255 255 255 / .06) inset, 0 30px 70px -28px rgb(2 6 13 / .95);

  /* Radii */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 18px;
  --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  /* Space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Type */
  --font-ui:  "Rubik", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-hud: "Orbitron", "Rubik", system-ui, sans-serif;

  /* Motion */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --t-fast: 160ms;
  --t-base: 260ms;
  --t-slow: 520ms;

  --shell-max: 1240px;
}

/* ---------------------------------------------------------------- 3. BASE */
body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
  background: var(--ink-1000);
  overflow-x: hidden;
}

::selection { background: rgb(79 233 255 / .28); color: var(--text-1); }

:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--neon-core), var(--neon-abyss));
  border-radius: var(--r-pill);
  border: 2px solid var(--ink-900);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--neon-blue), var(--neon-deep)); }

/* ------------------------------------------------------------ 4. BACKDROP */
.site-shell {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: clip;
  /* Keep content clear of notches and the home indicator on phones.
     Resolves to 0 everywhere else. */
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  padding-block-end: env(safe-area-inset-bottom);
  background:
    radial-gradient(120% 80% at 50% -10%, #0A1E44 0%, transparent 58%),
    radial-gradient(90% 60% at 100% 100%, #06183C 0%, transparent 60%),
    linear-gradient(180deg, var(--ink-900) 0%, var(--ink-1000) 100%);
}

/* Scanline weave + vignette + grain, above the field but below the content */
.site-shell::before,
.site-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.site-shell::before {
  background: repeating-linear-gradient(to bottom, rgb(104 196 255 / .05) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
  opacity: .55;
}
.site-shell::after {
  opacity: .3;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 42%, rgb(2 6 13 / .58) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* Aurora blooms */
.ambient {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  will-change: transform;
}
.ambient-one {
  inline-size: clamp(320px, 46vw, 680px);
  block-size: clamp(320px, 46vw, 680px);
  inset-block-start: -14vh;
  inset-inline-end: -10vw;
  background: radial-gradient(circle, rgb(46 158 255 / .40), rgb(11 79 191 / .16) 55%, transparent 72%);
  animation: drift-a 22s var(--ease-out) infinite alternate;
}
.ambient-two {
  inline-size: clamp(300px, 40vw, 600px);
  block-size: clamp(300px, 40vw, 600px);
  inset-block-end: 4vh;
  inset-inline-start: -12vw;
  background: radial-gradient(circle, rgb(79 233 255 / .26), rgb(12 121 216 / .14) 52%, transparent 74%);
  animation: drift-b 27s var(--ease-out) infinite alternate;
}
@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-6%, 8%, 0) scale(1.14); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(8%, -7%, 0) scale(.92); }
}

/* Perspective grid floor — the "city" the lines run through.
   Fixed, not absolute: anchored to the document it would sit below the footer
   and never be seen, so it is pinned to the viewport as a constant horizon.
   Fixed elements add no scrollable overflow, so the negative insets are safe. */
.city-grid {
  position: fixed;
  z-index: 0;
  inset-inline: -30%;
  /* Pivot on the viewport floor. Pushed below it (the old -6vh) the rotated
     plane projected to a ~110px sliver that never read as a horizon. */
  inset-block-end: 0;
  block-size: 60vh;
  pointer-events: none;
  opacity: .85;
  background-image:
    linear-gradient(to right,  rgb(46 158 255 / .28) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(46 158 255 / .22) 1px, transparent 1px);
  background-size: 62px 62px;
  /* 800px perspective at 60deg projects to a ~210px floor at a 900px viewport. */
  transform: perspective(800px) rotateX(60deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgb(0 0 0 / .55) 55%, transparent 92%);
          mask-image: linear-gradient(to top, #000 0%, rgb(0 0 0 / .55) 55%, transparent 92%);
  animation: grid-run 9s linear infinite;
}
@keyframes grid-run {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 62px, 0 62px; }
}

/* Neon route lines with travelling nodes */
.route-line {
  position: absolute;
  z-index: 1;
  block-size: 2px;
  border-radius: var(--r-pill);
  pointer-events: none;
}
.route-line::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgb(104 196 255 / .32) 18%, rgb(79 233 255 / .55) 50%, rgb(104 196 255 / .32) 82%, transparent);
  box-shadow: 0 0 14px rgb(46 158 255 / .5);
}
.route-line i {
  position: absolute;
  inset-block-start: 50%;
  inline-size: 8px;
  block-size: 8px;
  margin-block-start: -4px;
  border-radius: 50%;
  background: var(--neon-ice);
  box-shadow: 0 0 10px var(--neon-cyan), 0 0 26px var(--neon-blue), 0 0 48px rgb(46 158 255 / .5);
  animation: node-run 7s linear infinite;
}
.route-line-one {
  inline-size: min(56vw, 720px);
  inset-block-start: 24vh;
  inset-inline-start: -6vw;
  transform: rotate(-9deg);
  opacity: .9;
}
.route-line-two {
  inline-size: min(46vw, 560px);
  inset-block-start: 72vh;
  inset-inline-end: -8vw;
  transform: rotate(7deg);
  opacity: .65;
}
.route-line i:nth-child(1) { animation-delay: 0s; }
.route-line i:nth-child(2) { animation-delay: -2.4s; }
.route-line i:nth-child(3) { animation-delay: -4.8s; }
.route-line-two i { animation-duration: 9s; }
.route-line-two i:nth-child(1) { animation-delay: -1.2s; }
.route-line-two i:nth-child(2) { animation-delay: -5.6s; }
@keyframes node-run {
  0%   { inset-inline-start: -2%;  opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { inset-inline-start: 102%; opacity: 0; }
}

/* --------------------------------------------------------- 5. PAGE SHELL */
.page-container {
  position: relative;
  z-index: 2;
  inline-size: min(100% - clamp(28px, 6vw, 88px), var(--shell-max));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--s-7), 7vw, var(--s-9));
  padding-block: var(--s-5) var(--s-7);
}

/* ------------------------------------------------- 6. SHARED HUD PRIMITIVES */

/* Animated conic hairline ring, applied via .has-ring */
.has-ring { position: relative; }
.has-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  background:
    conic-gradient(from var(--angle),
      transparent 0 46%,
      rgb(79 233 255 / .85) 58%,
      rgb(46 158 255 / .55) 66%,
      transparent 76% 100%),
    linear-gradient(rgb(104 196 255 / .22), rgb(104 196 255 / .07));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: ring-spin 7s linear infinite;
  pointer-events: none;
}
@keyframes ring-spin { to { --angle: 360deg; } }

/* HUD corner brackets */
.has-brackets > .bracket {
  position: absolute;
  z-index: 2;
  inline-size: 22px;
  block-size: 22px;
  border: 1.5px solid var(--hairline-hot);
  pointer-events: none;
  opacity: .8;
  transition: opacity var(--t-base) var(--ease-out);
}
.has-brackets > .bracket.tl { inset-block-start: 10px; inset-inline-start: 10px; border-inline-end: 0; border-block-end: 0; border-start-start-radius: 10px; }
.has-brackets > .bracket.tr { inset-block-start: 10px; inset-inline-end: 10px;   border-inline-start: 0; border-block-end: 0; border-start-end-radius: 10px; }
.has-brackets > .bracket.bl { inset-block-end: 10px;   inset-inline-start: 10px; border-inline-end: 0; border-block-start: 0; border-end-start-radius: 10px; }
.has-brackets > .bracket.br { inset-block-end: 10px;   inset-inline-end: 10px;   border-inline-start: 0; border-block-start: 0; border-end-end-radius: 10px; }

/* Small caps HUD label */
.hud-label {
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--neon-sky);
}

/* --------------------------------------------------------------- 7. HEADER */
.site-header {
  position: sticky;
  inset-block-start: var(--s-3);
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) clamp(var(--s-3), 2vw, var(--s-5));
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: linear-gradient(var(--glass-2), rgb(7 14 31 / .55));
  -webkit-backdrop-filter: blur(22px) saturate(150%);
          backdrop-filter: blur(22px) saturate(150%);
  box-shadow: var(--lift-1), 0 0 0 1px rgb(2 6 13 / .5);
}
/* Neon underline that lives on the header edge */
.site-header::after {
  content: "";
  position: absolute;
  inset-inline: 12%;
  inset-block-end: -1px;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
  opacity: .7;
  box-shadow: 0 0 12px var(--neon-blue);
}

.header-signal { display: flex; align-items: center; gap: var(--s-3); min-inline-size: 0; }

/* Equaliser signal bars */
.signal-icon {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  block-size: 18px;
  flex: none;
}
.signal-icon i {
  inline-size: 3px;
  border-radius: 2px;
  background: linear-gradient(to top, var(--neon-core), var(--neon-cyan));
  box-shadow: 0 0 8px rgb(79 233 255 / .7);
  animation: signal-pulse 1.2s var(--ease-out) infinite alternate;
}
.signal-icon i:nth-child(1) { block-size: 7px;  animation-delay: 0s; }
.signal-icon i:nth-child(2) { block-size: 13px; animation-delay: .18s; }
.signal-icon i:nth-child(3) { block-size: 18px; animation-delay: .36s; }
@keyframes signal-pulse {
  from { transform: scaleY(.45); opacity: .55; }
  to   { transform: scaleY(1);   opacity: 1; }
}

.system-status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-inline-size: 0;
  padding: 6px var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: rgb(11 79 191 / .16);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.system-status i {
  flex: none;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 0 0 rgb(79 233 255 / .7);
  animation: status-ping 2.2s var(--ease-out) infinite;
}
@keyframes status-ping {
  0%   { box-shadow: 0 0 0 0 rgb(79 233 255 / .7); }
  70%  { box-shadow: 0 0 0 8px rgb(79 233 255 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(79 233 255 / 0); }
}

/* Brand wordmark */
.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding-inline: var(--s-2);
  min-block-size: 44px;
  justify-self: center;
}
.brand-aura {
  position: absolute;
  inset: -40% -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(46 158 255 / .38), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
  animation: aura-breathe 4.5s var(--ease-out) infinite alternate;
}
@keyframes aura-breathe {
  from { opacity: .5; transform: scale(.9); }
  to   { opacity: 1;  transform: scale(1.12); }
}
.brand-image { position: relative; z-index: 1; display: block; }
.brand-image img {
  block-size: clamp(22px, 3.4vw, 30px);
  inline-size: auto;
  /* The source wordmark is mid-blue; lift it so it reads as neon on navy */
  filter: brightness(1.45) saturate(1.1) drop-shadow(0 0 14px rgb(46 158 255 / .65));
}
.brand-node {
  position: absolute;
  inset-block-start: 50%;
  inline-size: 6px;
  block-size: 6px;
  margin-block-start: -3px;
  border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-blue);
}
.brand-node-start { inset-inline-start: -10px; animation: node-blink 3s var(--ease-out) infinite; }
.brand-node-end   { inset-inline-end: -10px;   animation: node-blink 3s var(--ease-out) infinite 1.5s; }
@keyframes node-blink {
  0%, 100% { opacity: .3; transform: scale(.8); }
  50%      { opacity: 1;  transform: scale(1.15); }
}

.header-actions { display: flex; align-items: center; justify-content: flex-end; }

/* --------------------------------------------------- 8. LOCALE PICKER */
.locale-picker { position: relative; }

.locale-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  block-size: 44px;
  padding-inline: var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: linear-gradient(rgb(20 36 67 / .8), rgb(10 21 41 / .8));
  color: var(--text-1);
  font-size: 14px;
  font-weight: 500;
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.locale-trigger svg { inline-size: 18px; block-size: 18px; color: var(--neon-sky); flex: none; }
.locale-trigger svg:last-child {
  inline-size: 15px;
  block-size: 15px;
  color: var(--text-3);
  transform: rotate(90deg);
  transition: transform var(--t-base) var(--ease-out);
}
.locale-trigger:hover { border-color: var(--hairline-mid); box-shadow: var(--glow-sm); }
.locale-trigger:active { transform: translateY(1px); }
.locale-trigger[aria-expanded="true"] {
  border-color: var(--hairline-hot);
  box-shadow: var(--glow-sm);
}
.locale-trigger[aria-expanded="true"] svg:last-child { transform: rotate(270deg); }

.locale-menu {
  position: absolute;
  inset-block-start: calc(100% + var(--s-2));
  inset-inline-end: 0;
  z-index: 50;
  min-inline-size: 232px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-2);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline-mid);
  background: var(--glass-3);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
          backdrop-filter: blur(26px) saturate(150%);
  box-shadow: var(--lift-2), var(--glow-md);
  animation: menu-in var(--t-base) var(--ease-out) both;
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.locale-menu button {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  inline-size: 100%;
  min-block-size: 44px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 14.5px;
  text-align: start;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.locale-menu button b { font-weight: 500; flex: 1; }
.locale-menu button i {
  font-style: normal;
  color: var(--neon-cyan);
  text-shadow: var(--glow-text);
  inline-size: 14px;
  text-align: center;
}
.locale-menu button:hover { background: rgb(46 158 255 / .12); color: var(--text-1); }
.locale-menu button.selected {
  background: linear-gradient(90deg, rgb(46 158 255 / .2), rgb(46 158 255 / .06));
  color: var(--text-1);
  box-shadow: inset 0 0 0 1px var(--hairline-mid);
}

/* -------------------------------------- 9. LANGUAGE MARK (shared SVG icon) */
.language-mark {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 54px;
  block-size: 54px;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: linear-gradient(145deg, rgb(46 158 255 / .16), rgb(6 42 115 / .3));
  color: var(--neon-sky);
  transition: color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-spring);
}
.language-mark svg { inline-size: 30px; block-size: 30px; overflow: visible; }
.language-mark.compact { inline-size: 34px; block-size: 34px; border-radius: var(--r-sm); }
.language-mark.compact svg { inline-size: 20px; block-size: 20px; }

.language-orbit, .language-spark, .language-bubble, .language-script path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.language-orbit  { stroke-width: 1.5; opacity: .45; stroke-dasharray: 4 5; }
.language-spark  { stroke-width: 1.5; opacity: .7; }
.language-bubble { stroke-width: 1.7; }
.language-script path { stroke-width: 1.6; opacity: .85; }
.language-script circle { fill: currentColor; }

/* ------------------------------------------------------------------ 10. HERO */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  align-items: center;
  padding-block-start: clamp(var(--s-5), 5vw, var(--s-8));
  scroll-margin-block-start: 96px;
}
@media (min-width: 1024px) {
  .hero { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
}

.hero-copy { display: flex; flex-direction: column; gap: var(--s-5); min-inline-size: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  align-self: start;
  padding-block: 7px;
  padding-inline: var(--s-3) var(--s-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-mid);
  background: linear-gradient(90deg, rgb(46 158 255 / .2), rgb(46 158 255 / .05));
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--neon-ice);
  box-shadow: inset 0 0 22px rgb(46 158 255 / .12);
}
.eyebrow span {
  color: var(--neon-cyan);
  text-shadow: var(--glow-text);
  font-size: 13px;
  line-height: 1;
  animation: node-blink 2.6s var(--ease-out) infinite;
}

.hero h1 {
  font-size: clamp(1.95rem, 1.35rem + 2.1vw, 3.2rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--text-1);
  text-shadow: 0 0 42px rgb(46 158 255 / .28);
}
.hero h1 span {
  position: relative;
  display: inline-block;
  background: linear-gradient(100deg, var(--neon-ice) 0%, var(--neon-cyan) 34%, var(--neon-blue) 68%, var(--neon-sky) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: sheen 6s var(--ease-out) infinite alternate;
  filter: drop-shadow(0 0 26px rgb(79 233 255 / .38));
}
@keyframes sheen {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

.hero-copy > p {
  max-inline-size: 56ch;
  font-size: clamp(1rem, .95rem + .25vw, 1.14rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-2);
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
}
.trust-row > span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 9px var(--s-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--glass-1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  transition: border-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}
.trust-row > span:hover {
  border-color: var(--hairline-mid);
  color: var(--text-1);
  transform: translateY(-2px);
}
.trust-row > span i {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--neon-cyan), var(--neon-core));
  color: var(--text-on-neon);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 0 10px rgb(79 233 255 / .5);
}

/* -------------------------------------------------------- 11. TUTORIAL PANEL */
.tutorial-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: clamp(var(--s-5), 3vw, var(--s-6));
  border-radius: var(--r-xl);
  background:
    linear-gradient(160deg, rgb(20 36 67 / .62), rgb(7 14 31 / .82));
  -webkit-backdrop-filter: blur(24px) saturate(150%);
          backdrop-filter: blur(24px) saturate(150%);
  box-shadow: var(--lift-2), var(--glow-lg);
  overflow: hidden;
}
/* animated conic ring */
.tutorial-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background:
    conic-gradient(from var(--angle),
      transparent 0 44%,
      rgb(79 233 255 / .9) 56%,
      rgb(46 158 255 / .5) 64%,
      transparent 74% 100%),
    linear-gradient(rgb(104 196 255 / .24), rgb(104 196 255 / .06));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: ring-spin 8s linear infinite;
  pointer-events: none;
}
/* faint HUD lattice inside the panel */
.tutorial-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(to right,  rgb(104 196 255 / .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(104 196 255 / .06) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000, transparent 78%);
          mask-image: radial-gradient(120% 100% at 50% 0%, #000, transparent 78%);
}

.panel-glow {
  position: absolute;
  z-index: -1;
  inset-block-start: -35%;
  /* Symmetric insets instead of a 50% + translate pair, which resolves
     against the wrong edge under dir="rtl". */
  inset-inline: -15%;
  block-size: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(79 233 255 / .3), rgb(46 158 255 / .12) 45%, transparent 70%);
  filter: blur(52px);
  pointer-events: none;
  animation: aura-breathe 6s var(--ease-out) infinite alternate;
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block-end: var(--s-4);
  border-block-end: 1px solid var(--hairline);
}
.panel-header > div { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }

/* Locale-dependent eyebrows stay on Rubik: Orbitron has no Hebrew, Arabic or
   Cyrillic, so using it here would silently change face per language. */
.panel-eyebrow {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  text-shadow: var(--glow-text);
}
.panel-header h2 {
  font-size: clamp(1.32rem, 1.1rem + .8vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text-1);
}
.panel-header p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-3);
  max-inline-size: 46ch;
}

.availability {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 8px var(--s-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline-mid);
  background: rgb(6 42 115 / .35);
  font-family: var(--font-hud);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-3);
  box-shadow: inset 0 0 18px rgb(46 158 255 / .14);
  /* The counter is a number pair, not prose: keep it "1/4" in RTL too. */
  direction: ltr;
  unicode-bidi: isolate;
}
.availability b {
  font-size: 17px;
  font-weight: 800;
  color: var(--neon-cyan);
  text-shadow: var(--glow-text);
}

/* Single column at every width. A 2-up grid fits Hebrew but not the Russian,
   Arabic or English strings, whose longer state labels collide with the card
   copy; one column also keeps the component identical to its mobile form. */
.tutorial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}

/* -- Language / tutorial card -- */
.tutorial-card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  inline-size: 100%;
  min-block-size: 88px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: linear-gradient(150deg, rgb(20 36 67 / .7), rgb(10 21 41 / .55));
  text-align: start;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-spring),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}
/* sweeping light on hover */
.tutorial-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  inline-size: 55%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgb(104 196 255 / .16), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start var(--t-slow) var(--ease-out);
  pointer-events: none;
}
.tutorial-card:not(.unavailable):hover::before,
.tutorial-card:not(.unavailable):focus-visible::before { inset-inline-start: 110%; }

.tutorial-card:not(.unavailable):hover,
.tutorial-card:not(.unavailable):focus-visible {
  transform: translateY(-3px);
  border-color: var(--hairline-hot);
  background: linear-gradient(150deg, rgb(28 54 96 / .8), rgb(12 26 50 / .65));
  box-shadow: var(--lift-1), var(--glow-md);
}
.tutorial-card:not(.unavailable):active { transform: translateY(-1px) scale(.995); }

.tutorial-card:not(.unavailable):hover .language-mark,
.tutorial-card:not(.unavailable):focus-visible .language-mark {
  color: var(--neon-cyan);
  border-color: var(--hairline-hot);
  box-shadow: var(--glow-sm), inset 0 0 20px rgb(79 233 255 / .16);
  transform: translateY(-1px) scale(1.04);
}

.tutorial-copy { display: flex; flex-direction: column; gap: 3px; flex: 1; min-inline-size: 0; }
.tutorial-copy strong {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -.005em;
}
.tutorial-copy small {
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--text-3);
}

.tutorial-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: none;
  inline-size: 92px;
}
.tutorial-action small {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--neon-sky);
  text-wrap: balance;
}
.tutorial-action i {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--neon-cyan), var(--neon-core));
  color: var(--text-on-neon);
  font-style: normal;
  box-shadow: 0 0 0 0 rgb(79 233 255 / .55), 0 8px 20px -8px rgb(46 158 255 / .9);
  animation: play-ping 2.6s var(--ease-out) infinite;
  transition: transform var(--t-base) var(--ease-spring);
}
/* A play glyph is a media control, not text: it points right in RTL too. */
.tutorial-action i svg { inline-size: 22px; block-size: 22px; }
@keyframes play-ping {
  0%   { box-shadow: 0 0 0 0 rgb(79 233 255 / .5),  0 8px 20px -8px rgb(46 158 255 / .9); }
  70%  { box-shadow: 0 0 0 14px rgb(79 233 255 / 0), 0 8px 20px -8px rgb(46 158 255 / .9); }
  100% { box-shadow: 0 0 0 0 rgb(79 233 255 / 0),   0 8px 20px -8px rgb(46 158 255 / .9); }
}
.tutorial-card:hover .tutorial-action i { transform: scale(1.08); }
/* With several languages live at once, synchronised rings read as a strobe.
   Offsetting them turns the pulse into a wave down the list. */
.tutorial-card:nth-of-type(2) .tutorial-action i { animation-delay: -.85s; }
.tutorial-card:nth-of-type(3) .tutorial-action i { animation-delay: -1.7s; }
.tutorial-card:nth-of-type(4) .tutorial-action i { animation-delay: -2.55s; }

/* -- Unavailable state -- */
.tutorial-card.unavailable {
  border-style: dashed;
  border-color: rgb(104 196 255 / .14);
  background: rgb(10 21 41 / .38);
  opacity: .62;
}
.tutorial-card.unavailable .language-mark {
  color: var(--text-3);
  background: rgb(20 36 67 / .4);
  border-color: rgb(104 196 255 / .1);
}
.tutorial-card.unavailable .tutorial-copy strong { color: var(--text-2); }
.tutorial-card.unavailable .tutorial-action small { color: var(--text-3); }
.tutorial-card.unavailable .tutorial-action i {
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--r-pill);
  background: rgb(20 36 67 / .6);
  border: 1px dashed rgb(104 196 255 / .2);
  color: var(--text-3);
  font-size: 15px;
  line-height: 1;
  letter-spacing: .08em;
  box-shadow: none;
  animation: none;
}

/* -------------------------------------------------------- 12. DOWNLOAD PANEL */
.download-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--s-6), 4vw, var(--s-8));
  align-items: center;
  padding: clamp(var(--s-6), 4vw, var(--s-8)) clamp(var(--s-5), 4vw, var(--s-8));
  border-radius: var(--r-xl);
  border: 1px solid var(--hairline);
  background:
    radial-gradient(90% 130% at 100% 0%, rgb(46 158 255 / .16), transparent 62%),
    linear-gradient(160deg, rgb(14 28 54 / .72), rgb(4 9 20 / .88));
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--lift-2);
  overflow: hidden;
}
.download-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-end: -40%;
  inset-inline-start: -10%;
  inline-size: 60%;
  block-size: 90%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(11 79 191 / .5), transparent 68%);
  filter: blur(60px);
  pointer-events: none;
}
@media (min-width: 900px) {
  .download-panel { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); }
}

/* -- Phone mockup -- */
.download-visual {
  display: grid;
  place-items: center;
  perspective: 1200px;
}
.phone-shell {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: clamp(172px, 17vw, 214px);
  aspect-ratio: 9 / 17;
  padding: var(--s-4);
  border-radius: 38px;
  border: 1px solid var(--hairline-mid);
  background:
    radial-gradient(120% 80% at 50% 0%, rgb(46 158 255 / .2), transparent 60%),
    linear-gradient(165deg, #10203C, #050B18 60%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .1),
    0 0 0 6px rgb(7 14 31 / .8),
    0 0 44px rgb(46 158 255 / .3),
    0 40px 70px -30px rgb(2 6 13 / 1);
  transform: rotateY(-14deg) rotateX(6deg) rotateZ(2deg);
  transform-style: preserve-3d;
  animation: phone-float 7s var(--ease-out) infinite alternate;
}
[dir="ltr"] .phone-shell { transform: rotateY(14deg) rotateX(6deg) rotateZ(-2deg); }
@keyframes phone-float {
  from { translate: 0 -6px; }
  to   { translate: 0 10px; }
}
.phone-speaker {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 52px;
  block-size: 5px;
  border-radius: var(--r-pill);
  background: rgb(104 196 255 / .28);
  box-shadow: 0 0 10px rgb(79 233 255 / .4);
}
/* The app mark ships as an opaque square, so present it as what it reads as
   on a phone home screen: a rounded, lit app-icon tile. */
.phone-shell img {
  inline-size: 56%;
  block-size: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 23%;
  border: 1px solid rgb(104 196 255 / .38);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .14),
    0 0 34px rgb(79 233 255 / .5),
    0 0 76px rgb(46 158 255 / .3),
    0 20px 38px -16px rgb(2 6 13 / 1);
  animation: aura-breathe 5s var(--ease-out) infinite alternate;
}
.phone-route {
  position: absolute;
  inset-block-end: 26px;
  inset-inline: 22px;
  block-size: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, transparent, rgb(104 196 255 / .5), transparent);
}
.phone-route i {
  position: absolute;
  inset-block-start: 50%;
  inline-size: 6px;
  block-size: 6px;
  margin-block-start: -3px;
  border-radius: 50%;
  background: var(--neon-ice);
  box-shadow: 0 0 8px var(--neon-cyan), 0 0 18px var(--neon-blue);
  animation: node-run 4.5s linear infinite;
}
.phone-route i:nth-child(1) { animation-delay: 0s; }
.phone-route i:nth-child(2) { animation-delay: -1.5s; }
.phone-route i:nth-child(3) { animation-delay: -3s; }

/* -- Download copy -- */
.download-copy { display: flex; flex-direction: column; gap: var(--s-4); min-inline-size: 0; }
.download-copy > span:first-child {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  text-shadow: var(--glow-text);
}
.download-copy h2 {
  font-size: clamp(1.55rem, 1.15rem + 1.6vw, 2.35rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.02em;
  color: var(--text-1);
  text-shadow: 0 0 34px rgb(46 158 255 / .24);
}
.download-copy > p {
  font-size: clamp(.97rem, .93rem + .2vw, 1.06rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-2);
  max-inline-size: 48ch;
}

.download-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin-block-start: var(--s-1);
}
@media (min-width: 520px) { .download-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.store-link {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-block-size: 60px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline-mid);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-spring),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.store-link::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  inline-size: 50%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .16), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start var(--t-slow) var(--ease-out);
}
.store-link:hover::before, .store-link:focus-visible::before { inset-inline-start: 115%; }
.store-link:hover, .store-link:focus-visible { transform: translateY(-3px); }
.store-link:active { transform: translateY(-1px); }

.store-link i {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--r-sm);
}
.store-link i svg { inline-size: 22px; block-size: 22px; }
.store-link span { display: flex; flex-direction: column; gap: 1px; flex: 1; min-inline-size: 0; }
.store-link small {
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* No opacity here: at 82% over the gradient's dark end this fell to 3.9:1. */
}
.store-link strong { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.store-link > svg {
  flex: none;
  inline-size: 17px;
  block-size: 17px;
  opacity: .55;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
[dir="rtl"] .store-link > svg { transform: scaleX(-1); }
.store-link:hover > svg { opacity: 1; }
[dir="rtl"] .store-link:hover > svg { transform: scaleX(-1) translate(2px, -2px); }
[dir="ltr"] .store-link:hover > svg { transform: translate(2px, -2px); }

/* Primary — neon filled */
.android-link {
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-blue) 45%, #1A88E8);
  color: var(--text-on-neon);
  border-color: rgb(182 230 255 / .5);
  box-shadow: 0 0 26px rgb(46 158 255 / .4), 0 16px 34px -18px rgb(46 158 255 / .95);
}
.android-link i { background: rgb(3 7 15 / .16); color: var(--text-on-neon); }
.android-link:hover, .android-link:focus-visible {
  box-shadow: 0 0 40px rgb(79 233 255 / .55), 0 22px 42px -18px rgb(46 158 255 / 1);
}

/* Secondary — glass */
.apple-link {
  background: linear-gradient(150deg, rgb(20 36 67 / .82), rgb(10 21 41 / .7));
  color: var(--text-1);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: var(--lift-1);
}
.apple-link i {
  background: rgb(104 196 255 / .12);
  color: var(--neon-sky);
  border: 1px solid var(--hairline);
}
.apple-link small { color: var(--neon-sky); }
.apple-link:hover, .apple-link:focus-visible {
  border-color: var(--hairline-hot);
  box-shadow: var(--lift-1), var(--glow-md);
}

.secure-note {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  align-self: start;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-3);
}
.secure-note i {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 17px;
  block-size: 17px;
  border-radius: 50%;
  border: 1px solid var(--hairline-mid);
  background: rgb(46 158 255 / .16);
  color: var(--neon-cyan);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
}

/* ------------------------------------------------------------------ 13. FOOTER */
footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding-block-start: var(--s-7);
  text-align: center;
}
footer::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 20%;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-hot), transparent);
  box-shadow: 0 0 14px rgb(46 158 255 / .5);
}
/* Grid + min-block-size keeps the link a 44px touch target around a 22px mark. */
.footer-brand {
  display: grid;
  place-items: center;
  min-block-size: 44px;
  padding-inline: var(--s-3);
}
.footer-brand img {
  block-size: 22px;
  inline-size: auto;
  filter: brightness(1.35) saturate(1.05) drop-shadow(0 0 12px rgb(46 158 255 / .5));
  opacity: .85;
  transition: opacity var(--t-base) var(--ease-out), filter var(--t-base) var(--ease-out);
}
.footer-brand:hover img { opacity: 1; filter: brightness(1.6) saturate(1.15) drop-shadow(0 0 20px rgb(79 233 255 / .7)); }
footer p { font-size: 14px; font-weight: 300; color: var(--text-3); }
footer > span {
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  /* Solid, not 70% alpha: over the page ground that blended to only 3.6:1. */
  color: var(--text-3);
  /* Keep the mark before the year instead of letting bidi flip it to "2026 ©". */
  direction: ltr;
  unicode-bidi: isolate;
}

/* -------------------------------------------------------------- 14. VIDEO MODAL */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding:
    max(clamp(var(--s-3), 3vw, var(--s-6)), env(safe-area-inset-top))
    max(clamp(var(--s-3), 3vw, var(--s-6)), env(safe-area-inset-right))
    max(clamp(var(--s-3), 3vw, var(--s-6)), env(safe-area-inset-bottom))
    max(clamp(var(--s-3), 3vw, var(--s-6)), env(safe-area-inset-left));
  background: rgb(2 6 13 / .8);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
          backdrop-filter: blur(16px) saturate(120%);
  animation: modal-in var(--t-base) var(--ease-out) both;
}
@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }

.video-dialog {
  position: relative;
  isolation: isolate;
  /* The tutorials are 1080x1920 phone recordings. Sizing the dialog from the
     media aspect keeps a portrait clip from being blown up to a 1000px-wide
     box (where it overflowed its own frame). app.js overwrites --media-aspect
     from the real videoWidth/videoHeight, so a landscape clip still works. */
  --media-aspect: .5625;
  --video-chrome: 76px;
  inline-size: min(100%, calc((min(92vh, 92svh) - var(--video-chrome)) * var(--media-aspect)));
  max-inline-size: 1000px;
  max-block-size: min(92vh, 92svh);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgb(20 36 67 / .9), rgb(4 9 20 / .96));
  box-shadow: var(--lift-2), var(--glow-lg);
  overflow: hidden;
  animation: dialog-in var(--t-slow) var(--ease-spring) both;
}
.video-dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background:
    conic-gradient(from var(--angle), transparent 0 44%, rgb(79 233 255 / .9) 56%, rgb(46 158 255 / .5) 64%, transparent 74% 100%),
    linear-gradient(rgb(104 196 255 / .26), rgb(104 196 255 / .08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: ring-spin 8s linear infinite;
  pointer-events: none;
}
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.video-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-block-end: 1px solid var(--hairline);
  background: rgb(7 14 31 / .5);
}
.video-header > div { display: flex; align-items: center; gap: var(--s-3); min-inline-size: 0; }
.video-header > div > div { display: flex; flex-direction: column; gap: 1px; min-inline-size: 0; }
.video-header small {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--neon-cyan);
}
.video-header h2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.video-header button {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: rgb(20 36 67 / .7);
  color: var(--text-2);
  font-size: 22px;
  line-height: 1;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.video-header button:hover {
  background: rgb(46 158 255 / .22);
  border-color: var(--hairline-hot);
  color: var(--text-1);
  transform: rotate(90deg);
}

/* aspect-ratio reserves the player box before metadata arrives, so the dialog
   never collapses to the video element's 150px intrinsic size (no CLS).
   object-fit: contain keeps any off-ratio clip undistorted. */
.video-frame {
  flex: 1;
  display: grid;
  place-items: center;
  inline-size: 100%;
  aspect-ratio: var(--media-aspect);
  max-block-size: calc(min(92vh, 92svh) - var(--video-chrome));
  background: #000;
}
.video-frame video {
  inline-size: 100%;
  block-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  background: #000;
}

/* -------------------------------------- 15. POINTER + SCROLL ENHANCEMENTS (JS) */

/* Header densifies once the page has scrolled past the hero fold */
.site-header.is-stuck {
  background: linear-gradient(rgb(4 9 20 / .92), rgb(4 9 20 / .78));
  border-color: var(--hairline-mid);
  box-shadow: var(--lift-2), 0 0 34px rgb(46 158 255 / .18);
}

/* Cursor-tracked spotlight inside the language cards */
.tutorial-card { --mx: 50%; --my: 50%; }
.tutorial-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(230px circle at var(--mx) var(--my), rgb(79 233 255 / .18), transparent 68%);
  transition: opacity var(--t-base) var(--ease-out);
}
.tutorial-card:not(.unavailable):hover::after { opacity: 1; }

/* Pointer parallax on the phone mockup */
.phone-shell {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}
.download-panel.is-tracking .phone-shell {
  animation: none;
  transform: rotateY(calc(-14deg + var(--tilt-y))) rotateX(calc(6deg + var(--tilt-x))) rotateZ(2deg);
  transition: transform 260ms var(--ease-out);
}
[dir="ltr"] .download-panel.is-tracking .phone-shell {
  transform: rotateY(calc(14deg + var(--tilt-y))) rotateX(calc(6deg + var(--tilt-x))) rotateZ(-2deg);
}

/* -- Scroll reveal --
   Only hidden once app.js has confirmed it will drive the reveal (html.reveal-on),
   so the content is never stranded invisible if scripting fails. */
.reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-on [data-reveal].is-revealed { opacity: 1; transform: none; }

/* --------------------------------------------------------------- 16. RESPONSIVE */
@media (max-width: 1023px) {
  .hero { padding-block-start: var(--s-5); }
  .tutorial-panel { order: 2; }
}

@media (max-width: 767px) {
  .site-header {
    /* Equal side columns keep the wordmark optically centred even though the
       signal cluster and locale button have different widths. */
    grid-template-columns: 1fr auto 1fr;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-md);
  }
  .system-status { font-size: 11.5px; padding: 5px var(--s-2); }
  .locale-trigger { padding-inline: var(--s-2); gap: 5px; font-size: 13px; }
  .locale-trigger span { display: none; }
  .brand-image img { block-size: 24px; }
  .panel-header { flex-direction: column; align-items: stretch; }

  /* --- Phone compositing budget ---
     The blend-mode scanline sheet is a full-viewport fixed layer that has to be
     re-composited on every scroll frame, and a 90px blur on two large animated
     blooms is the other expensive pass. Both are near-invisible at 2-3x DPR,
     so drop them and lighten the remaining glass rather than ship scroll jank. */
  .site-shell::before { display: none; }
  .ambient { filter: blur(58px); }
  .trust-row > span,
  .apple-link {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .site-header,
  .tutorial-panel,
  .download-panel {
    -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
  }
  .availability { align-self: flex-start; }
  .route-line-one { inset-block-start: 30vh; }
  .city-grid { block-size: 42vh; }
}

@media (max-width: 479px) {
  .tutorial-card { padding: var(--s-3); gap: var(--s-2); min-block-size: 80px; }
  .language-mark { inline-size: 46px; block-size: 46px; }
  .language-mark svg { inline-size: 26px; block-size: 26px; }
  .tutorial-copy strong { font-size: 15px; }
  .tutorial-action { inline-size: 78px; }
  /* 9.5px is unreadable held at arm's length; 11px is the floor for a label. */
  .tutorial-action small { font-size: 11px; letter-spacing: .03em; }
  .header-signal .system-status { display: none; }
}

/* Landscape phones: a 60vh floor would eat most of a ~375px-tall viewport. */
@media (max-height: 520px) and (orientation: landscape) {
  .city-grid { block-size: 38vh; }
  .page-container { padding-block: var(--s-4) var(--s-6); }
  .hero { padding-block-start: var(--s-4); }

  /* The tutorials are portrait, so on a short viewport the player is height-
     bound and shrinks fast. Claw back every pixel of chrome: thinner modal
     padding, a compact header, and 96vh instead of 92vh. The video's own
     fullscreen control remains the real escape hatch for this orientation. */
  .video-modal { padding: var(--s-2); }
  .video-dialog {
    --video-chrome: 50px;
    max-block-size: min(96vh, 96svh);
    inline-size: min(100%, calc((min(96vh, 96svh) - var(--video-chrome)) * var(--media-aspect)));
  }
  .video-frame { max-block-size: calc(min(96vh, 96svh) - var(--video-chrome)); }
  .video-header { padding: 4px var(--s-2) 4px var(--s-3); }
  .video-header .language-mark.compact { display: none; }
  .video-header small { font-size: 9.5px; }
  .video-header h2 { font-size: 14px; }
}

/* Tighten the very wide desktop rhythm */
@media (min-width: 1400px) {
  :root { --shell-max: 1320px; }
}

/* ------------------------------------------------------- 17. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero h1 span { -webkit-text-fill-color: transparent; }
  .phone-shell { transform: none; }
}

/* Users who prefer less transparency get solid surfaces */
@media (prefers-reduced-transparency: reduce) {
  .site-header, .tutorial-panel, .download-panel, .locale-menu, .video-dialog {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background: var(--ink-800);
  }
}

/* ------------------------------------------------------------------ 18. PRINT */
@media print {
  .ambient, .city-grid, .route-line, .panel-glow, .site-shell::before, .site-shell::after { display: none; }
  body, .site-shell { background: #fff; color: #000; }
}