/* ══════════════════════════════════════════════════════════════════════════
   CyberLiveMonitor - public site stylesheet.
   Everything visual lives here. index.php carries zero inline styles.

   Direction: the whole sheet uses LOGICAL properties (inline-start/end,
   padding-inline, margin-inline) so the same file serves RTL Hebrew and
   LTR English with no second stylesheet and no overrides.
   ══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── Tokens ───────────────────────────── */
:root{
  /* Palette carried over from the dashboard so the site and the app read as
     one product. Kept as RGB triplets to allow rgba() tinting anywhere. */
  --cyan-rgb:0,212,255;  --green-rgb:0,232,122; --red-rgb:255,45,85;
  --orange-rgb:255,149,0;--purple-rgb:191,90,242;--blue-rgb:61,142,255;
  --yellow-rgb:255,214,10;

  --cyan:rgb(var(--cyan-rgb));   --green:rgb(var(--green-rgb));
  --red:rgb(var(--red-rgb));     --orange:rgb(var(--orange-rgb));
  --purple:rgb(var(--purple-rgb));--blue:rgb(var(--blue-rgb));
  --yellow:rgb(var(--yellow-rgb));

  --bg0:#020b17; --bg1:#04121f; --bg2:#071a2d; --bg3:#0a2440;
  --t1:#e8f4fd; --t2:#8fb6cd;
  /* --t3 was #4d738f, which measures 3.92:1 on the page background,
     3.61:1 on the code chips and 3.62:1 on the mode toggle - all below
     the 4.5:1 that IS 5568 / WCAG 1.4.3 requires of normal-size text,
     and it carries the hero note, the footer, the section notes and the
     table labels. #5d87a6 clears all three (5.16 / 4.75 / 4.76) with
     enough margin that a later background tweak will not silently
     drop it back under. Do not darken it again without re-measuring. */
  --t3:#5d87a6;

  --bd1:rgba(var(--cyan-rgb),.10);
  --bd2:rgba(var(--cyan-rgb),.22);
  --bd3:rgba(var(--cyan-rgb),.45);

  --fd:'Orbitron','Heebo',sans-serif;
  --fb:'Heebo',sans-serif;
  /* Share Tech Mono carries no Hebrew glyphs, so any Hebrew inside a mono
     context used to fall through to an arbitrary system monospace face.
     Font fallback resolves per glyph, so listing Heebo next keeps Latin
     and digits monospaced while Hebrew renders in the site's own face. */
  --fm:'Share Tech Mono','Heebo',monospace;

  /* Content headings - the h1..h6 the CMS editor produces, which appear in
     the legal documents and in any rich-text field. Declared as variables so
     the Typography screen can retune them without touching this file.
     The site's own section headings (.hero-h1, .h2, .card-t and friends) are
     deliberately NOT wired to these: each is tuned to its own block, and
     collapsing them onto one scale would flatten that. */
  --h1-size:1.62rem; --h1-weight:800;
  --h2-size:1.34rem; --h2-weight:800;
  --h3-size:1.06rem; --h3-weight:700;
  --h4-size:.98rem;  --h4-weight:700;
  --h5-size:.9rem;   --h5-weight:700;
  --h6-size:.84rem;  --h6-weight:700;

  --r:14px; --r-sm:9px;
  --wrap:1180px;
  --nav-h:64px;

  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 24px 60px rgba(0,0,0,.55);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  font-size:16px;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
  background:var(--bg0);
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--fb);
  background:var(--bg0);
  color:var(--t1);
  line-height:1.65;
  overflow-x:hidden;
  /* Faint fixed nebula so scrolling never hits flat black. */
  background-image:
    radial-gradient(900px 620px at 78% -6%, rgba(var(--cyan-rgb),.10), transparent 62%),
    radial-gradient(760px 540px at 6% 34%, rgba(var(--purple-rgb),.07), transparent 60%),
    radial-gradient(820px 620px at 92% 78%, rgba(var(--blue-rgb),.07), transparent 62%);
  background-attachment:fixed;
}

::selection{background:rgba(var(--cyan-rgb),.28);color:#fff}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg1)}
::-webkit-scrollbar-thumb{background:rgba(var(--cyan-rgb),.25);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--cyan-rgb),.45)}

img,svg{max-width:100%;display:block}
b,strong{font-weight:700;color:var(--t1)}

code{
  font-family:var(--fm);
  font-size:.86em;
  color:var(--cyan);
  background:rgba(var(--cyan-rgb),.08);
  border:1px solid var(--bd1);
  border-radius:5px;
  padding:.1em .38em;
  word-break:break-word;
  /* Code identifiers stay LTR even inside an RTL paragraph. */
  direction:ltr;
  unicode-bidi:isolate;
  display:inline-block;
}

.skip-link{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:999;
  background:var(--cyan);color:#00121f;padding:10px 18px;border-radius:0 0 8px 8px;
  font-weight:700;
}
.skip-link:focus{inset-inline-start:16px}

:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
/* #main only receives focus because the skip link sends it there, so it
   needs tabindex="-1" to be focusable at all - but it is not an operable
   control, and outlining the entire page region reads as a rendering
   fault rather than as feedback. The jump is the confirmation. */
main:focus,main:focus-visible{outline:none}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.wrap-narrow{max-width:820px}

/* ───────────────────────────── Detail-mode switch ─────────────────────────
   The site ships both a friendly and a technical version of most copy.
   html[data-mode] decides which one is in the flow. Both are in the DOM so
   switching is instant and costs no request. */
html[data-mode="simple"] .only-tech{display:none}
html[data-mode="tech"]   .only-simple{display:none}

/* ═════════════════════════════ NAV ═════════════════════════════ */
.nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:900;
  height:var(--nav-h);
  background:rgba(2,11,23,.62);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.nav.is-stuck{background:rgba(2,11,23,.92);border-bottom-color:var(--bd1)}

.nav-in{
  max-width:var(--wrap);margin-inline:auto;padding-inline:24px;
  height:100%;display:flex;align-items:center;gap:22px;
}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.brand-mark{color:var(--cyan);display:grid;place-items:center;filter:drop-shadow(0 0 8px rgba(var(--cyan-rgb),.5))}
.brand-txt{
  font-family:var(--fd);font-weight:700;font-size:15px;letter-spacing:.5px;
  color:var(--t1);white-space:nowrap;
}
.brand-txt b{color:var(--cyan);font-weight:900;margin-inline-start:5px}

