/* ==========================================================
   SomatiX Redesign POC — stylesheet
   Electric Anatomy tokens, taken from
   brand/SomatiX_Brand_Guide_Electric_Anatomy.md
========================================================== */

:root {
  --navy:        #0B1320;
  --navy-2:      #0E1826;
  --ice:         #F8FAFF;
  --white:       #FFFFFF;
  --blue:        #007BFF;
  --blue-lift:   #3D9BFF;
  --cyan:        #00D1FF;
  --mint:        #12F7D6;
  --coral:       #FF6B6B;

  --ink-inv:     #F8FAFF;
  --ink-inv-2:   #C8D3E3;
  --ink-inv-3:   #8B99AE;
  --line-inv:    #233044;

  --font-display: 'Fraunces', Georgia, serif;
  --font-ui:      'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-ar:      'Rubik', system-ui, sans-serif;

  /* Both scale with the window instead of stalling at a fixed cap. On a 27"
     display the old values froze at 64px / 38rem, so the hero occupied about a
     quarter of the screen and read as small no matter how wide the window got. */
  --gut: clamp(20px, 4.5vw, 112px);
  --col: clamp(20rem, 32vw, 44rem);
}

[dir="rtl"] { --font-display: 'Rubik', system-ui, sans-serif; }

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

/* CSS scroll-snap was tried first and does not deliver "one gesture, one
   state": a gentle wheel nudge falls short of the snap threshold and springs
   back to where it started, and a hard flick skipped a state even with
   `scroll-snap-stop: always`. The pager in poc-scroll.js owns paging instead,
   so snapping is off here. The markers remain as scroll targets. */
html { scroll-behavior: auto; scroll-snap-type: none; }

/* Scroll targets only — absolutely positioned so they add no height of their
   own. #story owns the height and the sticky stage sits in flow inside it. */
/* Offset comes from an explicit --i on each marker. `nth-of-type` counted the
   stage div as a sibling, which stacked two markers on the same position. */
.snap {
  position: absolute; inset-inline: 0; height: 1px; pointer-events: none;
  top: calc(var(--i) * 100vh);
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink-inv);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[dir="rtl"] body { font-family: var(--font-ar); }

img { max-width: 100%; display: block; }

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

.skip {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100;
  background: var(--white); color: var(--navy);
  padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 15px;
  transition: top 140ms ease-out;
}
.skip:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

.hdr {
  position: fixed; inset-inline: 0; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 20px;
  padding: 18px var(--gut);
  background: linear-gradient(to bottom, rgba(11,19,32,.92), rgba(11,19,32,0));
  pointer-events: none;
}
.hdr > * { pointer-events: auto; }
.hdr-logo { height: clamp(24px, 1.45vw, 34px); width: auto; }
.hdr-nav { display: flex; gap: clamp(20px, 1.6vw, 34px); margin-inline-start: clamp(28px, 2.6vw, 56px); }
.hdr-nav a {
  color: var(--ink-inv-2); text-decoration: none; font-size: clamp(15px, .76vw, 17px); font-weight: 500;
  padding: 6px 2px; border-bottom: 1px solid transparent;
}
.hdr-nav a:hover { color: var(--ink-inv); border-bottom-color: var(--cyan); }
.hdr-right { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }

.poc-flag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--coral);
  border: 1px solid rgba(255,107,107,.4); border-radius: 4px; padding: 5px 9px;
}

.lang {
  display: inline-flex; border: 1px solid var(--line-inv); border-radius: 8px; overflow: hidden;
}
.lang-btn {
  min-height: 44px; min-width: 46px; padding: 0 12px;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  color: var(--ink-inv-3);
}
.lang-btn[aria-pressed="true"] { background: rgba(0,123,255,.18); color: var(--ink-inv); }
.lang-btn:hover { color: var(--ink-inv); }

/* Brand cluster: logo + Beta badge. Two logos, swapped by theme so the mark
   stays legible on both the dark and light backgrounds. */
.hdr-brand { display: inline-flex; align-items: center; gap: 12px; }
.logo-main { display: none; }
.logo-inverse { display: block; }
[data-theme="light"] .logo-main { display: block; }
[data-theme="light"] .logo-inverse { display: none; }

