/* ==========================================================================
   TradeBotLab — design system
   Direction: "Trading Terminal + Software Lab", now with a full light theme,
   layered depth, CSS 3D objects and a dedicated visual per landing section.
   Everything is driven by custom properties so both themes stay in sync.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #04070e;
  --bg-soft: #070c16;
  --bg-elev: #0a1019;
  --surface-1: #0c131f;
  --surface-2: #111c2b;
  --surface-3: #172437;

  --border: rgba(146, 172, 214, 0.14);
  --border-strong: rgba(146, 172, 214, 0.3);
  --text: #e8f0fb;
  --text-strong: #ffffff;
  --muted: #90a5c2;

  --accent: #11d47c;
  --accent-soft: rgba(17, 212, 124, 0.13);
  --accent-ink: #03230f;
  --accent-2: #31b8f2;
  --accent-2-soft: rgba(49, 184, 242, 0.12);
  --accent-3: #8d84ff;
  --accent-3-soft: rgba(141, 132, 255, 0.14);
  --gold: #f3b54a;
  --gold-soft: rgba(243, 181, 74, 0.13);
  --warn: #f3b54a;
  --danger: #ff5f6f;

  --glass: linear-gradient(158deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.012));
  --glass-strong: linear-gradient(158deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.02));
  --panel: linear-gradient(175deg, rgba(17, 28, 43, 0.95), rgba(8, 13, 22, 0.93));
  --grid-line: rgba(146, 172, 214, 0.055);
  --tile: rgba(255, 255, 255, 0.02);
  --brand-gradient: linear-gradient(102deg, var(--accent), var(--accent-2) 52%, var(--accent-3));

  --shadow-1: 0 44px 84px -52px rgba(0, 0, 0, 0.96);
  --shadow-2: 0 24px 52px -34px rgba(0, 0, 0, 0.92);
  --glow-accent: 0 0 0 1px rgba(17, 212, 124, 0.25), 0 24px 60px -34px rgba(17, 212, 124, 0.55);
  --ring: 0 0 0 3px rgba(17, 212, 124, 0.35);
  --scene-blend: screen;
  --scene-strength: 1;
  /* How far the sheet after the hero is pulled up over the hero's pin. */
  --flow-overlap: 62vh;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f2f6fc;
  --bg-soft: #e8eff9;
  --bg-elev: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f7faff;
  --surface-3: #ebf1f9;

  --border: rgba(12, 34, 66, 0.1);
  --border-strong: rgba(12, 34, 66, 0.2);
  --text: #0a1729;
  --text-strong: #030d1b;
  --muted: #57697f;

  --accent: #0a9457;
  --accent-soft: rgba(10, 148, 87, 0.1);
  --accent-ink: #ffffff;
  --accent-2: #0b7fa6;
  --accent-2-soft: rgba(11, 127, 166, 0.1);
  --accent-3: #4a4fd8;
  --accent-3-soft: rgba(74, 79, 216, 0.1);
  --gold: #9a6a12;
  --gold-soft: rgba(154, 106, 18, 0.1);
  --warn: #9a6a12;
  --danger: #cf3546;

  --glass: linear-gradient(158deg, #ffffff, #f6faff);
  --glass-strong: linear-gradient(158deg, #ffffff, #eef5fd);
  --panel: linear-gradient(175deg, #ffffff, #f4f8fd);
  --grid-line: rgba(12, 34, 66, 0.075);
  --tile: rgba(12, 34, 66, 0.018);
  --brand-gradient: linear-gradient(102deg, var(--accent), var(--accent-2) 52%, var(--accent-3));

  --shadow-1: 0 30px 60px -40px rgba(12, 34, 66, 0.42);
  --shadow-2: 0 18px 40px -30px rgba(12, 34, 66, 0.32);
  --glow-accent: 0 0 0 1px rgba(10, 148, 87, 0.18), 0 22px 45px -30px rgba(10, 148, 87, 0.35);
  --ring: 0 0 0 3px rgba(10, 148, 87, 0.3);
  --scene-blend: normal;
  --scene-strength: 0.85;
}

:root {
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --container: 1220px;
  /* Persian is set in Vazirmatn — a typeface drawn for Persian UI text rather
     than an Arabic fallback bolted onto a Latin family. */
  --font-fa: "Vazirmatn", "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --font-en: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* the mono stack carries the Arabic and Latin text faces as tail fallbacks:
     a Persian string dropped into a monospace label then renders in the site's
     own Persian face instead of whatever the OS mono happens to be */
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Vazirmatn", "Noto Sans Arabic", "Inter", monospace;
  --header-height: 74px;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--header-height) + 16px); }

html { scroll-behavior: smooth; }

body.page {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 520px at 12% -8%, color-mix(in oklab, var(--accent-2) 14%, transparent), transparent 62%),
    radial-gradient(900px 460px at 88% 2%, color-mix(in oklab, var(--accent) 11%, transparent), transparent 58%),
    radial-gradient(700px 420px at 50% 100%, color-mix(in oklab, var(--accent-3) 9%, transparent), transparent 65%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  color: var(--text);
  font-family: var(--font-en);
  font-size: clamp(15px, 0.94rem + 0.16vw, 17px);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}

body.page--fa { font-family: var(--font-fa); line-height: 1.85; }

/* The dark blueprint reads as an ambient glow; on white it has to read as
   printed depth, so the light theme gets a crisper, cooler wash. */
:root[data-theme="light"] body.page {
  background-image:
    radial-gradient(1100px 520px at 8% -12%, color-mix(in oklab, var(--accent-2) 17%, transparent), transparent 58%),
    radial-gradient(880px 460px at 92% -2%, color-mix(in oklab, var(--accent) 15%, transparent), transparent 56%),
    radial-gradient(820px 480px at 50% 104%, color-mix(in oklab, var(--accent-3) 13%, transparent), transparent 66%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 44%, var(--bg-soft) 100%);
}

h1, h2, h3, h4 { line-height: 1.24; margin: 0 0 var(--space-3); font-weight: 700; color: var(--text-strong); }
body.page--fa h1, body.page--fa h2, body.page--fa h3 { line-height: 1.5; }
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.55rem, 1.15rem + 1.5vw, 2.35rem); letter-spacing: -0.015em; }
h3 { font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.45rem); }
p { margin: 0 0 var(--space-4); }

a { color: var(--accent); text-decoration: none; transition: color 0.2s var(--ease-out); }
a:hover { color: color-mix(in oklab, var(--accent) 78%, var(--text-strong)); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }

img, canvas, svg { max-width: 100%; display: block; }
ul, ol { padding-inline-start: 1.2em; }
::selection { background: color-mix(in oklab, var(--accent) 35%, transparent); }

.muted { color: var(--muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-block-start: -120px; inset-inline-start: var(--space-4); z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { inset-block-start: var(--space-3); color: var(--accent-ink); }

/* ------------------------------------------------------------------ layout */
.container {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.container--narrow { max-width: 840px; }

/* The section rhythm breathes with the viewport instead of holding a desktop
   value on a phone: 72px a side on a wide screen is right, and the same 72px
   on a 390px screen is almost two hundred between two blocks of copy. */
.section { position: relative; padding-block: clamp(3rem, 5.4vw, 4.5rem); }
.section--tight { padding-block: clamp(2.25rem, 4vw, 3rem); }
.section--alt::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--surface-2) 70%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 84px);
  opacity: 0.75;
}
.section--alt > .container { position: relative; }
.section--page { padding-block-start: var(--space-7); }
.section--lift {
  position: relative; z-index: 2;
  margin-block-start: -6vh;
  background: var(--bg);
  border-start-start-radius: var(--radius-xl);
  border-start-end-radius: var(--radius-xl);
  box-shadow: 0 -40px 70px -50px rgba(0, 0, 0, 0.55);
}
.section--cta {
  isolation: isolate;
  background:
    radial-gradient(720px 340px at 50% 0%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 72%),
    var(--bg-elev);
  border-block-start: 1px solid var(--border);
  overflow: hidden;
}

.section-head { max-width: 780px; margin-block-end: clamp(1.5rem, 3vw, 2rem); }
.section-head p { color: var(--muted); margin: 0; }
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--space-3);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-2);
  background: var(--accent-2-soft); border: 1px solid color-mix(in oklab, var(--accent-2) 30%, transparent);
  padding: 3px 12px; border-radius: 999px;
}
.subhead { margin-block: var(--space-6) var(--space-4); }
.section-cta { margin-block-start: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --------------------------------------------------- section decoration */
/* The page is wide, so every section carries one quiet moving element in its
   margins. It is clipped by the wrapper, never by the section itself, so no
   layout (sticky or otherwise) is affected. */
.sec-decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.sec-decor i { position: absolute; display: block; }
.sec-decor--a i:nth-child(1) {
  inset-block-start: 4%; inset-inline-end: 3%; width: clamp(140px, 18vw, 260px); aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--accent) 20%, transparent);
  border-inline-start-color: transparent; border-block-end-color: transparent;
  animation: decor-spin 32s linear infinite;
}
.sec-decor--a i:nth-child(2) {
  inset-block-start: 4%; inset-inline-end: 3%; width: clamp(84px, 11vw, 160px); aspect-ratio: 1;
  margin: clamp(28px, 3.5vw, 50px); border-radius: 50%;
  border: 1px dashed color-mix(in oklab, var(--accent-2) 24%, transparent);
  animation: decor-spin 46s linear infinite reverse;
}
.sec-decor--a i:nth-child(3) {
  inset-block-end: 6%; inset-inline-start: -4%; width: clamp(180px, 26vw, 380px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent-3) 20%, transparent), transparent 68%);
  animation: decor-drift 18s ease-in-out infinite alternate;
}
.sec-decor--b i:nth-child(1) {
  inset-block-end: 7%; inset-inline-start: 1%; width: 190px; height: 150px;
  background-image: radial-gradient(color-mix(in oklab, var(--accent-2) 42%, transparent) 1.4px, transparent 1.4px);
  background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(70% 70% at 20% 20%, #000, transparent 76%);
  mask-image: radial-gradient(70% 70% at 20% 20%, #000, transparent 76%);
  opacity: 0.7;
}
.sec-decor--b i:nth-child(2) {
  inset-block-start: 0; inset-block-end: 0; inset-inline-end: 11%; width: 1px;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--accent) 30%, transparent), transparent);
}
.sec-decor--b i:nth-child(3) {
  inset-block-start: 22%; inset-inline-end: 11%; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent-2) 14%, transparent);
  animation: decor-slide 11s ease-in-out infinite alternate;
}
.sec-decor--c i:nth-child(1) {
  inset-block-start: 8%; inset-inline-end: 4%; width: clamp(120px, 16vw, 210px); aspect-ratio: 1;
  border-radius: 34%; rotate: 18deg;
  border: 1px solid color-mix(in oklab, var(--accent) 18%, transparent);
  animation: decor-drift 21s ease-in-out infinite alternate-reverse;
}
.sec-decor--c i:nth-child(2) {
  inset-block-end: 10%; inset-inline-end: 12%; width: clamp(60px, 8vw, 110px); aspect-ratio: 1;
  border-radius: 30%; rotate: -14deg;
  border: 1px dashed color-mix(in oklab, var(--accent-3) 26%, transparent);
  animation: decor-drift 16s ease-in-out infinite alternate;
}
.sec-decor--c i:nth-child(3) {
  inset-block-start: 40%; inset-inline-start: -3%; width: clamp(150px, 22vw, 300px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%);
  animation: decor-drift 24s ease-in-out infinite alternate;
}
@keyframes decor-spin { to { transform: rotate(360deg); } }
@keyframes decor-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(3%, -5%, 0) scale(1.08); }
}
@keyframes decor-slide { from { transform: translateY(0); } to { transform: translateY(240px); } }

.card-grid { display: grid; gap: var(--space-4); }
/* A fixed minimum wider than the phone's own column is the classic way a grid
   gives a 320px screen a horizontal scrollbar: cap it at the column width. */
.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }
.card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

/* ---------------------------------------------------------------- skeletons */
/* Loading is reported per section instead of by covering the whole page: a
   block that is still waiting on data, an image decode or a canvas draw paints
   a neutral placeholder first and is swapped for the real thing the moment it
   is ready. Placeholders are pinned over their host, so nothing reflows when
   the real content lands and the page stays usable while it waits. */
.sk-host { position: relative; }
.sk-layer {
  position: absolute; inset: 0; display: none; gap: var(--space-4);
  pointer-events: none; z-index: 1;
}
/* Guarded by `html.js`: the class is written by the inline script in <head>, so
   a browser without JavaScript never hides real content behind a placeholder
   that nothing would ever clear. */
html.js .sk-host.is-loading > :not(.sk-layer) { visibility: hidden; }
html.js .sk-host.is-loading > .sk-layer { display: grid; }

.skeleton {
  position: relative; overflow: hidden; border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--surface) 76%, var(--border));
  min-height: 12px;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--text) 13%, transparent), transparent);
  animation: sk-sweep 1.6s linear infinite;
}
@keyframes sk-sweep { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(100%, 0, 0); } }
dir[dir="rtl"] .skeleton::after,
[dir="rtl"] .skeleton::after { animation-name: sk-sweep-rtl; }
@keyframes sk-sweep-rtl { from { transform: translate3d(100%, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }

.skeleton--text { height: 0.85em; border-radius: 999px; }
.skeleton--title { height: 1.5em; width: 62%; border-radius: 999px; }
/* The media block keeps the shape of what it stands in for, so nothing moves
   when the real canvas or image takes its place. */
.skeleton--media { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }
.skeleton--thumb { aspect-ratio: 3 / 2; border-radius: var(--radius-md); }
.skeleton--chip { height: 26px; width: 96px; border-radius: 999px; }

.sk-card { display: grid; gap: var(--space-3); align-content: start; }
.sk-rows { display: grid; gap: var(--space-2); }

/* A skeleton that sits in the flow (rather than over a host) still needs the
   sweep to respect the reading direction. */
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; opacity: 0.4; }
}

/* --------------------------------------------------------- page flow cap */
/* The page after the hero rides up through the hero's opening: it is pulled up
   by most of the pin, so by the time the doors have parted the sheet already
   fills the lower half of the frame. The cap paints the sheet edge and the
   glow that make the rest of the site read as unfolding out of the hero, while
   the page background stays visible underneath. */
.page-flow { position: relative; z-index: 2; transform-origin: 50% 0; }
html.js .page-flow { margin-block-start: calc(-1 * var(--flow-overlap, 62vh)); }
@media (max-width: 900px) { html.js { --flow-overlap: 44vh; } }
.page-flow__cap {
  position: absolute; inset-inline: 0; inset-block-start: 0; height: 58vh; pointer-events: none;
  border-start-start-radius: var(--flow-radius, 42px);
  border-start-end-radius: var(--flow-radius, 42px);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 58%, transparent 100%);
}
.page-flow__cap::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 2px;
  border-radius: 999px; background: var(--brand-gradient); opacity: 0.85;
}
.page-flow__cap::after {
  content: ""; position: absolute; inset-block-start: -30px; inset-inline: 8%; height: 60px;
  background: radial-gradient(60% 100% at 50% 100%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 72%);
  filter: blur(6px);
}

/* ---------------------------------------------------------- section spine */
/* A fixed map of the sections on the page. Consistency is the whole point, so
   the rail is built from a single repeating row size: every row is exactly
   `--spine-row` tall, every label is truncated to the same width, and the dot
   is a fixed column on the inline-end edge. Nothing can drift — no numbering,
   no per-row padding, no variable-height rows — so the dots land on one line
   and the labels on another. The list width is fixed for the same reason: the
   pills are all the same size, which is what makes the rail read as a rail. */
