/* Net.leg landing — design tokens + layout.
   All spacing uses logical properties (inline-start/end) so dir="rtl" flips free. */

:root {
  --bg0: #05070D;
  --bg1: #090D17;
  --surface: #0C1322;
  --surface2: #101A2E;
  --line: rgba(150, 165, 200, .10);
  --line2: rgba(150, 165, 200, .20);
  --ink: #E9EEF7;
  --ink2: #A9B3C7;
  --ink3: #6B7590;
  --cyan: #5FD4F4;
  --cyan-deep: #1E9ECD;
  --cyan-glow: rgba(95, 212, 244, .14);
  --silver: #C9D2E0;
  --good: #46C481;
  --warn: #D9AE5F;
  --bad: #DE7070;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --radius: 12px;
  --maxw: 1160px;
}

/* Hebrew page: IBM Plex Sans Hebrew everywhere.
   IBM Plex Mono has NO Hebrew glyphs — any mono-styled element that carries
   Hebrew text must fall back to the sans, or the browser picks a random font. */
[dir="rtl"] { --sans: 'IBM Plex Sans Hebrew', 'IBM Plex Sans', 'Segoe UI', sans-serif; }
[dir="rtl"] .serif-accent { font-family: var(--sans); font-style: normal; font-weight: 600; }
[dir="rtl"] :is(.kicker, .evtag, .evtag[data-tip]:hover::after, .tl-date, .pipe-h, .claim-h,
  .ba-h, .src-fine, .demo-note, .footer-tag, .panel-chrome em, .out-meta, .conf,
  .chips li, .matrix th, .matrix .mono, .brain-tip, .io-chip) {
  font-family: var(--sans); letter-spacing: .02em; font-weight: 500;
}
[dir="rtl"] .kicker { font-size: .78rem; font-weight: 600; }
[dir="rtl"] .stat-n { font-family: var(--sans); font-weight: 600; }
[dir="rtl"] h1.display { letter-spacing: 0; }
[dir="rtl"] h2 { letter-spacing: 0; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg0);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: rgba(95,212,244,.25); }

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.narrow > * { max-width: 720px; }
.narrow-p { max-width: 640px; }

.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 40;
  background: radial-gradient(130% 130% at 50% 35%, transparent 60%, rgba(2,4,9,.5));
}

/* ---------- type ---------- */
h1.display {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(2.4rem, 5.4vw, 4.3rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  margin-block: 20px 24px;
}
h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-block-end: 20px;
  max-width: 720px;
}
h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.serif-accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--silver);
}
h1 .serif-accent {
  background: linear-gradient(100deg, var(--silver), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink2); max-width: 560px; }
.body-lg { font-size: 1.08rem; color: var(--ink2); max-width: 680px; margin-block-end: 16px; }

.kicker {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--cyan);
  display: flex; align-items: center; gap: 10px; margin-block-end: 18px;
}
.kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); flex: none; }

.mono { font-family: var(--mono); font-size: .82em; color: var(--ink3); }

