/* Agenticar — landing v6 (Apple-inspired, glass, light)
   Manifesto + operating-floor + work surfaces + dispatch loop + activity tail.
   2026-05-17: revamp to Apple-style — lighter bg, glassmorphism, flatter typescale,
   English keywords for essential terms, fixed headline contrast.
*/

@font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/Vazirmatn-Regular.woff2") format("woff2"); }
@font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/Vazirmatn-Medium.woff2") format("woff2"); }
@font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/Vazirmatn-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/Vazirmatn-Bold.woff2") format("woff2"); }
@font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/Vazirmatn-ExtraBold.woff2") format("woff2"); }

:root {
  /* ── Apple-toned light palette, warmed to cream ── */
  --bg:           #FBF8F2;        /* warm cream — Apple-light + cream tilt */
  --bg-2:         #F5F0E5;        /* deeper cream secondary surface */
  --bg-3:         #ECE6D7;
  --paper:        #FFFEFB;        /* near-white cards with cream undertone */
  --ink:          #1d1d1f;        /* Apple SF black */
  --ink-soft:     #515154;
  --ink-faint:    #6e6e73;        /* bumped from #86868b — now ≥ 4.5:1 on cream (WCAG AA) per Codex contrast audit */
  --ink-mute:     #a1a1a6;

  /* ── Brand greens (kept, but tuned for the lighter base) ── */
  --green:        #B7E0A8;
  --green-glow:   #D6EFCB;
  --green-deep:   #2f7a44;
  --green-deeper: #1f5a30;
  --green-line:   rgba(47,122,68,0.32);

  /* ── Accents ── */
  --amber:        #c99a3b;
  --blue:         #3f6bb8;
  /* Warm accent — used SPARINGLY at action/power moments only (CTA button,
     chat send, focus ring, numeric emphasis in stats). Green is the brand
     ambient; warm is the "click here / look here" cue. Reserved use keeps
     it potent — don't splatter it across the page. */
  --accent:       #E27B3D;
  --accent-deep:  #BD5F2E;
  --accent-soft:  #F2A57A;

  /* ── Rules + shadow ── */
  --rule:         rgba(0,0,0,0.08);
  --rule-strong:  rgba(0,0,0,0.14);
  --shadow-soft:  0 1px 0 rgba(0,0,0,0.03), 0 8px 24px -10px rgba(0,0,0,0.10);
  --shadow-card:  0 1px 0 rgba(0,0,0,0.04), 0 24px 48px -24px rgba(0,0,0,0.18);
  --shadow-pop:   0 1px 0 rgba(0,0,0,0.04), 0 40px 80px -32px rgba(0,0,0,0.22);

  /* ── Glass (Apple-style frosted) ── */
  --glass-bg:        rgba(255,255,255,0.62);
  --glass-bg-strong: rgba(255,255,255,0.82);
  --glass-border:    rgba(0,0,0,0.06);
  --glass-blur:      saturate(180%) blur(28px);

  /* ── Radii ── */
  --radius-s:     12px;
  --radius:       20px;
  --radius-lg:    28px;
  --radius-xl:    32px;

  /* ── Fonts ── */
  --font-sans:    "Vazirmatn", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Vazirmatn", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ── Layout ── */
  --max:          1180px;
  --gutter:       clamp(20px, 4vw, 64px);
  --section-py:   clamp(72px, 9vw, 140px);
}

*, *::before, *::after { box-sizing: border-box; }
:root { color-scheme: light dark; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

/* ─── dark-mode variants — applied on [data-theme="dark"] OR on system preference when user hasn't chosen ─── */
[data-theme="dark"], :root[data-theme="dark"] {
  color-scheme: dark;
  --bg:           #0d0d10;
  --bg-2:         #14141a;
  --bg-3:         #1c1c25;
  --paper:        #17171c;
  --ink:          #f5f5f7;
  --ink-soft:     #c0c0c6;
  --ink-faint:    #87878d;
  --ink-mute:     #56565c;
  --rule:         rgba(255,255,255,0.08);
  --rule-strong:  rgba(255,255,255,0.14);
  --shadow-soft:  0 1px 0 rgba(0,0,0,0.35), 0 8px 24px -10px rgba(0,0,0,0.45);
  --shadow-card:  0 1px 0 rgba(0,0,0,0.35), 0 24px 48px -24px rgba(0,0,0,0.55);
  --shadow-pop:   0 1px 0 rgba(0,0,0,0.35), 0 40px 80px -32px rgba(0,0,0,0.7);
  --glass-bg:        rgba(255,255,255,0.04);
  --glass-bg-strong: rgba(255,255,255,0.08);
  --glass-border:    rgba(255,255,255,0.08);
  --green-line:      rgba(183,224,168,0.32);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:           #0d0d10;
    --bg-2:         #14141a;
    --bg-3:         #1c1c25;
    --paper:        #17171c;
    --ink:          #f5f5f7;
    --ink-soft:     #c0c0c6;
    --ink-faint:    #87878d;
    --ink-mute:     #56565c;
    --rule:         rgba(255,255,255,0.08);
    --rule-strong:  rgba(255,255,255,0.14);
    --shadow-soft:  0 1px 0 rgba(0,0,0,0.35), 0 8px 24px -10px rgba(0,0,0,0.45);
    --shadow-card:  0 1px 0 rgba(0,0,0,0.35), 0 24px 48px -24px rgba(0,0,0,0.55);
    --shadow-pop:   0 1px 0 rgba(0,0,0,0.35), 0 40px 80px -32px rgba(0,0,0,0.7);
    --glass-bg:        rgba(255,255,255,0.04);
    --glass-bg-strong: rgba(255,255,255,0.08);
    --glass-border:    rgba(255,255,255,0.08);
    --green-line:      rgba(183,224,168,0.32);
  }
}
/* dark-mode-specific overrides for elements that hard-code light colors */
/* Dark-mode chat surfaces: bubble + input have NO background of their own.
   They sit directly on the page's halo gradient. Text reads on the cleaner
   dark bg without a bright tinted overlay competing with it (operator
   flagged "too bright on top of already bright text"). */
[data-theme="dark"] .hc-log .from-bot .bubble,
:root:not([data-theme="light"]) .hc-log .from-bot .bubble {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
  box-shadow: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hc-log .from-bot .bubble {
    background: transparent;
    border-color: transparent;
    color: var(--ink);
    box-shadow: none;
  }
}
[data-theme="dark"] .hc-form,
:root:not([data-theme="light"]) .hc-form {
  background: transparent;
  border-color: transparent;   /* no outline — the send button + placeholder text mark the input area */
  box-shadow: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hc-form {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
}
/* Focus-state ONLY: a warm-accent ring appears when the user actually taps
   into the input — invisible when idle, undeniable when active. */
.hc-form:focus-within { box-shadow: 0 0 0 2px rgba(226,123,61,0.55); }
[data-theme="dark"] .hc-form:focus-within,
:root:not([data-theme="light"]) .hc-form:focus-within {
  box-shadow: 0 0 0 2px rgba(226,123,61,0.65);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hc-form:focus-within {
    box-shadow: 0 0 0 2px rgba(226,123,61,0.65);
  }
}
/* Disable the light-mode bubble specular-gleam pseudo in dark mode (it was
   adding a bright top-strip that double-lit the text). */
[data-theme="dark"] .hc-log .from-bot .bubble::before,
:root:not([data-theme="light"]) .hc-log .from-bot .bubble::before {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hc-log .from-bot .bubble::before {
    display: none;
  }
}

/* DARK MODE: ALL glass cards switch from white-tinted to subtle dark-tinted
   so they no longer "glow bright" on the dark page and compete with the
   cream-white text (operator flag: "white glow making text unreadable").
   Cards are still slightly differentiable from the bg via a very faint
   warmer overlay, but lighter than text. */
[data-theme="dark"] .stance,
[data-theme="dark"] .pillar,
[data-theme="dark"] .loop-step,
[data-theme="dark"] .case-body,
[data-theme="dark"] .case-mini,
[data-theme="dark"] .phase,
:root:not([data-theme="light"]) .stance,
:root:not([data-theme="light"]) .pillar,
:root:not([data-theme="light"]) .loop-step,
:root:not([data-theme="light"]) .case-body,
:root:not([data-theme="light"]) .case-mini,
:root:not([data-theme="light"]) .phase {
  background: radial-gradient(115% 115% at 50% 30%, rgba(255,255,255,0.05), rgba(255,255,255,0) 78%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stance,
  :root:not([data-theme="light"]) .pillar,
  :root:not([data-theme="light"]) .loop-step,
  :root:not([data-theme="light"]) .case-body,
  :root:not([data-theme="light"]) .case-mini,
  :root:not([data-theme="light"]) .phase {
    background: radial-gradient(115% 115% at 50% 30%, rgba(255,255,255,0.05), rgba(255,255,255,0) 78%);
  }
}
/* And the inner stance-art frame */
[data-theme="dark"] .stance-art,
:root:not([data-theme="light"]) .stance-art {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(47,122,68,0.06));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stance-art {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(47,122,68,0.06));
  }
}

