/* Athar Sec. Static site: no third-party requests, one small script for the theme toggle.

   Layout: asymmetric 12-column editorial grid. The bold moment is the hero instrument
   (QSentry's sentinel rings sweeping a neural field until TraceMind's trace lights up);
   everything around it stays quiet: hairlines, mono annotations, chrome type, Qatar maroon. */

/* The regular file is the Montserrat project's Alternates cut (curled E and Y): wordmark only. */
@font-face { font-family: "Athar Wordmark"; src: url("fonts/Montserrat-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Dark-first: night chrome is the brand's home. Light is porcelain and graphite. */
:root {
  color-scheme: dark;
  --bg: #08090B;
  --bg-raise: #0C0E11;
  --panel: #111418;
  --panel-2: #161A1F;
  --fg: #ECEFF2;
  --fg-2: #A8AFB8;
  --fg-3: #5E656F;
  --line: rgba(226, 231, 237, .085);
  --line-2: rgba(226, 231, 237, .16);
  --line-3: rgba(226, 231, 237, .30);
  --maroon: #8A1538;
  --maroon-hi: #C2264F;
  --maroon-ink: #EF7C9C;
  --glow: rgba(194, 38, 79, .26);
  --sweep-o: .34;
  --ok: #7FD4A8;
  --ok-bg: rgba(127, 212, 168, .10);
  --warn: #F0C36A;
  --warn-bg: rgba(240, 195, 106, .10);
  --chrome-a: #FFFFFF;
  --chrome-b: #D9DEE4;
  --chrome-c: #8A929C;
  --chrome-d: #EEF1F4;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 40px 80px -40px rgba(0, 0, 0, .9);

  --display: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;  /* 700 only: brand moments */
  --wordmark: "Athar Wordmark", "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", ui-monospace, Consolas, Menlo, monospace;
  --arabic: "Segoe UI", "SF Arabic", "Geeza Pro", "Noto Kufi Arabic", "Noto Sans Arabic", Tahoma, sans-serif;

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #ECEEF1;
    --bg-raise: #F3F4F6;
    --panel: #F9FAFB;
    --panel-2: #FFFFFF;
    --fg: #0F1216;
    --fg-2: #49505A;
    --fg-3: #9AA0A8;
    --line: rgba(15, 18, 22, .09);
    --line-2: rgba(15, 18, 22, .16);
    --line-3: rgba(15, 18, 22, .32);
    --maroon: #8A1538;
    --maroon-hi: #A61C46;
    --maroon-ink: #8A1538;
    --glow: rgba(138, 21, 56, .13);
    --sweep-o: .22;
    --ok: #1B6E46;
    --ok-bg: rgba(27, 110, 70, .09);
    --warn: #865800;
    --warn-bg: rgba(134, 88, 0, .09);
    --chrome-a: #3A414A;
    --chrome-b: #0F1216;
    --chrome-c: #626A74;
    --chrome-d: #1B1F25;
    --shadow: 0 1px 2px rgba(15, 18, 22, .05), 0 30px 60px -34px rgba(15, 18, 22, .30);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ECEEF1;
  --bg-raise: #F3F4F6;
  --panel: #F9FAFB;
  --panel-2: #FFFFFF;
  --fg: #0F1216;
  --fg-2: #49505A;
  --fg-3: #9AA0A8;
  --line: rgba(15, 18, 22, .09);
  --line-2: rgba(15, 18, 22, .16);
  --line-3: rgba(15, 18, 22, .32);
  --maroon: #8A1538;
  --maroon-hi: #A61C46;
  --maroon-ink: #8A1538;
  --glow: rgba(138, 21, 56, .13);
  --sweep-o: .22;
  --ok: #1B6E46;
  --ok-bg: rgba(27, 110, 70, .09);
  --warn: #865800;
  --warn-bg: rgba(134, 88, 0, .09);
  --chrome-a: #3A414A;
  --chrome-b: #0F1216;
  --chrome-c: #626A74;
  --chrome-d: #1B1F25;
  --shadow: 0 1px 2px rgba(15, 18, 22, .05), 0 30px 60px -34px rgba(15, 18, 22, .30);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--maroon-ink); outline-offset: 3px; }
::selection { background: var(--maroon); color: #FFFFFF; }

.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip {
  position: absolute; left: var(--gutter); top: -5rem; z-index: 50;
  padding: .7rem 1rem; background: var(--fg); color: var(--bg);
  font: 700 .9rem/1 var(--body); text-decoration: none;
}
.skip:focus { top: .75rem; }

/* Shared marks */
.chrome {
  background: linear-gradient(180deg, var(--chrome-a) 0%, var(--chrome-b) 46%, var(--chrome-c) 58%, var(--chrome-d) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.mk-metal { fill: url(#metal); }
.mk-gem { fill: var(--maroon-hi); }
.m-a { stop-color: var(--chrome-a); }
.m-b { stop-color: var(--chrome-b); }
.m-c { stop-color: var(--chrome-c); }
.m-d { stop-color: var(--chrome-d); }

.overline {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.3rem;
  color: var(--fg-2);
  font: 400 .76rem/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase;
}
.overline::before { content: ""; flex: none; width: .5rem; height: .5rem; background: var(--maroon-hi); transform: rotate(45deg); }

/* Buttons: machined, chamfered corners echo the logo's blade cuts */
.btn {
  --cut: 11px;
  --btn-edge: rgba(255, 255, 255, .2);
  --btn-fill: linear-gradient(180deg, #A41B46 0%, #7C1132 100%);
  --btn-fill-hover: linear-gradient(180deg, #BB2552 0%, #8A1538 100%);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 3rem; padding: .85rem 1.55rem;
  border: 0; background: none; cursor: pointer;
  color: #FFFFFF; text-decoration: none;
  font: 700 .95rem/1 var(--body); letter-spacing: .01em;
}
.btn::before, .btn::after {
  content: ""; position: absolute; z-index: -1;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.btn::before { inset: 0; background: var(--btn-edge); }
.btn::after { inset: 1px; background: var(--btn-fill); }
.btn:hover::after { background: var(--btn-fill-hover); }
.btn:focus-visible { outline-offset: 4px; }
.btn svg { width: 1rem; height: 1rem; flex: none; }
.btn-ghost {
  --btn-edge: var(--line-3);
  --btn-fill: var(--bg);
  --btn-fill-hover: var(--panel-2);
  color: var(--fg);
}
.btn-sm { --cut: 8px; min-height: 2.5rem; padding: .6rem 1.1rem; font-size: .86rem; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.bar { display: flex; align-items: center; gap: 1.25rem; min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--fg); text-decoration: none; }
.top .brand { margin-right: auto; }
.brand .mark { width: 2.2rem; height: 2.2rem; }
.wordmark { font: 400 1.25rem/1 var(--wordmark); letter-spacing: .01em; white-space: nowrap; }
.wordmark .s { color: var(--maroon-ink); }
.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a {
  padding-block: .5rem; color: var(--fg-2); text-decoration: none;
  font: 400 .76rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
}
.nav a:hover { color: var(--fg); }

.theme-toggle { display: none; }
.js .theme-toggle {
  display: inline-grid; place-items: center; flex: none;
  width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: transparent; color: var(--fg-2); cursor: pointer;
}
.js .theme-toggle:hover { color: var(--fg); border-color: var(--line-3); }
.theme-toggle svg { width: 1.05rem; height: 1.05rem; }
.theme-toggle .sun { display: none; }
.theme-toggle[data-current="dark"] .sun { display: block; }
.theme-toggle[data-current="dark"] .moon { display: none; }

.menu { display: none; position: relative; }
.menu summary {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--line-2); border-radius: 50%;
  color: var(--fg-2); cursor: pointer; list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 1.05rem; height: 1.05rem; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + .7rem);
  display: grid; min-width: 14rem; padding: .4rem;
  background: var(--panel-2); border: 1px solid var(--line-2); box-shadow: var(--shadow);
}
.menu-panel a {
  padding: .8rem .9rem; color: var(--fg); text-decoration: none;
  font: 400 .8rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.menu-panel a:hover { background: var(--panel); }

@media (max-width: 900px) {
  .nav { display: none; }
  .menu { display: block; }
}
@media (max-width: 420px) {
  .top .btn-sm { display: none; }
}

/* Hero */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 7vw, 6rem); }
.hero-grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); } }
.hero-copy { min-width: 0; }

.eyebrow {
  display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  margin-bottom: 1.7rem; color: var(--fg-2);
  font: 400 .76rem/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase;
}
.eyebrow .ar { color: var(--maroon-ink); font: 700 1.25rem/1 var(--arabic); letter-spacing: 0; text-transform: none; }
.eyebrow .rule { width: 2.25rem; height: 1px; background: var(--line-3); }
@media (max-width: 480px) { .eyebrow { gap: .7rem; letter-spacing: .16em; } .eyebrow .rule { display: none; } }
.nowrap { white-space: nowrap; }

h1, h2, h3, h4 { margin: 0; }
h1 {
  font: 700 clamp(2.5rem, 1rem + 3.6vw, 4.7rem)/1.03 var(--display);
  letter-spacing: -.03em;
}
h1 .line { display: block; }
.traced { position: relative; white-space: nowrap; }
.traced::after {
  content: ""; position: absolute; left: 0; right: .42em; bottom: -.03em;
  height: max(2px, .04em);
  background: linear-gradient(90deg, transparent, var(--maroon-hi) 22%);
}
.traced::before {
  content: ""; position: absolute; right: .24em; bottom: -.115em;
  width: .2em; height: .2em; background: var(--maroon-hi); transform: rotate(45deg);
}
.lede { max-width: 34rem; margin-top: 1.9rem; color: var(--fg-2); font-size: clamp(1.08rem, 1rem + .35vw, 1.24rem); line-height: 1.6; }
.lede strong { color: var(--fg); font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.3rem; }
.creds {
  display: flex; flex-wrap: wrap; gap: .7rem 1.7rem;
  margin: 2.8rem 0 0; padding: 1.2rem 0 0; list-style: none;
  border-top: 1px solid var(--line);
  color: var(--fg-2); font: 400 .72rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.creds li { display: inline-flex; align-items: center; gap: .6rem; }
.creds li::before { content: ""; flex: none; width: .4rem; height: .4rem; background: var(--maroon-hi); transform: rotate(45deg); }

.instrument { position: relative; justify-self: center; width: min(100%, 640px); margin: 0; }
/* the radar field: concentric rings and a maroon glow, centered on the dial and fading out */
.instrument::before {
  content: ""; position: absolute; z-index: -1; inset: -38%;
  background:
    radial-gradient(circle, var(--glow), transparent 30%),
    repeating-radial-gradient(circle, transparent 0 55px, var(--line) 55px 56px);
  -webkit-mask-image: radial-gradient(circle, #000 0 30%, transparent 64%);
  mask-image: radial-gradient(circle, #000 0 30%, transparent 64%);
  pointer-events: none;
}
.instrument svg { width: 100%; height: auto; overflow: visible; }
.corner { position: absolute; width: 18px; height: 18px; border: 0 solid var(--line-3); pointer-events: none; }
.corner.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.corner.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.corner.bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.corner.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* SVG vocabulary (all colors come from tokens, so drawings follow the theme) */
.v-line { fill: none; stroke: var(--line-2); stroke-width: 1; }
.v-line-3 { fill: none; stroke: var(--line-3); stroke-width: 1; }
.v-dim { fill: none; stroke: var(--line); stroke-width: 1; }
.v-dash { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 6; }
.v-maroon { fill: var(--maroon-hi); }
.v-maroon-stroke { fill: none; stroke: var(--maroon-hi); stroke-width: 1.4; }
.v-node { fill: var(--fg-3); }
.v-node-strong { fill: var(--fg-2); }
.v-panel { fill: var(--panel-2); stroke: var(--line-2); stroke-width: 1; }
.v-panel-hot { fill: var(--panel-2); stroke: var(--maroon-hi); stroke-width: 1.2; }
.v-text { fill: var(--fg-2); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; }
.v-text-strong { fill: var(--fg); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; }
.v-text-hot { fill: var(--maroon-ink); font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; }
.v-label { fill: var(--fg-2); font-family: var(--mono); font-size: 10px; letter-spacing: .26em; }
.v-hud { fill: var(--fg); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }
.hud-plate { fill: var(--panel-2); stroke: var(--line-2); stroke-width: 1; }

/* Hero instrument motion: one 8 s sweep; nodes ping as it passes; the trace assembles in the same pass */
.sweep { transform-box: view-box; transform-origin: 320px 320px; animation: sweep 8s linear infinite; }
.sweep-a { stop-color: var(--maroon-hi); stop-opacity: var(--sweep-o); }
.sweep-b { stop-color: var(--maroon-hi); stop-opacity: 0; }
.sweep-fill { fill: url(#sweepGrad); }
.sweep-edge { stroke: var(--maroon-hi); stroke-width: 1.3; opacity: .85; }
@keyframes sweep { to { transform: rotate(360deg); } }

.syn { fill: none; stroke: var(--line-2); stroke-width: .9; }
.node { fill: var(--fg-3); transform-box: fill-box; transform-origin: center; animation: ping 8s linear infinite; }
@keyframes ping {
  0% { fill: var(--fg); transform: scale(2.1); }
  11%, 100% { fill: var(--fg-3); transform: scale(1); }
}

.orbit { transform-box: view-box; transform-origin: 320px 320px; animation: sweep 26s linear infinite; }
.orbit.b { animation-duration: 38s; animation-direction: reverse; }
.orbit ellipse { fill: none; stroke: var(--line-3); stroke-width: .9; }

/* trace segments draw on with their measured length (--len, set per segment by the generator) */
.seg, .seg-glow {
  fill: none; stroke: var(--maroon-hi); stroke-linecap: round;
  stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len);
  animation: seg 8s linear infinite;
}
.seg { stroke-width: 2; }
.seg-glow { stroke-width: 7; stroke-opacity: .22; }
@keyframes seg {
  0% { stroke-dashoffset: var(--len); opacity: 1; }
  6% { stroke-dashoffset: 0; opacity: 1; }
  62% { stroke-dashoffset: 0; opacity: 1; }
  74% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: var(--len); opacity: 0; }
}
.hud { opacity: 0; animation: hud 8s linear infinite; }
@keyframes hud {
  0% { opacity: 0; }
  4%, 62% { opacity: 1; }
  74%, 100% { opacity: 0; }
}
.chain-hot { fill: var(--maroon-hi); }
.chain-ring { fill: none; stroke: var(--maroon-hi); stroke-width: 1.2; }
.core-gem { fill: var(--maroon-hi); }
.core-glow-a { stop-color: var(--maroon-hi); stop-opacity: .55; }
.core-glow-b { stop-color: var(--maroon-hi); stop-opacity: 0; }
.core-glow { fill: url(#coreGlow); }
.core-halo { fill: none; stroke: var(--maroon-hi); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; opacity: 0; animation: halo 8s ease-out infinite; }
@keyframes halo {
  0% { transform: scale(.5); opacity: .95; }
  16% { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}
@media (max-width: 560px) {
  .hero-svg .v-label, .hero-svg .hud-text, .hero-svg .hud-plate, .hero-svg .hud-leader, .hero-svg .corner-label { display: none; }
}

/* QSentry gates */
.tok { fill: var(--fg); animation: travel 6s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes travel {
  0% { transform: translateX(0); opacity: 0; }
  5% { opacity: 1; }
  38% { transform: translateX(var(--dx)); opacity: 1; }
  52% { transform: translateX(var(--dx)); opacity: 0; }
  100% { transform: translateX(var(--dx)); opacity: 0; }
}
.flag { fill: var(--maroon-hi); }
.gate-hot { fill: none; stroke: var(--maroon-hi); stroke-width: 1.2; stroke-dasharray: 2 4; }
.unsure { fill: var(--panel-2); stroke: var(--fg-2); stroke-width: 1.2; }

/* TraceMind neural field */
/* a single bright dash travels each synapse; --len is the synapse's measured length */
.pulse-path {
  --dash: 16px;
  fill: none; stroke: var(--maroon-hi); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: var(--dash) calc(var(--len) + var(--dash));
  stroke-dashoffset: var(--dash);
  animation: pulse 7s linear infinite;
}
@keyframes pulse {
  0% { stroke-dashoffset: var(--dash); }
  14%, 100% { stroke-dashoffset: calc(-1 * var(--len)); }
}
.cite-arc { fill: none; stroke: var(--maroon-hi); stroke-width: 1.3; stroke-dasharray: 4 5; opacity: 0; animation: cite 7s linear infinite; }
.cite-label { opacity: 0; animation: cite 7s linear infinite; }
@keyframes cite {
  0%, 44% { opacity: 0; }
  50%, 88% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
.card-glow { fill: none; stroke: var(--maroon-hi); stroke-width: 1.2; opacity: 0; animation: cite 7s linear infinite; }

/* Sections */
.section { padding-block: clamp(4.5rem, 9vw, 8rem); border-top: 1px solid var(--line); }
h2 {
  max-width: 20ch;
  font: 400 clamp(2.1rem, 1.3rem + 2.6vw, 3.45rem)/1.08 var(--body);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.section-intro { max-width: 37rem; margin-top: 1.4rem; color: var(--fg-2); font-size: 1.14rem; }
.split-head { display: grid; gap: 1rem 3rem; align-items: end; }
@media (min-width: 960px) { .split-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .split-head .section-intro { margin-top: 0; } }

/* Problem */
.signals { display: grid; margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line-2); }
@media (min-width: 900px) { .signals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.signal { padding: 1.9rem 0 2rem; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) {
  .signal { padding: 2.2rem 2.2rem 0 0; border-bottom: 0; }
  .signal + .signal { padding-left: 2.2rem; border-left: 1px solid var(--line); }
}
.tag {
  display: inline-block; padding: .38rem .6rem;
  border: 1px solid color-mix(in srgb, var(--maroon-hi) 50%, transparent);
  background: color-mix(in srgb, var(--maroon) 12%, transparent);
  color: var(--maroon-ink); font: 400 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.signal h3 { margin: 1.4rem 0 .7rem; font: 400 1.6rem/1.2 var(--body); letter-spacing: -.02em; }
.signal p { max-width: 32ch; color: var(--fg-2); }

/* Product chambers */
.chamber {
  position: relative; display: grid; gap: clamp(2.25rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(1.4rem, 4vw, 3.5rem);
  background: linear-gradient(180deg, var(--panel), var(--bg-raise));
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.chamber + .chamber { margin-top: clamp(1.5rem, 3vw, 2rem); }
@media (min-width: 1000px) {
  .chamber { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; }
  .chamber.mirror { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .chamber.mirror .chamber-copy { order: 2; }
}
.chamber-copy { min-width: 0; }
.chamber-copy > p { max-width: 36rem; color: var(--fg-2); }
.lockup { display: flex; align-items: center; gap: 1.1rem; }
.product-icon { width: 3.2rem; height: 3.2rem; flex: none; }
.product-name { font: 700 clamp(2.1rem, 1.55rem + 1.7vw, 2.9rem)/1 var(--display); letter-spacing: -.025em; }
.product-name .hl { color: var(--maroon-ink); }
.kicker { margin-top: .55rem; color: var(--fg-2); font: 400 .72rem/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.claim { margin: 2rem 0 .9rem; font: 400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.2 var(--body); letter-spacing: -.02em; max-width: 24ch; text-wrap: balance; }
.chamber-copy > .claim { color: var(--fg); }

.layers { margin: 1.9rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.layers li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .15rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.layers .k { grid-row: span 2; padding-top: .15rem; color: var(--maroon-ink); font: 400 .78rem/1.5 var(--mono); letter-spacing: .12em; }
.layers strong { font: 700 1rem/1.4 var(--body); }
.layers .d { color: var(--fg-2); font-size: .96rem; }

.specs { display: grid; gap: 1.4rem 2rem; margin: 1.9rem 0 0; }
@media (min-width: 620px) { .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.specs > div { padding-top: 1rem; border-top: 1px solid var(--line-2); }
.specs dt { font: 700 1rem/1.4 var(--body); }
.specs dd { margin: .35rem 0 0; color: var(--fg-2); font-size: .96rem; }

.status {
  display: inline-flex; align-items: center; gap: .65rem; margin-top: 1.8rem; padding: .55rem .85rem;
  border: 1px solid var(--line-2); color: var(--fg-2);
  font: 400 .7rem/1.45 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.beacon { position: relative; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok); }
.beacon::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--ok); opacity: 0; animation: beacon 2.6s ease-out infinite; }
@keyframes beacon { 0% { transform: scale(.4); opacity: .9; } 70%, 100% { transform: scale(1.6); opacity: 0; } }

.diagram { min-width: 0; margin: 0; }
.diagram svg { width: 100%; height: auto; }
/* on phones the diagrams keep a legible size and scroll sideways inside their card */
.diagram-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
@media (max-width: 600px) { .diagram-scroll svg { width: 520px; max-width: none; } }
.diagram figcaption { margin-top: 1rem; color: var(--fg-2); font: 400 .78rem/1.55 var(--mono); letter-spacing: .03em; }

/* How it works */
.pipeline { display: grid; margin: clamp(2.75rem, 5vw, 4.25rem) 0 0; padding: 0; list-style: none; }
@media (min-width: 960px) { .pipeline { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pipeline li { position: relative; padding: 0 0 2.4rem 3.4rem; }
.pipeline li::before { content: ""; position: absolute; left: 1.1rem; top: 2.6rem; bottom: .2rem; width: 1px; background: var(--line-2); }
.pipeline li:last-child::before { display: none; }
.pipeline .num {
  position: absolute; left: .25rem; top: .25rem;
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem;
  border: 1px solid var(--maroon-hi); background: var(--bg); transform: rotate(45deg);
}
.pipeline .num span { transform: rotate(-45deg); color: var(--fg); font: 700 .72rem/1 var(--mono); }
.pipeline h3 { margin-bottom: .55rem; font: 700 1.3rem/1.3 var(--display); letter-spacing: -.01em; }
.pipeline p { max-width: 30ch; color: var(--fg-2); }
.via {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .9rem;
  color: var(--maroon-ink); font: 400 .7rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.via::after { content: "→"; letter-spacing: 0; }
@media (min-width: 960px) {
  .pipeline li { padding: 3.7rem 2rem 0 0; }
  .pipeline li::before { left: 2.6rem; right: 0; top: 1.1rem; bottom: auto; width: auto; height: 1px; }
  .pipeline .via { position: absolute; top: 0; left: 3.2rem; margin-top: 0; transform: translateY(-.15rem); padding-right: .6rem; background: var(--bg); }
  .pipeline .via::after { display: none; }
}
.note {
  display: flex; gap: .8rem; align-items: baseline; max-width: 46rem; margin-top: 1.5rem;
  color: var(--fg-2); font: 400 .8rem/1.6 var(--mono); letter-spacing: .02em;
}
.note::before { content: ""; flex: none; width: .45rem; height: .45rem; background: var(--maroon-hi); transform: translateY(-.1rem) rotate(45deg); }

/* Case view */
.case { margin: clamp(2.5rem, 5vw, 3.75rem) 0 0; border: 1px solid var(--line-2); background: var(--panel); box-shadow: var(--shadow); }
.case-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem;
  padding: .85rem 1.15rem; border-bottom: 1px solid var(--line); background: var(--bg-raise);
  color: var(--fg-2); font: 400 .72rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.case-bar strong { color: var(--fg); font-weight: 700; }
.case-bar .ill { padding: .3rem .5rem; border: 1px dashed var(--line-3); }
.case-body { display: grid; }
@media (min-width: 920px) {
  .case-body { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .case-timeline { border-right: 1px solid var(--line); }
}
.col-title { padding: 1.05rem 1.15rem .55rem; color: var(--fg-2); font: 400 .7rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.tl { margin: 0; padding: 0 1.15rem 1.1rem; list-style: none; }
.tl li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .9rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.tl time { color: var(--fg-2); font: 400 .82rem/1.55 var(--mono); font-variant-numeric: tabular-nums; }
.src { display: inline-block; margin-bottom: .3rem; padding: .22rem .42rem; border: 1px solid var(--line-2); color: var(--fg-2); font: 400 .68rem/1.1 var(--mono); letter-spacing: .06em; }
.tl p { font-size: .95rem; }
.finding { padding: 1rem 1.15rem 1.1rem; border-top: 1px solid var(--line); }
.finding-head { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem; }
.finding h3 { margin-right: auto; font: 700 1rem/1.35 var(--body); }
.tech { color: var(--maroon-ink); font: 400 .74rem/1 var(--mono); letter-spacing: .06em; }
.verdict { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .55rem; font: 700 .74rem/1.2 var(--body); }
.verdict svg { width: .8rem; height: .8rem; }
.verdict.ok { background: var(--ok-bg); color: var(--ok); }
.verdict.no { background: var(--warn-bg); color: var(--warn); }
.cites { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.cite {
  padding: .34rem .5rem; color: var(--fg); font: 400 .72rem/1.1 var(--mono);
  border: 1px solid color-mix(in srgb, var(--maroon-hi) 40%, var(--line-2));
  background: color-mix(in srgb, var(--maroon) 9%, transparent);
}
.cite::before { content: "↳ "; color: var(--maroon-ink); }
.gap { margin-top: .6rem; color: var(--fg-2); font-size: .95rem; }
.chat { display: grid; gap: 1rem; padding: 1.15rem 1.15rem 1.3rem; border-top: 1px solid var(--line); background: var(--bg-raise); }
.msg { max-width: 48rem; }
.who { display: block; margin-bottom: .3rem; color: var(--fg-2); font: 400 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.msg.ai .who { color: var(--maroon-ink); }
.msg.ai p { padding-left: .9rem; border-left: 1px solid var(--maroon-hi); }
.case-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem;
  padding: .85rem 1.15rem; border-top: 1px solid var(--line);
  color: var(--fg-2); font: 400 .7rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}

/* About */
.about-grid { display: grid; gap: clamp(2.75rem, 6vw, 5rem); }
@media (min-width: 960px) {
  .about-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
  .about-grid .lexicon { order: -1; }
}
.lexicon { position: relative; padding: clamp(1.6rem, 4vw, 2.6rem); border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--panel), var(--bg-raise)); box-shadow: var(--shadow); }
.lexicon .word { display: block; font: 700 clamp(5.5rem, 3.5rem + 8vw, 9rem)/1.15 var(--arabic); text-align: right; }
.lexicon .entry { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin-top: .8rem; padding-top: 1rem; border-top: 1px solid var(--line-2); }
.translit { font: 400 1.75rem/1 var(--wordmark); letter-spacing: 0; }
.pos { color: var(--fg-2); font: 400 .78rem/1.3 var(--mono); letter-spacing: .06em; }
.senses { margin: 1.2rem 0 0; padding-left: 1.3rem; color: var(--fg-2); }
.senses li + li { margin-top: .35rem; }
.senses li::marker { color: var(--maroon-ink); font-family: var(--mono); font-size: .85em; }
.plural { margin-top: 1.1rem; color: var(--fg-2); font-size: .95rem; }
.plural .ar { color: var(--fg); font: 700 1.15rem/1 var(--arabic); }

.principles { display: grid; margin: 2.2rem 0 0; border-top: 1px solid var(--line-2); }
@media (min-width: 640px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; } }
.principles > div { padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.principles dt { font: 700 1.08rem/1.3 var(--display); letter-spacing: -.005em; }
.principles dd { margin: .4rem 0 0; color: var(--fg-2); }

/* Call to action */
.cta { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(5rem, 11vw, 9.5rem); border-top: 1px solid var(--line); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(55% 75% at 82% 62%, var(--glow), transparent 70%); }
.cta .watermark { position: absolute; z-index: -1; right: max(-6rem, -8vw); bottom: -18%; width: min(52vw, 560px); opacity: .09; pointer-events: none; }
.cta h2 { max-width: 15ch; font: 700 clamp(2.3rem, 1.1rem + 3.9vw, 4.4rem)/1.04 var(--display); letter-spacing: -.035em; }
.mail-line { margin-top: 1.4rem; color: var(--fg-2); font: 400 .82rem/1.5 var(--mono); letter-spacing: .04em; }
.mail-line .addr { color: var(--fg); user-select: all; }
.triad { margin-top: 3.5rem; color: var(--fg-2); font: 400 .72rem/1 var(--mono); letter-spacing: .34em; text-transform: uppercase; }

/* Footer */
.foot { padding-block: 2.6rem 3rem; border-top: 1px solid var(--line); color: var(--fg-2); }
.foot-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.foot nav a { color: var(--fg-2); text-decoration: none; font: 400 .72rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; padding-block: .4rem; }
.foot nav a:hover { color: var(--fg); }
.fine { max-width: 46rem; margin-top: 1.8rem; font-size: .88rem; }

/* Motion preferences: show the finished trace, still */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sweep, .orbit, .node, .tok, .core-halo, .beacon::after, .pulse-path { animation: none !important; }
  .seg, .seg-glow { animation: none !important; stroke-dashoffset: 0; opacity: 1; }
  .hud, .cite-arc, .cite-label, .card-glow { animation: none !important; opacity: 1; }
  .tok { opacity: 0; }
}

/* Pause control (WCAG 2.2.2): stops every looping animation and shows the finished trace */
.motion-toggle { display: none; }
.js .motion-toggle {
  position: absolute; left: 1.6rem; bottom: .55rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2rem; padding: .4rem .7rem;
  border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg) 78%, transparent);
  color: var(--fg-2); cursor: pointer;
  font: 400 .66rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.js .motion-toggle:hover { color: var(--fg); border-color: var(--line-3); }
.motion-toggle svg { width: .8rem; height: .8rem; }
.motion-toggle .i-play { display: none; }
.motion-off .motion-toggle .i-play { display: block; }
.motion-off .motion-toggle .i-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .js .motion-toggle { display: none; } }
.motion-off .sweep, .motion-off .orbit, .motion-off .node, .motion-off .core-halo,
.motion-off .beacon::after, .motion-off .pulse-path { animation: none !important; }
.motion-off .seg, .motion-off .seg-glow { animation: none !important; stroke-dashoffset: 0; opacity: 1; }
.motion-off .hud, .motion-off .cite-arc, .motion-off .cite-label, .motion-off .card-glow { animation: none !important; opacity: 1; }
.motion-off .tok { animation: none !important; opacity: 0; }

.chamber-copy > .roadmap { display: flex; align-items: baseline; gap: .7rem; margin-top: 1.1rem; color: var(--fg); font-size: .98rem; }
.roadmap::before { content: ""; flex: none; width: .45rem; height: .45rem; background: var(--maroon-hi); transform: translateY(-.1rem) rotate(45deg); }

/* gen:start (written by the SVG generator: per-element animation timing) */
.p0{animation-delay:0.000s}
.p1{animation-delay:0.167s}
.p2{animation-delay:0.333s}
.p3{animation-delay:0.500s}
.p4{animation-delay:0.667s}
.p5{animation-delay:0.833s}
.p6{animation-delay:1.000s}
.p7{animation-delay:1.167s}
.p8{animation-delay:1.333s}
.p9{animation-delay:1.500s}
.p10{animation-delay:1.667s}
.p11{animation-delay:1.833s}
.p12{animation-delay:2.000s}
.p13{animation-delay:2.167s}
.p14{animation-delay:2.333s}
.p15{animation-delay:2.500s}
.p16{animation-delay:2.667s}
.p17{animation-delay:2.833s}
.p18{animation-delay:3.000s}
.p19{animation-delay:3.167s}
.p20{animation-delay:3.333s}
.p21{animation-delay:3.500s}
.p22{animation-delay:3.667s}
.p23{animation-delay:3.833s}
.p24{animation-delay:4.000s}
.p25{animation-delay:4.167s}
.p26{animation-delay:4.333s}
.p27{animation-delay:4.500s}
.p28{animation-delay:4.667s}
.p29{animation-delay:4.833s}
.p30{animation-delay:5.000s}
.p31{animation-delay:5.167s}
.p32{animation-delay:5.333s}
.p33{animation-delay:5.500s}
.p34{animation-delay:5.667s}
.p35{animation-delay:5.833s}
.p36{animation-delay:6.000s}
.p37{animation-delay:6.167s}
.p38{animation-delay:6.333s}
.p39{animation-delay:6.500s}
.p40{animation-delay:6.667s}
.p41{animation-delay:6.833s}
.p42{animation-delay:7.000s}
.p43{animation-delay:7.167s}
.p44{animation-delay:7.333s}
.p45{animation-delay:7.500s}
.p46{animation-delay:7.667s}
.p47{animation-delay:7.833s}
.sd0{animation-delay:1.172s;--len:179.7px}
.sd1{animation-delay:2.283s;--len:151.2px}
.sd2{animation-delay:3.506s;--len:106.5px}
.sd3{animation-delay:3.776s;--len:63.0px}
.hc{animation-delay:3.756s}
.h0{animation-delay:0.267s}
.h1{animation-delay:1.222s}
.h2{animation-delay:2.333s}
.h3{animation-delay:3.556s}
.h4{animation-delay:3.856s}
.tr0{--dx:146px;animation-delay:0.00s}
.tr1{--dx:276px;animation-delay:0.75s}
.tr2{--dx:406px;animation-delay:1.50s}
.tr3{--dx:498px;animation-delay:2.25s}
.pd0{animation-delay:0.00s;--len:114.4px}
.pd1{animation-delay:0.90s;--len:111.7px}
.pd2{animation-delay:1.80s;--len:130.3px}
.pd3{animation-delay:0.45s;--len:138.2px}
.pd4{animation-delay:1.35s;--len:111.7px}
.pd5{animation-delay:2.25s;--len:91.1px}
.pd6{animation-delay:0.90s;--len:114.4px}
.pd7{animation-delay:1.80s;--len:111.7px}
.pd8{animation-delay:2.70s;--len:130.3px}
/* gen:end */