.beta-badge {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan);
  border: 1px solid rgba(0, 209, 255, .4); border-radius: 100px; padding: 4px 9px;
  white-space: nowrap;
}
[dir="rtl"] .beta-badge { font-family: var(--font-ar); letter-spacing: 0; }

/* v1-style controls: single-button language toggle (globe + target-language
   label) and a sun/moon theme toggle — matching the rest of the site. */
.lang-toggle, .theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--line-inv); color: var(--ink-inv-2);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.theme-toggle { min-width: 40px; padding: 0 10px; }
.lang-toggle:hover, .theme-toggle:hover { color: var(--ink-inv); border-color: var(--cyan); }
.lang-toggle svg, .theme-toggle svg { display: block; }
[dir="rtl"] .lang-toggle { font-family: var(--font-ar); letter-spacing: 0; }

/* -------------------------------------------------------------- story */

/* Four screens of scroll. The stage sticks for all of it, then releases into
   the outro. Using a negative margin here instead made the stage overlap the
   first section below it by a full viewport. */
#story { position: relative; height: 400vh; }

#stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  z-index: 2;
  background: var(--navy);
  overflow: hidden;
  display: grid;
  grid-template-columns: var(--col) 1fr;
  align-items: center;
}

#stage-canvas { position: absolute; inset: 0; }
#stage-canvas canvas { display: block; width: 100% !important; height: 100% !important; }

/* The copy column sits above the canvas but never over the figure: the
   figure is framed into the free half by the camera keyframes. */
.copy {
  position: relative; z-index: 3;
  padding-inline-start: var(--gut);
  padding-block: 24px;
  max-width: var(--col);
}

.panel {
  grid-area: 1 / 1;
  position: absolute; inset-block: auto; top: 50%;
  inset-inline-start: var(--gut);
  width: var(--col);
  transform: translateY(calc(-50% + var(--shift, 0px)));
  /* Never taller than the stage: a state that runs off the fold is a state
     the reader never finishes. */
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  scrollbar-width: none;
  transition: opacity 120ms linear;
  will-change: opacity, transform;
}
.panel::-webkit-scrollbar { display: none; }
/* Dense states carry a data block, so they run a step down the type scale. */
#p3 h2, #p4 h2 { font-size: clamp(1.7rem, 2.5vw, 2.35rem); }
#p3 .body-sm, #p4 .body-sm { margin-bottom: 20px; font-size: .96rem; }
[data-tier="stepped"] .panel { transition: opacity 260ms ease-out; }

/* The supporting scale rides with the display size. Left fixed, an 11px
   eyebrow and a 17px lede under a 112px headline read as a different page. */
.eyebrow {
  font-family: var(--font-mono); font-size: clamp(11px, .58vw, 14px); letter-spacing: .18em;
  text-transform: uppercase; color: var(--cyan); margin: 0 0 clamp(16px, 1.4vw, 28px);
}
[dir="rtl"] .eyebrow { letter-spacing: 0; font-family: var(--font-ar); font-weight: 500; }
/* JetBrains Mono carries no Arabic, so anything with Arabic words in it moves
   to Rubik. Purely-Latin metadata (IDs, units) stays mono on purpose. */
[dir="rtl"] .def-meta, [dir="rtl"] .ex-move, [dir="rtl"] .ex-tags span, [dir="rtl"] .src {
  font-family: var(--font-ar); letter-spacing: 0; text-transform: none; font-size: .82rem;
}
/* Latin runs inside Arabic text must not reorder around the Arabic. */
.def-meta, .src, .wl-val { unicode-bidi: isolate; }

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  text-wrap: balance;
}
/* Fluid all the way up. The ceilings exist only to stop absurd sizes on a
   projector, not to cap ordinary desktops. */
h1 { font-size: clamp(2.4rem, 4.9vw, 7rem); line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 3.4vw, 4.4rem); }
[dir="rtl"] h1, [dir="rtl"] h2 { letter-spacing: 0; line-height: 1.2; }

.lede {
  font-size: clamp(1.05rem, 1.02vw, 1.45rem);
  color: var(--ink-inv-2);
  max-width: 34ch;
  margin: 0 0 clamp(26px, 2.4vw, 40px);
}
.body-sm { font-size: clamp(1rem, .85vw, 1.2rem); color: var(--ink-inv-2); max-width: 46ch; margin: 0 0 26px; }