/* ---------- evidence tag (the signature) ---------- */
.evtag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .08em;
  color: var(--cyan); background: rgba(95,212,244,.07);
  border: 1px solid rgba(95,212,244,.25); border-radius: 4px;
  padding: 2px 8px; vertical-align: 2px; margin-inline-start: 8px;
  white-space: nowrap; cursor: default; position: relative;
  transition: background .2s, border-color .2s;
}
.evtag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .8; }
.evtag:hover { background: rgba(95,212,244,.14); border-color: rgba(95,212,244,.5); }
.evtag.bad { color: var(--bad); background: rgba(222,112,112,.07); border-color: rgba(222,112,112,.3); }
.evtag.warn { color: var(--warn); background: rgba(217,174,95,.07); border-color: rgba(217,174,95,.3); }
.evtag[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0;
  background: var(--surface2); border: 1px solid var(--line2); border-radius: 8px;
  padding: 8px 12px; font-size: .68rem; letter-spacing: .02em; color: var(--ink2);
  width: 240px; white-space: normal; z-index: 60; box-shadow: 0 12px 30px rgba(0,0,0,.5);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-weight: 500; font-size: .92rem;
  padding: 13px 26px; border-radius: 9px; text-decoration: none;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .2s var(--ease), box-shadow .25s, background .2s, border-color .2s;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--cyan);
  color: #04121C; font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 20px rgba(31,158,205,.25);
}
.btn-primary:hover { background: #7BDFF7; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 26px rgba(31,158,205,.4); transform: translateY(-1px); }
.btn-ghost { color: var(--ink); border-color: var(--line2); background: rgba(255,255,255,.02); }
.btn-ghost:hover { border-color: rgba(150,165,200,.45); background: rgba(255,255,255,.05); }
.btn-sm { padding: 9px 18px; font-size: .85rem; }
.btn-block { width: 100%; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px;
}

/* ---------- nav ---------- */
.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-block-end: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(7, 10, 18, .78); backdrop-filter: blur(14px);
  border-block-end-color: var(--line);
}
.nav-inner {
  max-width: var(--maxw); margin-inline: auto; padding: 16px 24px;
  display: flex; align-items: center; gap: 32px;
}
.wordmark {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 500;
  color: var(--ink); text-decoration: none; letter-spacing: -.01em;
}
.wordmark-dot { color: var(--cyan); }
.nav-links { display: flex; gap: 26px; margin-inline-start: auto; }
.nav-links a {
  color: var(--ink2); text-decoration: none; font-size: .88rem;
  transition: color .2s;
}
.nav-links a:hover { color: var(--ink); }
.lang-switch {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .08em;
  color: var(--ink2); text-decoration: none; border: 1px solid var(--line2);
  border-radius: 6px; padding: 6px 10px; transition: color .2s, border-color .2s;
}
.lang-switch:hover { color: var(--ink); border-color: rgba(150,165,200,.45); }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 120px 80px; overflow: clip;
  background:
    radial-gradient(60% 50% at 68% 42%, rgba(31,158,205,.10), transparent 70%),
    radial-gradient(40% 40% at 20% 80%, rgba(95,212,244,.04), transparent 70%),
    var(--bg0);
}
#brain { position: absolute; inset: 0; width: 100%; height: 100%; }
.brain-tip {
  position: absolute; z-index: 20; pointer-events: none; opacity: 0;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyan); background: rgba(7,10,18,.9); border: 1px solid rgba(95,212,244,.35);
  border-radius: 6px; padding: 4px 10px; transform: translate(-50%, -140%);
  transition: opacity .15s;
}
.brain-tip.on { opacity: 1; }

.hero-grid {
  position: relative; z-index: 10;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 48px; align-items: center; width: 100%;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-block-start: 30px; }
.hero-note {
  margin-block-start: 26px; font-size: .85rem; color: var(--ink3); max-width: 480px;
  padding-inline-start: 14px; border-inline-start: 2px solid rgba(95,212,244,.35);
}

/* hero IO column */
.hero-io { display: flex; flex-direction: column; gap: 28px; align-items: flex-end; pointer-events: none; }
.io-inputs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 260px; }
.io-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--ink2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px;
  background: rgba(12,19,34,.6); backdrop-filter: blur(4px);
}
.io-chip svg { flex: none; }
.io-outputs { display: flex; flex-direction: column; gap: 10px; width: 250px; }
.out-card {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 12px; align-items: baseline;
  background: linear-gradient(160deg, rgba(16,26,46,.85), rgba(9,13,23,.85));
  border: 1px solid var(--line2); border-radius: 10px; padding: 12px 16px;
  backdrop-filter: blur(6px);
  transition: border-color .4s, box-shadow .4s;
}
.out-card.pulse { border-color: rgba(95,212,244,.55); box-shadow: 0 0 24px rgba(95,212,244,.12); }
.out-k { font-family: var(--mono); font-size: .65rem; color: var(--cyan); grid-row: span 2; align-self: center; }
.out-t { font-size: .88rem; font-weight: 600; color: var(--ink); }
.out-meta { font-family: var(--mono); font-size: .62rem; color: var(--ink3); letter-spacing: .05em; }