.nav-links{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.nav-links a{
  position:relative;color:var(--t2);text-decoration:none;font-size:13.5px;font-weight:500;
  padding:8px 12px;border-radius:8px;transition:color .2s,background .2s;white-space:nowrap;
}
.nav-links a::after{
  content:'';position:absolute;inset-block-end:3px;inset-inline-start:12px;
  width:0;height:2px;background:var(--cyan);border-radius:2px;
  transition:width .28s var(--ease);
}
.nav-links a:hover{color:var(--t1);background:rgba(var(--cyan-rgb),.06)}
.nav-links a:hover::after{width:calc(100% - 24px)}

.nav-side{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.nav-links + .nav-side{margin-inline-start:0}

.lang-btn{
  display:inline-flex;align-items:center;gap:7px;
  /* Heebo, not the mono face: this label is one of the few bits of chrome
     that is Hebrew in one language and Latin in the other, and it has to
     look deliberate in both. */
  font-family:var(--fb);font-size:12.5px;font-weight:600;letter-spacing:.6px;
  color:var(--t2);text-decoration:none;
  border:1px solid var(--bd2);border-radius:7px;padding:5px 10px;
  transition:all .2s;
}
.lang-btn:hover{color:var(--cyan);border-color:var(--bd3);background:rgba(var(--cyan-rgb),.08)}
.lang-btn span{line-height:1}

/* Flag artwork from images/flags/. Height is fixed and width follows each
   flag's own ratio - the files are not a uniform size (gb 40x20, il 40x29),
   so forcing a shared box would letterbox one of them and the ring below
   would outline the empty space. The real dimensions come from flag(). */
.flag{
  height:13px;width:auto;flex-shrink:0;display:block;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.22),0 1px 3px rgba(0,0,0,.5);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.lang-btn:hover .flag{
  transform:scale(1.12);
  box-shadow:0 0 0 1px rgba(var(--cyan-rgb),.55),0 2px 7px rgba(0,0,0,.55);
}
/* Menu button. The `display:none` here is load-bearing: without it a bare
   <button> falls back to the browser's own styling and renders as a small
   white box on every screen size, which is exactly what it did when this
   rule went missing. It is revealed only inside the narrow-screen block. */
.nav-burger{
  display:none;
  width:40px;height:36px;
  background:rgba(var(--cyan-rgb),.1);
  border:1px solid var(--bd2);border-radius:9px;
  cursor:pointer;padding:9px 10px;
  flex-direction:column;justify-content:space-between;
  transition:background .2s,border-color .2s;
}
.nav-burger:hover,
.nav-burger[aria-expanded="true"]{background:rgba(var(--cyan-rgb),.2);border-color:var(--bd3)}
.nav-burger span{display:block;height:2px;background:var(--cyan);border-radius:2px;transition:.28s var(--ease)}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-progress{
  position:absolute;inset-block-end:-1px;inset-inline-start:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--cyan),var(--green));
  box-shadow:0 0 10px rgba(var(--cyan-rgb),.7);
  transition:width .1s linear;
}

/* ═════════════════════════════ Buttons ═════════════════════════════ */
.btn{
  --btn-bg:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--fb);font-weight:700;font-size:14px;line-height:1;
  text-decoration:none;cursor:pointer;border:1px solid transparent;border-radius:11px;
  padding:13px 22px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s,color .25s;
  white-space:nowrap;overflow:hidden;
}
.btn-sm{padding:9px 15px;font-size:13px;border-radius:9px}
.btn-lg{padding:16px 30px;font-size:15.5px}

.btn-primary{
  background:linear-gradient(135deg,rgba(var(--cyan-rgb),.95),rgba(var(--blue-rgb),.95));
  color:#00121f;
  box-shadow:0 8px 26px rgba(var(--cyan-rgb),.28),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(var(--cyan-rgb),.42),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-primary:active{transform:translateY(0)}
/* The hover "sheen" that used to live here is gone. It was a white gradient
   parked just outside the button's inline-start edge, held invisible only by
   opacity, and it showed as a pale sliver beside the button - a skewed,
   absolutely-positioned child is not reliably clipped by overflow:hidden
   once a transform enters the picture. A decorative flourish is not worth a
   permanent artifact next to the main call to action. */

.btn-ghost{
  background:rgba(var(--cyan-rgb),.05);color:var(--t1);border-color:var(--bd2);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{border-color:var(--bd3);background:rgba(var(--cyan-rgb),.11);transform:translateY(-2px)}

.btn-lock{font-size:1.05em;line-height:1}
.btn-arrow{transition:transform .25s var(--ease)}
html[dir="rtl"] .btn-arrow{transform:scaleX(-1)}
.btn:hover .btn-arrow{transform:translateX(4px)}
html[dir="rtl"] .btn:hover .btn-arrow{transform:scaleX(-1) translateX(4px)}

/* ═════════════════════════════ HERO ═════════════════════════════ */
.hero{
  position:relative;
  min-height:min(100svh,880px);
  padding-block:calc(var(--nav-h) + 62px) 70px;
  display:flex;align-items:center;
  overflow:hidden;
  isolation:isolate;
}

.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-3;opacity:.85}

.hero-grid{
  position:absolute;inset:-80px;z-index:-4;pointer-events:none;
  background-image:
    linear-gradient(rgba(var(--cyan-rgb),.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--cyan-rgb),.055) 1px,transparent 1px);
  background-size:52px 52px;
  animation:gridDrift 22s linear infinite;
  /* Fades the grid out towards the edges so it never looks like a table. */
  -webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 42%,#000 30%,transparent 78%);
          mask-image:radial-gradient(ellipse 78% 68% at 50% 42%,#000 30%,transparent 78%);
}
@keyframes gridDrift{to{transform:translate3d(52px,52px,0)}}

.hero-glow{
  position:absolute;z-index:-5;pointer-events:none;
  inset-block-start:-18%;inset-inline-end:-10%;
  width:min(760px,90vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(var(--cyan-rgb),.20),transparent 66%);
  filter:blur(28px);
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.09)}}

.hero-scan{
  position:absolute;inset-inline:0;inset-block-start:0;height:170px;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(var(--cyan-rgb),.055),transparent);
  animation:scanDown 7.5s linear infinite;
}
@keyframes scanDown{0%{transform:translateY(-180px)}100%{transform:translateY(100vh)}}

.hero-fade{
  position:absolute;inset-inline:0;inset-block-end:0;height:180px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--bg0));
}

.hero-in{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:60px;align-items:center;
}