/* --------------------------------------------------------------- CTAs */

.cta-row { display: flex; flex-wrap: wrap; gap: clamp(10px, .8vw, 16px); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: clamp(48px, 3.1vw, 58px); padding: 0 clamp(22px, 1.5vw, 32px); border-radius: 10px;
  font-family: var(--font-ui); font-size: clamp(15px, .8vw, 18px); font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}
[dir="rtl"] .btn { font-family: var(--font-ar); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-lift); }
.btn-ghost { background: transparent; color: var(--ink-inv); border-color: var(--line-inv); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }

/* -------------------------------------------------------- muscle card */

.def {
  border-top: 1px solid var(--line-inv);
  padding-top: 18px; margin-top: 4px;
}
.def-name {
  font-family: var(--font-display); font-size: 1.35rem; margin: 0 0 6px; font-weight: 500;
}
[dir="rtl"] .def-name { font-family: var(--font-ar); }
.def-meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--ink-inv-3); text-transform: uppercase; margin: 0 0 12px;
}
.def-text { font-size: .98rem; color: var(--ink-inv-2); margin: 0; max-width: 44ch; }

.src {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--ink-inv-3); margin-top: 16px;
}
.src b { color: var(--ink-inv-2); font-weight: 500; }

/* ------------------------------------------------------- exercise map */

.ex {
  border: 1px solid var(--line-inv); border-radius: 12px;
  padding: 18px 20px; background: rgba(16,27,42,.62);
  backdrop-filter: none;
}
.ex-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ex-name { font-size: 1.06rem; font-weight: 600; margin: 0; }
.ex-move { font-family: var(--font-mono); font-size: 11px; color: var(--ink-inv-3); letter-spacing: .06em; }
.ex-tags { display: flex; gap: 8px; margin: 10px 0 16px; }
.ex-tags span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-inv-3); border: 1px solid var(--line-inv); border-radius: 4px; padding: 4px 8px;
}

#role-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.role { display: flex; align-items: center; gap: 10px; font-size: .95rem; }
.role-swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.role[data-role="primary"] .role-swatch { background: var(--blue); }
.role[data-role="secondary"] .role-swatch { background: var(--mint); }
.role-name { font-weight: 500; }
/* Colour is never the only cue: every row carries its role in words. */
.role-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px;
}
[dir="rtl"] .role-tag { font-family: var(--font-ar); letter-spacing: 0; }
.role[data-role="primary"] .role-tag { color: #9ACBFF; background: rgba(0,123,255,.18); }
.role[data-role="secondary"] .role-tag { color: #6FEFDA; background: rgba(18,247,214,.14); }
/* The role tag sits at the end of the row now that the muscle ID is gone. */
.role-tag { margin-inline-start: auto; }
.ex-note { font-size: .84rem; color: var(--ink-inv-3); margin: 16px 0 0; }

/* -------------------------------------------------------- workload s4 */

.legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 18px; padding: 0; list-style: none; }
/* The approved Arabic labels are long enough that the row wraps 2 + 1, which
   reads as a broken scale. Stacked, it reads as the ordered scale it is. */
[dir="rtl"] .legend { flex-direction: column; gap: 8px; }
.legend li { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink-inv-2); }
.legend i { width: 22px; height: 8px; border-radius: 2px; flex: none; }
.legend .lg-low  { background: #2E6E93; }
.legend .lg-mid  { background: var(--mint); }
.legend .lg-high { background: var(--coral); }

.wl { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 18px; }
.wl h3 {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-inv-3); margin: 0 0 8px; font-weight: 400;
}
[dir="rtl"] .wl h3 { font-family: var(--font-ar); letter-spacing: 0; }
.wl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wl li { display: flex; gap: 10px; font-size: .9rem; border-bottom: 1px solid var(--line-inv); padding-bottom: 5px; }
.wl-name { color: var(--ink-inv-2); }
.wl-val {
  margin-inline-start: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--ink-inv); unicode-bidi: isolate;
}
.wl-unit { font-family: var(--font-mono); font-size: 10px; color: var(--ink-inv-3); letter-spacing: .1em; }

.demo-flag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--coral); border: 1px solid rgba(255,107,107,.34); border-radius: 4px;
  padding: 5px 9px; margin-bottom: 16px;
}
[dir="rtl"] .demo-flag { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; }