/* DARK MODE — large dark panels (tail-feed, cta-inner) were creating
   visible vertical "bands" on the green-tinted body because they're DARKER
   than the body. Make them blend by removing the hard #1a1a1c / dark
   gradient bg in dark mode — let the body show through and keep just a
   faint border + minimal tint. */
[data-theme="dark"] .tail-feed,
:root:not([data-theme="light"]) .tail-feed {
  background: rgba(0,0,0,0.18);   /* very subtle darkening, not a wall */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tail-feed {
    background: rgba(0,0,0,0.18);
  }
}
[data-theme="dark"] .tail-feed::after,
:root:not([data-theme="light"]) .tail-feed::after {
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.18));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tail-feed::after {
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.18));
  }
}
[data-theme="dark"] .cta-inner,
:root:not([data-theme="light"]) .cta-inner {
  /* Keep the green-tinted radials (they're part of the design) but soften
     the underlying linear-gradient so the CTA box doesn't read as a
     near-black wall after the body's green ambient. */
  background:
    radial-gradient(700px 400px at 20% 20%, rgba(47,122,68,0.50), transparent 60%),
    radial-gradient(500px 300px at 80% 80%, rgba(183,224,168,0.30), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.55) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cta-inner {
    background:
      radial-gradient(700px 400px at 20% 20%, rgba(47,122,68,0.50), transparent 60%),
      radial-gradient(500px 300px at 80% 80%, rgba(183,224,168,0.30), transparent 60%),
      linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.55) 100%);
  }
}
[data-theme="dark"] .btn-primary,
:root:not([data-theme="light"]) .btn-primary {
  background: #f5f5f7; color: #1d1d1f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary {
    background: #f5f5f7; color: #1d1d1f;
  }
}
[data-theme="dark"] .hc-send,
:root:not([data-theme="light"]) .hc-send {
  background: #f5f5f7; color: #1d1d1f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hc-send {
    background: #f5f5f7; color: #1d1d1f;
  }
}
html, body { margin: 0; padding: 0; }
/* Belt-and-suspenders horizontal containment: html `clip` + body `clip` so
   no decorative absolute element (orbs, halo pseudos, grain layer) can ever
   contribute to documentElement.scrollWidth and trigger RTL initial-scroll
   displacement. The Pixel-class viewport reduction took most of it; this
   eliminates the residual sub-10 px overshoot too. */
html { overflow-x: clip; }
body { overflow-x: clip; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  /* ONE long document-spanning linear gradient. NOT fixed-to-viewport —
     anchored to the document so the eye passes THROUGH the gradient as
     it scrolls. The transition from "more green" to "less green" happens
     over the FULL document height, so there's no point at which the eye
     can see both ends of the transition — no perceptible boundary. */
  /* AMPLITUDE: max variation 0.10 across the document, ~0.04 within any
     single viewport. The eye can NOT detect a 4% alpha change across one
     screen of vertical motion — it just feels like "more light here, less
     there" without ever seeing a boundary. Stops are spaced so the peak
     is around the chat area but transitions are extremely gradual. */
  /* Gradient FOCAL — slightly more concentrated around the chat region
     (22% down the document, where the inline chat panel sits on first
     paint), fading subtly above and below. Amplitude only 0.06 across the
     full document so within ANY single viewport the alpha change is ≤0.02
     — the eye can't see a cut, but the focal area is present as a soft
     glow that fades in and out. */
  background:
    linear-gradient(180deg,
      rgba(183,224,168,0.16) 0%,
      rgba(183,224,168,0.19) 12%,
      rgba(183,224,168,0.22) 22%,
      rgba(183,224,168,0.20) 35%,
      rgba(183,224,168,0.18) 55%,
      rgba(183,224,168,0.16) 100%
    ),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  font-size: 17px;
}
[data-theme="dark"] body,
:root:not([data-theme="light"]) body {
  background:
    linear-gradient(180deg,
      rgba(47,122,68,0.16) 0%,
      rgba(47,122,68,0.19) 12%,
      rgba(47,122,68,0.22) 22%,
      rgba(47,122,68,0.20) 35%,
      rgba(47,122,68,0.18) 55%,
      rgba(47,122,68,0.16) 100%
    ),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background:
      linear-gradient(180deg,
        rgba(47,122,68,0.16) 0%,
        rgba(47,122,68,0.19) 12%,
        rgba(47,122,68,0.22) 22%,
        rgba(47,122,68,0.20) 35%,
        rgba(47,122,68,0.18) 55%,
        rgba(47,122,68,0.16) 100%
      ),
      linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  }
}
/* No body::before — the gradient lives on body itself. No background-
   attachment: fixed — that would re-introduce a visible viewport-boundary. */

/* RTL Latin tokens never break Persian flow */
.ltr-inline, [lang="en"] { unicode-bidi: isolate; direction: ltr; font-family: var(--font-display); }
/* Atmospheric noise grain, very subtle */
/* Grain disabled — `mix-blend-mode: multiply` on a fixed full-viewport SVG
   was darkening GPU compositing boundaries into visible rectangular seams
   (operator-flagged "halo breaks"). Atmosphere reads cleaner without it. */
.grain-layer { display: none !important; }
/* Hide the legacy ambient orbs — body bg has the gradient already */
.orbs, .orb { display: none !important; }
.defs { position: absolute; }
main, header, footer, .ops-bar { position: relative; z-index: 1; }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-revealed { opacity: 1; transform: translateY(0); }