.section-spine {
  position: fixed; inset-block-start: 50%; inset-inline-end: clamp(10px, 1.6vw, 28px);
  translate: 0 -50%; z-index: 30; display: none;
  --spine-dot: 7px;
  --spine-pad: 11px;
  --spine-row: 26px;
  --spine-w: 168px;
}
.section-spine__rail {
  position: absolute; width: 1px; display: block;
  /* Centred on the dot column, and starting/ending on the first/last dot. */
  inset-inline-end: calc(var(--spine-pad) + var(--spine-dot) / 2 - 0.5px);
  inset-block: calc(var(--spine-row) / 2);
  background: color-mix(in oklab, var(--border-strong) 45%, transparent);
}
.section-spine__rail i {
  position: absolute; inset-block-start: 0; inset-inline: -1px; height: 0%; display: block;
  background: var(--brand-gradient);
  transition: height 0.2s linear;
}
.section-spine__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-rows: var(--spine-row); width: var(--spine-w);
}
.section-spine__list li { margin: 0; min-height: var(--spine-row); }
.section-spine a {
  display: flex; align-items: center; gap: 8px; height: var(--spine-row);
  padding-inline: var(--spine-pad);
  border: 1px solid transparent; border-radius: 999px;
  color: var(--muted); text-decoration: none;
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
              color 0.25s var(--ease-out);
}
.section-spine__label {
  flex: 1 1 auto; min-width: 0;
  font-size: 0.68rem; font-weight: 600; line-height: 1;
  text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: 0.52; transition: opacity 0.25s var(--ease-out);
}
.section-spine__dot {
  flex: 0 0 var(--spine-dot); width: var(--spine-dot); height: var(--spine-dot);
  border-radius: 50%;
  background: color-mix(in oklab, var(--border-strong) 92%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--bg) 92%, transparent);
  transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out);
}
.section-spine a:hover,
.section-spine a:focus-visible { background: color-mix(in oklab, var(--surface) 80%, transparent); border-color: var(--border); color: var(--text-strong); }
.section-spine a:hover .section-spine__label,
.section-spine a:focus-visible .section-spine__label { opacity: 1; }
.section-spine a:hover .section-spine__dot { background: var(--accent); transform: scale(1.2); }
.section-spine a.is-active {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border-color: color-mix(in oklab, var(--accent) 34%, transparent);
  color: var(--text-strong);
}
.section-spine a.is-active .section-spine__label { opacity: 1; }
.section-spine a.is-active .section-spine__dot {
  background: var(--accent); transform: scale(1.35);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
}
@media (min-width: 1280px) { html.js .section-spine { display: block; } }
@media (prefers-reduced-motion: reduce) {
  .section-spine__rail i { transition: none; }
}

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 40;
  backdrop-filter: blur(12px);
  background: color-mix(in oklab, var(--bg) 84%, transparent);
  border-block-end: 1px solid transparent;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.site-header.is-scrolled {
  border-block-end-color: var(--border);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
}
.site-header__inner {
  min-height: var(--header-height);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text-strong); }
/* The mark ships in two inks and both are in the DOM: CSS picks, so switching
   theme swaps the logo without a request and without a flash. */
.brand__mark {
  position: relative; display: grid; place-items: center;
  width: 40px; height: 40px; flex: 0 0 40px;
}
.brand__logo {
  grid-area: 1 / 1; display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 8px 16px color-mix(in oklab, var(--accent) 24%, transparent));
}
.brand__logo--lit { display: none; }
[data-theme="dark"] .brand__logo--ink { display: none; }
[data-theme="dark"] .brand__logo--lit { display: block; }
.brand__text { display: flex; flex-direction: column; }
.brand__text strong { font-family: var(--font-en); font-size: 1.06rem; letter-spacing: 0.01em; }
.brand__text small { color: var(--muted); font-size: 0.68rem; line-height: 1.45; }
.brand__text--footer { margin-block-end: 0; }
.brand--footer { margin-block-end: var(--space-3); }

.primary-nav { display: flex; align-items: center; gap: var(--space-4); }
.primary-nav__list {
  display: flex; flex-wrap: nowrap; gap: clamp(0.6rem, 1.1vw, 1.25rem);
  list-style: none; margin: 0; padding: 0;
}
.primary-nav__list a {
  position: relative; white-space: nowrap; color: var(--muted); font-size: 0.9rem; font-weight: 500;
}
.primary-nav__list a::after {
  content: ""; position: absolute; inset-block-end: -6px; inset-inline-start: 0;
  width: 100%; height: 2px; border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: var(--nav-origin, left);
  transition: transform 0.25s var(--ease-out);
}
body.page--fa .primary-nav__list a::after { transform-origin: right; }
.primary-nav__list a:hover { color: var(--text-strong); }
.primary-nav__list a:hover::after { transform: scaleX(1); }
.primary-nav__actions { display: flex; align-items: center; gap: var(--space-3); }

/* Dropdowns: the header keeps four destinations and everything else lives
   one hover (or one tap, on touch) away.

   Alignment: a panel is anchored to *its own* item, not centred on it. The
   offset from the item to the bottom edge of the header is measured in
   initNavMenus() and written to --nav-gap, so every panel hangs flush under
   the header, directly beneath the item that owns it, whatever the label's
   width. --nav-shift is the same script nudging a panel back inside the
   window when an item near an edge would push it off screen. */
.primary-nav__item { position: relative; }
.primary-nav__list a.is-active,
.primary-nav__trigger.is-active { color: var(--text-strong); }
.primary-nav__list a.is-active::after,
.primary-nav__trigger.is-active::after { transform: scaleX(1); }
.primary-nav__trigger {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font: inherit; font-size: 0.9rem; font-weight: 500; color: var(--muted);
  background: none; border: 0; padding: 0; position: relative; white-space: nowrap;
  transition: color 0.25s var(--ease-out);
}
.primary-nav__trigger::after {
  content: ""; position: absolute; inset-block-end: -6px; inset-inline-start: 0;
  width: 100%; height: 2px; border-radius: 2px; background: var(--brand-gradient);
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-out);
}
body.page--fa .primary-nav__trigger::after { transform-origin: right; }
.primary-nav__trigger:hover { color: var(--text-strong); }
.primary-nav__trigger:hover::after { transform: scaleX(1); }
.primary-nav__trigger:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }
.primary-nav__caret { display: inline-flex; color: inherit; transition: transform 0.28s var(--ease-out); }
.primary-nav__item.is-open .primary-nav__caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute; inset-block-start: calc(100% + var(--nav-gap, 16px));
  inset-inline-start: 0; z-index: 6;
  inline-size: max-content; min-inline-size: 264px; max-inline-size: min(332px, calc(100vw - 32px));
  padding: var(--space-2); display: grid; gap: 2px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--bg) 96%, transparent);
  backdrop-filter: blur(16px); box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden;
  translate: var(--nav-shift, 0px) 0;
  transform: translateY(-10px) scale(0.98); transform-origin: top;
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0.22s;
}
.nav-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: min(60vh, 460px); overflow-y: auto; }
.nav-menu a {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: 9px 11px; border-radius: 12px; color: var(--text);
  transition: background 0.22s var(--ease-out), color 0.22s var(--ease-out);
}
.nav-menu a:hover { background: var(--tile); color: var(--text-strong); }
.nav-menu a::after { display: none; }
.nav-menu__icon { display: inline-flex; margin-block-start: 2px; color: var(--accent); flex: 0 0 auto; }
.nav-menu__icon .icon svg { width: 18px; height: 18px; }
.nav-menu__text { display: grid; gap: 1px; min-width: 0; }
.nav-menu__text strong { font-size: 0.86rem; font-weight: 600; }
.nav-menu__text small { color: var(--muted); font-size: 0.72rem; line-height: 1.5; }
/* Open state, and the keyboard path: focusing anything inside the item keeps its
   panel open without JavaScript. Pointer hover is handled in initNavMenus(),
   which needs to know about the gap between the trigger and the panel. */
.primary-nav__item.is-open .nav-menu,
.primary-nav__item:focus-within .nav-menu { opacity: 1; visibility: visible; transform: none; }

.lang-switch {
  display: inline-flex; border: 1px solid var(--border); border-radius: 999px;
  overflow: hidden; background: var(--tile);
}
.lang-switch__item {
  padding: 5px 11px; font-size: 0.72rem; font-family: var(--font-mono);
  color: var(--muted); letter-spacing: 0.06em;
}
.lang-switch__item.is-active { background: var(--accent-soft); color: var(--accent); }

.theme-toggle {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--glass);
  color: var(--text); cursor: pointer; display: grid; place-items: center;
  transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.theme-toggle:hover { transform: translateY(-2px) rotate(6deg); border-color: var(--border-strong); }
.theme-toggle__icon { grid-area: 1 / 1; transition: opacity 0.25s var(--ease-out), transform 0.4s var(--ease-out); }
.theme-toggle__icon--sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
:root[data-theme="light"] .theme-toggle__icon--moon { opacity: 0; transform: rotate(90deg) scale(0.6); }
:root[data-theme="light"] .theme-toggle__icon--sun { opacity: 1; transform: none; }

.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: 13px;
  background: var(--glass); border: 1px solid var(--border); cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block; width: 20px; height: 2px; background: var(--text); margin-inline: auto;
  transition: transform 0.25s var(--ease-out), opacity 0.2s var(--ease-out);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { content: ""; position: absolute; inset-block-start: -6px; }
.nav-toggle__bars::after { content: ""; position: absolute; inset-block-start: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ----------------------------------------------------------------- buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); padding: 0.74em 1.4em; border-radius: 999px;
  border: 1px solid transparent; font-weight: 600; font-size: 0.94rem; line-height: 1.2;
  cursor: pointer; overflow: hidden;
  transition: transform 0.18s var(--ease-out), box-shadow 0.25s var(--ease-out),
              background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s;
}
.btn--primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 62%, var(--accent-2)));
  color: var(--accent-ink);
  box-shadow: 0 18px 34px -22px color-mix(in oklab, var(--accent) 85%, transparent);
}
.btn--primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.42), transparent 80%);
  transform: translateX(-140%); transition: transform 0.6s var(--ease-out);
}
body.page--fa .btn--primary::after { transform: translateX(140%); }
.btn--primary:hover { color: var(--accent-ink); transform: translateY(-2px); }
.btn--primary:hover::after { transform: translateX(140%); }
body.page--fa .btn--primary:hover::after { transform: translateX(-140%); }
.btn--ghost {
  background: var(--glass); border-color: var(--border); color: var(--text);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { color: var(--text-strong); border-color: var(--border-strong); transform: translateY(-2px); }
.btn--lg { padding: 0.95em 1.75em; font-size: 1rem; }
.btn--sm { padding: 0.5em 1em; font-size: 0.85rem; }

/* Numeric counter riding inside a button (e.g. "view all portfolio" + 9). */
.btn__count {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.75em; height: 1.75em; padding: 0 0.4em;
  border-radius: 999px; font-size: 0.76em; font-weight: 700; line-height: 1;
  letter-spacing: 0; font-variant-numeric: tabular-nums;
  background: color-mix(in oklab, var(--accent-ink) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent-ink) 26%, transparent);
}
.btn--ghost .btn__count {
  background: var(--glass-strong, var(--glass));
  border-color: var(--border-strong);
  color: var(--text-strong);
}

.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-5) 0 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--tile); color: var(--muted);
  font-family: var(--font-mono); font-size: 0.75rem;
}
.chip--sm { font-size: 0.66rem; padding: 2px 8px; }
.chip.is-active { border-color: color-mix(in oklab, var(--accent) 55%, transparent); background: var(--accent-soft); color: var(--accent); }
a.chip:hover { color: var(--text-strong); border-color: var(--border-strong); }

.badge {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.badge--demo { background: color-mix(in oklab, var(--warn) 16%, transparent); color: var(--warn); border: 1px solid color-mix(in oklab, var(--warn) 34%, transparent); }
.badge--ok { background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent); }
.badge--idle { background: var(--tile); color: var(--muted); border: 1px solid var(--border-strong); }

/* ------------------------------------------------- channel icons and glyphs */
.channel-icon {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 10px; background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent); flex: 0 0 auto;
  transition: transform 0.25s var(--ease-out);
}
.channel-icon--telegram { background: var(--accent-2-soft); color: var(--accent-2); border-color: color-mix(in oklab, var(--accent-2) 24%, transparent); }
.channel-icon--email { background: var(--accent-3-soft); color: var(--accent-3); border-color: color-mix(in oklab, var(--accent-3) 24%, transparent); }
.channel-icon--form { background: var(--tile); color: var(--muted); border-color: var(--border); }
a:hover > .channel-icon { transform: translateY(-2px) scale(1.06); }

.channel-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.channel-list a { display: flex; align-items: center; gap: var(--space-3); color: var(--text); }
.channel-list a:hover { color: var(--accent); }
.channel-list--footer a { font-size: 0.86rem; color: var(--muted); }
.channel-list--footer a:hover { color: var(--text-strong); }
.channel-list--cards li > a {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--glass);
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.channel-list--cards li > a:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.channel-list__text { display: grid; }
.channel-list__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.channel-list__value { font-family: var(--font-mono); font-size: 0.9rem; }

.glyph { color: var(--accent-2); display: block; margin-block-end: var(--space-3); }
.glyph--alert { color: var(--danger); }
.glyph--pulse { color: var(--accent); }
.glyph--loop { color: var(--accent-3); }

/* ---------------------------------------------------------------- hero stage */
.hero-stage { position: relative; z-index: 1; }
html.js .hero-stage { height: calc(100vh - var(--header-height) + var(--hero-scroll, 82vh)); }
.hero-stage__sticky {
  position: sticky; inset-block-start: var(--header-height);
  height: calc(100vh - var(--header-height));
  overflow: hidden; display: grid; align-content: center; justify-items: center;
  padding-block: 0 clamp(10px, 1.6vh, 24px);
  /* The hero dims as the page surfaces out of it, so the hand-off reads as one
     camera move instead of two stacked screens. */
  opacity: calc(1 - var(--hero-exit, 0) * 0.72);
}

html:not(.js) .hero-stage__sticky { position: static; height: auto; padding-block: var(--space-7); }

/* The scene recedes as the doors close over it, so the hand-over from "the
   machine on a lit stage" to "the stage itself" has no visible seam — but it
   never disappears: the stage keeps its grid and its glow, which is what the
   opening reveals while the doors are apart. */
.hero-scene {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  opacity: calc(1 - var(--split-close, 0) * 0.5);
}
.hero-scene__grid {
  position: absolute; inset: -10% -10% -10% -10%;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 6px);
  background-size: 68px 68px, 68px 68px, 100% 6px;
  transform: perspective(900px) rotateX(58deg) translateY(18%) scale(1.35);
  opacity: calc(0.9 * var(--scene-strength));
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 78%);
  mask-image: radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 78%);
}
.hero-scene__orb {
  position: absolute; border-radius: 50%;
  background-image: radial-gradient(circle, currentColor, transparent 68%);
  opacity: calc(0.4 * var(--scene-strength));
}
.hero-scene__orb--a {
  inset-block-start: -14%; inset-inline-end: -6%; width: 44vw; height: 44vw; max-width: 600px; max-height: 600px;
  color: color-mix(in oklab, var(--accent) 46%, transparent);
  animation: orb-drift 22s ease-in-out infinite alternate;
}
.hero-scene__orb--b {
  inset-block-end: -18%; inset-inline-start: -8%; width: 38vw; height: 38vw; max-width: 540px; max-height: 540px;
  color: color-mix(in oklab, var(--accent-2) 42%, transparent);
  animation: orb-drift 26s ease-in-out infinite alternate-reverse;
}
.hero-scene__beam {
  position: absolute; inset-block-start: 8%; inset-inline-start: 42%; width: 1px; height: 84%;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--accent-2) 55%, transparent), transparent);
  opacity: calc(0.5 * var(--scene-strength));
}
@keyframes orb-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-4%, 5%, 0) scale(1.12); }
}

.hero-zoom {
  width: 100%;
  transform: scale(var(--hero-zoom, 1));
  /* Dead centre, both axes: the camera pushes into the middle of the hero, not
     past it, which is what lets the doors open on the same line. */
  transform-origin: 50% 50%;
  will-change: transform;
}

/* ------------------------------------------------------------ hero split */
/* Two panels that carry the hero's own surface. They fade in over the machine,
   meet at the exact middle line, and then slide apart — the rest of the site is
   already rising behind them, so the page reads as coming out of the hero
   rather than scrolling past it. */