.shot { margin: 16px 0 0; display: flex; gap: 14px; align-items: flex-start; }
.shot img { border: 1px solid var(--line-inv); border-radius: 6px; width: 240px; height: auto; flex: none; }
.shot figcaption { font-size: .8rem; color: var(--ink-inv-3); margin: 0; max-width: 22ch; align-self: flex-end; }
.wl-unit { display: block; margin: -6px 0 14px; }

/* ------------------------------------------------------- leader line */

#leader { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity 140ms linear; }
#leader-path { fill: none; stroke: var(--cyan); stroke-width: 1.25; }
#leader-dot { fill: none; stroke: var(--cyan); stroke-width: 1.25; r: 4.5; }

#leader-label {
  position: absolute; z-index: 3; pointer-events: none;
  padding: 2px 10px 3px;
  max-width: 15rem;
  transition: opacity 140ms linear;
}
/* The tick sits on the side the leader line arrives from. */
#leader-label[data-dir="right"] { border-left: 1px solid var(--cyan); text-align: left; }
#leader-label[data-dir="left"]  { border-right: 1px solid var(--cyan); text-align: right; }
#leader-name { display: block; font-size: .95rem; font-weight: 600; color: var(--ink-inv); }
#leader-meta {
  display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  color: var(--cyan); margin-top: 2px;
}

/* ------------------------------------------------------------- rail */

.rail {
  position: absolute; z-index: 4; inset-inline-end: var(--gut); top: 50%;
  transform: translateY(-50%);
  display: grid; gap: 6px;
}
.rail-dot {
  width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.rail-dot::after {
  content: ''; width: 22px; height: 2px; background: var(--line-inv); border-radius: 2px;
  transition: background 200ms ease-out, width 200ms ease-out;
}
.rail-dot.is-on::after { background: var(--cyan); width: 34px; }
.rail-dot:hover::after { background: var(--ink-inv-3); }

#progress-bar {
  position: absolute; inset-inline: 0; bottom: 0; height: 2px; z-index: 4;
  background: var(--line-inv);
}
#progress-bar::after {
  content: ''; display: block; height: 100%; width: calc(var(--p, 0) * 100%);
  background: var(--cyan);
}

.scroll-hint {
  position: absolute; z-index: 4; inset-inline-start: var(--gut); bottom: 34px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-inv-3);
}
[dir="rtl"] .scroll-hint { font-family: var(--font-ar); letter-spacing: 0; }

/* ----------------------------------------------------------- loading */

#stage-loader {
  position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; gap: 14px;
  justify-items: center; background: var(--navy);
}
#stage-loader p {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-inv-3); margin: 0;
}
.load-bar { width: 140px; height: 2px; background: var(--line-inv); overflow: hidden; }
.load-bar::after {
  content: ''; display: block; height: 100%; width: 40%; background: var(--cyan);
  animation: slide 1.4s ease-in-out infinite;
}
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce) { .load-bar::after { animation: none; width: 100%; opacity: .4; } }

/* [hidden] must beat the display rules below, or the fallback covers the stage.
   #stage-poster carries `display:flex`, which otherwise overrides its `hidden`
   attribute and leaves the poster + "Explore in 3D" sitting on top of the
   auto-loaded 3D model on desktop. It must obey `hidden` like the others. */
#stage-loader[hidden], #stage-fallback[hidden], #leader-label[hidden],
#stage-poster[hidden] { display: none !important; }

#stage-fallback {
  position: absolute; inset: 0; z-index: 5; display: grid; place-content: center;
  padding: var(--gut); text-align: center; background: var(--navy);
}
#stage-fallback p { color: var(--ink-inv-2); max-width: 42ch; margin: 0 auto; }

/* ------------------------------------------------ outro: shared shell */

.outro { background: var(--navy); }
/* No centred container. The hero copy starts at --gut from the viewport edge,
   so every section below must too, or the page has two different left edges on
   a wide screen. Measure is held per text block instead. */
.outro section { padding: clamp(72px, 10vh, 132px) var(--gut); }

/* --------------------------------------------------- dual audience */

.end h2 { max-width: 22ch; }
/* Full-bleed section, but the pair stays a readable pair rather than drifting
   to opposite ends of a 27" screen. */
