/* ==========================================================================
   LOCAL SUPER INTELLIGENCE — coming soon
   --------------------------------------------------------------------------
   Composition: asymmetric two-column hero (copy + spec rail) inside a
   hairline-framed full-screen shell. Decide/Learn surface -> one hero, one
   idea, one action.

   Aesthetic: cold-black field, single cold light source, hard technical
   hairlines, DIN-lineage grotesk for display, monospace for every machine
   voice. Glitch is used as *typography about correction*, not as wallpaper:
   ARTIFICIAL is struck out, SUPER scrambles in.

   Performance: the background animates only transform/opacity so it stays on
   the compositor. No backdrop-filter, no rAF loop, no third-party requests.

   Motion is opt-out via prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  /* surfaces */
  --bg:        #04060a;
  --bg-raise:  #080c13;
  --panel:     rgba(255, 255, 255, .030);

  /* ink — contrast checked against --bg (all >= 4.5:1 for body sizes) */
  --ink:       #eef3f8;   /* 17.6:1 */
  --ink-2:     #bcc7d4;   /* 11.7:1 */
  --muted:     #93a0b0;   /*  7.3:1 */
  --dim:       #6d7a8a;   /*  4.6:1 */
  --faint:     #4a5563;   /* decorative only */

  /* lines */
  --line:      rgba(255, 255, 255, .135);
  --line-soft: rgba(255, 255, 255, .062);

  /* signal */
  --accent:    #3fd0ff;
  --cyan:      #00e2ff;
  --red:       #ff3b5c;
  --red-glow:  rgba(255, 59, 92, .55);

  /* type */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* geometry */
  --pad:   clamp(18px, 4.4vw, 68px);
  --maxw:  1560px;
  /* Narrower than the design's 306px on mid-size screens so the two-column
     hero still fits without a scrollbar at ~1024x768. */
  --rail:  clamp(252px, 23vw, 306px);
  --gap:   clamp(28px, 4vw, 68px);

  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ----------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: #04060a; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------- background stack -- */
.bg {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  background: var(--bg);
}

/* single cold light source, low and behind the horizon */
.bg__glow {
  position: absolute; left: 50%; bottom: -34%;
  width: min(1700px, 170vw); aspect-ratio: 1.45 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%,
    rgba(76, 176, 255, .26) 0%,
    rgba(38, 106, 190, .12) 34%,
    rgba(0, 0, 0, 0) 68%);
}

/* perspective floor — the grid is a tilting plane, motion is composited */
.bg__floor {
  position: absolute; left: 50%; bottom: 0;
  width: 300%; height: 80%;
  transform: translateX(-50%) perspective(560px) rotateX(68deg);
  transform-origin: 50% 100%;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 84%);
          mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 84%);
}

.bg__floor-plane {
  position: absolute; left: 0; right: 0; top: -80px; bottom: 0;
  background-image:
    linear-gradient(to right,  rgba(124, 194, 255, .17) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124, 194, 255, .17) 1px, transparent 1px);
  background-size: 80px 80px;
  animation: floorDrift 4.6s linear infinite;   /* transform only */
}

@keyframes floorDrift { to { transform: translateY(80px); } }   /* == tile size */

/* data motes — two static parallax-density layers built by app.js.
   Deliberately NOT animated: a full-viewport box-shadow layer that animates
   gets promoted to its own GPU texture, which costs far more than the drift
   is worth. Life comes from the floor plane, the CRT roll and the LEDs. */
.bg__stars {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px;
  border-radius: 50%;
}
.bg__stars--far  { opacity: .55; }
.bg__stars--near { opacity: 1; }

/* scanlines */
.bg__scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom,
    rgba(255, 255, 255, .030) 0 1px,
    rgba(0, 0, 0, 0) 1px 3px);
}