/* ─── reusable glass utility ─── */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}
.glass-strong {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

/* ─── live ops banner — normal-flow, scrolls off as the user moves down.
   The floating nav stays; this is a one-off "live" announcement at the very
   top of the page that disappears with scroll, NOT a second persistent pill. */
.ops-bar {
  position: relative;
  z-index: 5;
  text-align: center;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 8px 0 4px;
}
.ops-inner {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 5px 14px;
  background: rgba(255,255,255,0.55);
  color: var(--ink-soft);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
          backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 6px 18px -10px rgba(0,0,0,0.12);
}
[data-theme="dark"] .ops-inner,
:root:not([data-theme="light"]) .ops-inner {
  background: rgba(28,28,33,0.55);
  border-color: rgba(255,255,255,0.10);
  color: var(--ink-soft);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 6px 18px -10px rgba(0,0,0,0.45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ops-inner {
    background: rgba(28,28,33,0.55);
    border-color: rgba(255,255,255,0.10);
    color: var(--ink-soft);
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 6px 18px -10px rgba(0,0,0,0.45);
  }
}
.ops-pulse { display: inline-flex; align-items: center; gap: 8px; color: var(--green-deep); font-weight: 600; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-deep); box-shadow: 0 0 0 0 var(--green-deep); animation: pulse-d 2s ease-out infinite; }
@keyframes pulse-d { 0% { box-shadow: 0 0 0 0 rgba(47,122,68,0.45);} 70% { box-shadow: 0 0 0 8px rgba(47,122,68,0);} 100% { box-shadow: 0 0 0 0 rgba(47,122,68,0);} }
.ops-sep { width: 1px; height: 12px; background: var(--rule); margin: 0 14px; }
.ops-stat { color: var(--ink-soft); }
.ops-stat b { color: var(--ink); font-weight: 700; }
@media (max-width: 740px) {
  .ops-inner { gap: 8px; padding: 6px var(--gutter); font-size: 11px; }
  .ops-sep { display: none; }
}

/* ─── topbar — floating Liquid-Glass nav (Apple iOS 26 / macOS Tahoe style)
   Centered with symmetric `left:0; right:0; margin: 0 auto;` — NOT
   `transform: translateX(-50%)` — to kill the first-paint flash that was
   making the bar visibly snap into place. */
.topbar {
  position: fixed;
  top: 14px;
  /* Responsive inset — scales smoothly with viewport instead of a hard-coded
     pixel value. On a 360 px phone the pill sits ~10 px from each edge; on
     desktop it relaxes to ~32 px. Uses clamp so there's no breakpoint snap. */
  left:  clamp(10px, 3vw, 32px);
  right: clamp(10px, 3vw, 32px);
  margin: 0 auto;
  z-index: 40;
  background: transparent;
  border: 0;
  pointer-events: none;  /* let the inner pill catch events */
  /* Max width caps the pill on wide screens. NOT calc(100% - …) — that
     resolved against the document's wider scrollWidth on Pixel 7 and
     self-reinforced into horizontal overflow. */
  max-width: calc(var(--max) - 64px);
}
.topbar-inner {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  width: 100%;
  /* Removed `will-change: transform` + `translateZ(0)` — they were creating
     a stacking context that competed with backdrop-filter on mobile, causing
     the "loose" scroll feel. backdrop-filter alone already promotes the
     element to a GPU layer. */
  /* Apple Liquid-Glass nav: low-opacity tinted bg + heavy backdrop-filter
     saturate+blur so the content scrolling BEHIND is visible as a soft
     out-of-focus blur. Reference: apple.com home nav at scroll
     `rgba(251,251,253,0.8) backdrop-filter: saturate(180%) blur(20px)`,
     iOS 26 Liquid Glass goes further with lower opacity (~0.45) so the
     blurred content reads through more strongly. We use 0.50/0.42 with
     blur(28px) + saturate(180%) for the "see-the-page-through-frosted-
     glass" look. */
  background: rgba(255,255,255,0.32);
  -webkit-backdrop-filter: saturate(200%) blur(34px);
          backdrop-filter: saturate(200%) blur(34px);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 999px;
  /* multi-layer shadow: soft drop + subtle inner highlight = the Liquid-Glass feel */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 -1px 0 rgba(0,0,0,0.04) inset,
    0 14px 36px -14px rgba(0,0,0,0.18),
    0 4px 12px -6px rgba(0,0,0,0.10);
  position: relative;
  /* No `overflow: hidden` here — the dropdown menu needs to extend below
     the pill. The ::before sheen has its own border-radius so the pill's
     rounded corners stay visually intact without parent clipping. */
}
/* specular sheen across the top of the pill (light-mode charm) */
.topbar-inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 100%);
  pointer-events: none;
  border-radius: 999px 999px 0 0;
}
/* (The moving gleam sweep on the nav was removed — the perf probe showed
   it costing ~30 ms/frame because each scroll tick re-rasterized the blurred
   nav backdrop AND advanced the transform. The static inner-highlight in
   .topbar-inner::before is plenty for the Liquid-Glass feel without animation cost.) */
@keyframes nav-gleam {
  0%   { transform: translateX(-70%); opacity: 0; }
  20%  { opacity: 0.6; }
  50%  { transform: translateX(60%);  opacity: 0.6; }
  60%  { opacity: 0; }
  100% { transform: translateX(70%);  opacity: 0; }
}
[data-theme="dark"] .topbar-inner::after,
:root:not([data-theme="light"]) .topbar-inner::after {
  background: linear-gradient(115deg,
    transparent 0%, transparent 40%,
    rgba(214,239,203,0.18) 50%,
    transparent 60%, transparent 100%);
  mix-blend-mode: screen;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topbar-inner::after {
    background: linear-gradient(115deg,
      transparent 0%, transparent 40%,
      rgba(214,239,203,0.18) 50%,
      transparent 60%, transparent 100%);
    mix-blend-mode: screen;
  }
}
/* dark-mode adapt — lower opacity so the page bg shows blurred THROUGH the
   nav like real Liquid Glass; was 0.62 (too opaque, no see-through). */
[data-theme="dark"] .topbar-inner,
:root:not([data-theme="light"]) .topbar-inner {
  background: rgba(28,28,33,0.28);
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 -1px 0 rgba(0,0,0,0.40) inset,
    0 14px 36px -14px rgba(0,0,0,0.6),
    0 4px 12px -6px rgba(0,0,0,0.5);
}
[data-theme="dark"] .topbar-inner::before,
:root:not([data-theme="light"]) .topbar-inner::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topbar-inner {
    background: rgba(28,28,33,0.28);
    border-color: rgba(255,255,255,0.10);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.06) inset,
      0 -1px 0 rgba(0,0,0,0.40) inset,
      0 14px 36px -14px rgba(0,0,0,0.6),
      0 4px 12px -6px rgba(0,0,0,0.5);
  }
  :root:not([data-theme="light"]) .topbar-inner::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 100%);
  }
}
/* push content down to clear the floating nav (only) — ops-bar is normal flow now */
body { padding-top: 76px; }
@media (max-width: 480px) { body { padding-top: 72px; } }

/* Mobile glass — keep backdrop-filter on (operator priority: real Apple
   Liquid Glass everywhere, not opaque fallback). Slight perf cost is
   acceptable. */
@media (max-width: 980px), (pointer: coarse) {
  body.is-scrolling .hero-chat::before { animation: none; }
}

/* (Removed `content-visibility: auto` — it was suppressing the .reveal
   fade-in-up scroll animations because browsers don't pre-compute the
   offscreen `opacity:0; translateY(20px)` state when the element is
   `content-visibility: hidden`. Keeping the animations was the higher
   priority; mobile scroll-perf still wins from the opaque-nav + GPU
   atmosphere fixes.) */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 18px; flex-shrink: 0; }
.brand-name { font-family: var(--font-display); letter-spacing: -0.015em; }
.brand-mark svg { animation: brand-spin 32s linear infinite; }
@keyframes brand-spin { to { transform: rotate(360deg); } }
.brand-dot { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--green-glow), var(--green) 55%, var(--green-deep) 100%); flex-shrink: 0; }
.brand-dot.small { width: 10px; height: 10px; }
.nav { display: flex; gap: 28px; flex: 1; justify-content: center; }
.nav a { color: var(--ink-soft); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.18s; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--green-deep); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform 0.25s ease; }
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.lang-toggle, .theme-toggle { background: transparent; border: 1px solid var(--rule); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-family: var(--font-display); font-weight: 600; font-size: 12px; cursor: pointer; transition: background 0.18s, border-color 0.18s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.lang-toggle:hover, .theme-toggle:hover { background: var(--bg-2); border-color: var(--rule-strong); }
.lang-toggle .lang-chev { width: 10px; height: 10px; opacity: 0.6; transition: transform 0.18s; }
.lang-dropdown.open .lang-chev { transform: rotate(180deg); }
.lang-dropdown { position: relative; }
.lang-menu {
  list-style: none; padding: 4px; margin: 6px 0 0;
  position: absolute; top: 100%; inset-inline-end: 0;
  min-width: 140px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  /* Higher z than the nav pill itself so the menu paints on top of any
     overlapping nav element even when extending below it. */
  z-index: 60;
}
.lang-menu li { margin: 0; }
.lang-menu li button {
  width: 100%; text-align: start;
  background: transparent; border: 0; padding: 8px 12px;
  font-family: inherit; font-size: 13px; color: var(--ink);
  cursor: pointer; border-radius: 8px;
}
.lang-menu li button:hover { background: var(--bg-2); }
.lang-menu li button[aria-current="true"] { background: rgba(214,239,203,0.5); color: var(--green-deep); font-weight: 700; }
[data-theme="dark"] .lang-menu li button[aria-current="true"],
:root:not([data-theme="light"]) .lang-menu li button[aria-current="true"] { background: rgba(183,224,168,0.15); }
.theme-toggle { width: 36px; height: 32px; padding: 0; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun, :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon, :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
@media (max-width: 860px) { .nav { display: none; } }

/* ─── shared typography ─── */
.kicker { display: inline-block; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.08em; color: var(--green-deeper); padding: 5px 14px; background: rgba(214,239,203,0.55); border: 1px solid var(--green-line); border-radius: 999px; margin-bottom: 22px; font-weight: 600; text-transform: uppercase; }
/* Dark-mode contrast fix per Codex audit: light-green chip on a dark page
   needs near-black text, NOT the brand-green-deep (which read 1.4:1). */
[data-theme="dark"] .kicker,
:root:not([data-theme="light"]) .kicker { color: #0D0D10; background: rgba(183,224,168,0.85); border-color: rgba(47,122,68,0.5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kicker { color: #0D0D10; background: rgba(183,224,168,0.85); border-color: rgba(47,122,68,0.5); }
}
.kicker-on-dark { color: var(--green-glow); background: rgba(183,224,168,0.12); border-color: rgba(183,224,168,0.35); }
.kicker-mini { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-soft); padding: 6px 14px; background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 999px; margin: 0 0 22px; }
.kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-deep); animation: pulse-d 2s ease-out infinite; }
.section-headline {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.4vw + 14px, 64px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  max-width: 22ch;
  text-wrap: balance;
  color: var(--ink);
}
html[dir="rtl"] .section-headline { line-height: 1.22; max-width: 26ch; letter-spacing: -0.005em; }
/* Warm-accent the emphasized word in every section headline — the brand-key
   verbs ("اجرا" / "ابزار" / "Resilience" / "اقدام" / "dispatch") become the
   warm-eye-anchor in every section. */