.hero-scroll {
  position: absolute; inset-block-end: 28px; inset-inline-start: 50%; translate: -50% 0;
  width: 22px; height: 36px; border: 1.5px solid var(--line2); border-radius: 12px; z-index: 10;
}
.hero-scroll span {
  position: absolute; inset-inline-start: 50%; translate: -50% 0; inset-block-start: 7px;
  width: 3px; height: 7px; border-radius: 2px; background: var(--cyan);
  animation: scrollhint 2.2s var(--ease) infinite;
}
@keyframes scrollhint { 0%{opacity:0; transform:translateY(0)} 30%{opacity:1} 100%{opacity:0; transform:translateY(12px)} }

/* ---------- sections ---------- */
.section { padding-block: 110px; position: relative; }
.section-tight { padding-block: 80px; }
.section:nth-of-type(even) { background: var(--bg1); }
.section + .section { border-block-start: 1px solid var(--line); }

/* stats */
.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-block-start: 56px;
}
.stat { background: var(--surface); padding: 32px 28px; }
.stat-n {
  display: block; font-family: var(--serif); font-size: 2.6rem; font-weight: 500;
  color: var(--ink); line-height: 1; margin-block-end: 10px;
  font-variant-numeric: tabular-nums;
}
.stat-l { font-size: .88rem; color: var(--ink3); }

/* sources grid */
.src-grid {
  list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  margin-block-start: 48px;
}
.src-grid li {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px;
  background: linear-gradient(170deg, var(--surface2), var(--surface));
  display: grid; gap: 8px; align-content: start;
  transition: border-color .3s, transform .3s var(--ease);
}
.src-grid li:hover { border-color: rgba(95,212,244,.35); transform: translateY(-3px); }
.src-grid svg { width: 28px; height: 28px; margin-block-end: 4px; }
.src-grid strong { font-size: .92rem; }
.src-grid span { font-size: .76rem; color: var(--ink3); line-height: 1.45; }
.src-fine {
  margin-block-start: 26px; font-family: var(--mono); font-size: .76rem; color: var(--cyan);
  letter-spacing: .03em;
}

/* hebrew-first band */
.heb-band {
  background:
    radial-gradient(50% 70% at 82% 50%, rgba(31,158,205,.10), transparent 70%),
    var(--bg1) !important;
}
.heb-points { list-style: none; display: grid; gap: 12px; margin-block-start: 8px; }
.heb-points li {
  font-size: .95rem; color: var(--ink2); padding-inline-start: 28px; position: relative;
}
.heb-points li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(95,212,244,.15); border: 1px solid var(--cyan);
  box-shadow: 0 0 8px rgba(95,212,244,.4);
}
.heb-visual {
  display: flex; align-items: center; justify-content: center; min-height: 340px;
}
.heb-visual span {
  font-family: 'Frank Ruhl Libre', serif; font-weight: 500; font-size: clamp(10rem, 20vw, 17rem);
  line-height: 1; background: linear-gradient(160deg, var(--silver) 20%, var(--cyan) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 60px rgba(95,212,244,.25));
}

/* product split + steps */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.steps { list-style: none; display: grid; gap: 0; counter-reset: step; }
.steps li {
  display: flex; gap: 18px; padding-block: 16px; align-items: baseline;
  border-block-end: 1px solid var(--line);
}
.steps li:last-child { border-block-end: none; }
.step-n { font-family: var(--mono); font-size: .72rem; color: var(--cyan); flex: none; width: 26px; }
.steps strong { display: block; font-size: .95rem; font-weight: 600; }
.steps li span:not(.step-n) { font-size: .84rem; color: var(--ink3); }

/* tabs + workspace panels */
.tabs { display: flex; gap: 6px; margin-block: 28px 0; border-block-end: 1px solid var(--line); }
.tab {
  background: none; border: none; color: var(--ink3); font-family: var(--sans);
  font-size: .9rem; font-weight: 500; padding: 12px 18px; cursor: pointer;
  border-block-end: 2px solid transparent; margin-block-end: -1px;
  transition: color .2s, border-color .2s;
}
.tab:hover { color: var(--ink2); }
.tab.active { color: var(--cyan); border-block-end-color: var(--cyan); }