/* film grain */
.bg__grain {
  position: absolute; inset: 0;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* slow CRT sync roll */
.bg__roll {
  position: absolute; left: 0; right: 0; top: -26vh; height: 24vh;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0), rgba(160, 214, 255, .055), rgba(0, 0, 0, 0));
  animation: roll 17s linear infinite;
}
@keyframes roll { to { transform: translateY(155vh); } }

.bg__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 120% 105% at 50% 44%,
    rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .58) 100%);
}

/* ------------------------------------------------------------ HUD marks -- */
.mark {
  position: fixed; z-index: 2; width: 13px; height: 13px;
  opacity: .34; pointer-events: none;
}
.mark--tl { top: 16px;    left: 16px;  border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.mark--tr { top: 16px;    right: 16px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); }
.mark--bl { bottom: 16px; left: 16px;  border-bottom: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.mark--br { bottom: 16px; right: 16px; border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); }

/* ---------------------------------------------------------------- shell -- */
.shell {
  position: relative; z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* --------------------------------------------------------------- topbar -- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; min-height: 68px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark { width: 17px; height: 17px; color: var(--accent); flex: none; }
.brand__word { color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .1em; }

.topbar__meta { display: inline-flex; align-items: center; gap: 9px; margin: 0; color: var(--dim); }

.topbar__cta {
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.topbar__cta:hover { color: var(--accent); border-color: var(--accent); }

/* status LED */
.led {
  width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 9px var(--accent);
  animation: pulse 2.8s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }

/* ----------------------------------------------------------------- hero -- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  gap: var(--gap);
  align-items: center;
  padding-block: clamp(30px, 5vh, 68px);
}

.hero__copy {
  min-width: 0;
  container-type: inline-size;   /* headline sizes to its column, not the viewport */
  container-name: copy;
}

/* eyebrow */
.eyebrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0 0 clamp(16px, 2.4vh, 26px);
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow__sep { color: var(--faint); }

/* ---- the headline ---------------------------------------------------------
   Rows are decorative; <h1 aria-label> carries the corrected reading order. */
.headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.018em;
  line-height: .9;
  color: var(--ink);
}

.headline__row {
  display: block;
  /* INTELLIGENCE is the widest row at ~7.74x the font size. 10cqw keeps it near
     78% of the copy column, leaving clear air before the spec rail at every
     width. 15vh stops three rows outgrowing a short viewport. Fallback below
     for engines without container query units. */
  font-size: clamp(1.55rem, min(5.9vw, 15vh), 8.6rem);
}
@supports (font-size: 1cqw) {
  .headline__row { font-size: clamp(1.55rem, min(10cqw, 15vh), 8.6rem); }
}

.headline__row--swap {
  display: flex; align-items: baseline; flex-wrap: nowrap;
  gap: .2em;
}

/* ARTIFICIAL — struck out, then left behind.
   The strike is the BASE state, never something an animation has to deliver:
   if animations are paused or never run (throttled tab, reduced motion, old
   engine) the crossed-out word — the whole point of the headline — is still
   there. The entrance is an additive glow pulse that has no bearing on the
   final look. */
.swap__old {
  color: var(--dim);
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: .052em;
  animation: strikePulse 1.7s var(--ease) 1.15s;
}
@keyframes strikePulse {
  0%, 100% { text-shadow: none; }
  45%      { text-shadow: 0 0 20px var(--red-glow); }
}

/* SUPER — the correction */
.swap__new { position: relative; display: inline-block; }