.hero-split { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.hero-split__door {
  position: absolute; inset-inline: -2px; height: calc(50% + 1px);
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    radial-gradient(75% 140% at 78% -14%, color-mix(in oklab, var(--accent) 15%, transparent), transparent 64%),
    radial-gradient(75% 140% at 16% 114%, color-mix(in oklab, var(--accent-2) 13%, transparent), transparent 66%);
  background-size: 68px 68px, 68px 68px, 100% 100%, 100% 100%;
  opacity: var(--split-close, 0);
  will-change: transform, opacity;
}
.hero-split__door--top { inset-block-start: 0; transform: translateY(calc(var(--split-open, 0) * -101%)); }
.hero-split__door--bottom { inset-block-end: 0; transform: translateY(calc(var(--split-open, 0) * 101%)); }
.hero-split__seam {
  position: absolute; inset-block-start: 50%; inset-inline: 0; height: 2px;
  translate: 0 -50%; opacity: var(--split-seam, 0);
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 90%, transparent), transparent);
  box-shadow: 0 0 30px 8px color-mix(in oklab, var(--accent) 22%, transparent);
}
.hero__inner {
  display: grid; gap: clamp(1rem, 1.8vw, 1.6rem); justify-items: center; text-align: center;
  perspective: 1400px;
}
.hero__head {
  transform: translate3d(0, var(--hero-copy-y, 0px), 0);
  opacity: var(--hero-copy-opacity, 1);
  filter: blur(var(--hero-copy-blur, 0px));
  display: grid; justify-items: center; gap: var(--space-4);
  max-width: 940px;
}
.hero__head .eyebrow { margin: 0; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

/* The hero must clear the scroll hint inside a single viewport, so its title
   steps down from the global h1 scale. */
.hero__head h1 { margin: 0; font-size: clamp(1.5rem, 1rem + 1.7vw, 2.2rem); line-height: 1.3; }

/* --------------------------------------------------------- hero machine */
.machine {
  position: relative; width: 100%;
  transform: translate3d(0, var(--machine-y, 0px), 0) scale(var(--machine-scale, 1));
  opacity: var(--machine-opacity, 1);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--panel);
  box-shadow: var(--shadow-1), inset 0 1px 0 color-mix(in oklab, #fff 6%, transparent);
  overflow: hidden;
}
.machine::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(150deg, color-mix(in oklab, var(--accent) 9%, transparent), transparent 46%);
}
.machine__chrome {
  position: relative; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 55%, transparent);
}
.machine__dots { display: inline-flex; gap: 5px; }
.machine__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.machine__dots i:first-child { background: color-mix(in oklab, var(--danger) 80%, transparent); }
.machine__dots i:nth-child(2) { background: color-mix(in oklab, var(--warn) 80%, transparent); }
.machine__dots i:last-child { background: color-mix(in oklab, var(--accent) 80%, transparent); }
.machine__title { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--text-strong); }
.machine__subtitle { color: var(--muted); font-size: 0.74rem; }
.machine__badge {
  margin-inline-start: auto; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em;
  padding: 3px 10px; border-radius: 999px; color: var(--accent);
  background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 34%, transparent);
}
.machine__badge.is-paused { color: var(--warn); background: var(--gold-soft); border-color: color-mix(in oklab, var(--warn) 34%, transparent); }

.machine__rail {
  position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 32%, transparent);
}
.machine__tab {
  position: relative; display: grid; gap: 2px; text-align: start; cursor: pointer;
  padding: 7px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--glass);
  color: var(--text); font: inherit; overflow: hidden;
  transition: transform 0.28s var(--ease-out), border-color 0.28s var(--ease-out), background 0.28s var(--ease-out);
}
.machine__tab:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.machine__tab:focus-visible { outline: none; box-shadow: var(--ring); }
.machine__tab-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.machine__tab-icon { color: var(--muted); display: inline-flex; }
.machine__tab-icon .icon svg { width: 19px; height: 19px; }
.machine__tab-num { font-family: var(--font-mono); font-size: 0.66rem; color: color-mix(in oklab, var(--muted) 80%, transparent); }
.machine__tab-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.07em; color: var(--text-strong); }
/* The verbose description lives in the caption under the canvas, so the rail
   stays a compact strip of icon + stage name. */
.machine__tab-note { display: none; }
.machine__tab-fill {
  position: absolute; inset-block-end: 0; inset-inline-start: 0; height: 2px; width: 0%;
  background: var(--brand-gradient); transition: width 0.12s linear;
}
.machine__tab.is-done { border-color: color-mix(in oklab, var(--accent) 26%, transparent); }
.machine__tab.is-done .machine__tab-icon { color: var(--accent); }
.machine__tab.is-active {
  border-color: color-mix(in oklab, var(--accent) 46%, transparent);
  background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 12%, transparent), transparent 72%), var(--glass-strong);
  box-shadow: 0 20px 40px -30px color-mix(in oklab, var(--accent) 80%, transparent);
}
.machine__tab.is-active .machine__tab-icon { color: var(--accent); }

/* The drawing area is a screen: slightly recessed from the chrome so the
   canvas panels stay readable in the light theme too. */
.machine__viewport {
  position: relative; padding: var(--space-2) var(--space-2) 0;
  background: color-mix(in oklab, var(--bg-soft) 78%, transparent);
}
.machine__viewport canvas { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.machine__caption {
  display: flex; align-items: center; gap: var(--space-4); text-align: start;
  padding: var(--space-2) var(--space-4);
}
.machine__caption-num {
  font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600;
  color: color-mix(in oklab, var(--accent) 65%, transparent);
}
.machine__caption-text { flex: 1; min-width: 0; }
.machine__caption-text strong { display: block; font-size: 0.98rem; color: var(--text-strong); }
.machine__caption-text p { margin: 2px 0 0; color: var(--muted); font-size: 0.8rem; }
.machine__caption-badge {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em;
  padding: 4px 10px; border-radius: 8px; color: var(--accent-2);
  background: var(--accent-2-soft); border: 1px solid color-mix(in oklab, var(--accent-2) 30%, transparent);
}

.machine__console {
  display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-4);
  border-block-start: 1px solid var(--border); background: color-mix(in oklab, var(--bg) 62%, transparent);
}
@media (min-width: 1024px) { .machine__console { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; } }
.machine__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.machine__btn {
  cursor: pointer; font: inherit; font-size: 0.8rem; padding: 7px 14px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--accent) 34%, transparent);
  background: var(--accent-soft); color: var(--accent);
  transition: transform 0.22s var(--ease-out), background 0.22s var(--ease-out);
}
.machine__btn:hover { transform: translateY(-2px); }
.machine__btn:focus-visible { outline: none; box-shadow: var(--ring); }
.machine__btn--ghost { color: var(--muted); background: transparent; border-color: var(--border-strong); }
.machine__scrub {
  position: relative; flex: 1; min-width: 90px; height: 3px; border-radius: 999px;
  background: color-mix(in oklab, var(--border-strong) 70%, transparent); overflow: hidden;
}
.machine__scrub i { display: block; height: 100%; width: 0%; background: var(--brand-gradient); }
.machine__clock { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }

.machine__log { display: grid; gap: 6px; text-align: start; }
.machine__log-title {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.machine__journal { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; max-height: 44px; overflow: hidden; }
.machine__journal li {
  display: flex; align-items: center; gap: var(--space-3); font-size: 0.78rem;
  padding: 5px 8px; border-radius: 8px; color: color-mix(in oklab, var(--muted) 72%, transparent);
  transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.machine__journal li.is-on { color: var(--text-strong); background: color-mix(in oklab, var(--accent) 8%, transparent); }
.machine__journal-dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong);
}
.machine__journal li.is-on .machine__journal-dot { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent); }
.machine__journal li.is-done .machine__journal-dot { background: color-mix(in oklab, var(--accent) 55%, transparent); }
.machine__journal-text { flex: 1; min-width: 0; }
.machine__journal time { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); opacity: 0.7; }

.hero-stage__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 50%, transparent 30%, color-mix(in oklab, var(--bg) 88%, transparent) 100%);
  opacity: var(--hero-veil, 0);
  transition: opacity 0.15s linear;
}
/* The hint sits in the flow under the machine: nothing overlaps, and the
   stage still reserves no more than the viewport height. */
.hero-stage__hint {
  display: grid; justify-items: center; gap: 6px;
  margin-block-start: clamp(10px, 1.6vh, 22px);
  opacity: var(--hero-hint-opacity, 1);
  transition: opacity 0.3s linear;
  pointer-events: none;
}
.hero-stage__hint-label {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  color: var(--muted); text-transform: uppercase;
}
.hero-stage__mouse {
  width: 22px; height: 34px; border-radius: 12px; border: 1px solid var(--border-strong);
  display: grid; justify-items: center; padding-block-start: 6px; background: var(--tile);
}
.hero-stage__mouse i {
  width: 4px; height: 8px; border-radius: 2px; background: var(--accent);
  animation: mouse-wheel 1.8s var(--ease-out) infinite;
}
@keyframes mouse-wheel {
  0% { transform: translateY(0); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* --------------------------------------------------------- machine on mobile */
@media (max-width: 900px) {
  /* Three stages per row rather than a horizontal scroller: every stage stays
     visible, so the machine still reads as one sequence at tablet width. */
  .machine__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story__rail {
    grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row;
  }
  .hero__head h1 { font-size: clamp(1.5rem, 1.1rem + 3.4vw, 2.2rem); }
}
/* The phone frame around the phone drawing (see the phone painters in
   charts.js). A portrait canvas needs more height than a strip, so everything
   that does not pay for itself in vertical space is tightened: the journal and
   the clock are desktop readouts and go, the subtitle and the caption badge
   repeat what is already on screen, and the caption itself loses a line of
   leading. The controls keep their wrap, so on a narrow phone the scrub falls
   to a second line rather than being squeezed into a sliver. */
@media (max-width: 760px) {
  .machine__rail { padding: 6px; gap: 6px; }
  .machine__tab { padding: 5px 9px; }
  .machine__tab-icon .icon svg { width: 16px; height: 16px; }
  .machine__chrome { padding: 7px var(--space-4); gap: 8px; }
  .machine__subtitle { display: none; }
  .machine__badge { font-size: 0.62rem; padding: 2px 9px; }
  .machine__viewport { padding: 6px 6px 0; }
  .machine__caption { padding: 6px var(--space-4) 4px; gap: var(--space-3); }
  .machine__caption-num { font-size: 0.9rem; }
  .machine__caption-text strong { font-size: 0.9rem; }
  .machine__caption-text p { margin-block-start: 1px; font-size: 0.76rem; line-height: 1.35; }
  .machine__caption-badge { display: none; }
  .machine__clock { display: none; }
  .machine__console { padding: 7px var(--space-4) 8px; gap: 7px; }
  .machine__log { display: none; }
  .machine__btn { padding: 6px 11px; font-size: 0.78rem; }
  .machine__scrub { min-width: 70px; }
}

@media (max-width: 560px) {
  /* The story rail keeps its stacked rows down to the small tablets and only
     becomes a scroller on a phone. */
  .story__rail {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
  }
  .story__step { scroll-snap-align: center; }
}

/* ------------------------------------------------------------------- trust */
/* Platform coverage as a rail instead of four loose boxes: the nodes sit on one
   connector, light up in turn, and carry the tooling they cover underneath. */
/* geometry: the rail reserves 30px on top, the connector runs along the top
   edge of the cards and every node straddles it (node centre = 30px). */
.plat-rail {
  position: relative; list-style: none; margin: 0 0 var(--space-6); padding: 30px 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3);
}
.plat-rail__line {
  position: absolute; inset-block-start: 29px; inset-inline: 6%; height: 2px;
  border-radius: 2px; background: var(--border); overflow: hidden;
}
.plat-rail__runner {
  position: absolute; inset-block: 0; width: 22%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: runner 5.4s var(--ease-out) infinite;
}
body.page--fa .plat-rail__runner { animation-direction: reverse; }
.plat-rail__item {
  position: relative; display: grid; justify-items: center; gap: 4px; text-align: center;
  padding: 32px var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--glass);
  transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.plat-rail__item:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.plat-rail__node {
  position: absolute; inset-block-start: -22px; inset-inline-start: 50%; translate: -50% 0;
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; color: var(--muted); z-index: 2;
  background: var(--surface-1); border: 1px solid var(--border);
  transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.plat-rail__item.is-lit .plat-rail__node {
  color: var(--accent); border-color: color-mix(in oklab, var(--accent) 44%, transparent);
  transform: scale(1.06);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 10%, transparent);
}
.plat-rail__item.is-lit { border-color: color-mix(in oklab, var(--accent) 26%, transparent); }
.plat-rail__item strong { color: var(--text-strong); font-family: var(--font-en); font-size: 0.95rem; }
.plat-rail__note { color: var(--muted); font-size: 0.78rem; line-height: 1.6; }

.engine {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5); background: var(--panel); box-shadow: var(--shadow-2);
}
.engine__head h3 { margin-block-end: var(--space-2); }
.engine__head p { color: var(--muted); }
.engine__body {
  display: grid; gap: var(--space-6); align-items: center;
  /* The isometric scene below is a perspective projection that rotates. At some
     angles its painted box reached ~140px past the viewport and gave phones a
     phantom horizontal scrollbar, so the column is the clip boundary. The
     negative margin cancels the padding, which exists only to give the overlow
     a little room before it is cut. */
  overflow-x: clip; padding-inline: 18px; margin-inline: -18px;
}
.engine__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-4); list-style: none; padding: 0; margin: 0;
}
.engine__grid li {
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid color-mix(in oklab, var(--accent-2) 40%, transparent);
}
.engine__grid h4 { margin: 0 0 4px; font-size: 0.94rem; }
.engine__grid p { margin: 0; color: var(--muted); font-size: 0.83rem; }

/* isometric 3D module stack — a real perspective turntable, so the plates
   gain true depth instead of reading as flattened glass. */
.isostack {
  position: relative; display: grid; justify-items: center; gap: var(--space-4);
  perspective: 1000px; perspective-origin: 50% 40%;
}
.isostack::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  width: 240px; height: 180px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 15%, transparent), transparent 68%);
  filter: blur(34px); z-index: -1;
}
.isostack__scene {
  position: relative; width: 210px; height: 210px;
  margin-block: 10px 40px;
  transform-style: preserve-3d;
  transform: rotateX(56deg) rotateZ(-36deg);
  /* A slow sway, not a full turn: a complete revolution swept the plane's
     corners through the camera and threw the painted box far outside the
     column, which is what produced the phantom scrollbar above. */
  animation: isostack-sway 13s ease-in-out infinite alternate;
}
body.page--fa .isostack__scene { animation-direction: alternate-reverse; }
.isostack__layer {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translateZ(calc((var(--layer) - 2) * 27px));
  transition: transform 0.5s var(--ease-out);
}
.isostack__layer i {
  position: absolute; inset: 0; border-radius: 20px;
  background:
    linear-gradient(148deg,
      color-mix(in oklab, var(--accent) 52%, var(--surface-1)),
      color-mix(in oklab, var(--accent-2) 38%, var(--surface-2)));
  border: 1px solid color-mix(in oklab, var(--accent) 62%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, #ffffff 34%, transparent),
    inset 0 0 40px color-mix(in oklab, var(--accent) 26%, transparent),
    0 26px 46px -26px color-mix(in oklab, var(--accent-3) 55%, transparent);
}
/* a second face pushed back in Z + a bright rim: gives each plate visible depth */
.isostack__layer i::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background:
    linear-gradient(148deg,
      color-mix(in oklab, var(--accent-3) 30%, var(--surface-3)),
      color-mix(in oklab, var(--accent-2) 22%, var(--surface-3)));
  transform: translateZ(-13px);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-3) 34%, transparent);
  filter: saturate(0.75) brightness(0.94);
}
.isostack__layer:nth-child(2) i { background: linear-gradient(148deg, color-mix(in oklab, var(--accent-2) 50%, var(--surface-1)), color-mix(in oklab, var(--accent-3) 34%, var(--surface-2))); }
.isostack__layer:nth-child(3) i { background: linear-gradient(148deg, color-mix(in oklab, var(--accent-3) 48%, var(--surface-1)), color-mix(in oklab, var(--accent) 34%, var(--surface-2))); }
.isostack__layer:nth-child(4) i { background: linear-gradient(148deg, color-mix(in oklab, var(--accent-2) 40%, var(--surface-1)), color-mix(in oklab, var(--accent) 40%, var(--surface-2))); }
.isostack__layer:nth-child(5) i { background: linear-gradient(148deg, color-mix(in oklab, var(--accent) 44%, var(--surface-1)), color-mix(in oklab, var(--accent-2) 42%, var(--surface-2))); }
.isostack__core {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 120px; height: 120px;
  translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 78%, transparent), transparent 70%);
  filter: blur(10px); animation: core-pulse 4s ease-in-out infinite;
}
@keyframes isostack-sway {
  from { transform: rotateX(58deg) rotateZ(-26deg); }
  to { transform: rotateX(50deg) rotateZ(-48deg); }
}
@keyframes core-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.isostack__labels { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.isostack__labels span {
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; background: var(--tile);
}

/* ------------------------------------------------- manual vs automated --- */
.compare { display: grid; gap: var(--space-4); align-items: stretch; }
.compare__col {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5);
  background: var(--glass);
}
.compare__col h3 { font-size: 0.95rem; font-family: var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; }
.compare__col ul { list-style: none; padding: 0; margin: 0; }
.compare__col li {
  display: flex; align-items: center; gap: 10px; padding-block: 9px; font-size: 0.9rem;
  border-block-end: 1px dashed color-mix(in oklab, var(--border) 80%, transparent);
}
.compare__col li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: currentColor; opacity: 0.6;
}
.compare__col--manual { color: var(--danger); background: color-mix(in oklab, var(--danger) 6%, var(--glass)); }
.compare__col--auto { color: var(--accent); background: linear-gradient(158deg, var(--accent-soft), transparent); }
.compare__col--manual li, .compare__col--auto li { color: var(--text); }
.compare__col--manual li::before { background: var(--danger); }
.compare__col--auto li::before { background: var(--accent); }
.compare__scan {
  position: absolute; inset-inline: 0; height: 42px; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--danger) 14%, transparent), transparent);
  animation: scan 4.5s var(--ease-out) infinite;
}
@keyframes scan { 0% { inset-block-start: -20%; } 100% { inset-block-start: 110%; } }
.compare__switch { display: grid; place-items: center; gap: var(--space-3); }
@media (min-width: 900px) { .compare { grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); } }