.hero-badges{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.pill{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--fm);font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--t2);background:rgba(var(--cyan-rgb),.07);
  border:1px solid var(--bd2);border-radius:100px;padding:6px 13px;
}
.pill b{color:var(--cyan);font-weight:400}
.pill-live{color:var(--green);border-color:rgba(var(--green-rgb),.3);background:rgba(var(--green-rgb),.07)}
.dot{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(var(--green-rgb),.6);
  animation:pulseDot 2s ease-out infinite;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(var(--green-rgb),.55)}
  70%{box-shadow:0 0 0 9px rgba(var(--green-rgb),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--green-rgb),0)}
}

.hero-h1{
  font-family:var(--fd);
  font-size:clamp(2.1rem,5.6vw,3.9rem);
  font-weight:900;line-height:1.14;letter-spacing:-.5px;
  margin-bottom:22px;
}
.hero-h1 .line{display:block}
.hero-h1 .grad{
  background:linear-gradient(100deg,var(--cyan) 0%,#7fe8ff 38%,var(--green) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  /* Descenders were being clipped by the tight line-height. */
  padding-block-end:.08em;
}

/* Headline lines rise in on load. */
.reveal-line{
  opacity:0;transform:translateY(26px);
  animation:lineUp .95s var(--ease) forwards;
}
.reveal-line:nth-child(2){animation-delay:.13s}
@keyframes lineUp{to{opacity:1;transform:none}}

.hero-sub{
  font-size:clamp(1rem,1.55vw,1.14rem);color:var(--t2);
  max-width:60ch;margin-bottom:32px;
  opacity:0;animation:lineUp .9s var(--ease) .28s forwards;
}
.hero-sub b{color:var(--t1)}

.hero-cta{
  display:flex;gap:13px;flex-wrap:wrap;margin-bottom:20px;
  opacity:0;animation:lineUp .9s var(--ease) .42s forwards;
}
.hero-note{
  font-size:12.5px;color:var(--t3);letter-spacing:.2px;
  opacity:0;animation:lineUp .9s var(--ease) .56s forwards;
}

/* ── Hero terminal ── */
.hero-term{
  background:linear-gradient(165deg,rgba(7,26,45,.94),rgba(3,14,26,.94));
  border:1px solid var(--bd2);border-radius:var(--r);
  box-shadow:var(--shadow),0 0 0 1px rgba(var(--cyan-rgb),.06),0 0 60px rgba(var(--cyan-rgb),.10);
  overflow:hidden;
  direction:ltr;               /* log output is always LTR */
  opacity:0;transform:translateY(24px) scale(.985);
  animation:lineUp 1s var(--ease) .5s forwards;
}
.term-bar{
  display:flex;align-items:center;gap:12px;
  padding:11px 15px;background:rgba(var(--cyan-rgb),.05);
  border-bottom:1px solid var(--bd1);
}
.term-dots{display:flex;gap:6px}
.term-dots i{width:9px;height:9px;border-radius:50%;background:rgba(var(--red-rgb),.6)}
.term-dots i:nth-child(2){background:rgba(var(--orange-rgb),.6)}
.term-dots i:nth-child(3){background:rgba(var(--green-rgb),.6)}
.term-name{font-family:var(--fm);font-size:11.5px;color:var(--t3);letter-spacing:.6px}
.term-stat{
  margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--fm);font-size:10.5px;color:var(--green);letter-spacing:1px;text-transform:uppercase;
}

.term-body{
  height:288px;overflow:hidden;padding:13px 15px;
  font-family:var(--fm);font-size:12px;line-height:1.85;
  display:flex;flex-direction:column;justify-content:flex-end;gap:1px;
}
.term-row{
  display:flex;gap:9px;white-space:nowrap;
  animation:rowIn .45s var(--ease) both;
}
@keyframes rowIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.term-row .ts{color:var(--t3)}
.term-row .tag{font-weight:700}
.term-row .tag.r{color:var(--red)}
.term-row .tag.g{color:var(--green)}
.term-row .tag.y{color:var(--yellow)}
.term-row .mod{color:var(--cyan)}
.term-row .msg{color:var(--t2);overflow:hidden;text-overflow:ellipsis}

.term-foot{
  display:flex;gap:18px;padding:9px 15px;
  border-top:1px solid var(--bd1);background:rgba(0,0,0,.25);
}
.tf-k{font-family:var(--fm);font-size:9.5px;letter-spacing:1.6px;color:var(--t3);text-transform:uppercase}

/* ═════════════════════════════ Stat strip ═════════════════════════════ */
.strip{
  border-block:1px solid var(--bd1);
  background:linear-gradient(180deg,rgba(var(--cyan-rgb),.04),transparent);
}
.strip-in{
  display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
  padding-block:28px;
}
.strip-item{
  text-align:center;padding-inline:8px;
  border-inline-end:1px solid var(--bd1);
}
.strip-item:last-child{border-inline-end:none}
.strip-item b{
  display:block;font-family:var(--fd);font-weight:900;
  font-size:clamp(1.6rem,3.2vw,2.35rem);line-height:1;
  color:var(--cyan);text-shadow:0 0 22px rgba(var(--cyan-rgb),.35);
  margin-bottom:8px;
}
.strip-item span{display:block;font-size:12px;color:var(--t3);line-height:1.4}

/* ═════════════════════════════ Mode bar ═════════════════════════════ */
.modebar{
  position:sticky;inset-block-start:var(--nav-h);z-index:600;
  background:rgba(2,11,23,.86);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bd1);
}
.modebar-in{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding-block:12px;
}
.modebar-l{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-width:0;flex:1}
.modebar-t{
  font-family:var(--fd);font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--cyan);flex-shrink:0;
}
.modebar-h{font-size:12.5px;color:var(--t3);min-width:0}