.end-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 96px); margin-top: clamp(40px, 5vh, 64px); max-width: 86rem; }
/* A rule, not a card. Two same-size boxes side by side is the lazy container. */
.end-item { border-top: 1px solid var(--line-inv); padding-top: 22px; }
.end-item:first-child { border-top-color: var(--blue); }
.end-item:last-child { border-top-color: var(--mint); }
.end-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cyan); margin: 0 0 14px;
}
[dir="rtl"] .end-label { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; }
.end-item h3 { font-family: var(--font-display); font-size: clamp(1.3rem, 1.9vw, 1.7rem); font-weight: 500; margin: 0 0 12px; letter-spacing: -.02em; }
[dir="rtl"] .end-item h3 { font-family: var(--font-ar); letter-spacing: 0; }
.end-item > p { color: var(--ink-inv-2); margin: 0 0 26px; font-size: 1rem; max-width: 46ch; }

/* --------------------------------------------------- product proof */

.proof-head { max-width: 46rem; }
/* Same step as h2 — one display size for one role across the page. */
.proof-title { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 4.4rem); font-weight: 400; letter-spacing: -.025em; margin: 0 0 18px; }
[dir="rtl"] .proof-title { font-family: var(--font-ar); letter-spacing: 0; }
/* Emphasis by cut and colour, not a gradient fill. */
.proof-title em { font-style: italic; color: var(--cyan); }
.proof-sub { color: var(--ink-inv-2); font-size: 1.05rem; margin: 0; max-width: 52ch; }

.proof-tabs { display: inline-flex; gap: 2px; margin: 36px 0 32px; border: 1px solid var(--line-inv); border-radius: 10px; padding: 3px; }
.proof-tab {
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--ink-inv-3);
  font-family: var(--font-ui); font-size: 15px; font-weight: 500;
}
[dir="rtl"] .proof-tab { font-family: var(--font-ar); }
.proof-tab:hover { color: var(--ink-inv); }
.proof-tab.is-on { background: var(--blue); color: #fff; }

.shot-lg, .shot-sm { margin: 0; }
.shot-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); margin-top: clamp(16px, 2.5vw, 32px); }
.chrome {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border: 1px solid var(--line-inv); border-bottom: 0;
  border-radius: 10px 10px 0 0; background: #0E1826;
}
.chrome-dots { display: flex; gap: 5px; }
.chrome-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-inv); }
.chrome-url { font-family: var(--font-mono); font-size: 11px; color: var(--ink-inv-3); unicode-bidi: isolate; direction: ltr; }
.chrome-url span { color: var(--ink-inv-2); }
.chrome-tag {
  margin-inline-start: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cyan);
  border: 1px solid rgba(0,209,255,.4); border-radius: 100px; padding: 4px 10px;
}
[dir="rtl"] .chrome-tag { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; }
.chrome-tag-alt { color: var(--mint); border-color: rgba(18,247,214,.4); }
.proof-img { width: 100%; height: auto; border: 1px solid var(--line-inv); border-radius: 0 0 10px 10px; }
.proof-panel figcaption { color: var(--ink-inv-3); font-size: .88rem; margin-top: 12px; }

/* ------------------------------------------------------- core loop */

.loop { border-top: 1px solid var(--line-inv); }
.loop ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px);
}
/* The numbers carry real sequence — this is a four-step loop, not decoration. */
.loop-n { font-family: var(--font-mono); font-size: 12px; color: var(--ink-inv-3); letter-spacing: .1em; }
.loop-t { font-family: var(--font-display); font-size: clamp(1.2rem, 1.7vw, 1.55rem); font-weight: 500; margin: 14px 0 10px; letter-spacing: -.02em; }
[dir="rtl"] .loop-t { font-family: var(--font-ar); letter-spacing: 0; }
.loop-d { color: var(--ink-inv-2); font-size: .95rem; margin: 0; max-width: 40ch; }

/* ---------------------------------------------------------- footer */