.switch3d {
  position: relative; width: 74px; height: 74px; perspective: 600px;
  transform-style: preserve-3d;
  animation: switch-flip 6s var(--ease-out) infinite;
}
.switch3d__face {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 20px;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  backface-visibility: hidden; border: 1px solid var(--border-strong);
}
.switch3d__face--front { background: color-mix(in oklab, var(--danger) 14%, var(--surface-2)); color: var(--danger); }
.switch3d__face--back {
  background: color-mix(in oklab, var(--accent) 20%, var(--surface-2)); color: var(--accent);
  transform: rotateY(180deg);
}
@keyframes switch-flip {
  0%, 38% { transform: rotateY(0deg); }
  50%, 88% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}
.switch3d__rail { display: block; width: 2px; height: 54px; border-radius: 2px; background: var(--border); position: relative; }
.switch3d__rail i {
  position: absolute; inset-inline-start: 50%; translate: -50% 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 12px color-mix(in oklab, var(--accent-2) 70%, transparent);
  animation: rail-travel 3.2s var(--ease-out) infinite;
}
@keyframes rail-travel { 0% { inset-block-start: 0; } 50% { inset-block-start: calc(100% - 8px); } 100% { inset-block-start: 0; } }

/* ------------------------------------------------------------- storyboard */
.story {
  margin-block-start: var(--space-7); padding: var(--space-5);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--panel); box-shadow: var(--shadow-2);
}
.story__head { text-align: center; margin-block-end: var(--space-5); }
.story__title { margin: 0; font-size: 1.1rem; }
.story__hint { margin: var(--space-2) auto 0; color: var(--muted); font-size: 0.86rem; max-width: 60ch; }
/* The six stages sit on one rail; the active one owns the screen below it. */
.story__rail {
  list-style: none; margin: 0 0 var(--space-3); padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2);
}
.story__step {
  position: relative; padding-block-end: 6px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--glass);
  transition: border-color 0.32s var(--ease-out), background 0.32s var(--ease-out), transform 0.32s var(--ease-out);
}
.story__step:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.story__step.is-active {
  border-color: color-mix(in oklab, var(--accent) 44%, transparent);
  background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 11%, transparent), transparent 74%), var(--glass-strong);
  box-shadow: 0 20px 40px -30px color-mix(in oklab, var(--accent) 75%, transparent);
}
.story__btn {
  display: grid; gap: 2px; width: 100%; text-align: start;
  padding: var(--space-3); background: none; border: 0;
  color: inherit; font: inherit; cursor: pointer; border-radius: var(--radius-sm);
}
.story__btn:focus-visible { outline: none; box-shadow: var(--ring); }
.story__num {
  font-family: var(--font-mono); font-size: 0.66rem;
  color: color-mix(in oklab, var(--muted) 80%, transparent);
}
.story__step.is-active .story__num { color: var(--accent); }
.story__step.is-done .story__num { color: color-mix(in oklab, var(--accent) 65%, transparent); }
.story__label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; color: var(--accent-2); }
.story__step strong { font-size: 0.88rem; line-height: 1.45; color: var(--text-strong); }
.story__step strong, .story__label { display: block; }

.story__caption {
  display: flex; align-items: center; gap: var(--space-4); text-align: start;
  margin-block-start: var(--space-4); padding-inline: var(--space-2);
}
.story__caption-num { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; color: color-mix(in oklab, var(--accent) 65%, transparent); }
.story__caption p { flex: 1; min-width: 0; margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.75; }
.story__tag {
  flex: none; font-style: normal;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; color: var(--accent-2);
  background: var(--accent-2-soft); border: 1px solid color-mix(in oklab, var(--accent-2) 28%, transparent);
}
.story__ring {
  position: absolute; inset-block-end: 0; inset-inline: 12px; height: 2px; border-radius: 2px; overflow: hidden;
  background: color-mix(in oklab, var(--border-strong) 55%, transparent);
  opacity: 0; transition: opacity 0.3s var(--ease-out);
}
.story__step.is-active .story__ring, .story__step.is-done .story__ring { opacity: 1; }
.story__ring i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: var(--brand-gradient); }
body.page--fa .story__ring i { transform-origin: right center; }

.story__screen {
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  background: color-mix(in oklab, var(--bg-soft) 78%, transparent); box-shadow: var(--shadow-2);
}
.story__chrome {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--border);
}
.story__chrome-title { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--text-strong); }
.story__status { margin-inline-start: auto; font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent); }
.story__screen canvas { display: block; width: 100%; height: auto; }
.story__progress { height: 2px; background: color-mix(in oklab, var(--border-strong) 55%, transparent); }
.story__progress i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: var(--brand-gradient); }
body.page--fa .story__progress i { transform-origin: right center; }

.storyboard { margin-block-start: var(--space-6); }
.storyboard__title { font-size: 1rem; color: var(--muted); }
.storyboard__frames {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3); list-style: none; padding: 0; margin: 0;
}
.storyboard__frame {
  position: relative; padding: var(--space-4) var(--space-3); border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--glass);
  opacity: 0.55; transition: transform 0.45s var(--ease-out), border-color 0.45s var(--ease-out), opacity 0.45s var(--ease-out);
}
.storyboard__frame.is-active {
  opacity: 1; border-color: color-mix(in oklab, var(--accent) 48%, transparent);
  transform: translateY(-5px);
  box-shadow: 0 22px 40px -32px color-mix(in oklab, var(--accent) 80%, transparent);
}
.storyboard__index { display: block; font-family: var(--font-mono); font-size: 0.64rem; color: var(--accent-2); }
.storyboard__frame strong { display: block; font-family: var(--font-en); font-size: 0.95rem; color: var(--text-strong); }
.storyboard__frame span:last-child { color: var(--muted); font-size: 0.78rem; }

@media (max-width: 760px) {
  .story { padding: var(--space-3); }
  .story__rail { display: flex; overflow-x: auto; padding: 2px 2px 9px; margin-inline: -2px; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .story__step { flex: 0 0 min(72vw, 230px); scroll-snap-align: start; }
  .story__btn { min-height: 74px; }
  .story__caption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; padding-inline: 2px; }
  .story__caption p { grid-column: 1 / -1; order: 3; }
  .story__tag { justify-self: start; }
  .story__chrome { padding-inline: var(--space-3); }
  .story__screen canvas { aspect-ratio: 1200 / 564; height: auto; }
}

.legal-note {
  margin-block-start: var(--space-5); padding: var(--space-4) var(--space-5);
  border-inline-start: 3px solid var(--warn); border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--warn) 7%, transparent); color: var(--muted); font-size: 0.87rem;
}

/* ------------------------------------------------------------------- cards */
.card, .service-card, .project-card, .post-card, .quote-card, .why-card, .case-list__item {
  position: relative; padding: var(--space-5); border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--glass);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.card:hover, .service-card:hover, .project-card:hover, .post-card:hover, .why-card:hover {
  transform: translateY(-5px); border-color: var(--border-strong);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.card__glow, .project-card__glow {
  position: absolute; inset-block-start: -40%; inset-inline-end: -30%;
  width: 60%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent-2) 26%, transparent), transparent 70%);
  opacity: 0; transition: opacity 0.35s var(--ease-out);
}
.card:hover .card__glow, .project-card:hover .project-card__glow { opacity: 1; }
.card h3, .card h4 { margin-block-end: var(--space-2); }
.card p:last-child { margin-block-end: 0; }
.card--problem { padding-block-start: var(--space-6); }
.card__index {
  position: absolute; inset-block-start: 16px; inset-inline-end: 20px;
  font-family: var(--font-mono); font-size: 0.7rem; color: color-mix(in oklab, var(--muted) 70%, transparent);
}
.card--accent { border-color: color-mix(in oklab, var(--accent-2) 30%, transparent); }
.card--accent h4 { font-family: var(--font-en); letter-spacing: 0.01em; }

.service-card .icon { color: var(--accent); }
.service-card__tag { margin: 0 0 var(--space-2); font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent-2); letter-spacing: 0.05em; }
.service-card__summary { color: var(--muted); font-size: 0.9rem; }
.service-card__link, .project-card__link, .post-card__link { display: inline-flex; gap: 6px; font-size: 0.86rem; font-weight: 600; }

.project-card { transform-style: preserve-3d; display: flex; flex-direction: column; }
/* Trust block: the brief above the chart, the standard deliverables below the
   specs, so a demo card still says exactly what a delivered project includes. */
.project-card__brief { margin: 0 0 var(--space-3); color: var(--muted); font-size: 0.83rem; line-height: 1.75; }
.project-card__brief-label {
  display: inline-block; margin-inline-end: 6px; padding: 1px 8px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--accent-2); background: var(--accent-2-soft);
  border: 1px solid color-mix(in oklab, var(--accent-2) 26%, transparent);
}
.project-card__delivers {
  list-style: none; margin: var(--space-3) 0 0; padding: var(--space-3) 0 0;
  border-block-start: 1px dashed var(--border-strong);
  display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.project-card__delivers li { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.74rem; }
.project-card__delivers .icon { color: var(--accent); }
.project-card__delivers .icon svg { width: 14px; height: 14px; }
.project-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-block-start: auto; padding-block-start: var(--space-4); }
.project-card__case { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.project-card__case:hover { color: var(--accent-2); }
.project-card__case .icon svg { width: 15px; height: 15px; }
.project-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-block-end: var(--space-3); }
.project-card__code { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent-2); }
.project-card__tags { display: inline-flex; align-items: center; gap: 6px; }
.project-card__spark {
  margin-block: var(--space-3); border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border); background: color-mix(in oklab, var(--bg) 55%, transparent);
}
.project-card__spark canvas { width: 100%; height: 72px; display: block; }
/* A spec table rather than loose columns: hairlines keep the three cells in
   rhythm even when one market name is longer than the next. */
.project-card__meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 1px;
  margin: 0 0 var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--border); overflow: hidden;
}
.project-card__meta > div { background: var(--tile); padding: 8px 10px; text-align: center; }
.project-card__meta dt { color: var(--muted); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; }
.project-card__meta dd { margin: 3px 0 0; font-family: var(--font-mono); font-size: 0.8rem; }
.project-card__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2);
  align-items: baseline; margin: 0; padding-block: 5px;
  border-block-end: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  font-size: 0.85rem;
}
.project-card__row-label { color: var(--muted); font-size: 0.78rem; }
.project-card__row-value { text-align: start; }
/* values are Latin inside a Persian card: isolate each one so the mixed run
   keeps its own order instead of being reordered by the RTL paragraph */
.project-card__meta dd, .project-card__row-value, .project-card__code { unicode-bidi: plaintext; }

/* Article card: category and reading time on top, headline and excerpt in the
   middle, date and the read link on one foot row. Same anatomy on the landing
   page and the hub, because both render includes/post-card.html. */
.post-card { display: flex; flex-direction: column; gap: var(--space-2); }
.post-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-block-end: var(--space-2); }
.post-card__time { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); }
.post-card__time-icon { display: inline-flex; color: var(--accent-2); }
.post-card__time-icon .icon svg { width: 14px; height: 14px; }
.post-card h2, .post-card h3 { font-size: 1.05rem; margin: 0; }
.post-card h2 a, .post-card h3 a { color: inherit; }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--accent); }
.post-card p { color: var(--muted); font-size: 0.88rem; margin: 0; }
.post-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-block-start: auto; padding-block-start: var(--space-3); border-block-start: 1px solid var(--border);
}
.post-card time { color: var(--muted); font-size: 0.72rem; font-family: var(--font-mono); }
.post-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 600; }
.post-card__link span { transition: transform 0.25s var(--ease-out); }
body.page--fa .post-card__link span { transform: scaleX(-1); }
.post-card__link:hover span { transform: translateX(3px); }
body.page--fa .post-card__link:hover span { transform: scaleX(-1) translateX(3px); }

/* Project notes: a written hand-off, not a five-star widget. The consent state
   is stated in the header, because on a demo site that is the honest label. */
.quote-card { display: flex; flex-direction: column; gap: var(--space-3); }
/* the quoted text opens with a short gradient rule instead of a floating glyph,
   so nothing can collide with the header label or the consent badge */
.quote-card blockquote { position: relative; padding-block-start: 16px; }
.quote-card blockquote::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 30px; height: 2px; border-radius: 2px; background: var(--brand-gradient);
}
.quote-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-block-end: var(--space-3); border-block-end: 1px solid var(--border);
}
.quote-card__label {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-2);
}
.quote-card__label-icon .icon svg { width: 15px; height: 15px; }
.quote-card blockquote { margin: 0; font-size: 0.95rem; line-height: 1.95; }
.quote-card__footer { display: flex; align-items: center; gap: var(--space-3); margin-block-start: auto; padding-block-start: var(--space-3); }
.quote-card__avatar {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--text-strong); font-family: var(--font-mono); font-size: 0.78rem;
  background: conic-gradient(from 140deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
  box-shadow: inset 0 0 0 2px var(--surface-1);
}
.quote-card__who { min-width: 0; }
.quote-card__who strong { font-size: 0.9rem; }
.quote-card__footer small { display: block; color: var(--muted); font-size: 0.75rem; }
.quote-card__project {
  display: flex; align-items: center; gap: 7px; margin: 0;
  padding-block-start: var(--space-2); border-block-start: 1px solid var(--border);
  color: var(--muted); font-size: 0.78rem;
}
.quote-card__project-icon { color: var(--accent-2); display: inline-flex; }
.quote-card__project-icon .icon svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------- diagnosis file */
/* Problem: a case file rather than a card wall. Each row names the symptom and
   the systematic answer that replaces it, so the section argues instead of
   listing. */