.seg{
  position:relative;display:flex;gap:2px;padding:4px;
  background:rgba(var(--cyan-rgb),.06);border:1px solid var(--bd2);border-radius:11px;
  flex-shrink:0;
}
.seg-btn{
  position:relative;z-index:2;background:none;border:none;cursor:pointer;
  font-family:var(--fb);font-size:13px;font-weight:700;color:var(--t3);
  padding:8px 22px;border-radius:8px;transition:color .25s;
}
.seg-btn.is-on{color:#00121f}
/* No-JS fallback: the sliding indicator is sized in JS, so without it the
   active button's dark text would sit on the dark track and disappear. Give
   the button its own fill by default and remove it once JS takes over. */
.seg-btn.is-on{background:linear-gradient(135deg,var(--cyan),var(--blue));box-shadow:0 3px 14px rgba(var(--cyan-rgb),.35)}
html.js .seg-btn.is-on{background:none;box-shadow:none}

.seg-ind{
  position:absolute;z-index:1;inset-block:4px;
  border-radius:8px;background:linear-gradient(135deg,var(--cyan),var(--blue));
  box-shadow:0 3px 14px rgba(var(--cyan-rgb),.35);
  transition:inset-inline-start .35s var(--ease),width .35s var(--ease);
}
/* Hidden until JS measures it, so it never flashes at the wrong width. */
html:not(.js) .seg-ind{display:none}

/* ═════════════════════════════ Sections ═════════════════════════════ */
/* Vertical rhythm: two stacked sections contribute their bottom + top padding,
   so this value is effectively doubled in the gap between them. Keep it modest. */
.sec{padding-block:clamp(44px,5vw,68px);position:relative}
.sec-alt{background:linear-gradient(180deg,transparent,rgba(var(--bg3),.14),transparent)}
.sec-alt::before{
  content:'';position:absolute;inset-inline:0;inset-block-start:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--bd2),transparent);
}

.sec-head{max-width:760px;margin-bottom:36px}
.kick{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:var(--cyan);margin-bottom:15px;
}
.kick::before{content:'';width:26px;height:1px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}

.h2{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.2;letter-spacing:-.3px;
  margin-bottom:16px;
}
.lead{font-size:clamp(.98rem,1.4vw,1.08rem);color:var(--t2);max-width:70ch}
.lead b{color:var(--t1)}

.sub-h{
  font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--cyan);margin-bottom:20px;
  display:flex;align-items:center;gap:12px;
}
.sub-h::after{content:'';flex:1;height:1px;background:var(--bd1)}
.sub-h-c{margin-top:34px}

.note{
  margin-top:30px;font-size:13px;color:var(--t3);
  border-inline-start:2px solid var(--bd2);padding-inline-start:15px;max-width:78ch;
}

/* ── grids ── */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px}
.grid4-tight{gap:14px}

/* ── product cards ── */
.card{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,rgba(10,36,64,.5),rgba(4,18,31,.5));
  border:1px solid var(--bd1);border-radius:var(--r);
  padding:30px 26px;
  transition:transform .38s var(--ease),border-color .38s,box-shadow .38s;
}
.card:hover{transform:translateY(-5px);border-color:var(--bd2);box-shadow:0 20px 44px rgba(0,0,0,.42)}
.card-glow{
  position:absolute;inset-block-start:-60%;inset-inline-start:-30%;
  width:160%;height:160%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(var(--cyan-rgb),.13),transparent 58%);
  opacity:0;transition:opacity .45s;
}
.card:hover .card-glow{opacity:1}
.card-t{
  position:relative;font-family:var(--fd);font-size:1.02rem;font-weight:700;
  margin-bottom:11px;line-height:1.35;
}
.card-d{position:relative;font-size:14.5px;color:var(--t2)}

/* ── capability tiles ── */
.cap{
  position:relative;overflow:hidden;
  background:rgba(4,18,31,.55);
  border:1px solid var(--bd1);border-radius:var(--r);
  padding:26px 22px 28px;
  transition:transform .38s var(--ease),border-color .38s,background .38s;
}
.cap:hover{transform:translateY(-5px);border-color:var(--bd2);background:rgba(10,36,64,.55)}
.cap-i{
  display:grid;place-items:center;width:46px;height:46px;
  font-size:22px;line-height:1;
  background:rgba(var(--cyan-rgb),.09);border:1px solid var(--bd2);border-radius:12px;
  margin-bottom:16px;
  transition:transform .38s var(--ease),box-shadow .38s;
}
.cap:hover .cap-i{transform:scale(1.08) rotate(-4deg);box-shadow:0 0 22px rgba(var(--cyan-rgb),.28)}
.cap-t{font-family:var(--fd);font-size:.95rem;font-weight:700;margin-bottom:9px;line-height:1.35}
.cap-d{font-size:13.8px;color:var(--t2)}
.cap-line{
  position:absolute;inset-block-end:0;inset-inline-start:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--cyan),transparent);
  transition:width .5s var(--ease);
}
.cap:hover .cap-line{width:100%}

/* ── bridge cards ── */
.bridge{margin-top:12px}
.brg{
  position:relative;
  background:linear-gradient(160deg,rgba(10,36,64,.45),rgba(4,18,31,.45));
  border:1px solid var(--bd1);border-radius:var(--r-sm);
  padding:22px 20px;
  transition:border-color .35s,transform .35s var(--ease);
}
.brg:hover{border-color:var(--bd2);transform:translateY(-3px)}
.brg-n{
  font-family:var(--fm);font-size:11px;letter-spacing:2px;color:var(--cyan);
  opacity:.7;display:block;margin-bottom:10px;
}
.brg-t{font-size:.95rem;font-weight:700;margin-bottom:8px;line-height:1.35}
.brg-d{font-size:13.4px;color:var(--t2)}

/* ═════════════════════════════ Threats ═════════════════════════════ */
.thr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px}
.thr{
  position:relative;overflow:hidden;
  background:rgba(4,18,31,.6);
  border:1px solid var(--bd1);border-radius:var(--r-sm);
  padding:18px 18px 20px;
  transition:transform .32s var(--ease),border-color .32s,background .32s;
}
/* Severity accent runs down the inline-start edge - flips with direction. */
.thr::before{
  content:'';position:absolute;inset-block:0;inset-inline-start:0;width:3px;
  background:var(--sev,var(--t3));opacity:.75;transition:opacity .32s,box-shadow .32s;
}
.thr:hover{transform:translateY(-4px);background:rgba(10,36,64,.6);border-color:var(--bd2)}
.thr:hover::before{opacity:1;box-shadow:0 0 14px var(--sev)}

.sev-hi{--sev:var(--red)}
.sev-md{--sev:var(--orange)}
.sev-lo{--sev:var(--yellow)}
.sev-ok{--sev:var(--green)}

