/* ============================================================
   VINCULUM — vinculumsoft.com  ·  pre-launch page
   Dark only, by design. Tokens inherit the Sitra Labs system;
   the two accents are Vinculum's own real in-app colours.
   ============================================================ */

:root {
  --bg:#0A0E17; --bg-1:#0C111C; --panel:#111828; --panel-solid:#141B2B;
  --line:#21304A; --line-2:#2C3E5E;
  --ink:#E8ECF6; --ink-2:#96A2BB; --ink-3:#5A6784;

  /* Vinculum's real palette: workspace rail coral + in-app primary blue */
  --accent:#FF6B4A; --accent-2:#4FA3FF;
  --accent-soft:rgba(255,107,74,0.13);

  --grid:rgba(255,107,74,0.035);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Consolas,monospace;

  --maxw:1120px; --pad:clamp(20px,5vw,56px);
  color-scheme:dark;
}

* { box-sizing:border-box; }

html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

body {
  margin:0; min-height:100%;
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* fixed dotted grid + a single warm bloom behind the hero */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 120% 85% at 50% 0%,#000 30%,transparent 90%);
  mask-image:radial-gradient(ellipse 120% 85% at 50% 0%,#000 30%,transparent 90%);
}
body::after {
  content:""; position:fixed; left:50%; top:-38vh; width:120vw; height:105vh;
  transform:translateX(-50%); pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 42% 52% at 38% 55%,rgba(255,107,74,0.11),transparent 70%),
    radial-gradient(ellipse 40% 48% at 66% 42%,rgba(79,163,255,0.09),transparent 72%);
  filter:blur(14px);
}

#fieldCanvas { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }

a { color:inherit; text-decoration:none; }
::selection { background:rgba(255,107,74,0.32); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wrap { max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); position:relative; z-index:1; }
.mono { font-family:var(--mono); }
.tab { font-variant-numeric:tabular-nums; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.skip {
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--accent); color:#0A0E17; padding:10px 16px;
  border-radius:0 0 8px 0; font-family:var(--mono); font-size:13px;
}
.skip:focus { left:0; }

/* ============================ HEADER ============================ */
.top { position:relative; z-index:5; }
.top-inner {
  max-width:var(--maxw); margin:0 auto;
  padding:22px var(--pad) 0;
  display:flex; align-items:center; gap:20px;
}
.lockup { display:flex; align-items:center; gap:12px; }
/* the app's own icon tile: its ground is near-black, so round it and give it a
   hairline edge and it reads as the application icon rather than a stray box */
.mark {
  display:block; flex:none; width:40px; height:40px;
  border-radius:9px; border:1px solid var(--line);
  background:#000;
}
.lockup:hover .mark { border-color:var(--line-2); }

/* The wordmark carries a literal vinculum — the overbar the product is named
   for. The bar is absolutely positioned, so it adds no height to the box that
   .lockup centres; left alone, the bar+word unit floats above the icon's
   middle even though the text itself is dead centre. `top` nudges the whole
   unit back down, and the bar sits close enough to read as part of the word. */
.wordmark {
  position:relative; top:2px; display:inline-block;
  font-family:var(--mono); font-weight:600; font-size:15px;
  letter-spacing:.26em; text-indent:.26em; color:var(--ink);
}
.vbar {
  position:absolute; left:0; right:.1em; top:-3px; height:1.5px; border-radius:1px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform-origin:left center;
}
.lockup:hover .vbar { animation:barSweep .7s cubic-bezier(.2,.7,.2,1); }
@keyframes barSweep { from { transform:scaleX(0); } to { transform:scaleX(1); } }

.top-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
.byline { font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:var(--ink-3); transition:color .18s; }
.byline b { color:var(--ink-2); font-weight:600; }
.byline:hover { color:var(--ink-2); }
.byline:hover b { color:var(--accent); }
@media (max-width:560px) { .byline { display:none; } }

.icon-btn {
  display:inline-grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--line); border-radius:9px;
  background:transparent; color:var(--ink-3); cursor:pointer;
  transition:color .18s,border-color .18s;
}
.icon-btn:hover { color:var(--ink); border-color:var(--line-2); }
.icon-btn[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); }

/* ============================= HERO ============================= */
.hero { position:relative; z-index:1; padding-block:clamp(52px,11vh,120px) clamp(30px,6vh,60px); text-align:center; }

.eyebrow {
  display:inline-flex; align-items:center; gap:10px; margin:0 0 26px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-2);
  border:1px solid var(--line); border-radius:22px; padding:7px 16px 7px 13px;
  background:rgba(17,24,40,0.5);
}
.eyebrow .dot {
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 12px var(--accent); animation:pulse 2.8s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }

h1 {
  font-family:var(--sans); font-weight:700;
  font-size:clamp(34px,6.6vw,78px); line-height:1.02; letter-spacing:-.038em;
  margin:0; text-wrap:balance; overflow-wrap:break-word;
}
/* the forced three-line composition is a wide-screen luxury; below that the
   line "symbolic regression engine" cannot fit and must be allowed to wrap */
@media (max-width:760px) { h1 .brk { display:none; } }
/* warm-only ramp: coral to blue would pass through grey mid-word */
h1 .grad {
  background:linear-gradient(96deg,var(--accent) 0%,#FF8A55 55%,#FFB06A 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.sub {
  max-width:46ch; margin:26px auto 0;
  color:var(--ink-2); font-size:clamp(15.5px,1.7vw,19px); line-height:1.55;
}

/* ---- spec strip: instrument markings, not a feature list ---- */
.spec {
  list-style:none; margin:24px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.spec li { display:inline-flex; align-items:center; white-space:nowrap; }
.spec li + li::before {
  content:""; width:3px; height:3px; border-radius:50%;
  background:var(--accent); opacity:.75; margin:0 13px;
}
@media (max-width:430px) {
  .spec { gap:5px 0; }
  .spec li + li::before { margin:0 9px; }
}

/* ---- notify form ---- */
.notify {
  margin:38px auto 0; max-width:490px;
  display:flex; flex-direction:column; gap:14px;
}
.notify-row { display:flex; gap:10px; align-items:stretch; }
.notify input[type="email"] {
  flex:1 1 auto; min-width:0;
  background:rgba(17,24,40,0.72); color:var(--ink);
  border:1px solid var(--line); border-radius:11px;
  padding:13px 16px; font-family:var(--sans); font-size:15px;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.notify input[type="email"]::placeholder { color:var(--ink-3); }
.notify input[type="email"]:hover { border-color:var(--line-2); }
.notify input[type="email"]:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft); background:rgba(17,24,40,0.92);
}
.notify.invalid input[type="email"] { border-color:#E5484D; box-shadow:0 0 0 3px rgba(229,72,77,0.14); }

.btn {
  flex:none; display:inline-flex; align-items:center; gap:9px;
  padding:13px 20px; border-radius:11px; cursor:pointer;
  font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  color:#0A0E17; border:1px solid var(--accent);
  background:linear-gradient(100deg,var(--accent),#FF8558);
  transition:box-shadow .25s,filter .2s,transform .2s;
}
.btn:hover { box-shadow:0 0 44px -10px var(--accent); filter:brightness(1.06); }
.btn:active { transform:translateY(1px); }
.btn[disabled] { opacity:.6; cursor:default; box-shadow:none; filter:none; }

@media (max-width:520px) { .notify-row { flex-direction:column; } .btn { justify-content:center; } }

/* ---- solve-for-x challenge ---- */
.challenge { display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap; }
.ch-hint { font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--ink-3); }
.ch-hint i { color:var(--accent); font-style:italic; }
.ch-eq {
  font-size:13.5px; color:var(--ink); letter-spacing:.03em;
  background:rgba(17,24,40,0.72); border:1px solid var(--line);
  border-radius:8px; padding:7px 13px; user-select:none; white-space:nowrap;
}
.ch-eq .n { color:var(--accent); }
.challenge input {
  width:62px; text-align:center;
  background:rgba(17,24,40,0.72); color:var(--ink);
  border:1px solid var(--line); border-radius:8px;
  padding:7px 8px; font-family:var(--mono); font-size:13.5px;
  transition:border-color .2s,box-shadow .2s;
}
.challenge input::placeholder { color:var(--ink-3); font-style:italic; }
.challenge input:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.notify.bad-answer .challenge input { border-color:#E5484D; box-shadow:0 0 0 3px rgba(229,72,77,0.14); }
.ch-new {
  display:inline-grid; place-items:center; width:30px; height:30px;
  border:1px solid var(--line); border-radius:8px;
  background:transparent; color:var(--ink-3); cursor:pointer;
  transition:color .18s,border-color .18s,transform .3s;
}
.ch-new:hover { color:var(--accent); border-color:var(--accent); }
.ch-new:active { transform:rotate(-180deg); }
@media (prefers-reduced-motion:reduce) { .ch-new:active { transform:none; } }

.status {
  min-height:20px; margin:14px auto 0; max-width:52ch;
  font-family:var(--mono); font-size:12.5px; line-height:1.5; color:var(--ink-2);
}
.status.ok { color:#3DD68C; }
.status.err { color:#E5748A; }
.note { margin:8px auto 0; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--ink-3); }

.scroll-cue {
  display:inline-flex; align-items:center; gap:9px; margin-top:clamp(34px,6vh,64px);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); transition:color .2s,opacity .4s;
}
.scroll-cue:hover { color:var(--accent); }
.scroll-cue svg { animation:nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%,100% { transform:translateY(0); } 50% { transform:translateY(3px); } }
.scroll-cue.gone { opacity:0; pointer-events:none; }

/* ====================== INSTRUMENT PANEL ====================== */
.stage { position:relative; z-index:1; padding-block:clamp(20px,4vh,44px) clamp(60px,10vh,110px); }

.panel {
  border:1px solid var(--line);
  border-radius:16px; overflow:hidden;
  background:
    radial-gradient(120% 130% at 0% 0%,rgba(255,107,74,0.07),transparent 55%),
    radial-gradient(110% 120% at 100% 100%,rgba(79,163,255,0.06),transparent 58%),
    var(--bg-1);
  box-shadow:0 50px 110px -60px rgba(255,107,74,0.5), 0 1px 0 rgba(255,255,255,0.03) inset;
}

.panel-head {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:13px 18px; border-bottom:1px solid var(--line);
  background:rgba(10,14,23,0.4);
}
.led {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
}
.led i { width:7px; height:7px; border-radius:50%; background:#3DD68C; box-shadow:0 0 9px #3DD68C; animation:pulse 2.2s ease-in-out infinite; }
.led.done i { background:var(--accent); box-shadow:0 0 9px var(--accent); animation:none; }
.panel-title {
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  padding-left:14px; border-left:1px solid var(--line);
}
.trial { margin-left:auto; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }

/* the equation line */
.eqbar {
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:20px 18px 16px; min-height:74px;
  border-bottom:1px solid var(--line);
}
.eq-y { color:var(--ink-3); font-size:clamp(15px,2vw,19px); }
.eq {
  font-size:clamp(15px,2.15vw,21px); letter-spacing:-.01em; color:var(--ink);
  line-height:1.45; word-break:break-word;
}
.eq .n { color:var(--accent); }           /* fitted coefficients */
.eq .fn { color:var(--accent-2); }        /* function names */
.eq .ch { display:inline-block; white-space:pre; }
.eq .sup { font-size:.68em; vertical-align:super; line-height:1; }

.plot { position:relative; aspect-ratio:16/7; min-height:240px; }
.plot canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
@media (max-width:700px) { .plot { aspect-ratio:4/3; } }

.readout {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border-top:1px solid var(--line);
}
.cell { background:var(--panel-solid); padding:14px 18px; display:flex; flex-direction:column; gap:6px; }
.cell .k { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.cell .v { font-size:17px; color:var(--ink); }
#rStatus { color:#3DD68C; }
#rStatus.done { color:var(--accent); }
@media (max-width:640px) { .readout { grid-template-columns:repeat(2,1fr); } }

.stage-cap { margin:22px auto 0; max-width:60ch; text-align:center; color:var(--ink-3); font-size:13.5px; line-height:1.65; }
.stage-cap em { color:var(--ink-2); font-style:italic; }

/* ============================ FOOTER ============================ */
.foot { position:relative; z-index:1; border-top:1px solid var(--line); padding-block:26px 32px; }
.foot-inner { display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }
.foot p { margin:0; font-size:12px; letter-spacing:.04em; color:var(--ink-3); }
.foot-links { display:flex; gap:22px; flex-wrap:wrap; }
.foot-links a { font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--ink-3); transition:color .18s; }
.foot-links a:hover { color:var(--accent); }

/* ======================= REDUCED MOTION ======================= */
@media (prefers-reduced-motion:reduce) {
  .eyebrow .dot, .led i, .scroll-cue svg { animation:none; }
  .lockup:hover .vbar { animation:none; }
}
:root.no-motion .eyebrow .dot,
:root.no-motion .led i,
:root.no-motion .scroll-cue svg { animation:none; }
:root.no-motion .lockup:hover .vbar { animation:none; }

/* ========================= 404 EXTRAS ========================= */
.lost { text-align:center; padding-block:clamp(80px,18vh,180px); }
.lost .code { font-family:var(--mono); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.lost h1 { font-size:clamp(30px,5.4vw,58px); margin-top:18px; }
.lost p { color:var(--ink-2); max-width:44ch; margin:22px auto 0; }
.lost .back {
  display:inline-flex; align-items:center; gap:9px; margin-top:32px;
  font-family:var(--mono); font-size:13px; color:var(--accent);
  border:1px solid rgba(255,107,74,0.42); border-radius:10px; padding:11px 20px;
  transition:gap .2s,background .2s;
}
.lost .back:hover { gap:14px; background:var(--accent-soft); }