.panel-frame {
  margin-block-start: 28px; border: 1px solid var(--line2); border-radius: 14px;
  background: linear-gradient(180deg, var(--surface2), var(--surface));
  overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.panel-chrome {
  display: flex; align-items: center; gap: 7px; padding: 12px 18px;
  border-block-end: 1px solid var(--line);
}
.panel-chrome span { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); }
.panel-chrome em {
  font-family: var(--mono); font-style: normal; font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink3); margin-inline-start: 10px;
}
.panel { display: none; padding: 32px; min-height: 320px; }
.panel.active { display: block; animation: panelin .5s var(--ease); }
@keyframes panelin { from { opacity: 0; transform: translateY(8px); } }

/* timeline preview */
.tl { position: relative; padding-inline-start: 4px; display: grid; gap: 22px; }
.tl-item { display: grid; grid-template-columns: 110px 1fr; gap: 20px; position: relative; }
.tl-date { font-family: var(--mono); font-size: .74rem; color: var(--ink3); padding-block-start: 3px; }
.tl-body { font-size: .92rem; color: var(--ink2); position: relative; padding-inline-start: 22px; }
.tl-body::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 7px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(95,212,244,.6);
}
.tl-body::after {
  content: ""; position: absolute; inset-inline-start: 3.5px; inset-block-start: 20px; inset-block-end: -22px;
  width: 1px; background: var(--line2);
}
.tl-item:last-child .tl-body::after { display: none; }
.tl-item.warn .tl-body::before { background: var(--bad); box-shadow: 0 0 8px rgba(222,112,112,.6); }
.tl-body strong { color: var(--ink); }

/* evidence matrix preview */
.matrix { width: 100%; border-collapse: collapse; font-size: .86rem; }
.matrix th {
  text-align: start; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink3); font-weight: 500;
  padding: 10px 14px; border-block-end: 1px solid var(--line2);
}
.matrix td { padding: 13px 14px; border-block-end: 1px solid var(--line); color: var(--ink2); }
.matrix tr:hover td { background: rgba(95,212,244,.03); }

.conf {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .06em;
  padding: 3px 9px; border-radius: 4px; border: 1px solid; white-space: nowrap;
}
.c1 { color: var(--cyan); border-color: rgba(95,212,244,.4); background: rgba(95,212,244,.08); }
.c2 { color: var(--good); border-color: rgba(70,196,129,.4); background: rgba(70,196,129,.08); }
.c3 { color: var(--silver); border-color: rgba(201,210,224,.3); background: rgba(201,210,224,.06); }
.c4 { color: var(--warn); border-color: rgba(217,174,95,.4); background: rgba(217,174,95,.08); }
.c5 { color: var(--bad); border-color: rgba(222,112,112,.4); background: rgba(222,112,112,.08); }

/* claims map preview */
.claims { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 8px; align-items: stretch; }
.claim-h { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); margin-block-end: 14px; }
.claim-col { display: flex; flex-direction: column; }
.claim-card {
  border: 1px solid var(--line2); border-radius: 10px; padding: 16px 18px;
  background: rgba(9,13,23,.5); margin-block-end: 12px; display: grid; gap: 5px;
}
.claim-card strong { font-size: .9rem; }
.claim-card span:not(.evtag) { font-size: .8rem; color: var(--ink3); }
.claim-card .evtag { margin-inline-start: 0; justify-self: start; margin-block-start: 4px; }
.claim-mid { color: rgba(95,212,244,.35); display: flex; align-items: center; }
.claim-mid svg { width: 100%; height: 200px; }