.section-headline em { font-style: normal; color: var(--accent-deep); }
[data-theme="dark"] .section-headline em,
:root:not([data-theme="light"]) .section-headline em { color: var(--accent-soft); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .section-headline em { color: var(--accent-soft); }
}
.section-lede { font-size: clamp(17px, 0.6vw + 14px, 21px); color: var(--ink-soft); max-width: 720px; margin: 0 0 40px; line-height: 1.55; }
.section-lede em { font-style: normal; font-weight: 700; color: var(--ink); }

/* generic em highlight inside body text (subtle marker, NOT background-clip text) */
.hero-pitch em, .stance p em, .pillar p em, .case-body p em, .phase p em {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}

/* ─── HERO (single column: words above, then full-width inline chat) ─── */
.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 110px) var(--gutter) clamp(48px, 7vw, 96px);
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 64px);
}
.hero-words { min-width: 0; max-width: 880px; }
.hero-emblem {
  display: inline-block;
  margin: 0 0 20px;
  animation: emblem-float 6s ease-in-out infinite alternate;
}
@keyframes emblem-float { 0% { transform: translateY(0) rotate(0deg);} 100% { transform: translateY(-4px) rotate(2deg);} }

/* The hero "manifesto headline" — Apple-style display, fixed contrast.
   line-height bumped from 1.02/1.1 to 1.18/1.35 to give explicit vertical
   gap between the two .mh-line rows — the underline marker on `Agent`
   extends ~0.18em below its baseline and was crashing into the top of
   `chatbot` on the next line when lines touched with zero gap. */
.manifesto-headline {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw + 12px, 104px);
  line-height: 1.18;
  font-weight: 700;
  margin: 4px 0 22px;
  letter-spacing: -0.035em;
  color: var(--ink);
}
html[dir="rtl"] .manifesto-headline { letter-spacing: -0.005em; line-height: 1.35; }
/* Extra breathing room between the two .mh-line rows so the underline marker
   never touches the next line's glyphs. */
.mh-line { display: block; }
.mh-line + .mh-line { margin-top: 0.12em; }
/* SOLID INK — high contrast in both light and dark modes (no background-clip
   gradient: that experiment vanished letters mid-sweep). */
.mh-strong {
  color: var(--ink);
  position: relative;
  font-weight: 800;
}
/* For the English "Agent" specifically — render in display font, with the soft green marker behind */
.mh-strong[lang="en"], .mh-strong .en-tok {
  font-family: var(--font-display);
  letter-spacing: -0.04em;
  font-weight: 700;
}
.mh-strong::after {
  content: "";
  position: absolute;
  inset-inline-start: -4px;
  inset-inline-end: -4px;
  bottom: -0.04em;
  height: 0.14em;
  /* Warm-coral underline behind "Agent" — the visual signature of the
     brand-positioning moment. Green is the ambient; this is the heat. */
  background: var(--accent);
  z-index: -1;
  opacity: 0.85;
  border-radius: 4px;
}
.mh-comma { color: var(--green-deep); margin-inline-start: 0.04em; font-weight: 700; }
.mh-soft {
  color: var(--green-deep);
  font-weight: 700;
}

.hero-pitch {
  font-size: clamp(17px, 0.8vw + 13px, 22px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 0 18px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.hero-fineprint { font-size: 13px; color: var(--ink-faint); margin: 4px 0 0; }

@media (max-width: 480px) { .hero-emblem svg { width: 88px; height: 88px; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border-radius: 999px; font-family: inherit; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; border: 0; transition: transform 0.16s, background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s; white-space: nowrap; position: relative; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
html[dir="rtl"] .arrow-rtl { transform: scaleX(-1); }
.btn-primary { background: var(--ink); color: #ffffff; box-shadow: 0 12px 28px -12px rgba(0,0,0,0.45); }
.btn-primary:hover { transform: translateY(-1px); background: #000; }
.btn-ghost { background: var(--glass-bg-strong); color: var(--ink); border-color: var(--rule); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.btn-ghost:hover { background: #fff; border-color: var(--rule-strong); }
.btn-large { padding: 18px 28px; font-size: 16px; }

/* ─── inline hero chat — borderless, breathing, native to the page ───
   No card. No window. Just a soft radial halo that says "this is alive
   and here, talking to you." The whole region pulses gently. */
.hero-chat {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 40px) clamp(8px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  isolation: isolate;
  /* No overflow:clip here — that was creating the "cut off by invisible
     borders" feel the operator flagged. The halo + shimmer use mask-image
     for soft edges + a constrained translateX amplitude instead. */
}
/* No per-chat pseudo halo. The green-tint atmosphere now lives on
   `body::before` (fixed at the viewport, never overflows the document)
   so there's no bounding-rect to "cut off". The chat region gets its
   glow from a viewport-anchored radial-gradient stop in the body layer. */
/* Light-mode shimmer — a slow, glistening sweep across the halo.
   Disabled on mobile (small screens AND touch devices) where the moving
   gradient was triggering compositing on every scroll frame. Also paused
   when the body has `is-scrolling` class (toggled by app.js). */
/* `.hero-chat::after` (shimmer rectangle with inset: -4% -8% and
   mix-blend-mode: screen in dark mode) REMOVED — its rectangular extent
   was the persistent "cut above and below the chat box" the operator
   kept reporting. The body's unified gradient is the only ambient now. */
@keyframes chat-breath {
  0%, 100% { opacity: 0.78; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.02); }
}
body.is-scrolling .hero-chat::before { animation-play-state: paused; }
@media (max-width: 740px), (pointer: coarse) {
  .hero-chat::before { animation-duration: 14s; }
}
@keyframes chat-shimmer {
  0%   { transform: translateX(-30%); opacity: 0.0; }
  35%  { transform: translateX(0%);   opacity: 0.55; }
  65%  { transform: translateX(20%);  opacity: 0.55; }
  100% { transform: translateX(30%);  opacity: 0.0; }
}
/* Dark mode swaps the shimmer for a cooler moonlight gleam */
/* dead dark-mode rules retained as no-ops; the ::after pseudo is gone */
/* `.hero-chat::after` defunct in all themes (dark + light) — the rectangular
   pseudo had inset: -4% -8% extending past the chat box and was creating the
   visible "cut" above and below the chat the operator kept flagging. */
.hero-chat::after { display: none !important; }

/* small "live presence" indicator that replaces the old window chrome */
.hc-presence {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0 auto 4px;
  background: transparent;
  border: 0;
  padding: 0;
}
.hc-presence .pulse-dot { width: 8px; height: 8px; background: var(--green-deep); }
/* legacy hc-head left in place for older HTML; hidden in this iteration */
.hc-head { display: none; }
.hc-title, .hc-status { display: none; }

/* message stream — bubbles float on the page, no enclosing window */
.hc-log {
  list-style: none;
  padding: 4px 8px;
  margin: 0;
  max-height: 360px;
  overflow-y: auto;
  font-size: 15px;
  display: flex; flex-direction: column;
  gap: 8px;
  /* fade edges so messages dissolve into the page bg */
  mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.hc-log::-webkit-scrollbar { width: 6px; }
.hc-log::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.10); border-radius: 999px; }
.hc-log li { margin: 0; display: flex; }
.hc-log .from-bot { justify-content: flex-start; }
.hc-log .from-bot .bubble {
  background: rgba(255,255,255,0.78);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,0.04);
  border-end-start-radius: 4px;
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
/* light-mode specular top-edge gleam on bot bubbles — Apple-card finish */
.hc-log .from-bot .bubble::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0) 100%);
  pointer-events: none;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
[data-theme="dark"] .hc-log .from-bot .bubble::before,
:root:not([data-theme="light"]) .hc-log .from-bot .bubble::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hc-log .from-bot .bubble::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 100%);
  }
}
.hc-log .from-user { justify-content: flex-end; }
.hc-log .from-user .bubble {
  background: linear-gradient(135deg, var(--green-glow), var(--green));
  border: 1px solid rgba(47,122,68,0.18);
  border-end-end-radius: 4px;
  color: #1d1d1f;  /* explicit near-black so dark-mode doesn't flip text color via var(--ink) and hit the 1.1:1 fail Codex flagged */
}
.hc-log .bubble {
  max-width: 78%;
  padding: 11px 16px;
  border-radius: 18px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 8px 24px -14px rgba(0,0,0,0.12);
}
.hc-log .bubble.typing { display: inline-flex; align-items: center; gap: 4px; padding: 13px 16px; }
.hc-log .bubble.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); animation: blink 1.2s infinite ease-in-out; }
.hc-log .bubble.typing span:nth-child(2) { animation-delay: 0.15s; }
.hc-log .bubble.typing span:nth-child(3) { animation-delay: 0.3s; }