.thr-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.thr-i{font-size:21px;line-height:1}
.thr-sev{
  font-family:var(--fm);font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--sev);background:color-mix(in srgb,var(--sev) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--sev) 34%,transparent);
  border-radius:100px;padding:3px 9px;white-space:nowrap;
}
.thr-n{font-size:.94rem;font-weight:700;margin-bottom:6px;line-height:1.3}
.thr-e{
  display:inline-block;font-family:var(--fm);font-size:10.5px;
  color:var(--t3);background:rgba(255,255,255,.03);border:1px solid var(--bd1);
  border-radius:4px;padding:2px 7px;margin-bottom:10px;
  direction:ltr;unicode-bidi:isolate;
}
.thr-d{font-size:13.2px;color:var(--t2);line-height:1.6}

/* ═════════════════════════════ Security layers ═════════════════════════════ */
.layers{list-style:none;display:flex;flex-direction:column;gap:12px;counter-reset:none}
.layer{
  position:relative;display:flex;gap:22px;align-items:flex-start;
  background:linear-gradient(120deg,rgba(10,36,64,.44),rgba(4,18,31,.44));
  border:1px solid var(--bd1);border-radius:var(--r);
  padding:24px 26px;overflow:hidden;
  transition:border-color .35s,transform .35s var(--ease),background .35s;
}
.layer:hover{border-color:var(--bd2);transform:translateX(0) translateY(-3px);background:linear-gradient(120deg,rgba(14,46,80,.5),rgba(6,22,38,.5))}
.layer-n{
  font-family:var(--fd);font-size:1.5rem;font-weight:900;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(var(--cyan-rgb),.55);
  flex-shrink:0;padding-block-start:3px;min-width:44px;
  transition:color .35s,-webkit-text-stroke-color .35s;
}
.layer:hover .layer-n{color:rgba(var(--cyan-rgb),.16);-webkit-text-stroke-color:var(--cyan)}
.layer-body{min-width:0;flex:1}
.layer-t{font-family:var(--fd);font-size:1rem;font-weight:700;margin-bottom:8px;line-height:1.35}
.layer-d{font-size:14.2px;color:var(--t2)}
.layer-bar{
  position:absolute;inset-block:0;inset-inline-start:0;width:2px;
  background:linear-gradient(180deg,var(--cyan),transparent);
  transform:scaleY(0);transform-origin:top;
  transition:transform .45s var(--ease);
}
.layer:hover .layer-bar{transform:scaleY(1)}

/* ═════════════════════════════ Tech ═════════════════════════════ */
.flow{margin-bottom:36px}
.flow-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;position:relative}
.flow-node{
  position:relative;
  background:rgba(4,18,31,.6);border:1px solid var(--bd1);border-radius:var(--r-sm);
  padding:20px 18px;
  transition:border-color .35s,transform .35s var(--ease);
}
.flow-node:hover{border-color:var(--bd2);transform:translateY(-3px)}
.flow-dot{
  display:block;width:9px;height:9px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 12px var(--cyan);margin-bottom:13px;
}
.flow-node b{display:block;font-family:var(--fm);font-size:13px;color:var(--cyan);margin-bottom:6px;direction:ltr;unicode-bidi:isolate}
.flow-node span{display:block;font-size:12.8px;color:var(--t2);line-height:1.55}
/* Connector arrow between nodes; hidden on the last one and on narrow grids. */
.flow-node::after{
  content:'';position:absolute;inset-block-start:50%;inset-inline-end:-14px;
  width:14px;height:1px;background:var(--bd2);
}
.flow-node:last-child::after{display:none}

.tech-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}

.panel{
  background:linear-gradient(165deg,rgba(10,36,64,.42),rgba(4,18,31,.42));
  border:1px solid var(--bd1);border-radius:var(--r);
  padding:28px 26px;
}
.panel-wide{margin-top:20px}
.panel-p{font-size:14px;color:var(--t2);margin-bottom:18px}

.kv{display:flex;flex-direction:column;gap:1px}
.kv-row{display:grid;grid-template-columns:minmax(90px,.34fr) 1fr;gap:14px;padding-block:11px;border-bottom:1px solid var(--bd1)}
.kv-row:last-child{border-bottom:none}
.kv dt{font-size:12.5px;color:var(--t3);font-weight:600}
.kv dd{font-family:var(--fm);font-size:12.5px;color:var(--t1);line-height:1.6;direction:ltr;unicode-bidi:plaintext}