/* ---------- pipeline ---------- */
.pipe {
  display: grid; grid-template-columns: 1fr 44px 1.15fr 44px 1fr;
  gap: 0; align-items: stretch; margin-block-start: 48px;
}
.pipe-col {
  border: 1px solid var(--line2); border-radius: var(--radius);
  padding: 26px; background: var(--surface);
}
.pipe-core {
  background: linear-gradient(180deg, var(--surface2), var(--surface));
  border-color: rgba(95,212,244,.3);
  box-shadow: 0 0 40px rgba(31,158,205,.08), inset 0 1px 0 rgba(255,255,255,.03);
}
.pipe-h { font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); margin-block-end: 18px; }
.pipe-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.chips { flex-direction: row; flex-wrap: wrap; }
.chips li {
  font-family: var(--mono); font-size: .72rem; color: var(--ink2);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 11px;
}
.ticks li {
  font-size: .86rem; color: var(--ink3); padding-inline-start: 24px; position: relative;
  transition: color .4s;
}
.ticks li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 7px;
  width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line2);
  transition: background .4s, border-color .4s, box-shadow .4s;
}
.ticks li.done { color: var(--ink2); }
.ticks li.done::before {
  background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px rgba(95,212,244,.5);
}
.outs li {
  font-size: .86rem; color: var(--ink2); padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: rgba(9,13,23,.4);
}
.pipe-flow { position: relative; }
.flow-line {
  position: absolute; inset-block-start: 50%; inset-inline: 4px; height: 1px;
  background: repeating-linear-gradient(to right, var(--cyan) 0 5px, transparent 5px 11px);
  opacity: .5; animation: flow 1.2s linear infinite;
}
[dir="rtl"] .flow-line { animation-name: flow-rtl; }
@keyframes flow { to { background-position: 11px 0; } }
@keyframes flow-rtl { to { background-position: -11px 0; } }

/* ---------- capability cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-block-start: 48px; }
.card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px;
  background: linear-gradient(170deg, var(--surface2), var(--surface));
  transition: border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.card:hover {
  border-color: rgba(95,212,244,.35); transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(0,0,0,.4), 0 0 30px rgba(31,158,205,.06);
}
.card-ic { width: 26px; height: 26px; color: var(--cyan); margin-block-end: 18px; }
.card h3 { margin-block-end: 10px; }
.card p { font-size: .9rem; color: var(--ink3); }

/* ---------- confidence ladder ---------- */
.conf-ladder {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-block-start: 52px;
}
.conf-step { background: var(--surface); padding: 26px 22px; position: relative; }
.conf-step::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
}
.conf-step:nth-child(1)::before { background: var(--cyan); }
.conf-step:nth-child(2)::before { background: var(--good); }
.conf-step:nth-child(3)::before { background: var(--silver); }
.conf-step:nth-child(4)::before { background: var(--warn); }
.conf-step:nth-child(5)::before { background: var(--bad); }
.conf-step .conf { display: inline-block; margin-block-end: 12px; }
.conf-step p { font-size: .8rem; color: var(--ink3); }

/* ---------- security ---------- */
.sec-grid {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-block-start: 48px;
}
.sec-grid li {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
  background: var(--surface); display: grid; gap: 6px; align-content: start;
}
.sec-grid strong { font-size: .9rem; }
.sec-grid span { font-size: .8rem; color: var(--ink3); }

/* ---------- use cases ---------- */
.uc-grid {
  list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 40px;
}
.uc-grid li {
  font-size: .88rem; color: var(--ink2); border: 1px solid var(--line2);
  border-radius: 999px; padding: 10px 20px; background: rgba(12,19,34,.5);
  transition: border-color .25s, color .25s;
}
.uc-grid li:hover { border-color: rgba(95,212,244,.45); color: var(--ink); }

/* ---------- before / after ---------- */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-block-start: 48px; }
.ba-col { border-radius: var(--radius); padding: 34px; border: 1px solid var(--line); }
.ba-before { background: var(--surface); }
.ba-after {
  background: linear-gradient(170deg, var(--surface2), var(--surface));
  border-color: rgba(95,212,244,.3); box-shadow: 0 0 50px rgba(31,158,205,.07);
}
.ba-h { font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; margin-block-end: 22px; }
.ba-before .ba-h { color: var(--ink3); }
.ba-after .ba-h { color: var(--cyan); }
.ba ul { list-style: none; display: grid; gap: 13px; }
.ba li { font-size: .92rem; color: var(--ink2); padding-inline-start: 28px; position: relative; }
.ba li::before {
  position: absolute; inset-inline-start: 0; inset-block-start: 1px;
  font-family: var(--mono); font-size: .85rem;
}
.ba-before li { color: var(--ink3); }
.ba-before li::before { content: "×"; color: var(--bad); opacity: .7; }
.ba-after li::before { content: "→"; color: var(--cyan); }
[dir="rtl"] .ba-after li::before { content: "←"; }