.diag-board {
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--panel); box-shadow: var(--shadow-2); overflow: hidden;
}
.diag-board__head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--space-4); padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 45%, transparent);
}
.diag-board__label, .ledger__label, .solution-flow__label {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2);
}
.diag-board__label-icon, .ledger__label-icon { display: inline-flex; }
.diag-board__label-icon .icon svg, .ledger__label-icon .icon svg { width: 16px; height: 16px; }
.diag-board__note { margin: 0; color: var(--muted); font-size: 0.85rem; }
.diag-board__count { font-family: var(--font-mono); font-size: 1.5rem; color: color-mix(in oklab, var(--accent) 60%, transparent); }
.diag-list { list-style: none; margin: 0; padding: 0; }
.diag-row {
  position: relative; display: grid;
  grid-template-columns: 40px 44px minmax(0, 1fr) minmax(200px, 300px);
  align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  transition: background 0.3s var(--ease-out);
}
.diag-row + .diag-row { border-block-start: 1px solid var(--border); }
.diag-row::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px;
  background: var(--brand-gradient); transform: scaleY(0); transform-origin: top;
  transition: transform 0.35s var(--ease-out);
}
.diag-row:hover { background: color-mix(in oklab, var(--accent) 5%, transparent); }
.diag-row:hover::before { transform: scaleY(1); }
.diag-row__index { font-family: var(--font-mono); font-size: 0.74rem; color: color-mix(in oklab, var(--muted) 65%, transparent); }
.diag-row__icon {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  color: var(--danger); background: color-mix(in oklab, var(--danger) 11%, transparent);
  border: 1px solid color-mix(in oklab, var(--danger) 26%, transparent);
}
.diag-row__icon .glyph { margin: 0; color: inherit; }
.diag-row__icon .glyph svg { width: 20px; height: 20px; }
.diag-row__body h3 { margin: 0 0 4px; font-size: 1rem; }
.diag-row__body p { margin: 0; color: var(--muted); font-size: 0.87rem; }
.diag-row__fix { display: grid; gap: 4px; padding-inline-start: var(--space-4); border-inline-start: 1px dashed var(--border-strong); }
.diag-row__fix-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.diag-row__fix-value { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 0.86rem; font-weight: 600; }
.diag-row__fix-value .icon svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------ solution */
/* Solution: the pipeline runs as a vertical ledger next to the three words that
   define the studio, each word carrying its own proof line. */
.solution-board { display: grid; gap: var(--space-4); }
@media (min-width: 1024px) {
  .solution-board { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: stretch; }
  .solution-flow, .solution-pillars { align-self: stretch; }
}
.solution-flow, .solution-pillars {
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--panel); box-shadow: var(--shadow-2); padding: var(--space-5);
}
.solution-flow__head, .solution-pillars__head {
  display: grid; gap: 5px; padding-block-end: var(--space-4); border-block-end: 1px solid var(--border);
}
.solution-flow__note, .solution-pillars__note { margin: 0; color: var(--muted); font-size: 0.85rem; }
.solution-pillars__label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.solution-pillars { display: flex; flex-direction: column; }
.solution-pillars__foot {
  margin: auto 0 0; padding-block-start: var(--space-4); border-block-start: 1px dashed var(--border-strong);
  display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.78rem;
}
.solution-pillars__foot .icon { color: var(--accent-2); }
.solution-pillars__foot .icon svg { width: 16px; height: 16px; }
.solution-flow__steps { list-style: none; margin: 0; padding: var(--space-3) 0 0; display: grid; }
.solution-step {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: var(--space-3);
  padding: 10px var(--space-3); border-radius: var(--radius);
  transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.solution-step + .solution-step { border-block-start: 1px solid var(--border); }
.solution-step:hover { background: color-mix(in oklab, var(--accent) 6%, transparent); transform: translateX(4px); }
body.page--fa .solution-step:hover { transform: translateX(-4px); }
.solution-step__num {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent);
  background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
}
.solution-step__text { display: grid; gap: 1px; min-width: 0; }
.solution-step__text strong { font-size: 0.95rem; color: var(--text-strong); }
.solution-step__text small { color: var(--muted); font-size: 0.8rem; }
.pillar-grid { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 620px) { .pillar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pillar {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--glass); overflow: hidden;
  transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.pillar::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
  background: var(--brand-gradient); opacity: 0.75;
}
.pillar::after {
  content: ""; position: absolute; inset-block-start: -30%; inset-inline-end: -35%;
  width: 80%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 24%, transparent), transparent 70%);
  opacity: 0.45; transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out);
}
.pillar:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.pillar:hover::after { opacity: 1; transform: scale(1.18); }
.pillar__icon { color: var(--accent); position: relative; z-index: 1; }
.pillar__icon .icon svg { width: 22px; height: 22px; }
.pillar__word {
  position: relative; z-index: 1; font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.85rem);
  font-weight: 800; line-height: 1.25; letter-spacing: -0.01em;
  background: var(--brand-gradient); background-clip: text; -webkit-background-clip: text;
  color: transparent;
}
.pillar__body { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: 0.85rem; }
.pillar__proof {
  position: relative; z-index: 1; margin-block-start: auto; padding-block-start: var(--space-3);
  border-block-start: 1px dashed var(--border-strong);
  display: inline-flex; align-items: center; gap: 8px; color: var(--accent-2); font-size: 0.76rem;
}
.pillar__proof .icon svg { width: 15px; height: 15px; }

/* ----------------------------------------------------------- services */
/* Services: one catalogue panel. Wide rows let the real summaries breathe and
   keep eleven services scannable instead of eleven equal cards. */
.catalogue {
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--panel); box-shadow: var(--shadow-2); overflow: hidden;
}
.catalogue__bar {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-block-end: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 45%, transparent);
}
.catalogue__count { display: inline-flex; align-items: baseline; gap: 8px; }
.catalogue__count strong { font-family: var(--font-mono); font-size: 1.05rem; color: var(--accent); }
.catalogue__count small { color: var(--muted); font-size: 0.8rem; }
.catalogue__rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); }
.catalogue__hint { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.catalogue__rows { list-style: none; margin: 0; padding: 0; }
@media (min-width: 1024px) { .catalogue__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc-row {
  position: relative; display: grid; grid-template-columns: 30px 40px minmax(0, 1fr) auto;
  align-items: start; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  transition: background 0.3s var(--ease-out);
}
.svc-row + .svc-row { border-block-start: 1px solid var(--border); }
.svc-row:hover { background: color-mix(in oklab, var(--accent) 5%, transparent); }
.svc-row__index { font-family: var(--font-mono); font-size: 0.72rem; color: color-mix(in oklab, var(--muted) 65%, transparent); padding-block-start: 6px; }
.svc-row__icon {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent);
}
.svc-row__icon .icon svg { width: 19px; height: 19px; }
.svc-row__text { display: grid; gap: 2px; min-width: 0; }
.svc-row__text strong { font-size: 1rem; }
.svc-row__text strong a { color: var(--text-strong); }
.svc-row__text strong a:hover { color: var(--accent); }
.svc-row__tag { font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent-2); }
.svc-row__summary {
  margin-block-start: 4px; color: var(--muted); font-size: 0.84rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.svc-row__go a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.svc-row:hover .svc-row__go a { color: var(--accent); }
.svc-row__arrow { transition: transform 0.3s var(--ease-out); }
.svc-row:hover .svc-row__arrow { transform: translateX(3px); }
body.page--fa .svc-row:hover .svc-row__arrow { transform: translateX(-3px); }

/* ------------------------------------------------------- why: a ledger */
.ledger {
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--panel); box-shadow: var(--shadow-2); overflow: hidden;
}
.ledger__head {
  display: grid; gap: 6px; padding: var(--space-5);
  border-block-end: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 45%, transparent);
}
.ledger__title { margin: 0; color: var(--text-strong); font-size: 1.02rem; }
.ledger__note { margin: 0; color: var(--muted); font-size: 0.85rem; }
.ledger__rows { list-style: none; margin: 0; padding: 0; }
.ledger-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center;
  gap: var(--space-4); padding: var(--space-4) var(--space-5);
  transition: background 0.3s var(--ease-out);
}
.ledger-row + .ledger-row { border-block-start: 1px solid var(--border); }
.ledger-row:hover { background: color-mix(in oklab, var(--accent) 5%, transparent); }
.ledger-row__icon {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 13px;
  color: var(--accent-2); background: var(--accent-2-soft);
  border: 1px solid color-mix(in oklab, var(--accent-2) 26%, transparent);
}
.ledger-row__icon .icon svg { width: 19px; height: 19px; }
.ledger-row__body h3 { margin: 0 0 3px; font-size: 0.98rem; }
.ledger-row__body p { margin: 0; color: var(--muted); font-size: 0.85rem; }
.ledger-row__stamp {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}
.ledger__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.ledger-row { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in oklab, var(--glass) 88%, var(--surface-1)); transition: border-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.ledger-row + .ledger-row { border-block-start: 1px solid var(--border); }
.ledger-row:hover { border-color: color-mix(in oklab, var(--accent) 40%, transparent); transform: translateY(-3px); box-shadow: 0 18px 32px -28px color-mix(in oklab, var(--accent) 80%, transparent); }
.ledger__facts {
  display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  border-block-start: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 40%, transparent);
}
@media (min-width: 720px) { .ledger__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ledger__rows { grid-template-columns: minmax(0, 1fr); } }
.ledger-fact {
  display: grid; gap: 2px; padding-inline-start: var(--space-3);
  border-inline-start: 2px solid color-mix(in oklab, var(--accent) 42%, transparent);
}
.ledger-fact strong { color: var(--text-strong); font-size: 0.92rem; }
.ledger-fact span { color: var(--muted); font-size: 0.78rem; }

/* ------------------------------------------------------------ quote rail */
/* Testimonials read as one rail of three notes at a time, stepped by the arrow
   buttons, the dots or a timer — never as a static wall of cards. */
.quotes {
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--panel); box-shadow: var(--shadow-2); overflow: hidden;
}
.quotes__bar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  border-block-end: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 45%, transparent);
}
.quotes__label {
  display: inline-flex; align-items: center; gap: 8px; color: var(--accent-2);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em;
}
.quotes__label-icon .icon svg { width: 16px; height: 16px; }
.quotes__count { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.quotes__count b { color: var(--text-strong); font-size: 0.95rem; }
.quotes__progress { position: relative; flex: 1; min-width: 60px; height: 3px; border-radius: 999px; background: color-mix(in oklab, var(--border-strong) 60%, transparent); overflow: hidden; }
.quotes__progress i { display: block; height: 100%; width: 0%; background: var(--brand-gradient); }
.quotes__nav { display: inline-flex; gap: 6px; }
.quotes__btn {
  cursor: pointer; display: inline-grid; place-items: center; width: 36px; height: 36px;
  border-radius: 12px; color: var(--text); background: var(--glass);
  border: 1px solid var(--border);
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.quotes__btn:hover { transform: translateY(-2px); border-color: var(--border-strong); color: var(--accent); }
.quotes__btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.quotes__btn:focus-visible { outline: none; box-shadow: var(--ring); }
body.page--fa .quotes__btn svg { transform: scaleX(-1); }
.quotes__viewport { position: relative; }
.quotes__fade {
  position: absolute; inset-block: 0; width: 56px; z-index: 2; pointer-events: none;
  background: linear-gradient(to var(--fade-dir, right), var(--panel), transparent);
}
.quotes__fade--start { inset-inline-start: 0; --fade-dir: right; }
.quotes__fade--end { inset-inline-end: 0; --fade-dir: left; }
.quotes__track {
  list-style: none; margin: 0; padding: var(--space-4);
  display: flex; gap: var(--space-4);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.quotes__track::-webkit-scrollbar { display: none; }
.quotes__track:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-lg); }
.quotes__track > * {
  scroll-snap-align: start;
  flex: 0 0 100%; min-width: 0;
}
@media (min-width: 700px) { .quotes__track > * { flex-basis: calc((100% - var(--space-4)) / 2); } }
@media (min-width: 1024px) { .quotes__track > * { flex-basis: calc((100% - 2 * var(--space-4)) / 3); } }
.quotes__track .quote-card { height: 100%; }
.quotes__dots { list-style: none; display: flex; justify-content: center; gap: 7px; margin: 0; padding: 0 0 var(--space-4); }
.quotes__dots li { width: 7px; height: 7px; border-radius: 999px; background: color-mix(in oklab, var(--border-strong) 90%, transparent); transition: width 0.3s var(--ease-out), background 0.3s var(--ease-out); }
.quotes__dots li.is-active { width: 20px; background: var(--accent); }

/* ---------------------------------------------------------------- pipeline */
.pipeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.pipeline--rail { position: relative; padding-block-start: var(--space-4); }
.pipeline__track {
  position: absolute; inset-block-start: 6px; inset-inline: 24px; height: 2px;
  background: var(--border); border-radius: 2px; overflow: hidden;
}
.pipeline__runner {
  position: absolute; inset-block: 0; width: 26%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: runner 4.6s var(--ease-out) infinite;
}
body.page--fa .pipeline__runner { animation-direction: reverse; }
@keyframes runner { 0% { inset-inline-start: -26%; } 100% { inset-inline-start: 100%; } }
.pipeline__step {
  position: relative; padding: var(--space-4) var(--space-3) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--glass);
  transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.pipeline__dot {
  position: absolute; inset-block-start: -6px; inset-inline-start: 18px;
  width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong);
  transition: background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.pipeline__step.is-active { border-color: color-mix(in oklab, var(--accent) 42%, transparent); transform: translateY(-3px); }
.pipeline__step.is-active .pipeline__dot { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 16%, transparent); }
.pipeline__step strong { display: block; font-family: var(--font-en); font-size: 0.92rem; color: var(--text-strong); }
.pipeline__step span:last-child { color: var(--muted); font-size: 0.77rem; }

/* -------------------------------------------------------------- visualizer */
.visualizer {
  display: grid; gap: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5); background: var(--panel); box-shadow: var(--shadow-1);
}
@media (min-width: 1024px) { .visualizer { grid-template-columns: 330px minmax(0, 1fr); } }
.visualizer__controls { display: flex; flex-direction: column; gap: var(--space-4); }
.visualizer__controls fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); margin: 0; background: var(--tile); }
.visualizer__controls legend { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--accent-2); padding-inline: 6px; }
.visualizer__actions { display: flex; gap: var(--space-2); }
.visualizer__stage { position: relative; }
.visualizer__stage canvas {
  width: 100%; height: auto; border-radius: var(--radius);
  background: color-mix(in oklab, var(--bg) 65%, transparent); border: 1px solid var(--border);
}
.visualizer__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); margin: var(--space-4) 0 0; }
.visualizer__metrics dt { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; }
.visualizer__metrics dd { margin: 0; font-family: var(--font-mono); font-size: 1.15rem; color: var(--accent); }
.visualizer__hint { margin: var(--space-3) 0 0; color: var(--muted); font-size: 0.78rem; }