.tbl-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.tbl-list li{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tbl-list code{flex-shrink:0;min-width:92px;text-align:center}
.tbl-list span{font-size:13px;color:var(--t2);flex:1;min-width:160px}

.ep-wrap{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.ep{
  font-family:var(--fm);font-size:11.5px;padding:5px 10px;border-radius:6px;
  direction:ltr;unicode-bidi:isolate;transition:transform .22s var(--ease),box-shadow .22s;
}
.ep:hover{transform:translateY(-2px)}
.ep-auth{color:var(--t2);background:rgba(255,255,255,.035);border:1px solid var(--bd1)}
.ep-auth:hover{box-shadow:0 4px 12px rgba(0,0,0,.4)}
.ep-pub{color:var(--green);background:rgba(var(--green-rgb),.09);border:1px solid rgba(var(--green-rgb),.3)}
.ep-pub:hover{box-shadow:0 4px 14px rgba(var(--green-rgb),.22)}

.ep-legend{display:flex;gap:22px;flex-wrap:wrap;font-size:12.5px;color:var(--t3)}
.ep-legend span{display:inline-flex;align-items:center;gap:8px}
.sw{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.sw-pub{background:rgba(var(--green-rgb),.5);border:1px solid rgba(var(--green-rgb),.7)}
.sw-auth{background:rgba(255,255,255,.06);border:1px solid var(--bd2)}

.mini{
  background:rgba(4,18,31,.5);border:1px solid var(--bd1);border-radius:var(--r-sm);
  padding:20px 19px;transition:border-color .3s,transform .3s var(--ease);
}
.mini:hover{border-color:var(--bd2);transform:translateY(-3px)}
.mini b{display:block;font-size:.92rem;color:var(--cyan);margin-bottom:7px;font-family:var(--fd);font-weight:700}
.mini span{display:block;font-size:13.2px;color:var(--t2);line-height:1.6}

/* ═════════════════════════════ Server ═════════════════════════════ */
.srv-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}

.meters{display:flex;flex-direction:column;gap:15px;margin-top:24px}
.meter{display:grid;grid-template-columns:52px 1fr 48px;align-items:center;gap:13px}
.meter-l{font-family:var(--fm);font-size:11px;letter-spacing:1.4px;color:var(--t3)}
.meter-track{
  position:relative;height:7px;border-radius:100px;overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid var(--bd1);
}
.meter-track i{
  position:absolute;inset-block:0;inset-inline-start:0;width:0;border-radius:100px;
  background:linear-gradient(90deg,var(--cyan),var(--green));
  box-shadow:0 0 12px rgba(var(--cyan-rgb),.5);
  transition:width 1.5s var(--ease);
}
.meter-v{font-family:var(--fm);font-size:12px;color:var(--t1);text-align:end}

.steps{list-style:none;display:flex;flex-direction:column;gap:18px}
.steps-sm{margin-top:6px}
.steps li{display:flex;gap:15px;align-items:flex-start}
.steps-n{
  flex-shrink:0;display:grid;place-items:center;width:28px;height:28px;
  font-family:var(--fm);font-size:12px;color:var(--cyan);
  background:rgba(var(--cyan-rgb),.09);border:1px solid var(--bd2);border-radius:8px;
}
.steps li b{display:block;font-size:.92rem;margin-bottom:5px}
.steps li p{font-size:13.4px;color:var(--t2)}

/* ═════════════════════════════ How ═════════════════════════════ */
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.how{
  position:relative;
  background:linear-gradient(165deg,rgba(10,36,64,.42),rgba(4,18,31,.42));
  border:1px solid var(--bd1);border-radius:var(--r);
  padding:30px 24px 26px;overflow:hidden;
  transition:border-color .35s,transform .35s var(--ease);
}
.how:hover{border-color:var(--bd2);transform:translateY(-5px)}
.how-n{
  position:absolute;inset-block-start:10px;inset-inline-end:16px;
  font-family:var(--fd);font-size:3.6rem;font-weight:900;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(var(--cyan-rgb),.18);
  pointer-events:none;transition:-webkit-text-stroke-color .35s;
}
.how:hover .how-n{-webkit-text-stroke-color:rgba(var(--cyan-rgb),.42)}
.how-t{position:relative;font-family:var(--fd);font-size:.98rem;font-weight:700;margin-bottom:10px;line-height:1.35}
.how-d{position:relative;font-size:13.8px;color:var(--t2)}

/* ═════════════════════════════ FAQ ═════════════════════════════ */
.faq{display:flex;flex-direction:column;gap:10px}
.fq{
  background:rgba(4,18,31,.55);border:1px solid var(--bd1);border-radius:var(--r-sm);
  overflow:hidden;transition:border-color .3s,background .3s;
}
.fq[open]{border-color:var(--bd2);background:rgba(10,36,64,.5)}
.fq summary{
  display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
  padding:19px 22px;font-size:.96rem;font-weight:600;color:var(--t1);
  transition:color .25s;
}
.fq summary::-webkit-details-marker{display:none}
.fq summary:hover{color:var(--cyan)}
.fq summary span{flex:1;min-width:0}
.fq summary i{
  position:relative;flex-shrink:0;width:17px;height:17px;
  transition:transform .3s var(--ease);
}
/* Plus / minus built from two bars so no icon font is needed. */
.fq summary i::before,.fq summary i::after{
  content:'';position:absolute;inset-block-start:50%;inset-inline-start:0;
  width:17px;height:2px;border-radius:2px;background:var(--cyan);
  transform:translateY(-50%);transition:transform .3s var(--ease),opacity .3s;
}
.fq summary i::after{transform:translateY(-50%) rotate(90deg)}
.fq[open] summary i::after{transform:translateY(-50%) rotate(0);opacity:0}
.fq-a{padding:0 22px 21px;font-size:14.2px;color:var(--t2)}

/* ═════════════════════════════ CTA ═════════════════════════════ */
.cta{position:relative;padding-block:clamp(58px,7vw,92px);text-align:center;overflow:hidden;isolation:isolate}
.cta::before{
  content:'';position:absolute;inset-inline:0;inset-block-start:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--bd3),transparent);
}
.cta-glow{
  position:absolute;z-index:-1;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(-50%,-50%);
  width:min(900px,120vw);aspect-ratio:2/1;
  background:radial-gradient(ellipse,rgba(var(--cyan-rgb),.13),transparent 65%);
  filter:blur(20px);animation:breathe 8s ease-in-out infinite;
}
.cta-in{display:flex;flex-direction:column;align-items:center;gap:18px}
.cta-shield{
  font-size:44px;line-height:1;
  filter:drop-shadow(0 0 22px rgba(var(--cyan-rgb),.55));
  animation:float 4.5s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.cta-h{margin-bottom:0}
.cta .lead{text-align:center}
.cta-note{font-size:12.8px;color:var(--t3);max-width:60ch;margin-top:6px}

/* ═════════════════════════════ Footer ═════════════════════════════ */
.foot{border-top:1px solid var(--bd1);background:rgba(2,11,23,.7)}
.foot-in{
  display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(3,minmax(140px,1fr));
  gap:34px;padding-block:40px 32px;
}
.foot-brand{display:flex;gap:13px;align-items:flex-start}
.foot-brand b{display:block;font-family:var(--fd);font-size:14px;font-weight:700;margin-bottom:6px}
.foot-brand b span{color:var(--cyan)}
.foot-tag{font-size:12.5px;color:var(--t3);line-height:1.55}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-col h3{
  font-family:var(--fd);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--cyan);margin-bottom:5px;font-weight:700;
}
.foot-col a{font-size:13px;color:var(--t2);text-decoration:none;transition:color .2s,padding-inline-start .2s}
.foot-col a:hover{color:var(--cyan);padding-inline-start:4px}
.foot-mini{font-family:var(--fm);font-size:11.5px;color:var(--t3)}

/* A footer column whose content is entirely Latin. Setting direction on the
   column (rather than on each value) keeps the heading and the values on the
   SAME edge - previously the heading followed the page's RTL start while the
   LTR values sat against the opposite side. */
.foot-col-ltr{direction:ltr;text-align:left}

.foot-bar{
  border-top:1px solid var(--bd1);
  max-width:var(--wrap);margin-inline:auto;
  /* The bottom padding is clearance, not decoration: the accessibility and
     back-to-top buttons are fixed to the viewport corners and would otherwise
     sit on this row once the page is scrolled to the end. */
  padding:18px 24px 82px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:12px;color:var(--t3);
}
/* ── Maker credit ──
   Sits between the copyright and the address, so the bar's space-between
   lands it in the middle. Always left-to-right: the phrase and the domain
   are Latin, and letting them follow an RTL page would split "Made with" and
   the heart onto opposite sides of the line. */