/* ---------- demo ---------- */
.demo-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
  border: 1px solid var(--line2); border-radius: 18px; padding: 56px;
  background:
    radial-gradient(70% 90% at 15% 10%, rgba(31,158,205,.10), transparent 60%),
    linear-gradient(170deg, var(--surface2), var(--bg1));
}
.demo-note { font-family: var(--mono); font-size: .72rem; color: var(--ink3); margin-block-start: 18px; letter-spacing: .05em; }
.demo-form { display: grid; gap: 16px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.demo-form label { display: grid; gap: 7px; font-size: .8rem; color: var(--ink2); font-weight: 500; }
.demo-form input, .demo-form select, .demo-form textarea {
  background: rgba(5,7,13,.6); border: 1px solid var(--line2); border-radius: 8px;
  color: var(--ink); font-family: var(--sans); font-size: .92rem; padding: 12px 14px;
  transition: border-color .2s;
}
.demo-form input:hover, .demo-form select:hover, .demo-form textarea:hover { border-color: rgba(150,165,200,.35); }
.demo-form textarea { resize: vertical; }
.form-ok { color: var(--good); font-size: .9rem; }
.form-err { color: var(--warn); font-size: .9rem; }
.form-err a { color: var(--cyan); }

/* ---------- footer ---------- */
.footer { border-block-start: 1px solid var(--line); padding-block: 56px; background: var(--bg0); }
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: start; }
.footer-tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); margin-block-start: 6px; }
.footer-links { display: flex; gap: 26px; }
.footer-links a { color: var(--ink3); text-decoration: none; font-size: .85rem; transition: color .2s; }
.footer-links a:hover { color: var(--ink); }
.footer-fine { grid-column: 1 / -1; font-size: .75rem; color: var(--ink3); border-block-start: 1px solid var(--line); padding-block-start: 22px; }

/* ---------- reveal animations ----------
   Gated behind html.js (set by an inline script) so content stays visible
   when JS is unavailable — never a blank page. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.d2 { transition-delay: .12s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .36s; }

.rl { display: block; overflow: hidden; }
.js .rl > span { display: block; transform: translateY(115%); transition: transform 1s var(--ease); }
.rl:nth-child(2) > span { transition-delay: .1s; }
.rl:nth-child(3) > span { transition-delay: .2s; }
.js body.loaded .rl > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .rl > span { opacity: 1; transform: none; transition: none; }
  .flow-line, .hero-scroll span { animation: none; }
  .panel.active { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .src-grid { grid-template-columns: repeat(3, 1fr); }
  .heb-visual { min-height: 220px; }
  .sec-grid { grid-template-columns: repeat(2, 1fr); }
  .conf-ladder { grid-template-columns: 1fr; }
  .conf-step::before { inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; width: 2px; height: auto; }
  .pipe { grid-template-columns: 1fr; gap: 18px; }
  .pipe-flow { height: 34px; }
  .flow-line {
    inset-inline-start: 50%; inset-block: 4px; width: 1px; height: auto;
    background: repeating-linear-gradient(to bottom, var(--cyan) 0 5px, transparent 5px 11px);
    animation-name: flowv;
  }
  @keyframes flowv { to { background-position: 0 11px; } }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .demo-wrap { grid-template-columns: 1fr; gap: 40px; padding: 40px 32px; }
}

@media (max-width: 760px) {
  .nav-links { display: none; }
  .hero { padding-block-start: 100px; min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-io { align-items: stretch; }
  .io-inputs { justify-content: flex-start; max-width: none; }
  .io-outputs { width: 100%; }
  #brain { opacity: .5; }
  .stat-row { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .src-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .src-grid li { padding: 16px 14px; }
  .sec-grid { grid-template-columns: 1fr; }
  .ba { grid-template-columns: 1fr; }
  .f-row { grid-template-columns: 1fr; }
  .claims { grid-template-columns: 1fr; }
  .claim-mid { display: none; }
  .tl-item { grid-template-columns: 1fr; gap: 4px; }
  .tl-body::after { display: none; }
  .panel { padding: 20px; overflow-x: auto; }
  .matrix { min-width: 560px; }
  .section { padding-block: 72px; }
  .demo-wrap { padding: 28px 20px; }
  .footer-inner { grid-template-columns: 1fr; }
  .evtag { white-space: normal; }
}