/* input — looks like a soft, slightly elevated note pad, NOT a form input */
.hc-form {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 12px 32px -16px rgba(0,0,0,0.14);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  margin: 6px auto 0;
  width: 100%;
  max-width: 720px;
}
.hc-form:focus-within {
  border-color: rgba(47,122,68,0.30);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 0 0 4px rgba(47,122,68,0.10), 0 16px 36px -16px rgba(0,0,0,0.14);
}
.hc-form textarea {
  flex: 1; resize: none;
  border: 0;
  border-radius: 16px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  outline: none;
  max-height: 160px;
  line-height: 1.5;
  min-width: 0;
}
.hc-form textarea::placeholder { color: var(--ink-faint); }
.hc-send {
  width: 42px; height: 42px; border-radius: 50%;
  border: 0;
  /* Warm accent on the chat send button — single most-used action element.
     The eye is naturally drawn here. */
  background: var(--accent); color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.18s, transform 0.18s;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.30);
}
.hc-send:hover { background: var(--accent-deep); transform: translateY(-1px); }
.hc-send:disabled { opacity: 0.5; cursor: wait; transform: none; }
.hc-send svg { width: 18px; height: 18px; flex-shrink: 0; }
.hc-fine { font-size: 11.5px; color: var(--ink-faint); margin: 8px auto 0; padding: 0 8px; line-height: 1.55; text-align: center; max-width: 640px; }

/* legacy floor-mockup styles preserved (in case the markup returns later) */
.floor { position: relative; min-width: 0; }
.floor-glow {
  position: absolute;
  inset: 8px;  /* INSIDE the floor (not -40 leaking out) — the glass already creates a halo via shadow */
  background: radial-gradient(420px 320px at 50% 40%, rgba(183,224,168,0.55), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
  border-radius: var(--radius-lg);
}
.floor-window {
  position: relative;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.floor-chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.55);
  direction: ltr;
}
.fc-dot { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.fc-dot:nth-child(2) { background: #febc2e; }
.fc-dot:nth-child(3) { background: #28c840; }
.fc-title { margin-left: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.fc-tag { margin-left: auto; font-family: var(--font-display); font-size: 10px; font-weight: 700; color: var(--green-deep); background: rgba(214,239,203,0.6); border: 1px solid var(--green-line); padding: 2px 8px; border-radius: 999px; letter-spacing: 0.08em; text-transform: uppercase; }
.floor-feed {
  list-style: none;
  padding: 16px 20px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  min-height: 240px;
  direction: ltr;
}
.floor-feed li {
  display: grid;
  grid-template-columns: 56px 14px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
  color: var(--ink-soft);
  border-bottom: 1px dashed transparent;
  animation: floor-in 0.36s ease-out;
}
@keyframes floor-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.floor-feed .ff-t { color: var(--ink-faint); font-size: 11.5px; }
.floor-feed .ff-w {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green-deep);
  align-self: center;
  margin-top: 0;
}
.floor-feed .ff-w.amber { background: var(--amber); }
.floor-feed .ff-w.blue { background: var(--blue); }
.floor-feed .ff-msg { color: var(--ink); font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floor-feed .ff-msg-fa { font-family: var(--font-sans); direction: rtl; color: var(--ink); font-size: 13px; }
.floor-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--glass-border);
  background: radial-gradient(115% 115% at 50% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0) 78%);
  font-size: 11.5px;
}
.ff-sig { color: var(--green-deep); font-weight: 600; }
.ff-time { font-family: var(--font-mono); color: var(--ink-faint); }

/* ─── manifesto / stances ─── */
.manifesto {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section-py) var(--gutter);
}
.stances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 36px;
}
@media (max-width: 880px) { .stances { grid-template-columns: 1fr; gap: 20px; } }
/* Cards dissolve into the ambient — no hard border, very soft tint, the
   shadow alone provides containment so they don't read as "rectangles
   breaking the halo". Borders only fade in on hover for affordance. */
.stance {
  position: relative;
  padding: 28px 26px;
  background: radial-gradient(115% 115% at 50% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0) 78%);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 0;
  border-radius: var(--radius);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.stance:hover { transform: translateY(-3px); background: rgba(255,255,255,0.65); box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-soft); }
.stance-art {
  display: block;
  margin: 0 0 18px;
  /* Almost-invisible inner-frame so the SVG illustration appears to float
     on the ambient bg rather than sit inside a nested rectangle. */
  background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(214,239,203,0.15));
  border: 0;
  border-radius: var(--radius-s);
  padding: 14px 16px 6px;
}
.stance-art svg { width: 100%; height: auto; max-height: 130px; display: block; }
.stance-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(40px, 4vw, 60px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  /* Warm-accent numerals — visible warm in the manifesto cards (01/02/03)
     so every stance has a coral eye-anchor in the corner. */
  color: var(--accent);
  margin: 0 0 12px;
  opacity: 0.95;
}
[data-theme="dark"] .stance-num,
:root:not([data-theme="light"]) .stance-num { color: var(--accent-soft); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stance-num { color: var(--accent-soft); }
}
html[dir="rtl"] .stance-num { font-family: var(--font-sans); letter-spacing: 0; }
.stance h3 { font-size: clamp(20px, 1.4vw + 6px, 26px); font-weight: 700; margin: 0 0 14px; line-height: 1.25; letter-spacing: -0.012em; color: var(--ink); }
.stance p { margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; }

/* ─── work surfaces (3 pillars) ─── */
.surfaces {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section-py) var(--gutter);
  border-top: 1px solid var(--rule);
}
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 16px;
}
@media (max-width: 980px) { .pillars { grid-template-columns: 1fr; gap: 18px; } }
.pillar {
  background: radial-gradient(115% 115% at 50% 30%, rgba(255,255,255,0.60), rgba(255,255,255,0) 78%);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 0;
  border-radius: var(--radius);
  padding: 28px 26px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.pillar:hover { transform: translateY(-4px); background: rgba(255,255,255,0.70); box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-card); }