.foot-made{
  display:inline-flex;align-items:center;gap:6px;
  direction:ltr;unicode-bidi:isolate;
  font-size:12px;color:var(--t3);white-space:nowrap;
}
.foot-heart{
  color:var(--red);font-size:11px;line-height:1;
  display:inline-block;
  /* Two quick pulses then a rest, which is what a heartbeat actually does -
     a single even pulse reads as a loading indicator. */
  animation:beat 2.6s ease-in-out infinite;
  filter:drop-shadow(0 0 5px rgba(var(--red-rgb),.5));
}
@keyframes beat{
  0%,100%{transform:scale(1)}
  12%{transform:scale(1.3)}
  24%{transform:scale(1)}
  36%{transform:scale(1.22)}
  48%{transform:scale(1)}
}
.foot-by{
  color:var(--t2);text-decoration:none;
  border-block-end:1px solid transparent;
  transition:color .22s var(--ease),border-color .22s var(--ease);
}
.foot-by:hover,
.foot-by:focus-visible{color:var(--cyan);border-block-end-color:var(--bd3)}

.foot-host{font-family:var(--fm);color:var(--t3);letter-spacing:.4px;direction:ltr;unicode-bidi:isolate}

/* The site address doubles as the entrance to the CMS: three quick clicks
   open it (see js/site.js). It carries no affordance on purpose - a visible
   button kept getting lost against the fixed accessibility and back-to-top
   controls in the same corners, and a control one person uses does not need
   to sit in the footer permanently.

   The only visible trace is a brief acknowledgement on the third click, so
   the gesture does not feel like nothing happened. */
.foot-host{
  cursor:default;
  transition:color .18s var(--ease),text-shadow .18s var(--ease);
}
.foot-host.is-opening{
  color:var(--cyan);
  text-shadow:0 0 12px rgba(var(--cyan-rgb),.6);
}

/* ═══════════════════════ Scroll reveal ═══════════════════════
   Elements start shifted and transparent; js/site.js adds .in when they
   enter the viewport. --d staggers siblings without extra classes. */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.reveal.in{opacity:1;transform:none;transition-delay:var(--d,0ms)}

/* Sibling stagger. The cycle resets every fourth item so a long list (the
   23 threat cards) never ends up with a two-second delay at the bottom. */
.stagger > *:nth-child(4n+2){--d:70ms}
.stagger > *:nth-child(4n+3){--d:140ms}
.stagger > *:nth-child(4n+4){--d:210ms}

/* ═══════════════════════ Responsive ═══════════════════════ */
/* Collapse to a menu button only on genuinely narrow screens. It used to
   switch at 1080px, which is an ordinary desktop window width. */
@media (max-width:920px){
  .nav-links{display:none}

  /* Absolute against .nav rather than fixed against the viewport: .nav
     carries backdrop-filter, and that makes it the containing block for
     fixed-position descendants exactly as a transform would - so the offsets
     resolved against the 64px bar instead of the screen. */
  .nav-links.is-open{
    display:flex;position:absolute;inset-block-start:100%;inset-inline:0;z-index:5;
    flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(2,11,23,.985);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    border-block-end:1px solid var(--bd2);
    box-shadow:0 18px 40px rgba(0,0,0,.55);
    padding:10px;
    max-height:calc(100svh - var(--nav-h));overflow-y:auto;
    animation:navDrop .22s var(--ease);
  }
  .nav-links.is-open a{padding:13px 16px;font-size:15px;border-radius:9px}
  .nav-links.is-open a::after{display:none}
  .nav-burger{display:flex}
  .nav-side{margin-inline-start:auto}
}
@keyframes navDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

@media (max-width:960px){
  .hero-in{grid-template-columns:1fr;gap:44px}
  .hero-term{order:2}
  .term-body{height:224px}
  .strip-in{grid-template-columns:repeat(3,1fr);gap:22px 8px}
  .strip-item:nth-child(3){border-inline-end:none}
  .foot-in{grid-template-columns:1fr 1fr;gap:30px}
}

@media (max-width:760px){
  html{scroll-padding-top:calc(var(--nav-h) + 60px)}
  .wrap{padding-inline:18px}
  .nav-in{padding-inline:18px;gap:12px}
  .brand-txt{font-size:13.5px}
  .sec{padding-block:40px}
  .sec-head{margin-bottom:28px}
  .modebar-h{display:none}
  .modebar-in{justify-content:space-between}
  .seg-btn{padding:8px 16px;font-size:12.5px}
  .layer{flex-direction:column;gap:12px;padding:22px 20px}
  .layer-n{padding-block-start:0}
  .kv-row{grid-template-columns:1fr;gap:4px}
  .flow-node::after{display:none}
  .foot-bar{justify-content:center;text-align:center;gap:10px}
}

/* WCAG 1.4.10 reflow. At a 320px viewport - which is what 400% zoom on a
   1280px screen comes to - the brand wordmark, the language button, the login
   button and the burger together needed ~410px, so the burger and the login
   button were pushed off the edge and the page scrolled sideways. Dropping the
   wordmark frees ~150px and costs nothing: the mark beside it is still the
   link home. Losing a control would not have been an acceptable trade. */
@media (max-width:400px){
  .nav-in{padding-inline:12px;gap:8px}
  .brand-txt{display:none}
  .lang-btn{padding-inline:8px}
}

@media (max-width:520px){
  .strip-in{grid-template-columns:repeat(2,1fr)}
  .strip-item{border-inline-end:none}
  .foot-in{grid-template-columns:1fr}
  .hero-cta{flex-direction:column;align-items:stretch}
  .btn-lg{width:100%}
  .term-body{font-size:11px}
}

/* ═══════════════════════ Motion / contrast preferences ═══════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .foot-heart{animation:none}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{opacity:1;transform:none}
  .reveal-line,.hero-sub,.hero-cta,.hero-note,.hero-term{opacity:1;transform:none;animation:none}
  .hero-canvas{display:none}
}

@media (prefers-contrast:more){
  :root{--t2:#b9d6e8;--t3:#7ea3bd;--bd1:rgba(var(--cyan-rgb),.28);--bd2:rgba(var(--cyan-rgb),.45)}
}

/* Print: drop the decoration, keep the text readable. */
@media print{
  .nav,.modebar,.hero-canvas,.hero-grid,.hero-glow,.hero-scan,.hero-term,.cta-glow{display:none!important}
  body{background:#fff;color:#000}
  .reveal{opacity:1;transform:none}
  html[data-mode="simple"] .only-tech,html[data-mode="tech"] .only-simple{display:block}
}

/* ═════════════════════════ Back to top ═════════════════════════
   Physically bottom-right in BOTH languages, not logically positioned. The
   accessibility button is pinned bottom-left for the same reason (see
   legal.css): with logical insets the two swapped sides per language and
   collided in English. Fixed corners keep the pair predictable. */
.totop{
  position:fixed;z-index:4100;
  bottom:18px;right:18px;
  width:46px;height:46px;
  display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(9,30,52,.92),rgba(4,15,27,.92));
  border:1px solid var(--bd2);border-radius:50%;
  color:var(--cyan);cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 28px rgba(0,0,0,.5);
  transition:opacity .3s var(--ease),transform .3s var(--ease),
             border-color .25s,box-shadow .25s;
}
/* [hidden] keeps it out of the tab order until it is actually usable; the
   .is-on class then drives the fade so the entrance can animate. */