.site-foot { padding: clamp(56px, 7vh, 88px) var(--gut) 40px; border-top: 1px solid var(--line-inv); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 64px); max-width: 100rem; }
.foot-logo { height: 24px; width: auto; margin-bottom: 16px; }
.foot-brand p { color: var(--ink-inv-3); font-size: .92rem; margin: 0; max-width: 34ch; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot-col h4 {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-inv-3); margin: 0 0 4px; font-weight: 400;
}
[dir="rtl"] .foot-col h4 { font-family: var(--font-ar); letter-spacing: 0; }
.foot-col a { color: var(--ink-inv-2); text-decoration: none; font-size: .92rem; }
.foot-col a:hover { color: var(--cyan); }
.foot-bottom {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  margin-top: clamp(40px, 6vh, 64px); padding-top: 20px; border-top: 1px solid var(--line-inv);
  color: var(--ink-inv-3); font-size: .82rem;
}
.foot-poc { color: var(--ink-inv-3); font-size: .78rem; margin: 20px 0 0; max-width: 90ch; opacity: .75; }

/* ------------------------------------------------------ login btn */

.btn-login {
  min-height: clamp(38px, 2.3vw, 46px); padding: 0 clamp(16px, 1.1vw, 24px); border-radius: 8px;
  background: var(--blue); color: #fff; font-size: clamp(14px, .74vw, 16px); font-weight: 600;
  display: inline-flex; align-items: center; text-decoration: none;
}
.btn-login:hover { background: var(--blue-lift); }
[dir="rtl"] .btn-login { font-family: var(--font-ar); }

/* -------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  :root { --col: min(30rem, 46vw); }
}

/* Mobile: the SAME pinned scroll-story as desktop — one state per scroll — but
   the live WebGL model is replaced by four pre-rendered pose stills
   (assets/renders/pose-*.webp), crossfaded per state by home-scroll.js. This
   keeps the story experience without shipping three.js + the 2.5 MB GLB to
   phones. The figure holds the top of the screen; the copy is pinned below it
   and swaps in sync, exactly like the desktop opacity tween. */
@media (max-width: 900px) {
  /* #stage keeps its sticky 100vh from the base rule; just drop the two-column
     grid so the figure + copy stack vertically instead. */
  #stage { grid-template-columns: 1fr; }
  #stage-canvas { display: none; }   /* no live canvas on mobile */

  /* Pose stills fill the top region, dropped below the fixed header so the
     figure never crowds it. */
  #stage-poses { position: absolute; inset: 9% 0 44% 0; z-index: 1; }
  #stage-poses img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; object-position: center top;
    opacity: 0; will-change: opacity;
  }
  /* Robust fade into the copy: a navy gradient painted over the lower figure
     region. (mask-image on the <img> depended on the figure filling the fade
     zone, so with a letterboxed contain-fit it often showed nothing at all.) */
  #stage-poses::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
    background: linear-gradient(to bottom, rgba(11, 19, 32, 0), var(--navy) 86%);
    pointer-events: none;
  }

  /* Copy is pinned to the lower region; one state shows at a time (opacity is
     driven by the JS tween, same as desktop). Dense states scroll internally. */
  .copy { display: contents; }
  .panel {
    top: auto; bottom: 0; inset-inline: 0;
    height: 47%; max-height: 47%; width: 100%;
    transform: translateY(var(--shift, 0px));
    padding: 14px var(--gut) 20px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .panel::-webkit-scrollbar { display: none; }
  /* The inline dashboard shot in s4 is redundant with the product-proof section
     below and costs vertical room the copy needs; drop it on phones. */
  #p4 .shot { display: none; }
  /* Story chrome that belongs to the pinned desktop experience. Keep .snap in
     place (the pager measures its rects) and just hide the visible furniture. */
  #progress-bar, #leader, #leader-label { display: none; }
  .hdr { padding: 12px 16px; gap: 10px; }
  .hdr-logo { height: 22px; }
  .hdr-right { gap: 8px; flex: none; min-width: 0; }
  .lang { flex: none; }
  /* The prototype flag is a reviewer's note, not a nav item; on a phone it
     costs the language toggle its place, so it drops to a dot. */
  .poc-flag { padding: 0; width: 10px; height: 10px; border-radius: 50%;
              background: var(--coral); border: 0; flex: none; }
  /* Shrunk to a dot visually, but the wording stays for screen readers. */
  .poc-flag-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  h2 { font-size: clamp(1.6rem, 6.4vw, 2.1rem); }
  .lede, .body-sm { font-size: 1rem; max-width: none; }
  .def-text, .ex-note { max-width: none; }
  .wl { grid-template-columns: 1fr; gap: 14px; }
  .rail { inset-inline-end: 8px; }
  .scroll-hint { display: none; }
  .shot img { max-width: 100%; }
  .end-grid { grid-template-columns: 1fr; gap: 30px; }
  .shot-row { grid-template-columns: 1fr; }
  .loop ol { grid-template-columns: 1fr; gap: 28px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .foot-brand { grid-column: 1 / -1; }
  .proof-tabs { width: 100%; }
  .proof-tab { flex: 1; padding: 0 10px; }
  .hdr-nav { display: none; }
  .btn-login { min-height: 34px; padding: 0 12px; font-size: 13px; }
  /* Leader lines are suppressed on mobile: at this size the label either
     covers the muscle or leaves the canvas. The muscle name stays in the
     copy panel, which is where a phone reader looks anyway. */
  #leader, #leader-label { display: none; }
}

@media (max-width: 380px) {
  .cta-row { display: grid; }
  .btn { width: 100%; }
}

/* Stage 5: 44px minimum tap-target height on touch/mobile (WCAG 2.5.5).
   Height only, to avoid overflowing the compact homepage header. */
@media (max-width: 900px) {
  .hdr-nav a, .foot-col a, .lang-btn, .btn, .btn-login, .skip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .hdr-nav a, .lang-btn, .btn, .btn-login { justify-content: center; }
  .foot-col a { justify-content: flex-start; }
}

/* Mobile / reduced-motion 3D poster (tap-to-load the live model) */
#stage-poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 1rem;
  text-align: center;
}
#stage-poster img {
  max-width: 100%;
  max-height: 74%;
  object-fit: contain;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,.45));
}
.stage-3d-btn {
  min-height: 44px;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 15px; font-weight: 600; line-height: 1;
  cursor: pointer;
}
[dir="rtl"] .stage-3d-btn { font-family: var(--font-ar); }
.stage-3d-btn:hover { background: var(--blue-lift); }

