@font-face {
  font-family: "JetBrains Mono";
  src: url("./assets/fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tektur";
  src: url("./assets/fonts/Tektur-Medium.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}
@font-face {
  font-family: "IBM Plex Sans Hebrew";
  src: url("./assets/fonts/IBMPlexSansHebrew-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  /* Hebrew plus space and basic punctuation, so Hebrew word gaps are not monospace-wide.
     Digits and Latin letters stay in JetBrains Mono. */
  unicode-range: U+0020-0022, U+0027-002F, U+003A-003B, U+003F, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

:root {
  --bg: #050505;
  --accent: #14b8a6;          /* BrainboxAI teal, replaces the lime role */
  --accent-deep: #0f766e;     /* darker brand teal for small accents on light paper */
  --accent-track: #14b8a629;
  --ink: #040b0a;             /* ink on teal and light surfaces, 8.1:1 on the accent */
  --ink-2: #103632;           /* secondary ink on teal, 5.3:1 on the accent */
  --text: #dfe4e4;
  --muted: #a2abab;
  --paper: #eef2f2;
  --step-idle: #586566;
  --menu-bg: #2a3133;
  --menu-text: #f1f5f5;
  --menu-label: #b2bdbe;
  --marquee-bg: #000;
  --marquee-text: #a3a3a3;
  --ease: cubic-bezier(0.83, 0, 0.17, 1);
  --font: "JetBrains Mono", "IBM Plex Sans Hebrew", ui-monospace, monospace;
  --font-brand: "Tektur", "JetBrains Mono", monospace;
  --dir: 1;
  --start: left;
  --end: right;
  --composition-scale: 1;
  --content-scale: 1;
  --hero-composition-top: 0px;
  color-scheme: dark;
}
[dir="rtl"] { --dir: -1; --start: right; --end: left; }
:root[lang="he"] { --font: "IBM Plex Sans Hebrew", "JetBrains Mono", ui-monospace, monospace; }

* { box-sizing: border-box; }
html { scrollbar-width: none; background: var(--bg); }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
html.model-loading { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 500 14px/1.6 var(--font);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[dir="rtl"] body { font-size: 15px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; border-radius: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- preloader */
.model-preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--accent);
  touch-action: none;
  transition: opacity 550ms ease;
}
.model-preloader[data-state="leaving"] { opacity: 0; }
.model-preloader[data-state="done"] { display: none; }
.preloader-counter {
  display: flex;
  align-items: baseline;
  gap: 0.08em;
  font: 500 clamp(96px, 22vw, 360px)/1 "JetBrains Mono", monospace;
  letter-spacing: -0.07em;
  direction: ltr;
}
.preloader-number { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.preloader-percent { font-size: 0.28em; letter-spacing: -0.04em; }
.preloader-bar {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 48px;
  height: 4px;
  background: var(--accent-track);
  overflow: hidden;
}
.preloader-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(var(--load-progress, 0));
  transform-origin: left center;
}
.preloader-error {
  position: absolute;
  top: 68%;
  left: 0;
  right: 0;
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.preloader-retry {
  border: 1px solid var(--accent);
  padding: 12px 20px;
  color: var(--accent);
  background: var(--bg);
}

/* ---------------------------------------------------------------- header */
.site-header {
  position: fixed;
  top: 48px;
  inset-inline: 48px;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  pointer-events: none;
}
.site-header a, .site-header button { pointer-events: auto; }
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  text-decoration: none;
  color: #fff;
  justify-self: start;
}
.logo-mark {
  width: 36px;
  height: 36px;
  flex: none;
  background: url("./assets/logo-mark-teal.png") center / contain no-repeat;
}
.site-logo.is-on-light .logo-mark { background-image: url("./assets/logo-mark-ink.png"); }
.logo-word { font: 500 22px/1 var(--font-brand); letter-spacing: 0.01em; color: #fff; }
.logo-word b { font-weight: 700; color: var(--accent); }
.site-logo.is-on-light .logo-word { color: var(--ink); }
.site-logo.is-on-light .logo-word b { color: var(--accent-deep); }

.menu-button {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 320px;
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  font-size: 14px;
  line-height: 1.4;
  transition: background-color 250ms ease, color 250ms ease;
}
.menu-button:hover { background: rgba(255, 255, 255, 0.14); }
.menu-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.menu-icon { position: relative; width: 32px; height: 24px; flex: none; }
.menu-icon span, .close-icon span {
  position: absolute;
  left: 0;
  width: 32px;
  height: 2px;
  background: currentColor;
}
.menu-icon span:first-child { top: 7px; }
.menu-icon span:last-child { top: 17px; }
.menu-button.is-on-light { color: #050505; background: #0505050d; }
.menu-button.is-on-light:hover { background: #0505051a; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
}
.lang-toggle {
  height: 56px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  font: 500 13px/1 "JetBrains Mono", monospace;
  direction: ltr;
  transition: background-color 250ms ease, color 250ms ease;
}
.lang-toggle:hover { background: rgba(255, 255, 255, 0.14); }
.lang-opt { opacity: 0.6; transition: opacity 250ms ease; }
html[lang="he"] .lang-opt[data-lang="he"], html[lang="en"] .lang-opt[data-lang="en"] { opacity: 1; }
.lang-sep { opacity: 0.35; }
.header-actions.is-on-light .lang-toggle { color: #050505; background: #0505050d; }

.cta-button {
  position: relative;
  display: flex;
  gap: 6px;
  height: 56px;
  color: #050505;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}
.cta-square, .cta-label {
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #050505;
  transition: transform 700ms var(--ease), background-color 250ms ease, color 250ms ease;
}
.cta-square { width: 56px; flex: none; }
.cta-square svg { width: 0.75em; height: 0.75em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.cta-square--lead { transform: rotate(calc(-45deg * var(--dir))) scale(0); transform-origin: var(--start) center; }
.cta-label { padding: 0 16px; transform: translateX(calc(-62px * var(--dir))); }
.cta-square--trail { position: absolute; top: 0; inset-inline-end: 0; transform-origin: var(--end) center; }
.cta-button:hover .cta-square--lead, .cta-button:focus-visible .cta-square--lead { transform: rotate(0) scale(1); }
.cta-button:hover .cta-label, .cta-button:focus-visible .cta-label { transform: translateX(0); }
.cta-button:hover .cta-square--trail, .cta-button:focus-visible .cta-square--trail { transform: rotate(calc(-45deg * var(--dir))) scale(0); }
.cta-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.header-actions.is-on-light .cta-square, .header-actions.is-on-light .cta-label { background: #050505; color: var(--accent); }
.header-actions.is-on-light .cta-button:focus-visible { outline-color: #050505; }

/* ---------------------------------------------------------------- hero */
.journey { position: relative; height: 300svh; } /* round 2: about 2 screens of journey (spec: 920svh) */
.hero {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}
.composition {
  position: absolute;
  width: 1600px;
  height: 1000px;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scale(var(--composition-scale));
  transform-origin: center bottom;
  pointer-events: none;
  z-index: 2;
}
#composition {
  top: var(--hero-composition-top);
  bottom: auto;
  transform-origin: center top;
  z-index: 4;
}
.hero-heading {
  position: absolute;
  top: var(--hero-heading-y, 540px);
  left: 50%;
  transform: translate(-50%, 0);
  width: 1400px;
  text-align: center;
  font: 500 22.5px/1.55 var(--font);
  color: var(--accent);
  letter-spacing: -0.01em;
  text-shadow: 0 0 10px #050505, 0 0 3px #050505;
  pointer-events: none;
}
[dir="rtl"] .hero-heading { font-size: 24px; letter-spacing: 0; }
.hero-row { display: block; }
.hero-row .line {
  display: inline-block;
  width: fit-content;
  background: none;
  padding: 0;
  pointer-events: auto;
}
.hero-row .line.m { display: none; }

.model-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  z-index: 1;
  will-change: transform, width, height;
}
.model-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: top left;
}
#architecture {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 800ms ease;
  touch-action: pan-y;
}
.hero[data-ready="true"] #architecture { opacity: 1; }
.model-stage[data-cursor="pointer"] #architecture { cursor: pointer; }
.model-stage[data-cursor="grab"] #architecture { cursor: grab; }
.model-stage[data-cursor="grabbing"] #architecture { cursor: grabbing; }

/* ---------------------------------------------------------------- guide speech */
.guide-speech {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  max-width: min(320px, calc(100% - 40px));
  padding: 11px 15px;
  background: var(--accent);
  color: #050505;
  font: 500 14px/1.5 var(--font);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  translate: 0 8px;
  visibility: hidden;
}
[dir="rtl"] .guide-speech { font-size: 15px; }
.guide-speech::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: var(--accent);
  transform: rotate(45deg);
}
.guide-speech[data-state="in"] {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
  transition: opacity 480ms cubic-bezier(.22, 1, .36, 1), translate 480ms cubic-bezier(.22, 1, .36, 1);
}
.guide-speech[data-state="out"] {
  visibility: visible;
  opacity: 0;
  translate: 0 -6px;
  transition: opacity 340ms ease-in-out, translate 340ms ease-in-out;
}

/* ---------------------------------------------------------------- marquee */
.logo-marquee {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  height: 80px;
  background: var(--marquee-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.marquee-track {
  display: flex;
  width: max-content;
  direction: ltr;
  will-change: transform;
}
.logo-marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group {
  display: flex;
  align-items: center;
  gap: 80px;
  padding: 0 40px;
  min-width: 100vw;
  justify-content: space-around;
  flex: none;
}
.marquee-group li {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  color: var(--marquee-text);
  font: 500 15px/1.2 var(--font);
}
[dir="rtl"] .marquee-group li { direction: rtl; font-size: 16px; }
.marquee-mark {
  width: 10px;
  height: 10px;
  border: 2px solid var(--marquee-text);
  opacity: 0.65;
  flex: none;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- debug panel */
.ascii-controls-open {
  position: fixed;
  top: 120px;
  right: 16px;
  z-index: 50;
  padding: 6px 10px;
  background: #222;
  color: #ff986f;
  font: 12px/1 system-ui, sans-serif;
}
.ascii-controls {
  position: fixed;
  top: 160px;
  right: 16px;
  z-index: 50;
  width: 320px;
  padding: 16px;
  border-radius: 10px;
  background: #1b1b1b;
  color: #eee;
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  direction: ltr;
}
.ascii-controls label { display: grid; gap: 4px; margin-bottom: 10px; }
.ascii-controls input[type="range"] { accent-color: #ff986f; }
.ascii-controls button { background: #ff986f; color: #111; padding: 6px 10px; border-radius: 6px; }

/* BrainboxAI wordmark in Tektur (only the brand text, Hebrew falls back) */
.wordmark { font-family: var(--font-brand); letter-spacing: 0.01em; }