.pillar::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 3px;
  /* Warm-to-green top stripe — warm leads in, fades through green, dissolves.
     A subtle warm signature at the top of every pillar card. */
  background: linear-gradient(90deg, var(--accent), var(--green-deep) 55%, transparent);
  opacity: 0.7;
}
.pillar-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.pillar-glyph {
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(214,239,203,0.7), rgba(183,224,168,0.4));
  border: 1px solid var(--green-line);
  border-radius: 16px;
  flex-shrink: 0;
}
.pillar-tag { display: inline-block; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.06em; color: var(--green-deep); font-weight: 600; text-transform: uppercase; }
[data-theme="dark"] .pillar-tag,
:root:not([data-theme="light"]) .pillar-tag { color: var(--green); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pillar-tag { color: var(--green); }
}
html[dir="rtl"] .pillar-tag { font-family: var(--font-sans); }
.pillar h3 { font-size: clamp(22px, 1.4vw + 8px, 28px); font-weight: 700; margin: 4px 0 0; line-height: 1.2; letter-spacing: -0.012em; }
.pillar p { color: var(--ink-soft); font-size: 15px; line-height: 1.65; margin: 0 0 14px; }
.pillar-list { list-style: none; padding: 0; margin: 0 0 18px; }
.pillar-list li { position: relative; padding-inline-start: 16px; font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; line-height: 1.7; }
.pillar-list li::before { content: "›"; position: absolute; inset-inline-start: 0; color: var(--accent); font-weight: 700; }
html[dir="rtl"] .pillar-list li::before { content: "‹"; }

.pillar-stage {
  background: #1a1a1c;
  color: #f5f5f7;
  border-radius: 14px;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.06);
}
.ps-row { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: baseline; padding: 4px 0; }
.ps-who { color: var(--green); font-weight: 700; font-size: 11px; }
.ps-row code { color: #f5f5f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-bot .ps-who { color: var(--green-glow); }

/* ─── dispatch loop ─── */
.loop {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section-py) var(--gutter);
  border-top: 1px solid var(--rule);
}
.loop-steps {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  position: relative;
}
.loop-steps::before {
  content: "";
  position: absolute;
  inset-inline: 6%;
  top: 24px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--green-line) 0 6px, transparent 6px 12px);
  opacity: 0.4;
  z-index: 0;
}
@media (max-width: 980px) {
  .loop-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .loop-steps::before { display: none; }
}
@media (max-width: 540px) { .loop-steps { grid-template-columns: 1fr; } }
.loop-step {
  background: radial-gradient(115% 115% at 50% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0) 78%);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 0;
  border-radius: var(--radius);
  padding: 18px 16px 20px;
  position: relative;
  z-index: 1;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.loop-step:hover { transform: translateY(-3px); background: rgba(255,255,255,0.65); box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-soft); }
.ls-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  /* Warm-accent step number circles — the dispatch loop reads as 5 warm
     beats across the section. */
  background: var(--accent);
  border: 1px solid var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  margin: -28px auto 10px;
  color: #ffffff;
  box-shadow: 0 6px 16px -6px rgba(226,123,61,0.55);
}
html[dir="rtl"] .ls-num { font-family: var(--font-sans); }
.ls-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(214,239,203,0.65), rgba(183,224,168,0.4));
  border: 1px solid var(--green-line);
  margin: 0 auto 12px;
}
.ls-glyph svg { width: 30px; height: 30px; }
.loop-step h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.loop-step p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.65; }

/* ─── activity tail (dark accent panel, glass-edged) ─── */
.tail {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section-py) var(--gutter);
  border-top: 1px solid var(--rule);
}
.tail-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.tail-head-left { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.tail-wave { width: 280px; flex-shrink: 1; min-width: 0; opacity: 0.85; }
@media (max-width: 760px) { .tail-wave { display: none; } }
.tail-feed {
  list-style: none;
  padding: 24px 24px;
  margin: 0;
  background: #1a1a1c;
  border-radius: var(--radius);
  color: #f5f5f7;
  display: grid;
  gap: 12px;
  min-height: 280px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
}
.tail-feed::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 40px;
  background: linear-gradient(180deg, transparent, #1a1a1c);
  pointer-events: none;
}
.tail-feed li {
  display: grid;
  grid-template-columns: 80px 12px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  animation: tail-in 0.5s ease-out;
}
@keyframes tail-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.tail-feed li:last-child { border-bottom: 0; }
.tail-t { color: rgba(245,245,247,0.55); font-family: var(--font-mono); font-size: 11.5px; }
.tail-cat { width: 10px; height: 10px; border-radius: 50%; background: var(--green); align-self: center; }
.tail-cat.chat { background: var(--green); }
.tail-cat.code { background: var(--amber); }
.tail-cat.infra { background: var(--blue); }
.tail-msg { font-size: 14px; color: #f5f5f7; line-height: 1.6; }
.tail-msg code, .tail-msg span[dir="ltr"] { font-family: var(--font-mono); font-size: 12.5px; color: var(--green-glow); background: rgba(183,224,168,0.10); padding: 1px 6px; border-radius: 6px; unicode-bidi: isolate; }
.tail-tag { font-family: var(--font-display); font-size: 11px; color: var(--green-glow); background: rgba(183,224,168,0.13); padding: 2px 8px; border-radius: 999px; }
html[dir="rtl"] .tail-tag { font-family: var(--font-sans); }
.tail-fine { font-size: 12px; color: var(--ink-faint); margin: 14px 0 0; }
@media (max-width: 640px) {
  .tail-feed { padding: 18px 14px; }
  .tail-feed li { grid-template-columns: 60px 10px 1fr; }
  .tail-tag { display: none; }
}

/* ─── proof / case ─── */
.proof {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section-py) var(--gutter);
  border-top: 1px solid var(--rule);
}
.case-main {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 32px;
  align-items: stretch;
  margin: 24px 0 36px;
}
@media (max-width: 920px) { .case-main { grid-template-columns: 1fr; } }
.case-body {
  background: radial-gradient(115% 115% at 50% 30%, rgba(255,255,255,0.60), rgba(255,255,255,0) 78%);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 0;
  border-radius: var(--radius);
  padding: 28px 26px;
}
.case-body p { font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 14px; }
/* Drop-cap on the first letter of the case-study paragraph — works as a
   Latin display flourish but BREAKS Persian/Arabic cursive (the first
   character is ripped out of its joining context and oversized, which
   looks broken in RTL). Scoped to `html[dir="ltr"]` only. If a proper
   RTL drop-cap technique is found later (e.g. a leading SVG glyph or
   first-line accent), implement that separately. */
html[dir="ltr"] .case-body p:first-of-type::first-letter {
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 2.2em;
  line-height: 1;
  color: var(--accent-deep);
  padding-inline-end: 6px;
  padding-inline-start: 2px;
  vertical-align: -0.04em;
}
.case-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip-stat { display: inline-flex; gap: 6px; align-items: baseline; font-size: 12px; color: var(--ink-soft); background: rgba(214,239,203,0.45); border: 1px solid var(--green-line); padding: 6px 12px; border-radius: 999px; }
/* Numeric emphasis in case-study chips — warm accent draws the eye to the
   actual stat (12s, 100%, 3 models) which is the proof moment. */
.chip-stat b { color: var(--accent-deep); font-weight: 800; }
[data-theme="dark"] .chip-stat,
:root:not([data-theme="light"]) .chip-stat { background: rgba(183,224,168,0.18); color: var(--ink); }
[data-theme="dark"] .chip-stat b,
:root:not([data-theme="light"]) .chip-stat b { color: var(--accent-soft); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip-stat { background: rgba(183,224,168,0.18); color: var(--ink); }
  :root:not([data-theme="light"]) .chip-stat b { color: var(--accent-soft); }
}

.case-artifact {
  background: #1a1a1c;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  direction: ltr;
  border: 1px solid rgba(255,255,255,0.05);
}
.ca-head { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #131315; }
.ca-title { margin-left: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.ca-pre {
  margin: 0;
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.85;
  color: #f5f5f7;
  white-space: pre-wrap;
  overflow-x: auto;
}

.case-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 720px) { .case-mini-grid { grid-template-columns: 1fr; } }
.case-mini {
  background: radial-gradient(115% 115% at 50% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0) 78%);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 0;
  border-radius: var(--radius);
  padding: 22px 22px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.case-mini:hover { transform: translateY(-3px); background: rgba(255,255,255,0.65); box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-soft); }
.cm-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(214,239,203,0.7), rgba(183,224,168,0.4));
  border: 1px solid var(--green-line);
  flex-shrink: 0;
}
.cm-glyph svg { width: 36px; height: 36px; }
.cm-body { min-width: 0; }
.cm-tag { display: inline-block; font-family: var(--font-display); font-size: 11px; color: var(--green-deeper); background: rgba(214,239,203,0.5); border: 1px solid var(--green-line); padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
[data-theme="dark"] .cm-tag,
:root:not([data-theme="light"]) .cm-tag { color: #0D0D10; background: rgba(183,224,168,0.85); border-color: rgba(47,122,68,0.45); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cm-tag { color: #0D0D10; background: rgba(183,224,168,0.85); border-color: rgba(47,122,68,0.45); }
}
html[dir="rtl"] .cm-tag { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; }
.case-mini h4 { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -0.012em; }
.case-mini p { margin: 0 0 10px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; }
.cm-stat { font-size: 12px; color: var(--accent-deep); font-weight: 700; }
[data-theme="dark"] .cm-stat,
:root:not([data-theme="light"]) .cm-stat { color: var(--accent-soft); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cm-stat { color: var(--accent-soft); }
}
@media (max-width: 540px) {
  .case-mini { grid-template-columns: 1fr; gap: 12px; }
  .cm-glyph { width: 52px; height: 52px; }
}

/* ─── trust strip ─── */
.trust {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 88px) var(--gutter);
  border-top: 1px solid var(--rule);
  text-align: center;
}
.trust-diagram {
  display: block;
  margin: 0 auto 18px;
  max-width: 720px;
  width: 100%;
  height: auto;
}
.trust-diagram .td-label-primary  { fill: var(--ink); }
.trust-diagram .td-label-secondary { fill: var(--ink-faint); }
/* In dark mode the inline fill attribute was #1C1814 which is nearly invisible
   on the dark page. CSS `fill` overrides the SVG presentation attribute. */