.toggle { display: flex; align-items: center; gap: var(--space-3); padding-block: 6px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__track {
  position: relative; width: 42px; height: 23px; border-radius: 999px; flex: 0 0 auto;
  background: color-mix(in oklab, var(--muted) 30%, transparent);
  transition: background 0.25s var(--ease-out);
}
.toggle__track::after {
  content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
  width: 17px; height: 17px; border-radius: 50%; background: var(--text-strong);
  transition: transform 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.toggle input:checked + .toggle__track { background: color-mix(in oklab, var(--accent) 60%, transparent); }
.toggle input:checked + .toggle__track::after { transform: translateX(19px); background: var(--accent-ink); }
body.page--fa .toggle input:checked + .toggle__track::after { transform: translateX(-19px); }
.toggle input:focus-visible + .toggle__track { box-shadow: var(--ring); }
.toggle__label { font-size: 0.88rem; }

.range-field { display: block; margin-block-end: var(--space-3); }
.range-field > span { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--muted); }
.range-field output { color: var(--accent); font-family: var(--font-mono); }
.range-field input[type="range"] { width: 100%; accent-color: var(--accent); margin-block-start: 6px; }

/* ----------------------------------------------------------------- process */
.process-wrap { position: relative; padding-inline-start: 26px; }
.process__rail {
  position: absolute; inset-block: 14px; inset-inline-start: 6px; width: 2px;
  background: var(--border); border-radius: 2px; overflow: hidden;
}
.process__rail i {
  display: block; width: 100%; height: var(--process-fill, 0%);
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  transition: height 0.3s linear;
}
body.page--fa .process-wrap { padding-inline-start: 0; padding-inline-end: 26px; }
body.page--fa .process__rail { inset-inline-start: auto; inset-inline-end: 6px; }
.process { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.process__step {
  display: grid; gap: var(--space-3); align-items: center;
  padding: var(--space-4) var(--space-5); border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--glass);
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.process__step:hover { border-color: var(--border-strong); transform: translateX(4px); }
body.page--fa .process__step:hover { transform: translateX(-4px); }
@media (min-width: 860px) { .process__step { grid-template-columns: 54px minmax(0, 1fr) 240px; } }
.process__index { font-family: var(--font-mono); font-size: 1.08rem; color: var(--muted); transition: color 0.35s var(--ease-out), text-shadow 0.35s var(--ease-out); }
.process__step.is-reached { border-color: color-mix(in oklab, var(--accent) 30%, transparent); }
.process__step.is-reached .process__index {
  color: var(--accent);
  text-shadow: 0 0 20px color-mix(in oklab, var(--accent) 60%, transparent);
}
.process__body h3 { margin: 0 0 2px; font-size: 1rem; }
.process__body p { margin: 0; color: var(--muted); font-size: 0.86rem; }
.process__acceptance span { display: block; color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; }
.process__acceptance strong { font-size: 0.88rem; }

/* -------------------------------------------------------------------- risk */
.risk-layout { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 1024px) { .risk-layout { grid-template-columns: 340px minmax(0, 1fr); } }
.risk-gauge {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5);
  background: var(--panel); box-shadow: var(--shadow-2); text-align: center;
}
.risk-gauge__dial { position: relative; display: grid; place-items: center; }
.risk-gauge__dial canvas { width: 100%; max-width: 260px; height: auto; }
.risk-gauge__value { position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; }
.risk-gauge__value strong { font-family: var(--font-mono); font-size: 1.9rem; color: var(--accent); }
.risk-gauge__value span { font-size: 0.7rem; color: var(--muted); }
.risk-gauge__note { margin: var(--space-3) 0 0; color: var(--muted); font-size: 0.78rem; }

.risk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.risk-card {
  position: relative; overflow: hidden; text-align: start; font: inherit; color: inherit; cursor: pointer;
  padding: var(--space-4); border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--glass); display: grid; gap: 6px;
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.risk-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.risk-card[aria-pressed="false"] { opacity: 0.6; background: color-mix(in oklab, var(--danger) 6%, var(--glass)); }
.risk-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.risk-card__label { font-weight: 600; font-size: 0.9rem; }
.risk-card__state { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--accent); }
.risk-card[aria-pressed="false"] .risk-card__state { color: var(--danger); }
.risk-card__value { font-family: var(--font-mono); font-size: 1.4rem; color: var(--accent-2); }
.risk-card__note { color: var(--muted); font-size: 0.78rem; }
.risk-card__bar { display: block; height: 3px; border-radius: 3px; background: var(--border); overflow: hidden; }
.risk-card__bar i {
  display: block; height: 100%; width: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: transform 0.35s var(--ease-out); transform-origin: left;
}
body.page--fa .risk-card__bar i { transform-origin: right; }
.risk-card[aria-pressed="false"] .risk-card__bar i { transform: scaleX(0.12); }

/* ---------------------------------------------------------------- backtest */
.backtest {
  display: grid; gap: var(--space-5); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-5); background: var(--panel);
  box-shadow: var(--shadow-2);
}
@media (min-width: 1024px) { .backtest { grid-template-columns: minmax(0, 1fr) 300px; } }
.backtest__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.backtest__head h3 { font-size: 0.95rem; color: var(--muted); margin: 0; }
.backtest__legend { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); }
.backtest__legend-line { width: 16px; height: 2px; background: var(--accent); border-radius: 2px; }
.backtest__legend-band { width: 16px; height: 8px; background: color-mix(in oklab, var(--accent-2) 30%, transparent); border-radius: 3px; }
.backtest__chart canvas {
  width: 100%; height: auto; margin-block-start: var(--space-3);
  background: color-mix(in oklab, var(--bg) 65%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.backtest__stages { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.backtest__stages li {
  position: relative; font-family: var(--font-mono); font-size: 0.68rem; padding: 4px 12px 4px 12px;
  border-radius: 999px; border: 1px solid var(--border); color: var(--muted);
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.backtest__stages li.is-active { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, transparent); background: var(--accent-soft); }
.metric-list { margin: 0; display: grid; gap: var(--space-3); align-content: start; }
.metric-list dt { color: var(--muted); font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.06em; }
.metric-list dd { margin: 0; font-family: var(--font-mono); font-size: 0.88rem; }

/* Five failure modes: three across, then the last two centred underneath
   instead of leaving a hole on one side of the row. */
@media (min-width: 1024px) {
  .problems-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .problems-grid > * { grid-column: span 2; }
  .problems-grid > *:nth-child(4) { grid-column: 2 / span 2; }
  .problems-grid > *:nth-child(5) { grid-column: 4 / span 2; }
}

/* -------------------------------------------------------------------- faq */
/* A support desk rather than a bare list: a header strip states what the panel
   is, every question carries a ticket number, and the answer slides open. */
.faq-desk { max-width: 940px; margin-inline: auto; }
.faq-desk__head {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border); border-block-end: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: color-mix(in oklab, var(--bg) 48%, transparent);
}
.faq-desk__icon {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 12px; color: var(--accent-2); background: var(--accent-2-soft);
  border: 1px solid color-mix(in oklab, var(--accent-2) 26%, transparent);
}
.faq-desk__text { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: start; }
.faq-desk__label {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-2);
}
.faq-desk__note { color: var(--muted); font-size: 0.8rem; }
.faq-desk__count {
  font-family: var(--font-mono); font-size: 1.6rem; line-height: 1;
  color: color-mix(in oklab, var(--accent) 68%, transparent);
}

.faq-list {
  display: grid; background: var(--glass);
  border: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
}
.faq-item {
  position: relative; border-block-start: 1px solid var(--border);
  transition: background 0.3s var(--ease-out);
}
.faq-item:first-child { border-block-start: 0; }
.faq-item[open] { background: color-mix(in oklab, var(--accent) 5%, transparent); }
/* the active row earns a gradient rail on the reading edge */
.faq-item::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 2px;
  background: var(--brand-gradient); transform: scaleY(0); transform-origin: top center;
  transition: transform 0.4s var(--ease-out);
}
.faq-item[open]::before { transform: scaleY(1); }
.faq-item summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-4);
  cursor: pointer; padding: var(--space-4) var(--space-5); font-weight: 600;
  color: var(--text-strong); list-style: none;
  transition: color 0.25s var(--ease-out);
}
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__ticket {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em;
  padding: 3px 8px; border-radius: 6px; color: var(--muted);
  background: var(--tile); border: 1px solid var(--border);
  transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.faq-item[open] .faq-item__ticket {
  color: var(--accent); background: var(--accent-soft);
  border-color: color-mix(in oklab, var(--accent) 32%, transparent);
}
.faq-item__question { text-align: start; }
.faq-item__mark { position: relative; width: 14px; height: 14px; flex: 0 0 auto; }
.faq-item__mark::before, .faq-item__mark::after {
  content: ""; position: absolute; inset-block-start: 6px; inset-inline-start: 0;
  width: 14px; height: 2px; background: var(--accent); transition: transform 0.25s var(--ease-out);
}
.faq-item__mark::after { transform: rotate(90deg); }
.faq-item[open] .faq-item__mark::after { transform: rotate(0deg); }
/* height is animated by initFaq() once JS is ready; without it the panel is
   simply open or closed via the [open] attribute. */
.faq-item__body { height: 0; overflow: hidden; transition: height 0.38s var(--ease-out); }
.faq-item[open] .faq-item__body { height: auto; }
.faq-item__inner {
  display: grid; gap: 8px; justify-items: start; text-align: start;
  padding: 0 var(--space-5) var(--space-4);
}
.faq-item__tag {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-2);
}
.faq-item__text { color: var(--muted); font-size: 0.9rem; line-height: 1.9; }
.faq-item__text p:first-child { margin-block-start: 0; }
.faq-item__text p:last-child { margin-block-end: 0; }

/* ------------------------------------------------------------------ forms */
.lead-form {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem); background: var(--panel); box-shadow: var(--shadow-2);
}
.lead-form .field-grid { align-items: start; }
.lead-form .field > label { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--text-strong); }
.lead-form .field-input,
.lead-form input:not([type="checkbox"]):not([type="file"]),
.lead-form select,
.lead-form textarea,
.comment-form input,
.comment-form textarea,
.form--inline input {
  box-sizing: border-box; min-height: 48px; width: 100%; padding: 12px 14px;
  border: 1px solid color-mix(in oklab, var(--border-strong) 72%, transparent);
  border-radius: var(--radius-sm); background: color-mix(in oklab, var(--surface-1) 82%, var(--bg));
  color: var(--text-strong); font: inherit; line-height: 1.5;
  box-shadow: inset 0 1px 0 color-mix(in oklab, white 5%, transparent), 0 5px 18px -16px var(--accent);
  transition: border-color .22s var(--ease-out), background .22s var(--ease-out), box-shadow .22s var(--ease-out), transform .22s var(--ease-out);
}
.lead-form textarea, .comment-form textarea { min-height: 132px; resize: vertical; }
.lead-form .field-input:hover, .lead-form input:not([type="checkbox"]):not([type="file"]):hover,
.lead-form select:hover, .lead-form textarea:hover, .comment-form input:hover, .comment-form textarea:hover,
.form--inline input:hover { border-color: color-mix(in oklab, var(--accent) 42%, var(--border-strong)); }
.lead-form .field-input:focus, .lead-form input:not([type="checkbox"]):not([type="file"]):focus,
.lead-form select:focus, .lead-form textarea:focus, .comment-form input:focus, .comment-form textarea:focus,
.form--inline input:focus { outline: none; border-color: var(--accent); background: var(--surface-1); box-shadow: var(--ring), 0 8px 24px -18px var(--accent); transform: translateY(-1px); }
.lead-form input::placeholder, .lead-form textarea::placeholder, .comment-form input::placeholder,
.comment-form textarea::placeholder, .form--inline input::placeholder { color: color-mix(in oklab, var(--muted) 78%, transparent); }
.lead-form select, select.field-input { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
body.page--fa .lead-form select, body.page--fa select.field-input { background-position: 18px 50%, 13px 50%; }
.lead-form .field--checkbox { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in oklab, var(--surface-1) 55%, transparent); }
.lead-form .field--checkbox label { font-weight: 500; }
.lead-form .wizard__step { animation: form-step-in .35s var(--ease-out); }
@keyframes form-step-in { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wizard__progress { height: 4px; border-radius: 999px; background: color-mix(in oklab, var(--muted) 25%, transparent); overflow: hidden; margin-block-end: var(--space-3); }
.wizard__progress-bar { display: block; height: 100%; width: 25%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.35s var(--ease-out); }
.wizard__counter { margin: 0 0 var(--space-4); font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.wizard__step { border: 0; padding: 0; margin: 0; min-inline-size: auto; }
.wizard__step legend { font-size: 1.05rem; font-weight: 700; margin-block-end: var(--space-4); padding: 0; color: var(--text-strong); }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.field--wide { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; }
.field > label { font-size: 0.85rem; color: var(--muted); }
.field__required { color: var(--accent); }
.field__hint { margin: 0; color: var(--muted); font-size: 0.73rem; }
.field__error { margin: 0; color: var(--danger); font-size: 0.78rem; }
.field--invalid .field-input { border-color: var(--danger); }
.field__filename { margin: 0; font-family: var(--font-mono); font-size: 0.73rem; color: var(--accent); }

.field-input {
  width: 100%; padding: 0.7em 0.9em; border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--bg) 70%, var(--surface-1));
  border: 1px solid var(--border); color: var(--text); font: inherit; font-size: 0.92rem;
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.field-input::placeholder { color: color-mix(in oklab, var(--muted) 80%, transparent); }
.field-input:focus { border-color: color-mix(in oklab, var(--accent) 48%, transparent); }
select.field-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
body.page--fa select.field-input { background-position: 18px 50%, 13px 50%; }
textarea.field-input { resize: vertical; min-height: 120px; }
.field--checkbox { display: flex; align-items: flex-start; gap: var(--space-3); }
.field--checkbox label { color: var(--text); font-size: 0.88rem; }
.checkbox-input { width: 20px; height: 20px; accent-color: var(--accent); margin-block-start: 4px; }
.field--file input[type="file"] { color: var(--muted); font-size: 0.82rem; }
.form-alert {
  border: 1px solid color-mix(in oklab, var(--danger) 40%, transparent);
  background: color-mix(in oklab, var(--danger) 9%, transparent);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
  margin-block-end: var(--space-4); color: var(--danger);
}
.form-alert p { margin: 0; }
.form__required-note { margin-block-start: var(--space-3); }
.wizard__actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-5); }
.hp-field { position: absolute !important; inset-inline-start: -9999px; opacity: 0; height: 0; width: 0; }

.form-success {
  border: 1px solid color-mix(in oklab, var(--accent) 38%, transparent);
  background: var(--accent-soft); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center;
}
.comment-form { margin-block-start: var(--space-5); padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--panel), color-mix(in oklab, var(--accent) 4%, var(--panel))); box-shadow: var(--shadow-1); }
.comment-form h3 { margin-block-start: 0; margin-block-end: var(--space-4); color: var(--text-strong); }
.comment-form p { display: grid; gap: 6px; margin-block: var(--space-3); }
.comment-form label { color: var(--muted); font-size: .85rem; }
.comment-form input, .comment-form textarea { width: 100%; padding: .7em .9em; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in oklab, var(--bg) 70%, var(--surface-1)); color: var(--text); font: inherit; }
.comment-form textarea { min-height: 130px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: color-mix(in oklab, var(--accent) 55%, transparent); box-shadow: var(--ring); }
.form--inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.form--inline input { min-width: 0; }
@media (max-width: 520px) { .form--inline { grid-template-columns: minmax(0, 1fr); } .form--inline .btn { width: 100%; } }
.final-cta__channels { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-block-end: var(--space-5); }
.cta-rings { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; pointer-events: none; }
.cta-rings i {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%;
  width: 320px; height: 320px; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
  animation: ring-pulse 6s var(--ease-out) infinite;
}
.cta-rings i:nth-child(2) { animation-delay: 2s; }
.cta-rings i:nth-child(3) { animation-delay: 4s; }
@keyframes ring-pulse {
  0% { transform: scale(0.6); opacity: 0; }
  30% { opacity: 0.7; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ---------------------------------------------------------------- contact */
.contact-layout { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } }
.contact-channels {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5);
  background: var(--panel); box-shadow: var(--shadow-2);
}
.contact-channels h2 { font-size: 1.15rem; }
.contact-channels ul { margin-block-end: var(--space-4); }

/* -------------------------------------------------------------- page parts */
.breadcrumb { margin-block-end: var(--space-5); font-size: 0.8rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-inline-end: var(--space-2); color: var(--border-strong); }

.page-hero { margin-block-end: var(--space-6); }
.page-hero p { color: var(--muted); max-width: 70ch; }
.page-hero__actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-4); }

.prose { max-width: 75ch; }
.prose h2 { margin-block-start: var(--space-6); }
.spec-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-4); margin: var(--space-5) 0 0; }
.spec-list dt { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; }
.spec-list dd { margin: 0; font-family: var(--font-mono); font-size: 0.88rem; }

.media { margin: 0 0 var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-2); }
.media figcaption { padding: var(--space-3) var(--space-4); color: var(--muted); font-size: 0.78rem; border-block-start: 1px solid var(--border); }

.related, .case-sections { margin-block-start: var(--space-7); }
.check-list { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.check-list li { padding-inline-start: 1.6em; position: relative; }
.check-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--accent); }
.link-list { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.callout { margin-block-start: var(--space-5); }
.notice {
  border: 1px solid color-mix(in oklab, var(--warn) 38%, transparent);
  background: color-mix(in oklab, var(--warn) 8%, transparent);
  color: var(--muted); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-size: 0.85rem;
}
.pricing-note { margin-block-start: var(--space-7); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); background: var(--panel); }
.case-list { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.case-list__item h2 { font-size: 1.25rem; }
.case-list__item p { color: var(--muted); }
.case-sections section { margin-block-end: var(--space-6); }

/* Project overview: the delivery window and the hand-over list sit between the
   spec table and the narrative, so a reader can see what they get before
   reading how it was built. */
.project-facts {
  margin-block-start: var(--space-6); padding: var(--space-5) var(--space-5) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel);
}
.project-facts__head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-block-end: var(--space-4); }
.project-facts__head h2 { font-size: 1rem; margin: 0; }
.project-facts__icon {
  display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
  border: 1px solid color-mix(in oklab, var(--accent) 34%, transparent);
  border-radius: 9px; color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}
