@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/JetBrainsMono-Variable.woff2") format("woff2");
  }

  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/Inter-Variable.woff2") format("woff2");
  }

  :root {
    color-scheme: dark;
    --bg: #050805;
    --bg-2: #0a0f0a;
    --surface: #0d130e;
    --surface-2: #121a13;
    --border: rgba(34, 197, 94, 0.16);
    --border-strong: rgba(34, 197, 94, 0.32);
    --text: #eafbee;
    --text-dim: #93b39d;
    --text-faint: #56705f;
    --accent: #22c55e;
    --accent-2: #4ade80;
    --accent-ink: #04150a;
    --accent-glow: rgba(34, 197, 94, 0.32);
    --sev-high: #ff6f6f;
    --sev-medium: #ffb454;
    --sev-low: #8fa8a0;
    --allow: #22c55e;
    --sans: "Inter", "Noto Sans Hebrew", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mono: "JetBrains Mono", "Noto Sans Hebrew", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    --radius: 3px;
    --max: 1180px;
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background:
      radial-gradient(circle at 18% 12%, var(--accent-glow), transparent 42%),
      radial-gradient(circle at 84% 0%, rgba(34,197,94,0.12), transparent 40%),
      linear-gradient(160deg, var(--bg-2), var(--bg));
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  ::selection { background: var(--accent-glow); color: var(--text); }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  h1, h2, h3 {
    font-family: var(--sans);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin: 0;
    color: var(--text);
  }

  .mono { font-family: var(--mono); }
  .eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .eyebrow::before {
    content: "";
    width: 7px; height: 7px;
    background: var(--accent);
    border-radius: 1px;
    box-shadow: 0 0 8px var(--accent-glow);
    flex: none;
  }
  .eyebrow-credit {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 10px;
  }
  .eyebrow-credit a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text);
    font-weight: 600;
  }
  .eyebrow-credit a:hover { color: var(--accent-2); }
  .eyebrow-credit img {
    border-radius: 50%;
    flex: none;
  }

  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }

  /* ---------- brand mark ---------- */
  .mark { flex: none; filter: drop-shadow(0 0 10px var(--accent-glow)); }

  /* ---------- nav ---------- */
  header.nav {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .nav-inner {
    max-width: var(--max); margin: 0 auto; padding: 16px 28px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
  }
  .brand { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; }
  nav.links { display: flex; gap: 26px; font-family: var(--mono); font-size: 13px; color: var(--text-dim); }
  nav.links a { text-decoration: none; transition: color .15s; white-space: nowrap; }
  nav.links a:hover { color: var(--accent); }
  @media (max-width: 780px) { nav.links { display: none; } }
  .lang-switch {
    display: flex;
    flex: none;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    overflow: hidden;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.03em;
  }
  .lang-switch .lang-opt {
    padding: 7px 14px;
    text-decoration: none;
    color: var(--text-dim);
    background: transparent;
    transition: background .15s, color .15s;
    white-space: nowrap;
  }
  .lang-switch .lang-opt:not(:last-child) { border-inline-end: 1px solid var(--border-strong); }
  a.lang-opt:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .lang-switch .lang-opt.active { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

  /* ---------- hero ---------- */
  .hero { padding: 84px 0 72px; }
  .hero .wrap {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
  }
  @media (max-width: 980px) {
    .hero .wrap { grid-template-columns: 1fr; }
    .hero { padding: 56px 0 48px; }
  }

  .hero h1 {
    font-size: clamp(34px, 4.6vw, 52px);
    line-height: 1.08;
    margin: 20px 0 22px;
  }
  .hero h1 em { font-style: normal; color: var(--accent); }
  .hero p.lede {
    font-family: var(--mono);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.72;
    color: var(--text-dim);
    max-width: 46ch;
    margin: 0 0 20px;
  }
  .stance {
    font-family: var(--mono);
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-dim);
    border-left: 2px solid var(--border-strong);
    padding-left: 14px;
    max-width: 44ch;
    margin: 0 0 30px;
  }
  .stance b { color: var(--accent); font-weight: 700; }
  .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
  .btn {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.03em;
    padding: 13px 20px;
    border-radius: var(--radius);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text);
    transition: border-color .15s, background .15s, color .15s;
  }
  .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
  .btn.primary:hover { background: var(--accent-2); }
  .btn:not(.primary):hover { border-color: var(--accent); color: var(--accent); }

  .play-badge { display: inline-flex; align-items: center; transition: opacity .15s, transform .15s; }
  .play-badge img { display: block; height: 58px; width: auto; }
  .play-badge:hover { opacity: .82; }

  /* ---------- live feed mock ---------- */
  .feed-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.55);
  }
  .feed-titlebar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-family: var(--mono); font-size: 11px; color: var(--text-faint);
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .feed-dots { display: flex; gap: 6px; }
  .feed-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); opacity: .5; }
  .feed-body { height: 320px; overflow: hidden; position: relative; }
  .feed-body::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 40px;
    background: linear-gradient(to bottom, transparent, var(--surface));
    pointer-events: none;
  }
  .feed-scroll { display: flex; flex-direction: column; animation: feed-scroll 22s linear infinite; }
  @media (prefers-reduced-motion: reduce) { .feed-scroll { animation: none; } }
  @keyframes feed-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
  .feed-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    font-family: var(--mono); font-size: 12.5px;
  }
  .feed-host { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .feed-geo { color: var(--text-faint); font-size: 11px; }
  .feed-tag {
    font-size: 10.5px; letter-spacing: 0.04em; padding: 3px 7px; border-radius: 2px;
    white-space: nowrap; font-weight: 700;
  }
  .feed-tag.allow { color: var(--allow); background: color-mix(in srgb, var(--allow) 14%, transparent); }
  .feed-tag.block { color: var(--sev-high); background: color-mix(in srgb, var(--sev-high) 14%, transparent); }
  .feed-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; margin-right: 8px; }
  .feed-host-wrap { display: flex; align-items: center; overflow: hidden; }

  /* ---------- section shell ---------- */
  section { padding: 88px 0; border-top: 1px solid var(--border); }
  section .kicker { margin-bottom: 20px; }
  section h2 {
    font-size: clamp(26px, 3.4vw, 36px);
    margin-bottom: 28px;
    max-width: 22ch;
  }
  .section-lede { font-family: var(--mono); font-weight: 400; font-size: 15.5px; line-height: 1.72; color: var(--text-dim); max-width: 62ch; margin-bottom: 40px; }

  /* ---------- narrative ---------- */
  .narrative { display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 60px; }
  @media (max-width: 900px) { .narrative { grid-template-columns: 1fr; gap: 28px; } }
  .narrative-copy p { font-family: var(--mono); font-weight: 400; font-size: 15px; line-height: 1.8; color: var(--text-dim); max-width: 62ch; }
  .narrative-copy p + p { margin-top: 18px; }
  .narrative-copy strong { color: var(--text); font-weight: 700; }
  .pull {
    font-family: var(--mono);
    font-size: 15px;
    line-height: 1.65;
    color: var(--accent);
    border-left: 2px solid var(--accent);
    padding-left: 20px;
    align-self: start;
    position: sticky;
    top: 100px;
  }

  /* ---------- pipeline ---------- */
  .pipeline { display: flex; flex-direction: column; gap: 0; counter-reset: step; }
  .step {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 24px;
    padding: 26px 0;
    border-top: 1px solid var(--border);
  }
  .step:first-child { border-top: none; }
  .step-num { font-family: var(--mono); font-size: 13px; color: var(--accent); padding-top: 3px; }
  .step h3 { font-size: 18px; margin-bottom: 8px; font-weight: 700; }
  .step p { font-family: var(--mono); font-weight: 400; font-size: 14px; color: var(--text-dim); max-width: 66ch; margin: 0; line-height: 1.72; }
  .step code {
    font-family: var(--mono); font-size: 0.86em; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    padding: 1px 5px; border-radius: 2px;
  }

  /* ---------- capability dossier ---------- */
  .dossier-group { margin-bottom: 56px; }
  .dossier-group:last-child { margin-bottom: 0; }
  .dossier-label {
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-faint);
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 18px;
  }
  .dossier-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }
  /* dense packing: a `.cap.wide` card forces a fresh row in default grid-auto-flow, which can
     strand a lone narrow card in the previous row's other column. Dense backfills that gap with
     a later narrow card instead of leaving it empty -- visual order can then differ slightly from
     source order, an accepted trade-off for a masonry-style grid like this one. */
  .cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: row dense; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
  @media (max-width: 780px) { .cap-grid { grid-template-columns: 1fr; } }
  .cap { background: var(--surface); padding: 22px 24px; transition: background .15s; }
  .cap.wide { grid-column: 1 / -1; }
  .cap:hover { background: var(--surface-2); }
  .cap h4 { font-family: var(--sans); font-size: 15px; color: var(--text); margin: 0 0 8px; font-weight: 700; }
  .cap p { font-family: var(--mono); font-weight: 400; font-size: 13.5px; color: var(--text-dim); margin: 0; line-height: 1.68; }
  .cap p + p { margin-top: 8px; }
  .cap .stat { font-family: var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; }
  .cap .example {
    margin-top: 12px; padding: 10px 12px;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    border-left: 2px solid var(--accent);
    font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); line-height: 1.6;
  }

  /* ---------- demo gallery ---------- */
  .demo-scroll {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .demo-card {
    flex: none;
    width: 190px;
    scroll-snap-align: start;
    margin: 0;
  }
  /* Screenshots are natively very tall (phone aspect ratio) -- showing them at full height
     would make each card dominate the viewport on mobile. Cropping to a fixed height anchored
     to the top shows the most identifiable part of each screen (header, stats) and keeps every
     card the same, scannable size regardless of the source image's actual proportions. */
  .demo-card img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: top center;
    border-radius: 8px;
    border: 1px solid var(--border);
    box-shadow: 0 20px 50px -24px rgba(0,0,0,0.55);
  }
  .demo-card figcaption {
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-dim);
  }
  @media (max-width: 640px) {
    .demo-card { width: 148px; }
    .demo-card img { height: 235px; }
  }

  /* ---------- ledger ---------- */
  .ledger { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
  .ledger-row { display: grid; grid-template-columns: 1fr 1fr; }
  @media (max-width: 780px) { .ledger-row { grid-template-columns: 1fr; } }
  .ledger-row + .ledger-row { border-top: 1px solid var(--border); }
  .ledger-cell { padding: 20px 26px; font-family: var(--mono); font-weight: 400; font-size: 13.5px; line-height: 1.65; }
  .ledger-cell.is { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-right: 1px solid var(--border); }
  .ledger-cell.isnot { color: var(--text-dim); }
  @media (max-width: 780px) { .ledger-cell.is { border-right: none; border-bottom: 1px solid var(--border); } }
  .ledger-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; display: block; margin-bottom: 6px; }
  .ledger-cell.is .ledger-tag { color: var(--accent); }
  .ledger-cell.isnot .ledger-tag { color: var(--text-faint); }
  .ledger-cell b { color: var(--text); font-weight: 700; }

  /* ---------- FAQ ---------- */
  .faq-list { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
  .faq-item { border-top: 1px solid var(--border); background: var(--surface); }
  .faq-item:first-child { border-top: none; }
  .faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 20px 24px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: "+";
    font-family: var(--mono);
    color: var(--accent);
    font-size: 18px;
    flex: none;
    transition: transform .15s;
  }
  .faq-item[open] summary::after { transform: rotate(45deg); }
  .faq-item:hover summary { background: var(--surface-2); }
  .faq-item p {
    margin: 0;
    padding: 0 24px 20px;
    font-family: var(--mono);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.72;
    color: var(--text-dim);
    max-width: 70ch;
  }

  .stat-strip { display: flex; gap: 0; margin-top: 44px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .stat-strip .stat-block { flex: 1; padding: 20px 0; text-align: left; }
  .stat-strip .stat-block + .stat-block { border-left: 1px solid var(--border); padding-left: 24px; }
  .stat-strip .num { font-family: var(--mono); font-size: 26px; color: var(--accent); font-variant-numeric: tabular-nums; display: block; }
  .stat-strip .label { font-family: var(--mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.06em; text-transform: uppercase; }
  @media (max-width: 700px) { .stat-strip { flex-wrap: wrap; } .stat-strip .stat-block { flex: 1 1 45%; } }

  /* ---------- footer / cta ---------- */
  .closer { text-align: left; padding: 96px 0 64px; }
  .closer h2 { font-size: clamp(28px, 4vw, 42px); max-width: 22ch; margin-bottom: 22px; }
  .closer p { font-family: var(--mono); font-weight: 400; font-size: 15px; line-height: 1.7; color: var(--text-dim); max-width: 54ch; margin-bottom: 32px; }
  footer {
    border-top: 1px solid var(--border);
    padding: 28px 0 40px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-family: var(--mono); font-size: 12px; color: var(--text-faint);
  }

  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

  /* ---------- mobile tuning ---------- */
  @media (max-width: 640px) {
    .wrap { padding: 0 18px; }
    .nav-inner { padding: 14px 18px; }
    section { padding: 56px 0; }
    .hero { padding: 40px 0 36px; }
    .closer { padding: 64px 0 48px; }
    .hero p.lede { font-size: 15px; }
    .stance { font-size: 12.5px; max-width: 100%; }
    .cta-row .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
    .feed-body { height: 240px; }
    .feed-row { font-size: 11px; gap: 8px; padding: 9px 10px; }
    .feed-tag { font-size: 9.5px; padding: 2px 5px; }
    .pull { position: static; top: auto; border-left: none; border-top: 2px solid var(--accent); padding-left: 0; padding-top: 14px; margin-bottom: 6px; }
    .cap { padding: 18px 18px; }
    .ledger-cell { padding: 16px 18px; }
    .dossier-label { font-size: 11px; }
  }
  @media (max-width: 900px) {
    .pull { position: static; top: auto; }
  }

  /* ---------- RTL (Hebrew) ---------- */
  /* Grid/flex track order flips automatically under dir="rtl"; only explicit physical
     left/right values (accent bars, borders used as a leading-edge marker, one-sided
     alignment) need mirroring here. */
  html[dir="rtl"] .stance { border-left: none; border-right: 2px solid var(--border-strong); padding-left: 0; padding-right: 14px; }
  html[dir="rtl"] .pull { border-left: none; border-right: 2px solid var(--accent); padding-left: 0; padding-right: 20px; }
  html[dir="rtl"] .cap .example { border-left: none; border-right: 2px solid var(--accent); }
  html[dir="rtl"] .ledger-cell.is { border-right: none; border-left: 1px solid var(--border); }
  @media (max-width: 780px) { html[dir="rtl"] .ledger-cell.is { border-left: none; border-bottom: 1px solid var(--border); } }
  html[dir="rtl"] .stat-strip .stat-block { text-align: right; }
  html[dir="rtl"] .stat-strip .stat-block + .stat-block { border-left: none; border-right: 1px solid var(--border); padding-left: 0; padding-right: 24px; }
  html[dir="rtl"] .closer { text-align: right; }
  html[dir="rtl"] .feed-dot { margin-right: 0; margin-left: 8px; }
  html[dir="rtl"] .lang-switch { direction: ltr; }
  @media (max-width: 640px) {
    html[dir="rtl"] .pull { border-right: none; border-top: 2px solid var(--accent); padding-right: 0; padding-top: 14px; }
  }