[data-theme="dark"] .trust-diagram .td-label-primary,
:root:not([data-theme="light"]) .trust-diagram .td-label-primary { fill: #f5f5f7; }
[data-theme="dark"] .trust-diagram .td-label-secondary,
:root:not([data-theme="light"]) .trust-diagram .td-label-secondary { fill: rgba(245,245,247,0.68); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .trust-diagram .td-label-primary { fill: #f5f5f7; }
  :root:not([data-theme="light"]) .trust-diagram .td-label-secondary { fill: rgba(245,245,247,0.68); }
}

/* Global: kill the tap-flash overlay EVERYWHERE (the rectangle that briefly
   appears on touch). Doesn't affect selection behavior. */
* { -webkit-tap-highlight-color: transparent !important; }

/* Non-text interactive elements (buttons, toggles, glyphs) can't be selected.
   But ALL prose / cards remain user-select: text (browser default) so
   long-press + double-tap work as expected. */
.theme-toggle, .lang-toggle, .lang-menu button, .nav a, .btn, .hc-send,
.ls-num, .ls-glyph, .phase-glyph, .pillar-glyph, .cm-glyph,
.stance-art, .pulse-dot, .hero-emblem,
.cta-orbs, .cta-orb, .brand-mark {
  -webkit-user-select: none;
          user-select: none;
  touch-action: manipulation;
}
.trust-fine { font-size: 13px; color: var(--ink-faint); margin: 0; }

/* ─── operating model ─── */
.model {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section-py) var(--gutter);
  border-top: 1px solid var(--rule);
}
.model-phases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}
@media (max-width: 880px) { .model-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .model-phases { grid-template-columns: 1fr; } }
.phase {
  background: radial-gradient(115% 115% at 50% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0) 78%);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 0;
  border-radius: var(--radius);
  padding: 22px 20px;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.phase:hover { transform: translateY(-3px); background: rgba(255,255,255,0.65); box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-soft); }
.phase-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(214,239,203,0.7), rgba(183,224,168,0.45));
  border: 1px solid var(--green-line);
  margin-bottom: 14px;
}
.phase-glyph svg { width: 32px; height: 32px; }
.phase-when { display: inline-block; font-family: var(--font-display); font-size: 11px; color: var(--green-deeper); font-weight: 700; background: rgba(214,239,203,0.5); border: 1px solid var(--green-line); padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
[data-theme="dark"] .phase-when,
:root:not([data-theme="light"]) .phase-when { color: #0D0D10; background: rgba(183,224,168,0.85); border-color: rgba(47,122,68,0.45); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phase-when { color: #0D0D10; background: rgba(183,224,168,0.85); border-color: rgba(47,122,68,0.45); }
}
html[dir="rtl"] .phase-when { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; }
.phase h4 { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.012em; }
.phase p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }

/* ─── CTA ─── */
.cta { max-width: var(--max); margin: 0 auto 80px; padding: 0 var(--gutter); }
.cta-inner {
  background:
    radial-gradient(700px 400px at 20% 20%, rgba(47,122,68,0.55), transparent 60%),
    radial-gradient(500px 300px at 80% 80%, rgba(183,224,168,0.32), transparent 60%),
    linear-gradient(180deg, #131315 0%, #0a0a0c 100%);
  color: #f5f5f7;
  padding: clamp(64px, 9vw, 120px) clamp(24px, 6vw, 80px);
  border-radius: var(--radius-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: var(--shadow-pop);
}
.cta-orbs { position: absolute; inset: 0; pointer-events: none; }
.cta-orb { position: absolute; border-radius: 50%; filter: blur(50px); opacity: 0.45; }
.cta-orb:nth-child(1) { width: 280px; height: 280px; background: radial-gradient(circle, var(--green), transparent 70%); top: -100px; right: -80px; }
.cta-orb:nth-child(2) { width: 200px; height: 200px; background: radial-gradient(circle, var(--green-glow), transparent 70%); bottom: -60px; left: 12%; }
.cta-orb:nth-child(3) { width: 160px; height: 160px; background: radial-gradient(circle, var(--green), transparent 70%); top: 30%; left: -40px; }
.cta-inner > * { position: relative; z-index: 1; }
.cta-inner h2 { font-family: var(--font-display); font-size: clamp(32px, 4vw + 8px, 60px); margin: 14px 0 16px; line-height: 1.05; font-weight: 700; letter-spacing: -0.025em; max-width: 24ch; margin-inline: auto; }
html[dir="rtl"] .cta-inner h2 { line-height: 1.2; letter-spacing: -0.005em; }
.cta-inner p { color: rgba(245,245,247,0.72); margin: 0 0 36px; font-size: clamp(15px, 0.6vw + 12px, 19px); line-height: 1.55; max-width: 50ch; margin-inline: auto; }
/* Primary CTA — the warm accent's biggest moment. White text on coral
   reads at ~3.5:1 (large-text WCAG AA pass for ≥18 px bold). */
.cta-inner .btn-primary { background: var(--accent); color: #ffffff; box-shadow: 0 16px 36px -12px rgba(226,123,61,0.55); }
.cta-inner .btn-primary:hover { background: var(--accent-deep); box-shadow: 0 18px 40px -10px rgba(226,123,61,0.65); }

/* ─── footer ─── */
.foot { border-top: 1px solid var(--rule); padding: 32px var(--gutter); background: transparent; }
.foot-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; }
@media (max-width: 760px) { .foot-inner { grid-template-columns: 1fr; text-align: center; gap: 10px; } .foot-fine { text-align: center !important; } }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.foot-tag { font-size: 12px; color: var(--ink-faint); font-weight: 500; margin-inline-start: 8px; }
.foot-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; color: var(--ink-soft); justify-content: center; }
.foot-meta a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.foot-meta a:hover { border-color: var(--ink); }
.foot-fine { font-size: 12px; color: var(--ink-faint); margin: 0; text-align: end; }

/* Production-readiness pages for SMS.ir review. */
.page-shell {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(54px, 7vw, 96px) var(--gutter) var(--section-py);
}
.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  min-height: min(72vh, 760px);
}
@media (max-width: 900px) { .page-hero { grid-template-columns: 1fr; min-height: auto; } }
.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green-deep);
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 18px;
}
.page-eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(226,123,61,0.12);
}
.page-title {
  margin: 0;
  font-size: clamp(44px, 7vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 800;
  max-width: 10ch;
}
html[dir="rtl"] .page-title { letter-spacing: -0.01em; }
.page-lede {
  margin: 24px 0 0;
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.15vw + 10px, 22px);
  line-height: 1.9;
}
.page-card {
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 44px);
  background: radial-gradient(115% 115% at 50% 30%, rgba(255,255,255,0.58), rgba(255,255,255,0) 78%);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.page-card h2,