/* chromatic-aberration layers: at rest, with occasional bursts */
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  color: inherit;
}
.glitch::before {
  color: var(--cyan);
  animation: glitchA 7.3s steps(1, end) infinite;
}
.glitch::after {
  color: var(--red);
  animation: glitchB 5.1s steps(1, end) infinite;
}
@keyframes glitchA {
  0%, 86%, 100% { opacity: 0; transform: none; clip-path: inset(100% 0 0 0); }
  87% { opacity: .85; transform: translate(-3px, -1px); clip-path: inset(8% 0 58% 0); }
  89% { opacity: .7;  transform: translate(2px, 1px);   clip-path: inset(44% 0 22% 0); }
  92% { opacity: .8;  transform: translate(-2px, 0);     clip-path: inset(70% 0 4% 0); }
  94% { opacity: 0;   transform: none;                   clip-path: inset(100% 0 0 0); }
}
@keyframes glitchB {
  0%, 89%, 100% { opacity: 0; transform: none; clip-path: inset(100% 0 0 0); }
  90% { opacity: .8; transform: translate(3px, 0);   clip-path: inset(20% 0 46% 0); }
  92% { opacity: .65; transform: translate(-2px, 1px); clip-path: inset(58% 0 12% 0); }
  95% { opacity: 0;  transform: none;                  clip-path: inset(100% 0 0 0); }
}

/* lede */
.lede {
  margin: clamp(18px, 2.6vh, 30px) 0 0;
  max-width: 54ch;
  font-size: clamp(15px, 1.15vw, 18.5px);
  line-height: 1.62;
  color: var(--ink-2);
  text-wrap: pretty;
}
.lede em { font-style: normal; color: var(--ink); }

/* ----------------------------------------------------------------- form -- */
.form { margin-top: clamp(24px, 3.6vh, 42px); max-width: 580px; }

.form__label {
  margin: 0 0 11px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink);
}

.field {
  display: flex; align-items: stretch;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .022);
  transition: border-color .2s, box-shadow .2s;
}
.field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 34px rgba(63, 208, 255, .13);
}

.field__input {
  flex: 1 1 auto; min-width: 0;
  height: 56px; padding: 0 16px;
  background: transparent; border: 0; outline: none;
  color: var(--ink);
  font-family: var(--font-mono); font-size: 14px;
}
.field__input::placeholder { color: var(--dim); }

.btn {
  position: relative;
  flex: none;
  height: 56px; padding: 0 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; cursor: pointer;
  background: var(--ink); color: #04060a;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  transition: background-color .18s, color .18s;
}
.btn:hover:not(:disabled) { background: var(--accent); }
.btn:disabled { opacity: .55; cursor: progress; }

.btn__spinner {
  display: none;
  width: 11px; height: 11px; flex: none;
  border: 1.5px solid rgba(4, 6, 10, .3);
  border-top-color: #04060a;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn.is-busy .btn__spinner { display: block; }

/* honeypot — off-screen, never focusable */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.turnstile { margin-top: 14px; }

/* machine-voice status readout */
.form__status {
  display: flex; align-items: center; gap: 9px;
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
  min-height: 16px;
}
.form__status-dot {
  width: 5px; height: 5px; flex: none; border-radius: 50%;
  background: currentColor;
}
.form__status[data-state="ok"]    { color: var(--accent); }
.form__status[data-state="error"] { color: var(--red); }
.form__status[data-state="busy"] .form__status-dot { animation: pulse 1s ease-in-out infinite; }

.form__note {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 11px; line-height: 1.7; letter-spacing: .02em;
  color: var(--dim);
}
.form__note a { color: var(--muted); border-bottom: 1px solid var(--line); }
.form__note a:hover { color: var(--accent); border-color: var(--accent); }
.form__note--alert { color: var(--dim); }

/* success: collapse the input, leave the confirmation standing */
.form.is-done .field { display: none; }

/* ---------------------------------------------------------------- modal -- */
/* Step 2. A native <dialog> gives us focus trapping and Esc for free. */
.modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--bg-raise);
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
}
.modal::backdrop { background: rgba(2, 3, 6, .8); }

/* transform-only entry: a frozen animation can never hide the dialog */
.modal[open] { animation: modalIn .3s var(--ease) both; }
@keyframes modalIn { from { transform: translateY(10px); } }

.modal__inner { padding: 26px 26px 22px; }

.modal__eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
}
.modal__title {
  margin: 0 0 22px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 21px; line-height: 1.3; letter-spacing: -.01em;
}

