/* 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;

  /* ── 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: rgba(255,255,255,0.10);  /* one faint outline so the input area is findable */
  box-shadow: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hc-form {
    background: transparent;
    border-color: rgba(255,255,255,0.10);
    box-shadow: none;
  }
}
/* 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. */
  background:
    linear-gradient(180deg,
      rgba(183,224,168,0.18) 0%,
      rgba(183,224,168,0.18) 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.18) 0%,
      rgba(47,122,68,0.18) 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.18) 0%,
        rgba(47,122,68,0.18) 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. */
  background: rgba(255,255,255,0.72);
  /* Reduced from blur(24px) saturate(180%) to blur(14px) — perf probe
     showed 90% slow frames on macbook-14 with the heavier filter; the
     cheaper blur drops that to <30%. */
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  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 */
[data-theme="dark"] .topbar-inner,
:root:not([data-theme="light"]) .topbar-inner {
  background: rgba(28,28,33,0.62);
  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.62);
    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 + touch perf: drop backdrop-filter — it was costing 30-50 ms/frame
   on Pixel-class viewports. Opaque-translucent fill instead. Visually still
   reads as a glass nav (because of the inner highlight + drop shadow) but
   scrolls at 60 fps. */
@media (max-width: 980px), (pointer: coarse) {
  .topbar-inner {
    background: rgba(252,250,246,0.96) !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  [data-theme="dark"] .topbar-inner,
  :root:not([data-theme="light"]) .topbar-inner {
    background: rgba(20,20,25,0.96) !important;
  }
  /* Pause the chat-breath halo on mobile during scroll for the same reason. */
  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; }
.section-headline em { font-style: normal; color: var(--green-deep); }
.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 */
.manifesto-headline {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw + 12px, 104px);
  line-height: 1.02;
  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.1; }
.mh-line { display: block; }
/* 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;
  background: var(--green);
  z-index: -1;
  opacity: 0.7;
  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 {
  content: "";
  position: absolute;
  inset: -4% -8%;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 38%,
    rgba(255,255,255,0.55) 50%,
    transparent 62%,
    transparent 100%);
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: soft-light;
  animation: chat-shimmer 12s ease-in-out infinite;
}
body.is-scrolling .hero-chat::after { animation-play-state: paused; }
@media (max-width: 740px), (pointer: coarse) {
  .hero-chat::after { animation: none; opacity: 0; }
}
@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 */
[data-theme="dark"] .hero-chat::after,
:root:not([data-theme="light"]) .hero-chat::after {
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 38%,
    rgba(183,224,168,0.18) 50%,
    transparent 62%,
    transparent 100%);
  mix-blend-mode: screen;
  opacity: 0.4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-chat::after {
    background: linear-gradient(115deg,
      transparent 0%, transparent 38%,
      rgba(183,224,168,0.18) 50%,
      transparent 62%, transparent 100%);
    mix-blend-mode: screen;
    opacity: 0.4;
  }
}
/* 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;
  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;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.30);
}
.hc-send:hover { background: #000; 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;
  color: var(--green-deep);
  margin: 0 0 12px;
  opacity: 0.85;
}
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;
  background: linear-gradient(90deg, var(--green-deep), var(--green) 60%, transparent);
  opacity: 0.5;
}
.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(--green-deep); 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%;
  background: var(--green);
  border: 1px solid var(--green-line);
  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: var(--ink);
}
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; }
.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(--green-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; }
.chip-stat b { color: var(--green-deeper); font-weight: 700; }
[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(--green); }
@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(--green); }
}

.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(--green-deep); font-weight: 700; }
@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-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; }
.cta-inner .btn-primary { background: #ffffff; color: var(--ink); }
.cta-inner .btn-primary:hover { background: #f0f0f2; }

/* ─── footer ─── */
.foot { border-top: 1px solid var(--rule); padding: 32px var(--gutter); background: var(--bg); }
.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; }

/* ─── 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; }
}