.project-facts__icon svg { width: 16px; height: 16px; }
.check-list--cols { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.check-list--cols li { text-align: start; }
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block-end: var(--space-5); }
.filter-bar__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.filter-bar__label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
.pagination { display: flex; align-items: center; gap: var(--space-3); margin-block-start: var(--space-6); font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.error-page { text-align: center; }
.error-page__code { font-family: var(--font-mono); font-size: 4rem; color: var(--accent); margin: 0; }
.error-page__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-block-start: var(--space-5); }

/* ------------------------------------------------------- centred layout */
/* The whole site reads as a centred, symmetrical composition: every heading,
   intro, card, list and action is centred, while form inputs keep their text
   start-aligned so long values stay scannable. */
/* Every section opens with the same centred lockup: a badge carrying that
   section's own icon, then the eyebrow, heading and lead. */
.section-head { max-width: 780px; margin-inline: auto; text-align: center; }
.section-head__badge {
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto var(--space-4);
  border-radius: 17px; color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
  background:
    linear-gradient(150deg, color-mix(in oklab, var(--accent) 18%, transparent), transparent 72%),
    var(--surface-2);
  box-shadow: 0 20px 38px -28px color-mix(in oklab, var(--accent) 85%, transparent), inset 0 1px 0 color-mix(in oklab, #fff 10%, transparent);
}
.section-head__badge .icon svg { width: 26px; height: 26px; }
.section-head .eyebrow { margin-inline: auto; }
.section-head p { margin-inline: auto; }
.section-cta { justify-content: center; }
.subhead { text-align: center; }

.page-hero { max-width: 900px; margin-inline: auto; text-align: center; }
.page-hero .eyebrow { margin-inline: auto; }
.page-hero p { margin-inline: auto; text-align: center; }
.page-hero__actions { justify-content: center; }
.page-hero .icon { display: block; margin-inline: auto; }
.breadcrumb ol { justify-content: center; }

.card, .service-card, .project-card, .post-card, .quote-card, .why-card, .case-list__item,
.logo-card, .pricing-note, .engine__head, .storyboard, .related {
  text-align: center;
}
.card h3, .card h4, .card p, .service-card__summary { margin-inline: auto; }
.service-card { display: flex; flex-direction: column; align-items: center; }
.service-card__summary, .card p { max-width: 46ch; }
.project-card__meta, .spec-list { justify-content: center; }
.spec-list dt, .spec-list dd { text-align: center; }
.why-card__badge, .quote-card__mark { margin-inline: auto; }
.quote-card__footer { justify-content: center; }
.quote-card__footer div, .quote-card__footer p { text-align: center; }

.check-list, .link-list, .compare__col ul, .engine__grid, .logo-row, .card-grid,
.channel-list, .hero__stats, .contact-channels { justify-items: center; }
.check-list li, .link-list li, .compare__col li, .channel-list li, .case-list__item p {
  text-align: center;
}
.engine__grid li, .pipeline__step, .process__step { text-align: center; }
.process__body p, .engine__grid li p { margin-inline: auto; }
.pipeline__step strong, .pipeline__step span { display: block; }

.notice, .legal-note, .form-alert, .callout, .pagination, .case-sections section,
.prose, .spec-list__title, .storyboard__title { text-align: center; }
.prose { max-width: 68ch; margin-inline: auto; }
.prose h2, .prose h3 { margin-inline: auto; }
.case-sections { max-width: 76ch; margin-inline: auto; }

.forms, .field, .field label, .form-legend, .wizard__counter { text-align: center; }
.field label { justify-content: center; }
.field input, .field select, .field textarea { text-align: start; }
.wizard__progress, .wizard__actions { justify-content: center; }
.channel-list a, .channel-list__text { text-align: center; }
.site-footer__col, .site-footer__heading, .site-footer__bottom, .site-footer__credit {
  text-align: center; justify-content: center;
}
.site-footer__links, .site-footer__links li { text-align: center; }
.authored, .post-meta { text-align: center; }

/* The inner pages used to carry an `ornament`: one animated graphic per
   page type, plus a CSS-3D plate stack on the service page. That layer has
   been replaced by the covers in `pages.css` (see includes/page-cover.html),
   which pair each page's own words with a drawing of that page's work. */

/* ------------------------------------------------- inner page motion */
/* Staggered reveals: initStagger writes --i on each child. */
[data-stagger] .reveal { transition-delay: calc(var(--i, 0) * 70ms); }

/* Services list: numbered cards with a hover sweep. */
.card-grid--indexed { counter-reset: card-index; }
.card-grid--indexed > * { counter-increment: card-index; }
.card-grid--indexed > *::before {
  content: counter(card-index, decimal-leading-zero);
  position: absolute; inset-block-start: 16px; inset-inline-end: 20px;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  color: color-mix(in oklab, var(--muted) 65%, transparent);
}
.card-grid--indexed > *::after {
  content: ""; position: absolute; inset-block: auto 0; inset-inline-start: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-out);
}
body.page--fa .card-grid--indexed > *::after { transform-origin: right; }
.card-grid--indexed > *:hover::after { transform: scaleX(1); }

/* Portfolio detail: specification ledger with a scanning highlight. */
.spec-list__title {
  margin: var(--space-5) 0 var(--space-3);
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
}
.project-card__spark--wide { margin-block: var(--space-5) var(--space-6); border-radius: var(--radius-lg); }
.project-card__spark--wide canvas { height: 120px; }
.project-card__spark--wide figcaption {
  margin: 0; padding: var(--space-3) var(--space-4);
  border-block-start: 1px solid var(--border); color: var(--muted); font-size: 0.78rem;
}
.spec-list--ledger {
  position: relative; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel);
}
.spec-list--ledger > div {
  position: relative; padding: var(--space-4) var(--space-5);
  border-inline-end: 1px solid var(--border); border-block-end: 1px solid var(--border);
  transition: background 0.3s var(--ease-out);
}
.spec-list--ledger > div::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 2px;
  background: linear-gradient(180deg, var(--accent), transparent);
  opacity: 0; transition: opacity 0.3s var(--ease-out);
}
.spec-list--ledger > div:hover::before { opacity: 1; }
.spec-list--ledger > div:hover { background: color-mix(in oklab, var(--accent) 5%, transparent); }
.spec-list--ledger::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: -34%; width: 34%; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 13%, transparent), transparent);
  animation: ledger-scan 7s var(--ease-out) infinite;
}
@keyframes ledger-scan { 0% { inset-inline-start: -34%; } 55%, 100% { inset-inline-start: 100%; } }

/* Case studies: milestone rail. */
.case-list--rail { position: relative; padding-inline-start: var(--space-6); }
.case-list--rail::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 5px; width: 2px;
  background: linear-gradient(180deg, transparent, var(--border-strong) 10%, var(--border-strong) 90%, transparent);
}
.case-list--rail .case-list__item { overflow: visible; }
.case-list--rail .case-list__item::before {
  content: ""; position: absolute; inset-inline-start: calc(-1 * var(--space-6) + 0px); inset-block-start: 22px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--surface-1); border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 12%, transparent);
  animation: rail-node 3.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.4s);
}
@keyframes rail-node { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 12%, transparent); } 50% { box-shadow: 0 0 0 9px color-mix(in oklab, var(--accent) 6%, transparent); } }

/* Case study detail: numbered stages. */
.case-sections--numbered { counter-reset: stage; }
.case-sections--numbered section { counter-increment: stage; position: relative; padding-inline-start: clamp(0px, 4vw, 68px); }
.case-sections--numbered section::before {
  content: counter(stage, decimal-leading-zero);
  position: absolute; inset-inline-start: 0; inset-block-start: 0;
  font-family: var(--font-mono); font-size: clamp(1.1rem, 2.4vw, 1.7rem); font-weight: 600;
  color: color-mix(in oklab, var(--accent) 42%, transparent); letter-spacing: 0.06em;
}

/* Knowledge list: article cards with a gradient edge on hover. */
.post-card { position: relative; }
.post-card::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
  transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-out);
}
body.page--fa .post-card::after { transform-origin: right; }
.post-card:hover::after, .post-card.is-visible::after { transform: scaleX(1); }

/* Article page: reading progress + drop cap. */
.reading-progress {
  position: fixed; inset-block-start: var(--header-height); inset-inline: 0; height: 2px; z-index: 40;
  background: color-mix(in oklab, var(--border-strong) 60%, transparent);
}
.reading-progress__fill {
  height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px -1px var(--accent);
}
body.page--fa .reading-progress__fill { transform-origin: right center; }
/* Drop caps only in LTR: Persian script must not be broken apart. */
body.page--en .prose--lede > p:first-of-type::first-letter {
  float: left; margin-inline-end: 0.55rem; font-size: 3.1rem; line-height: 0.86;
  font-weight: 700; color: var(--accent);
}
body.page--en .prose--lede > p:first-of-type { margin-block-start: 0; }

/* 404: glitching code with layered offsets. */
.error-page__code { position: relative; display: inline-block; animation: code-glitch 5.5s steps(1, end) infinite; }
.error-page__code::before, .error-page__code::after {
  content: "404"; position: absolute; inset: 0; opacity: 0; pointer-events: none;
}
.error-page__code::before { color: var(--accent-2); translate: -3px 1px; }
.error-page__code::after { color: var(--danger); translate: 3px -1px; }
@keyframes code-glitch {
  0%, 88%, 100% { opacity: 1; }
  90% { opacity: 0.95; text-shadow: 2px 0 var(--accent-2), -2px 0 var(--danger); }
  92% { text-shadow: none; }
  94% { opacity: 0.85; text-shadow: -3px 0 var(--accent-3); }
  96% { text-shadow: none; }
}
.error-page__code::before, .error-page__code::after { animation: code-layers 5.5s steps(1, end) infinite; }
@keyframes code-layers { 0%, 88%, 100% { opacity: 0; } 90%, 92% { opacity: 0.7; } 94% { opacity: 0.5; } 96% { opacity: 0; } }

/* Pricing / closing panels share a console look. */
.pricing-note { position: relative; overflow: hidden; }
.pricing-note::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  opacity: 0.75;
}
.pricing-note::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 100%; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 7%, transparent), transparent 40%);
}
.pricing-note > * { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .case-sections--numbered section { padding-inline-start: 0; }
  .case-sections--numbered section::before { position: static; display: block; margin-block-end: var(--space-1); }
}

/* ----------------------------------------------------------------- footer */
.site-footer {
  position: relative; overflow: hidden; margin-block-start: var(--space-8);
  border-block-start: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  padding-block: var(--space-7) var(--space-5);
}
.site-footer__glow {
  position: absolute; inset-block-start: -160px; inset-inline-start: 50%; translate: -50% 0;
  width: 620px; height: 320px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%);
  opacity: calc(0.9 * var(--scene-strength));
}
.site-footer > .container { position: relative; }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--space-5); }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.site-footer__col a { color: var(--muted); font-size: 0.86rem; line-height: 1.45; }
.site-footer__col a:hover { color: var(--text-strong); }

/* The contact column is the one place the footer has to line up rather than
   centre: five channels of different lengths, each with its glyph on the same
   edge and its value beside it. A two column grid does that, and it starts on
   the inline edge, so it mirrors correctly between Persian and English instead
   of swapping sides.

   The list is sized to its widest row and centred as a block, so the glyphs
   stack in one column, every value begins at the same offset from its glyph,
   and the whole block still sits centred like the rest of the footer. The
   value is `start`-aligned inside its own cell: inheriting the column's
   centred text was what left a glyph at one edge and its value at the other. */
.site-footer .channel-list--footer {
  justify-items: stretch; width: max-content; max-width: 100%;
  margin-inline: auto; gap: 9px;
}
.site-footer .channel-list--footer li { display: grid; }
.site-footer .channel-list--footer a {
  display: grid; grid-template-columns: 30px minmax(0, 1fr);
  align-items: center; gap: var(--space-3); text-align: start; min-height: 30px;
}
.site-footer .channel-list--footer .channel-icon { display: grid; place-items: center; }
.site-footer .channel-list--footer .channel-list__value {
  justify-self: start; max-width: 100%; text-align: start;
  font-family: inherit; font-size: 0.86rem; line-height: 1.45; overflow-wrap: anywhere;
}
/* Latin values keep the mono face, which is what makes phone numbers and
   addresses easy to compare down the column. */
.site-footer .channel-list--footer .channel-list__value[dir="ltr"] { font-family: var(--font-mono); }
.site-footer__heading { margin-block-end: var(--space-3); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-strong); }
.site-footer__brand p { color: var(--muted); font-size: 0.86rem; max-width: 42ch; }
/* The article feed, explained rather than merely linked. */
.footer-rss {
  display: grid; gap: var(--space-4);
  margin-block-start: var(--space-6); padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--glass);
}
.footer-rss__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.footer-rss__mark {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); border-radius: 12px;
  color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent);
}
.footer-rss__head .site-footer__heading { margin-block: 0 4px; }
.footer-rss__about { margin: 0; color: var(--muted); font-size: 0.82rem; max-width: 74ch; line-height: 1.85; }
.footer-rss__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.footer-rss__url {
  flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere;
  padding: 8px 12px; border-radius: var(--radius-sm); border: 1px dashed var(--border-strong);
  background: color-mix(in oklab, var(--surface-1) 70%, transparent);
  color: var(--muted); font: 500 0.76rem var(--font-mono);
}
.risk-disclaimer {
  margin-block-start: var(--space-4); padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--glass);
}
.risk-disclaimer__title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--warn); margin-block-end: var(--space-2); }
.risk-disclaimer p { margin: 0; color: var(--muted); font-size: 0.82rem; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: center;
  margin-block-start: var(--space-5); padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border); font-size: 0.78rem; color: var(--muted);
}
.site-footer__bottom p { margin: 0; }
.site-footer__credit { display: inline-flex; align-items: center; gap: 8px; }
.credit-link {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text-strong);
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--glass);
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.credit-link:hover { transform: translateY(-2px); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
.credit-link__mark { display: inline-grid; place-items: center; color: var(--accent); }

/* -------------------------------------------------------------- theme toast */
.theme-toast {
  position: fixed; inset-block-end: 22px; inset-inline-start: 50%; translate: -50% 14px;
  padding: 10px 18px; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
  background: var(--surface-2); color: var(--text-strong);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-2);
  opacity: 0; pointer-events: none; z-index: 60;
  transition: opacity 0.3s var(--ease-out), translate 0.3s var(--ease-out);
}
.theme-toast.is-visible { opacity: 1; translate: -50% 0; }

/* A grid whose length leaves one card alone on the final row centres that card
   instead of stranding it: seven notes in three columns, for instance. */
@media (min-width: 1024px) {
  .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--3 > *:last-child:nth-child(3n + 1) { grid-column: 2; }
}

/* ------------------------------------------- persian typography overrides */
/* Tracking and the monospace stack exist for the Latin labels. When the Persian
   page renders a *translated* string in one of those styles the letters come
   apart — letter-spacing cuts the cursive joins and the mono fallback has no
   Arabic glyphs — so localized labels inherit the text face with no tracking.
   Latin-only labels (.eyebrow, stage names, chips) keep their styling. */
body.page--fa .service-card__tag,
body.page--fa .quote-card__label,
body.page--fa .faq-desk__label,
body.page--fa .faq-item__tag,
body.page--fa .diag-board__label,
body.page--fa .diag-row__fix-label,
body.page--fa .ledger__label,
body.page--fa .ledger-row__stamp,
body.page--fa .solution-flow__label,
body.page--fa .solution-pillars__label,
body.page--fa .svc-row__tag,
body.page--fa .why-board__label,
body.page--fa .channel-list__label,
body.page--fa .story__tag,
body.page--fa .process__acceptance span,
body.page--fa .visualizer__controls legend,
body.page--fa .filter-bar__label,
body.page--fa .site-footer__heading,
body.page--fa .risk-disclaimer__title,
body.page--fa .post-card__time,
body.page--fa dt {
  letter-spacing: normal;
  font-family: inherit;
}
/* Arabic script is denser than Latin at the same nominal size — counters, bowls
   and joins all compress — so the micro labels that read fine at 10.2–10.9px in
   English need one step more in Persian. Latin-only readouts keep their size. */