.page-section h2 {
  margin: 0 0 16px;
  font-size: clamp(26px, 2.6vw, 42px);
  line-height: 1.22;
  letter-spacing: -0.018em;
}
.page-card p,
.page-section p {
  color: var(--ink-soft);
  line-height: 1.9;
  margin: 0 0 14px;
}
.sms-template bdi,
.page-list bdi {
  unicode-bidi: isolate;
  direction: ltr;
  font-family: var(--font-display);
}
.page-list {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
}
.page-list li {
  position: relative;
  padding-inline-start: 22px;
  color: var(--ink-soft);
  line-height: 1.85;
}
.page-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.82em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--green-deep);
}
.page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(34px, 5vw, 72px);
}
@media (max-width: 920px) { .page-grid { grid-template-columns: 1fr; } }
.mini-card {
  border-radius: var(--radius-lg);
  padding: 24px;
  background: radial-gradient(115% 115% at 50% 30%, rgba(255,255,255,0.52), rgba(255,255,255,0) 78%);
  box-shadow: var(--shadow-soft);
}
.mini-card h3 { margin: 0 0 10px; font-size: 20px; }
.mini-card p { margin: 0; color: var(--ink-soft); line-height: 1.8; font-size: 14.5px; }
.page-section {
  margin-top: clamp(46px, 6vw, 86px);
  padding-top: clamp(28px, 4vw, 46px);
  border-top: 1px solid var(--rule);
}
.process {
  counter-reset: step;
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
.process-item {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.30);
}
.process-item::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
}
.process-item h3 { margin: 0 0 6px; font-size: 18px; }
.process-item p { margin: 0; font-size: 14.5px; }
.link-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.link-pill {
  color: var(--ink);
  text-decoration: none;
  border-radius: 999px;
  padding: 10px 15px;
  background: var(--glass-bg-strong);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.link-pill:hover { box-shadow: inset 0 0 0 1px var(--green-deep); }
.plain-link { color: var(--ink); text-decoration-color: var(--green-deep); text-underline-offset: 4px; }
[data-theme="dark"] .page-card,
:root:not([data-theme="light"]) .page-card,
[data-theme="dark"] .mini-card,
:root:not([data-theme="light"]) .mini-card {
  background: radial-gradient(115% 115% at 50% 30%, rgba(255,255,255,0.05), rgba(255,255,255,0) 78%);
}
[data-theme="dark"] .process-item,
:root:not([data-theme="light"]) .process-item {
  background: rgba(255,255,255,0.035);
}

/* ─── chat FAB + drawer (Apple-style frosted panel) ─── */
.chat-fab { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 50; display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 999px; background: var(--ink); color: #fff; border: 0; font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: 0 16px 36px -12px rgba(0,0,0,0.5), 0 0 0 6px rgba(183,224,168,0.15); transition: transform 0.18s, background 0.18s; }
.chat-fab:hover { transform: translateY(-2px); background: #000; }
.chat-fab svg { width: 18px; height: 18px; flex-shrink: 0; }
.chat-fab.hidden { display: none; }
.chat-drawer { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 60; width: min(420px, calc(100vw - 28px)); max-height: min(700px, calc(100vh - 44px)); transform: translateY(20px); opacity: 0; pointer-events: none; transition: opacity 0.22s, transform 0.22s; }
.chat-drawer.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (max-width: 560px) { .chat-drawer { inset-inline: 12px; width: auto; bottom: 12px; } .chat-card { height: min(72vh, 600px); } .chat-fab { padding: 12px 14px; font-size: 13px; bottom: 16px; } }
.chat-card { display: flex; flex-direction: column; height: 600px; max-height: 100%; background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: 0 32px 64px -20px rgba(0,0,0,0.45); overflow: hidden; }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--glass-border); background: rgba(255,255,255,0.5); }
.chat-head-l { display: flex; align-items: center; gap: 10px; }
.chat-head strong { display: block; font-size: 14px; font-weight: 700; }
.chat-sub { font-size: 12px; color: var(--ink-soft); }
.chat-close { background: transparent; border: 0; font-size: 22px; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 4px 8px; }
.chat-close:hover { color: var(--ink); }
.chat-log { list-style: none; padding: 18px; margin: 0; flex: 1; overflow-y: auto; }
.chat-log li { margin: 0 0 10px; display: flex; }
.bubble { max-width: 80%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.from-bot { justify-content: flex-start; }
.from-bot .bubble { background: rgba(255,255,255,0.9); border: 1px solid var(--glass-border); border-end-start-radius: 4px; color: var(--ink); }
.from-user { justify-content: flex-end; }
.from-user .bubble { background: var(--green); border: 1px solid var(--green-line); border-end-end-radius: 4px; color: var(--ink); }
.bubble.typing { display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px; }
.bubble.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); animation: blink 1.2s infinite ease-in-out; }
.bubble.typing span:nth-child(2) { animation-delay: 0.15s; }
.bubble.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--glass-border); background: rgba(255,255,255,0.5); }
.chat-form textarea { flex: 1; resize: none; border: 1px solid var(--rule); border-radius: 14px; padding: 10px 14px; font-family: inherit; font-size: 14.5px; color: var(--ink); background: #fff; outline: none; max-height: 140px; line-height: 1.5; transition: border-color 0.18s, box-shadow 0.18s; min-width: 0; }
.chat-form textarea:focus { border-color: var(--green-deep); box-shadow: 0 0 0 3px rgba(47,122,68,0.18); }
.chat-send { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--ink); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.18s, transform 0.18s; }
.chat-send:hover { background: #000; transform: translateY(-1px); }
.chat-send svg { width: 18px; height: 18px; flex-shrink: 0; }
html[dir="rtl"] .send-icon-rtl { transform: scaleX(-1); }
.chat-send:disabled { opacity: 0.5; cursor: wait; transform: none; }
.chat-fine { font-size: 11px; color: var(--ink-faint); margin: 0; padding: 0 14px 12px; line-height: 1.6; }

/* mobile ───────── */
@media (max-width: 480px) {
  .topbar-inner { padding: 12px var(--gutter); gap: 12px; }
  .brand-name { font-size: 17px; }
  .manifesto-headline { font-size: clamp(44px, 11.5vw, 64px); margin: 6px 0 18px; }
  .hero-pitch { font-size: 16.5px; line-height: 1.55; }
  .floor-feed { font-size: 12px; padding: 12px 14px; }
  .floor-feed li { grid-template-columns: 48px 10px 1fr; gap: 8px; }
  .stance { padding: 22px 20px; }
  .pillar { padding: 22px 20px; }
  .pillar h3 { font-size: 22px; }
  .ls-num { width: 40px; height: 40px; font-size: 14px; margin-top: -28px; }
  .case-body { padding: 22px 20px; }
  .case-body p { font-size: 15px; }
  .ca-pre { font-size: 11.5px; padding: 14px 16px; }
  .cta-inner h2 { font-size: 28px; }
}
@media (max-width: 360px) {
  .manifesto-headline { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}