.modal__field { margin-bottom: 15px; }
.modal__field label {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 7px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.tag-req, .tag-opt {
  font-size: 9px; letter-spacing: .12em; text-transform: lowercase;
}
.tag-req { color: var(--accent); }
.tag-opt { color: var(--faint); }

.modal__field input {
  width: 100%; height: 48px; padding: 0 14px;
  background: rgba(255, 255, 255, .028);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-mono); font-size: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.modal__field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 26px rgba(63, 208, 255, .12);
}
.modal__field input:invalid:not(:placeholder-shown) { border-color: var(--red); }

.consent {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 20px 0 0;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.6;
  color: var(--ink-2); cursor: pointer;
}
.consent input {
  flex: none; width: 17px; height: 17px; margin: 1px 0 0;
  accent-color: var(--accent); cursor: pointer;
}

.modal__actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 20px;
}

.btn--ghost {
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line);
}
.btn--ghost:hover:not(:disabled) { background: transparent; color: var(--accent); border-color: var(--accent); }

/* ----------------------------------------------------------------- rail -- */
.rail {
  align-self: center;
  border: 1px solid var(--line-soft);
  background: var(--panel);
  padding: 16px 18px 14px;
}

.rail__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent);
}
.rail__clock { color: var(--dim); letter-spacing: .1em; }

.spec { margin: 0; }
.spec__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5;
}
.spec__row:last-child { border-bottom: 0; }
.spec__row dt { color: var(--dim); letter-spacing: .11em; text-transform: uppercase; flex: none; }
.spec__row dd { margin: 0; color: var(--ink-2); text-align: right; }
.spec__row dd.dd--hi { color: var(--accent); }

.rail__note {
  margin: 10px 0 0;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}

/* --------------------------------------------------------------- footer -- */
.footer {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 18px;
  padding-block: 15px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim);
}
.footer__item { margin: 0; }
.footer__item--mid { color: var(--faint); }
.footer__item--end { display: inline-flex; align-items: center; gap: 10px; }
.footer__sep { color: var(--faint); }

/* ----------------------------------------------------------- focus ring -- */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.field__input:focus-visible { outline: none; }

/* ------------------------------------------------------- entry animation --
   Transform-only on purpose. An opacity fade would make page visibility
   depend on an animation actually running: a paused or throttled animation
   timeline would leave the entire page invisible. Animating position means
   the worst case is content sitting 14px low — still perfectly readable. */
.slide-in {
  animation: reveal .72s var(--ease) both;
}
.slide-in:nth-child(1) { animation-delay: .04s; }
.slide-in:nth-child(2) { animation-delay: .12s; }
.slide-in:nth-child(3) { animation-delay: .22s; }
.slide-in:nth-child(4) { animation-delay: .30s; }
@keyframes reveal {
  from { transform: translateY(14px); }
  to   { transform: none; }
}

/* ------------------------------------------------------------- responsive -- */
/* Two columns hold down to 760px: at 900x800 and 768x1024 the side-by-side
   layout fits the viewport exactly, while stacking pushes the spec rail below
   the fold and forces a scroll. */
@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .rail { align-self: start; max-width: 520px; }
}

@media (max-width: 620px) {
  .topbar { min-height: 58px; font-size: 10px; letter-spacing: .12em; }
  .topbar__cta { display: none; }
  .brand__mark { width: 15px; height: 15px; }

  .field { flex-direction: column; }
  .btn { width: 100%; }
  .rail { max-width: none; }
  .mark { display: none; }

  .footer { font-size: 9.5px; letter-spacing: .1em; }
  .footer__item--mid { display: none; }
}

/* --------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* make sure nothing rests in a mid-animation state */
  .slide-in { opacity: 1; transform: none; }
  .swap__old { text-decoration-color: var(--red); }
  .glitch::before, .glitch::after { display: none; }
}