body.page--fa .faq-item__tag,
body.page--fa .why-board__label,
body.page--fa .faq-desk__label,
body.page--fa .brand__text small,
body.page--fa .chip--sm,
body.page--fa .cover__art-tag,
body.page--fa .machine__badge,
body.page--fa .machine__tab-label,
body.page--fa .machine__journal time,
body.page--fa .machine__caption-badge,
body.page--fa .machine__log-title,
body.page--fa .isostack__labels span,
body.page--fa .project-card__meta dt,
body.page--fa .project-card__brief-label,
body.page--fa .risk-card__state,
body.page--fa .diag-row__fix-label,
body.page--fa .solution-flow__label,
body.page--fa .solution-pillars__label,
body.page--fa .section-spine__label,
body.page--fa .story__label,
body.page--fa .story__tag,
body.page--fa .svc-row__tag,
body.page--fa .switch3d__face,
body.page--fa .visualizer__controls legend { font-size: 0.72rem; }
/* Persian is cursive: negative tracking and display letter-spacing break the
   joins, so the display words keep their own size without tracking. */
body.page--fa .pillar__word { letter-spacing: normal; font-family: var(--font-fa); }

/* ----------------------------------------------------------------- reveal */
/* --reveal-delay is set per element; --i is filled in by initStagger() so a
   grid marked with data-stagger cascades instead of popping in at once. */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0ms) + min(var(--i, 0), 8) * 70ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
.is-tilting { transition: transform 0.12s linear; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 1179px) {
  .nav-toggle { display: inline-grid; place-items: center; }
  .site-header__inner { gap: var(--space-3); }
  .primary-nav {
    position: fixed; inset-block-start: var(--header-height); inset-inline: 0;
    flex-direction: column; align-items: stretch; gap: var(--space-4);
    padding: var(--space-5) clamp(1rem, 4vw, 2rem) var(--space-6);
    background: color-mix(in oklab, var(--bg) 97%, transparent);
    border-block-end: 1px solid var(--border);
    transform: translateY(-14px); opacity: 0; visibility: hidden;
    transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s;
    max-height: calc(100dvh - var(--header-height)); overflow-y: auto;
  }
  .primary-nav.is-open { opacity: 1; transform: none; visibility: visible; }
  .primary-nav__list { flex-direction: column; gap: var(--space-3); }
  .primary-nav__list a { font-size: 1rem; }
  /* On touch the dropdown unfolds in place instead of floating. */
  .nav-menu {
    position: static; translate: none; min-width: 0; max-width: none; width: 100%;
    transform: none; opacity: 1; visibility: visible; display: none;
    margin-block-start: var(--space-2); padding: 0 0 0 var(--space-4);
    border: 0; border-inline-start: 1px solid var(--border); border-radius: 0;
    background: none; backdrop-filter: none; box-shadow: none;
  }
  .primary-nav__item.is-open .nav-menu { display: grid; }
  .nav-menu__list { max-height: none; }
  .primary-nav__trigger { width: 100%; justify-content: space-between; font-size: 1rem; }
  .nav-menu__text small { font-size: 0.78rem; }
  .primary-nav__actions { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .lang-switch { align-self: flex-start; }
  .theme-toggle { align-self: flex-start; }
  /* A thumb is not a cursor: the panel rows and controls get the 44px minimum
     they do not need on a desktop where the pointer is precise. */
  .primary-nav__list a,
  .primary-nav__trigger { display: flex; align-items: center; min-height: 44px; }
  .nav-menu a { min-height: 42px; align-items: center; }
  .primary-nav__actions .btn,
  .primary-nav__actions .lang-switch__item { min-height: 44px; }
  .lang-switch__item { min-width: 42px; justify-content: center; }
  .theme-toggle { min-width: 44px; min-height: 44px; }
}

@media (max-width: 900px) {
  html.js .hero-stage { --hero-scroll: 62vh; }
  .isostack__scene { width: 210px; height: 200px; }
  /* The diagnosis and ledger rows drop their right-hand column under the text
     instead of squeezing it. */
  .diag-row { grid-template-columns: 34px 40px minmax(0, 1fr); }
  .diag-row__fix { grid-column: 2 / -1; padding-inline-start: 0; border-inline-start: 0; border-block-start: 1px dashed var(--border-strong); padding-block-start: var(--space-3); }
  .ledger-row { grid-template-columns: 40px minmax(0, 1fr); }
  .ledger-row__stamp { grid-column: 2; justify-self: start; }
  .svc-row { grid-template-columns: 26px 38px minmax(0, 1fr); }
  .svc-row__go { grid-column: 3; }
}

@media (max-width: 640px) {
  .hero__stats { grid-template-columns: 1fr; }
  .compare__switch { display: none; }
  .process__acceptance { margin-block-start: var(--space-3); }
  .cta-rings i { width: 220px; height: 220px; }
  .site-footer__bottom { justify-content: flex-start; }
}

/* Short screens: the hero must still read as one screen, so the hint goes and
   the machine shell tightens rather than the console being clipped. Placed last
   so it wins over the width breakpoints, and mirrored by fitViewport(), which
   gives the canvas whatever height is left. */
@media (max-height: 880px) {
  .hero-stage__hint { display: none; }
  .hero__head h1 { font-size: clamp(1.15rem, 0.85rem + 1.1vw, 1.7rem); }
  .hero__head { gap: var(--space-2); }
  .hero-stage__sticky { padding-block: 0 clamp(6px, 1vh, 14px); }
  .machine__chrome { padding: var(--space-2) var(--space-4); }
  .machine__rail { padding: 6px var(--space-2); }
  .machine__tab { padding: 5px 9px; }
  .machine__caption { padding: 4px var(--space-4); }
  .machine__console { padding: 6px var(--space-4); gap: 6px; }
  .machine__journal { max-height: 26px; }
  .story__hint { display: none; }
}

/* Motion is decoration here: with reduced motion the page keeps every element
   and drops only the movement. */
@media (prefers-reduced-motion: reduce) {
  .sec-decor i, .boot__inner, .boot-candle__wick, .boot-candle__body,
  .hero-scene__orb, .plat-rail__runner, .quotes__track { animation: none !important; }
  .quotes__track { scroll-behavior: auto; }
  html.js .page-flow { transform: none !important; opacity: 1 !important; margin-block-start: 0; }
  .hero-stage__sticky { opacity: 1; }
  .hero-zoom { transform: none; }
}

/* Ultra-short laptops (a 13" screen with a browser toolbar): the machine drops
   its long journal and keeps the controls on one line. */
@media (max-height: 700px) {
  .machine__log { display: none; }
  .machine__subtitle { display: none; }
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .hero-stage { height: auto; }
  .hero-stage__sticky { position: static; height: auto; padding-block: var(--space-7); overflow: visible; }
  .hero-stage__hint { position: static; margin-block-start: var(--space-5); }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .terminal__row { opacity: 1; transform: none; }
  .storyboard__frame { opacity: 1; }
  .hero__head, .machine { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ------------------------------------------------------ phone hero sizing */
/* Placed last on purpose, so it wins over both the width breakpoints and the
   short-screen rules above: on a phone the hero head is compact at every
   height, because every pixel it gives back goes to the portrait canvas under
   it. The heading still reads as the page title — it simply stops scaling up
   with the viewport on the one device where vertical room is the scarce one. */
@media (max-width: 760px) {
  .hero__head { gap: var(--space-2); }
  .hero__head h1 { font-size: clamp(1.05rem, 0.85rem + 1.4vw, 1.4rem); line-height: 1.3; }
  .hero__head .eyebrow { padding: 3px 10px; font-size: 0.66rem; letter-spacing: 0.1em; }
  .hero__actions { gap: var(--space-2); }
  .hero__actions .btn--lg { padding: 10px 15px; font-size: 0.9rem; }
}

/* Short phones (a 640–750 px tall screen): the caption goes and the six stages
   become one scrolling row. The active stage is already named by the tab it
   lights up in the rail, and on this little height the portrait canvas needs
   those hundred pixels — the two rail rows and the caption — far more than a
   second copy of the stage name. On a taller phone the rail keeps all six tabs
   on screen. */
@media (max-width: 760px) and (max-height: 760px) {
  .machine__caption { display: none; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .machine__rail {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(104px, 1fr);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
  }
  .machine__tab { scroll-snap-align: center; }
}

/* Comment feedback and the landing-page proof section share the same calm, structured rhythm. */
.comment-form__success { position: fixed; inset-block-end: 22px; inset-inline-start: 50%; z-index: 80; width: min(460px, calc(100vw - 32px)); padding: 13px 16px; border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); border-radius: var(--radius-sm); background: color-mix(in oklab, var(--surface-2) 94%, var(--accent)); color: var(--text-strong); font-size: .86rem; line-height: 1.75; box-shadow: var(--shadow-2), 0 14px 38px -22px color-mix(in oklab, var(--accent) 70%, transparent); transform: translateX(-50%); }
.comment-form__success.is-error { border-color: color-mix(in oklab, var(--danger) 45%, transparent); background: color-mix(in oklab, var(--danger) 10%, transparent); }
.comment-form .btn[disabled] { cursor: wait; opacity: .7; }

.why-showcase { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--panel); box-shadow: var(--shadow-2); }
.why-showcase__head { display: grid; gap: 8px; padding: clamp(1.25rem, 3vw, 2.4rem); background: linear-gradient(120deg, color-mix(in oklab, var(--accent) 11%, transparent), transparent 54%), color-mix(in oklab, var(--bg) 42%, transparent); border-block-end: 1px solid var(--border); }
.why-showcase__label { display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: var(--accent); font: 600 .72rem var(--font-mono); letter-spacing: .07em; }
.why-showcase__label .icon { display: inline-grid; }
.why-showcase__label svg { width: 16px; height: 16px; }
.why-showcase__claim { width: fit-content; padding: 6px 10px; border: 1px solid color-mix(in oklab, var(--gold) 38%, transparent); border-radius: 999px; color: var(--gold); background: var(--gold-soft); font-size: .76rem; font-weight: 700; }
.why-showcase__head h3 { margin: 0; max-width: 32ch; color: var(--text-strong); font-size: clamp(1.25rem, 2.5vw, 1.8rem); line-height: 1.45; }
.why-showcase__head p { margin: 0; max-width: 65ch; color: var(--muted); line-height: 1.9; }
.why-principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; list-style: none; margin: 0; padding: 1px; background: var(--border); }
.why-principle { position: relative; display: grid; grid-template-columns: auto 42px minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; padding: clamp(1rem, 2.2vw, 1.4rem); background: var(--surface-1); transition: background .28s var(--ease-out); }
.why-principle:hover { background: color-mix(in oklab, var(--accent) 5%, var(--surface-1)); }
.why-principle__number { color: color-mix(in oklab, var(--muted) 65%, transparent); font: 600 .66rem var(--font-mono); padding-block-start: 4px; }
.why-principle__icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid color-mix(in oklab, var(--accent-2) 30%, transparent); border-radius: 12px; color: var(--accent-2); background: var(--accent-2-soft); }
.why-principle__icon svg { width: 20px; height: 20px; }
.why-principle__body h3 { margin: 0 0 5px; color: var(--text-strong); font-size: 1rem; }
.why-principle__body p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.85; }
.why-principle__stamp { grid-column: 2 / -1; width: fit-content; color: var(--accent); font: 600 .67rem var(--font-mono); padding: 4px 8px; border-radius: 7px; background: var(--accent-soft); }
.why-evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: color-mix(in oklab, var(--bg) 35%, transparent); }
.why-evidence__item { display: grid; gap: 4px; padding: 18px; text-align: center; border-inline-start: 1px solid var(--border); }
.why-evidence__item:first-child { border-inline-start: 0; }
.why-evidence__item strong { color: var(--text-strong); font-size: 1rem; }
.why-evidence__item span { color: var(--muted); font-size: .75rem; }
@media (max-width: 760px) { .why-showcase { border-radius: var(--radius-lg); } .why-principles { grid-template-columns: minmax(0, 1fr); } .why-evidence { grid-template-columns: minmax(0, 1fr); } .why-evidence__item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; text-align: start; border-inline-start: 0; border-block-start: 1px solid var(--border); } .why-evidence__item:first-child { border-block-start: 0; } }
@media (max-width: 420px) { .why-principle { grid-template-columns: 34px minmax(0, 1fr); } .why-principle__icon { grid-column: 1; grid-row: 2; } .why-principle__body { grid-column: 2; grid-row: 1 / span 2; } .why-principle__stamp { grid-column: 2; } }

/* The three solution pillars are intentionally a vertical reading sequence. */
.solution-pillars .pillar-grid { grid-template-columns: minmax(0, 1fr); }
.solution-pillars .pillar { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-4); padding: clamp(1rem, 2.5vw, 1.35rem); }
.solution-pillars .pillar__icon { grid-row: span 2; }
.solution-pillars .pillar__word { align-self: center; }
.solution-pillars .pillar__body { grid-column: 2 / -1; margin: 0; max-width: 68ch; }
.solution-pillars .pillar__proof { grid-column: 3; grid-row: 1; align-self: center; }
@media (max-width: 560px) { .solution-pillars { padding: var(--space-3); } .solution-pillars .pillar { grid-template-columns: 42px minmax(0, 1fr); gap: var(--space-3); } .solution-pillars .pillar__proof { grid-column: 2; grid-row: auto; justify-self: start; } .solution-pillars .pillar__body { grid-column: 1 / -1; } }

/* Form redesign: keep the controls calm, readable, and touch-friendly. */
.lead-form {
  position: relative; overflow: hidden; padding: clamp(1.1rem, 3.5vw, 2.3rem);
  border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border));
  background: linear-gradient(145deg, color-mix(in oklab, var(--panel) 94%, var(--accent)), var(--panel));
}
.lead-form::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: var(--brand-gradient); }
.lead-form__intro { display: grid; gap: 8px; margin-block-end: var(--space-5); padding-block-end: var(--space-4); border-block-end: 1px solid var(--border); text-align: start; }
.lead-form__intro h2 { margin: 0; color: var(--text-strong); font-size: clamp(1.2rem, 2vw, 1.55rem); }
.lead-form__intro p { margin: 0; color: var(--muted); font-size: .82rem; }
.lead-form__eyebrow, .comment-form__eyebrow { color: var(--accent); font: 600 .7rem var(--font-mono); letter-spacing: .08em; }
.wizard__topline { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; margin-block-end: var(--space-5); }
.wizard__topline .wizard__counter { margin: 0; white-space: nowrap; }
.wizard__progress { margin: 0; height: 7px; background: color-mix(in oklab, var(--border-strong) 55%, transparent); box-shadow: inset 0 1px 2px color-mix(in oklab, black 18%, transparent); }
.wizard__progress-bar { border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 14px color-mix(in oklab, var(--accent) 42%, transparent); }
.wizard__step { padding: clamp(.85rem, 2.5vw, 1.25rem); border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in oklab, var(--surface-1) 52%, transparent); }
.wizard__step legend { margin-block-end: var(--space-5); font-size: 1.1rem; }
.wizard__actions { justify-content: flex-end; align-items: center; padding-block-start: var(--space-4); border-block-start: 1px solid var(--border); }
.wizard__actions .btn { min-height: 46px; min-width: 112px; }
.form__required-note { text-align: start !important; }
.comment-form { text-align: start !important; }
.comment-form__head { display: grid; gap: 6px; margin-block-end: var(--space-4); padding-block-end: var(--space-3); border-block-end: 1px solid var(--border); }
.comment-form__head h3 { margin: 0; font-size: 1.05rem; }
.comment-form__head p { margin: 0; color: var(--muted); font-size: .82rem; }
.comment-form p { text-align: start; }
.comment-form label { display: block; font-weight: 600; color: var(--text-strong); }
.comment-form__actions { display: flex; justify-content: flex-end; margin-block-start: var(--space-4); }
.comment-form__actions .btn { min-height: 46px; }
.form--inline { padding-block-start: var(--space-2); }

@media (max-width: 640px) {
  .lead-form { padding: 1rem; border-radius: var(--radius); }
  .lead-form__intro { margin-block-end: var(--space-4); }
  .wizard__topline { grid-template-columns: 1fr; gap: 8px; }
  .wizard__topline .wizard__counter { text-align: start; }
  .field-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .wizard__step { padding: .9rem; }
  .wizard__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .wizard__actions .btn { width: 100%; min-width: 0; }
  .comment-form { padding: 1rem; }
  .comment-form__actions, .comment-form__actions .btn { width: 100%; }
}