.totop[hidden]{display:none}
.totop{opacity:0;transform:translateY(12px) scale(.9);pointer-events:none}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{
  border-color:var(--bd3);
  box-shadow:0 14px 34px rgba(var(--cyan-rgb),.28);
  transform:translateY(-3px);
}
.totop:active{transform:translateY(-1px) scale(.96)}

.totop-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.totop-ring circle{fill:none;stroke-width:2;cx:22;cy:22}
.totop-track{stroke:rgba(var(--cyan-rgb),.14)}
.totop-fill{
  stroke:var(--cyan);stroke-linecap:round;
  stroke-dasharray:125.6;            /* 2πr at r=20 */
  stroke-dashoffset:125.6;           /* JS drives this from scroll position */
  filter:drop-shadow(0 0 4px rgba(var(--cyan-rgb),.55));
}
.totop-arrow{position:relative;width:19px;height:19px;transition:transform .28s var(--ease)}
.totop:hover .totop-arrow{transform:translateY(-2px)}

@media (max-width:560px){
  .totop{bottom:12px;right:12px;width:42px;height:42px}
  .totop-arrow{width:17px;height:17px}
}

@media (prefers-reduced-motion:reduce){
  .totop{transition:opacity .2s}
  .totop.is-on{transform:none}
  .totop:hover{transform:none}
}

@media print{.totop{display:none!important}}

/* ═════════════════════════ Illustrations ═════════════════════════ */
/* Breathing room on BOTH sides: two of the three figures are followed by
   more content (the console, the taxonomy note) and were sitting flush
   against it. The last figure in a section drops its bottom margin so it
   does not stack on top of the section's own padding. */
.fig{margin-block:42px}
.fig:last-child{margin-block-end:0}

.fig-frame{
  position:relative;display:block;width:100%;padding:0;
  background:linear-gradient(165deg,rgba(10,36,64,.5),rgba(4,18,31,.5));
  border:1px solid var(--bd2);border-radius:var(--r);
  cursor:zoom-in;overflow:hidden;
  box-shadow:var(--shadow);
  transition:border-color .38s,box-shadow .38s var(--ease),transform .38s var(--ease);
}
.fig-frame:hover{
  border-color:var(--bd3);
  box-shadow:var(--shadow),0 0 60px rgba(var(--cyan-rgb),.16);
  transform:translateY(-4px);
}

.fig-frame img{
  display:block;width:100%;height:auto;
  /* No hard-coded aspect-ratio: the width/height attributes carry the real
     dimensions, and the browser derives the ratio from them to reserve space
     before the lazy image arrives. Pinning a ratio here would crop or
     stretch any figure that ships at a different size - the English artwork
     is 1200x768 where the Hebrew is 1000x640. */
  transition:transform .5s var(--ease);
}
.fig-frame:hover img{transform:scale(1.014)}

/* Zoom affordance. Physical corner: it marks the image, not the reading
   direction, so it should not jump sides between languages. */
.fig-zoom{
  position:absolute;bottom:12px;right:12px;
  display:grid;place-items:center;width:34px;height:34px;
  font-size:14px;color:var(--cyan);
  background:rgba(2,11,23,.72);border:1px solid var(--bd2);border-radius:9px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transform:translateY(6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.fig-frame:hover .fig-zoom,
.fig-frame:focus-visible .fig-zoom{opacity:1;transform:none}

.fig-cap{
  margin-top:13px;padding-inline-start:14px;
  border-inline-start:2px solid var(--bd2);
  font-size:13.6px;color:var(--t2);line-height:1.65;max-width:82ch;
}

@media (max-width:560px){
  .fig{margin-block:30px}
  .fig-zoom{display:none}          /* tap opens it; the badge is noise on touch */
  .fig-cap{font-size:13px}
}

/* ═════════════════════════ Lightbox ═════════════════════════ */
.lb{
  position:fixed;inset:0;z-index:5200;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,4vw,48px);
  background:rgba(1,7,14,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:lbFade .26s var(--ease);
}
.lb[hidden]{display:none}
@keyframes lbFade{from{opacity:0}to{opacity:1}}

.lb-fig{
  display:flex;flex-direction:column;gap:14px;align-items:center;
  max-width:100%;max-height:100%;
  animation:lbRise .38s var(--ease);
}
@keyframes lbRise{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}

.lb-fig img{
  max-width:100%;
  /* Leaves room for the caption underneath at any viewport height. */
  max-height:calc(100vh - 190px);
  width:auto;height:auto;object-fit:contain;
  border:1px solid var(--bd2);border-radius:var(--r);
  box-shadow:0 40px 90px rgba(0,0,0,.7);
}
.lb-fig figcaption{
  font-size:13.5px;color:var(--t2);text-align:center;
  max-width:80ch;line-height:1.6;
}

.lb-x{
  position:absolute;top:16px;right:16px;
  width:42px;height:42px;display:grid;place-items:center;
  background:rgba(9,30,52,.85);border:1px solid var(--bd2);border-radius:11px;
  color:var(--t2);font-size:15px;cursor:pointer;
  transition:all .22s;
}
.lb-x:hover{background:rgba(var(--red-rgb),.16);border-color:rgba(var(--red-rgb),.45);color:var(--red)}

@media (max-width:560px){
  .lb-fig img{max-height:calc(100vh - 210px)}
  .lb-x{top:10px;right:10px;width:38px;height:38px}
}

@media (prefers-reduced-motion:reduce){
  .fig-frame:hover{transform:none}
  .fig-frame:hover img{transform:none}
}

@media print{
  .lb{display:none!important}
  .fig-frame{box-shadow:none;transform:none}
  .fig-zoom{display:none}
}