/* Pose stills are mobile-only; on desktop the live 3D canvas runs instead.
   Scoped as min-width so it can't override the mobile rule above by source
   order. (home-scroll.js injects the image layers only on mobile anyway.) */
@media (min-width: 901px) { #stage-poses { display: none; } }

/* ============================================================ light theme
   The home story is authored dark; light mode remaps the core tokens so the
   whole page flips, then fixes the handful of hardcoded-dark surfaces and the
   accent-as-text contrast. The 3D stage / pose backgrounds are transparent and
   sit on var(--navy), so they follow the remap; the live 3D clear colour is set
   per-theme in home-scroll.js. */
[data-theme="light"] {
  --navy:      #F4F7FC;   /* page + stage background */
  --navy-2:    #E9EEF6;
  --ink-inv:   #0B1320;   /* primary text */
  --ink-inv-2: #33415A;   /* secondary text */
  --ink-inv-3: #5E6B80;   /* tertiary / meta text */
  --line-inv:  #D3DCEA;   /* hairlines */
  --cyan:      #0684A8;   /* accent used AS TEXT (eyebrows, tags, rule) — darkened for contrast on light */
}
[data-theme="light"] body { color: var(--ink-inv); }
/* Header fade to the light background instead of navy. */
[data-theme="light"] .hdr {
  background: linear-gradient(to bottom, rgba(244, 247, 252, .94), rgba(244, 247, 252, 0));
}
/* Surfaces that were hardcoded dark. */
[data-theme="light"] .ex { background: rgba(255, 255, 255, .72); }
[data-theme="light"] .chrome { background: #E9EEF6; }
[data-theme="light"] .proof-img,
[data-theme="light"] .shot img { border-color: var(--line-inv); }
/* Accent chips carried light-on-dark colours; darken for light. */
[data-theme="light"] .role[data-role="primary"] .role-tag { color: #0663b3; background: rgba(0, 123, 255, .12); }
[data-theme="light"] .role[data-role="secondary"] .role-tag { color: #0b8f7d; background: rgba(18, 247, 214, .18); }
/* Coral demo/flag text needs a touch more depth on a light field. */
[data-theme="light"] .demo-flag { color: #d64545; border-color: rgba(214, 69, 69, .4); }