/* ============================================================
   SYMBOLICS // vaporwave fan shrine
   Palette + global
   ============================================================ */
:root{
  --void:        #06010f;
  --void-2:      #0c0620;
  --panel:       #120a28;
  --panel-2:     #1a1038;
  --magenta:     #ff2bd6;
  --cyan:        #00f0ff;
  --purple:      #b14dff;
  --amber:       #ffb000;
  --green:       #54d75f;  /* warm vintage CRT phosphor, not bright neon */
  --sun-1:       #ffd319;
  --sun-2:       #ff2e88;
  --ink:         #e9defb;
  --ink-dim:     #9a86c4;
  --mono:        'VT323', 'Courier New', monospace;
  --display:     'Orbitron', 'Arial Black', sans-serif;
  --hand:        'Major Mono Display', monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--mono);
  font-size:20px;
  line-height:1.5;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
a{color:var(--cyan);text-decoration:none}

/* ---------- CRT overlays ---------- */
.crt{
  position:fixed;inset:0;z-index:9000;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.18) 3px,
    rgba(0,0,0,.18) 4px);
  mix-blend-mode:multiply;
}
.crt::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
}
.flicker{
  position:fixed;inset:0;z-index:9001;pointer-events:none;
  background:rgba(120,80,200,.04);
  animation:flick 7s infinite steps(2);
}
@keyframes flick{0%,96%{opacity:0}97%{opacity:1}98%{opacity:0}99%{opacity:.6}100%{opacity:0}}

/* ============================================================
   NAV
   ============================================================ */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:8000;
  display:flex;align-items:center;justify-content:space-between;
  padding:.5rem 1.2rem;
  background:linear-gradient(180deg, rgba(6,1,15,.95), rgba(6,1,15,.6));
  border-bottom:1px solid var(--magenta);
  box-shadow:0 0 18px rgba(255,43,214,.4);
  backdrop-filter:blur(3px);
}
.brand{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--display);font-weight:900;font-size:1.1rem;letter-spacing:.18em;
  color:#fff;text-shadow:0 0 8px rgba(0,240,255,.5);
}
.brand-mark{
  width:1.5rem;height:1.5rem;
  filter:drop-shadow(0 0 4px rgba(120,160,255,.7));
}
.nav-links{list-style:none;display:flex;gap:1.4rem}
.nav-links a{
  font-family:var(--display);font-size:.72rem;letter-spacing:.15em;
  color:var(--ink-dim);text-transform:uppercase;transition:.2s;
}
.nav-links a:hover{color:var(--magenta);text-shadow:0 0 8px var(--magenta)}
.nav-toggle{
  display:none;background:none;border:1px solid var(--cyan);color:var(--cyan);
  font-size:1.2rem;padding:.1rem .5rem;cursor:pointer;border-radius:3px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100vh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 120% 60% at 50% 52%, rgba(0,240,255,.12), transparent 60%),
    linear-gradient(180deg, #05010d 0%, #070318 50%, #0a0420 100%);
}
/* classic vector horizon line where the grid meets the sky */
.sun{
  position:absolute;left:0;right:0;bottom:52vh;height:2px;z-index:0;
  background:var(--cyan);
  box-shadow:0 0 12px 2px var(--cyan), 0 0 40px 10px rgba(0,240,255,.4);
  opacity:.7;
}
.sun::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:18vh;
  background:linear-gradient(180deg, transparent, rgba(0,240,255,.10));
}
.grid-floor{
  position:absolute;left:-25%;right:-25%;bottom:0;height:52vh;z-index:0;
  background-image:
    linear-gradient(var(--cyan) 1px, transparent 1px),
    linear-gradient(90deg, var(--cyan) 1px, transparent 1px);
  background-size:48px 48px;
  transform:perspective(320px) rotateX(72deg);
  transform-origin:bottom center;
  opacity:.32;
  -webkit-mask-image:linear-gradient(transparent, #000 45%);
          mask-image:linear-gradient(transparent, #000 45%);
  animation:grid-run 1.6s linear infinite;
}
@keyframes grid-run{from{background-position-y:0}to{background-position-y:48px}}

.hero-inner{position:relative;z-index:2;text-align:center;padding:5rem 1.2rem 3rem}
.hero-mark{
  display:block;width:clamp(74px,12vw,108px);height:auto;margin:0 auto 1.4rem;
  filter:
    drop-shadow(0 0 10px rgba(43,92,255,.65))
    drop-shadow(0 0 14px rgba(255,59,59,.45))
    drop-shadow(0 0 18px rgba(31,201,84,.4));
  animation:mark-pulse 4s ease-in-out infinite;
}
@keyframes mark-pulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.eyebrow{
  font-family:var(--display);font-size:.62rem;letter-spacing:.4em;color:var(--cyan);
  text-shadow:0 0 6px var(--cyan);margin-bottom:1rem;
}
.hero-title{
  font-family:var(--display);font-weight:900;
  font-size:clamp(3rem,15vw,9rem);letter-spacing:.04em;line-height:.9;
  color:#fff;position:relative;
  /* polished chrome with a hard highlight band — classic 80s metal type */
  background:linear-gradient(180deg,
    #f4f6ff 0%, #c3c8e0 32%, #7e88a8 49%, #ffffff 50%, #aeb6d4 62%, #6f7796 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:
    drop-shadow(0 1px 0 #2a2f44)
    drop-shadow(0 0 10px rgba(0,240,255,.45))
    drop-shadow(0 4px 14px rgba(0,0,0,.7));
}
/* subtle chromatic edge — toned down from the vaporwave version */
.hero-title::before,.hero-title::after{
  content:attr(data-text);position:absolute;inset:0;
  -webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;
  mix-blend-mode:screen;z-index:-1;
}
.hero-title::before{background:var(--magenta);transform:translate(-2px,0);opacity:.35}
.hero-title::after{background:var(--cyan);transform:translate(2px,0);opacity:.35}
.hero-tag{
  display:inline-block;
  font-family:var(--display);font-weight:700;font-size:clamp(.7rem,2.4vw,1.15rem);
  letter-spacing:.45em;color:var(--cyan);
  text-shadow:0 0 2px #06010f, 0 0 10px var(--cyan);
  margin:1.2rem 0 0;padding:.5rem 0 .6rem;
  border-top:1px solid rgba(0,240,255,.4);
  border-bottom:1px solid rgba(0,240,255,.4);
}
.hero-sub{
  max-width:46ch;margin:2rem auto 0;font-size:1.25rem;color:var(--ink);line-height:1.55;
}
.hero-sub .lisp{color:var(--green)}
.cta{
  display:inline-block;margin-top:2.2rem;
  font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.2em;
  color:var(--void);background:linear-gradient(90deg,var(--cyan),var(--magenta));
  padding:.85rem 2rem;border-radius:3px;
  box-shadow:0 0 22px rgba(255,43,214,.6);transition:.2s;
}
.cta:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 0 34px rgba(0,240,255,.8)}

/* spinning wireframe cube */
.cube-stage{margin:2.5rem auto 0;width:120px;height:120px;perspective:600px}
.cube{position:relative;width:120px;height:120px;transform-style:preserve-3d;animation:spin 12s linear infinite}
@keyframes spin{from{transform:rotateX(-20deg) rotateY(0)}to{transform:rotateX(-20deg) rotateY(360deg)}}
.cube .face{
  position:absolute;width:120px;height:120px;
  border:1.5px solid var(--cyan);
  box-shadow:inset 0 0 18px rgba(0,240,255,.35),0 0 14px rgba(0,240,255,.4);
  background:rgba(0,240,255,.04);
}
.cube .front {transform:translateZ(60px)}
.cube .back  {transform:rotateY(180deg) translateZ(60px);border-color:var(--magenta);box-shadow:inset 0 0 18px rgba(255,43,214,.35),0 0 14px rgba(255,43,214,.4)}
.cube .right {transform:rotateY(90deg) translateZ(60px);border-color:var(--purple)}
.cube .left  {transform:rotateY(-90deg) translateZ(60px);border-color:var(--purple)}
.cube .top   {transform:rotateX(90deg) translateZ(60px);border-color:var(--magenta)}
.cube .bottom{transform:rotateX(-90deg) translateZ(60px)}

.scroll-cue{
  position:absolute;bottom:1.4rem;left:0;right:0;text-align:center;z-index:2;
  color:var(--cyan);letter-spacing:.5em;animation:bob 1.6s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(8px);opacity:1}}

/* ============================================================
   BANDS / layout
   ============================================================ */
.band{position:relative;padding:5.5rem 1.2rem;border-top:1px solid rgba(177,77,255,.25)}
.band.alt{background:linear-gradient(180deg,var(--void-2),var(--void))}
.wrap{max-width:1080px;margin:0 auto}
.center{text-align:center}

.section-title{
  font-family:var(--display);font-weight:900;font-size:clamp(1.6rem,5vw,3rem);
  letter-spacing:.06em;color:#fff;margin-bottom:1.5rem;
  text-shadow:0 0 16px rgba(0,240,255,.5);display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;
}
.section-title .hash{color:var(--magenta);font-size:.5em;text-shadow:0 0 10px var(--magenta)}
.section-title.nocount{justify-content:center}
.section-intro{max-width:60ch;color:var(--ink-dim);font-size:1.2rem;margin-bottom:2.5rem}
.section-intro .hl,.hl{color:var(--amber)}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.lede{font-size:1.5rem;color:var(--cyan);line-height:1.4;margin-bottom:1rem;text-shadow:0 0 8px rgba(0,240,255,.3)}
.band p{margin-bottom:1rem;color:var(--ink)}
.band p strong{color:var(--magenta)}
.band p em{color:var(--green);font-style:normal}
.footnote{font-size:1rem;color:var(--ink-dim)}

/* brochure card */
.brochure{
  border:1px solid var(--amber);background:rgba(255,176,0,.05);
  padding:1.4rem;border-radius:4px;box-shadow:0 0 22px rgba(255,176,0,.15);
}
.brochure-head,.brochure-foot{font-family:var(--display);font-size:.62rem;letter-spacing:.2em;color:var(--amber)}
.brochure-foot{margin-top:1rem;text-align:right;opacity:.7}
.brochure blockquote{
  color:#fff;font-size:1.2rem;line-height:1.4;margin:1rem 0;padding-left:1rem;
  border-left:2px solid var(--amber);
}

/* stat row */
.stat-row{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3rem}
.stat-row li{
  text-align:center;border:1px solid var(--purple);padding:1.2rem .6rem;border-radius:4px;
  background:rgba(177,77,255,.06);box-shadow:0 0 16px rgba(177,77,255,.18);
}
.stat-num{display:block;font-family:var(--display);font-weight:900;font-size:1.6rem;color:var(--cyan);text-shadow:0 0 10px var(--cyan)}
.stat-lbl{display:block;font-size:.95rem;color:var(--ink-dim);margin-top:.4rem;line-height:1.2}

/* ============================================================
   MACHINES
   ============================================================ */
.machine-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.machine{
  position:relative;border:1px solid var(--cyan);border-radius:5px;padding:1.2rem;
  background:linear-gradient(180deg,var(--panel),var(--void));
  box-shadow:0 0 18px rgba(0,240,255,.12);transition:.25s;
}
.machine:hover{transform:translateY(-6px);box-shadow:0 0 30px rgba(0,240,255,.4)}
.machine.featured{border-color:var(--magenta);box-shadow:0 0 26px rgba(255,43,214,.3)}
.machine .machine-art svg{width:100%;height:auto;display:block;filter:drop-shadow(0 0 6px rgba(0,240,255,.3))}
.machine h3{font-family:var(--display);font-weight:700;font-size:1.05rem;color:#fff;margin:.8rem 0 .2rem;letter-spacing:.08em}
.machine-year{color:var(--amber);font-size:1rem;margin-bottom:.6rem}
.machine p{font-size:1rem;color:var(--ink-dim);line-height:1.4;margin:0}
.ribbon{
  position:absolute;top:.7rem;right:-.3rem;background:var(--magenta);color:var(--void);
  font-family:var(--display);font-weight:700;font-size:.55rem;letter-spacing:.15em;
  padding:.2rem .6rem;box-shadow:0 0 12px var(--magenta);
}
.spec-strip{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:2.5rem;
}
.spec-strip span{
  font-family:var(--display);font-size:.6rem;letter-spacing:.12em;color:var(--green);
  border:1px solid var(--green);padding:.4rem .7rem;border-radius:20px;
  box-shadow:0 0 10px rgba(84,215,95,.2);
}

/* ============================================================
   GENERA terminal + cards
   ============================================================ */
.terminal{
  border:1px solid var(--green);border-radius:6px;overflow:hidden;margin-bottom:2.5rem;
  box-shadow:0 0 26px rgba(84,215,95,.2);background:#02110d;
}
.term-bar{
  background:#06241b;color:var(--green);padding:.4rem .9rem;font-size:1rem;
  border-bottom:1px solid var(--green);letter-spacing:.05em;
}
.term-bar span{color:var(--magenta);margin-right:.6rem;letter-spacing:.1em}
.term-body{
  padding:1.2rem;color:var(--green);font-family:var(--mono);font-size:1.25rem;line-height:1.4;
  min-height:13rem;white-space:pre-wrap;text-shadow:0 0 6px rgba(84,215,95,.5);
}
.term-body .cursor{background:var(--green);color:#02110d}

.feature-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.fcard{
  border:1px solid var(--purple);border-radius:5px;padding:1.4rem;
  background:rgba(177,77,255,.05);box-shadow:0 0 16px rgba(177,77,255,.15);transition:.2s;
}
.fcard:hover{border-color:var(--magenta);box-shadow:0 0 24px rgba(255,43,214,.3)}
.fcard-ico{font-size:2rem;color:var(--cyan);text-shadow:0 0 12px var(--cyan);margin-bottom:.4rem}
.fcard h3{font-family:var(--display);font-weight:700;font-size:1.05rem;color:#fff;margin-bottom:.5rem;letter-spacing:.06em}
.fcard p{font-size:1.05rem;color:var(--ink-dim);line-height:1.45;margin:0}

/* ============================================================
   KEYBOARD
   ============================================================ */
.kbd{
  font-family:var(--display);font-size:.7em;background:var(--panel-2);color:var(--cyan);
  border:1px solid var(--cyan);border-radius:3px;padding:.1em .5em;box-shadow:0 0 8px rgba(0,240,255,.3);
}
.keyboard-art{
  border:1px solid var(--magenta);border-radius:6px;padding:2rem;
  background:linear-gradient(180deg,var(--panel-2),var(--void));box-shadow:0 0 26px rgba(255,43,214,.2);
}
.kb-keys{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-bottom:1.6rem}
.key{
  font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.06em;
  min-width:3.4rem;text-align:center;padding:.9rem .7rem;border-radius:5px;
  background:linear-gradient(180deg,#241640,#0c0620);
  border-top:2px solid rgba(255,255,255,.2);border-left:1px solid rgba(255,255,255,.1);
  box-shadow:0 4px 0 #050310,0 0 14px rgba(0,0,0,.6);position:relative;
}
.key small{display:block;font-size:.55rem;opacity:.6;margin-top:.2rem}
.key.bucky{color:var(--cyan);text-shadow:0 0 8px var(--cyan)}
.key.shift{color:var(--magenta);text-shadow:0 0 8px var(--magenta)}
.key.greek{color:var(--amber);font-size:1.3rem}
.key.roman{color:var(--green);min-width:2.6rem}
.kb-caption{font-size:1.15rem;color:var(--ink-dim);max-width:62ch;margin:0 auto;text-align:center}
.kb-caption strong{color:var(--cyan)}

/* ============================================================
   GRAPHICS / boids
   ============================================================ */
.boids-stage{
  border:1px solid var(--cyan);border-radius:6px;overflow:hidden;
  background:radial-gradient(ellipse at center,#0a1040,#030114);box-shadow:0 0 26px rgba(0,240,255,.2);
}
#boids{display:block;width:100%;height:auto;background:transparent}
.boids-cap{
  font-family:var(--display);font-size:.6rem;letter-spacing:.1em;color:var(--cyan);
  padding:.5rem .8rem;border-top:1px solid var(--cyan);background:rgba(0,240,255,.05);
}

/* ============================================================
   FIRST DOT COM
   ============================================================ */
.dotcom{background:
  radial-gradient(ellipse at top,#2a0a44 0%,var(--void) 70%);
  text-align:center;
}
.domain-plate{
  display:inline-block;margin:1rem auto 2rem;padding:1.8rem 3rem;border-radius:6px;
  border:2px solid var(--cyan);background:rgba(0,240,255,.06);
  box-shadow:0 0 40px rgba(0,240,255,.4),inset 0 0 20px rgba(0,240,255,.15);
}
.domain-name{
  font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,7vw,3.6rem);
  color:#fff;letter-spacing:.04em;
  text-shadow:0 0 18px var(--cyan),0 0 38px var(--magenta);
}
.domain-date{font-family:var(--display);font-size:.7rem;letter-spacing:.35em;color:var(--amber);margin-top:.6rem}
/* ---- the surprise / dedication ---- */
.transmission{
  margin:3.5rem auto 0;max-width:62ch;padding:2.2rem 1.6rem;
  border:1px solid var(--purple);border-radius:8px;
  background:linear-gradient(180deg, rgba(43,92,255,.07), rgba(255,59,59,.05) 50%, rgba(31,201,84,.06));
  box-shadow:0 0 30px rgba(120,160,255,.2);
  /* reveal */
  opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease;
}
.transmission.revealed{opacity:1;transform:none}
.tx-banner{
  font-family:var(--display);font-size:.7rem;letter-spacing:.3em;color:var(--amber);
  text-shadow:0 0 10px var(--amber);margin-bottom:1.2rem;
  animation:tx-blink 1.4s steps(2) infinite;
}
.tx-banner.static{animation:none}
@keyframes tx-blink{0%,60%{opacity:1}61%,100%{opacity:.35}}
.tx-line{font-size:1.15rem;color:var(--ink-dim);margin-bottom:1.4rem}

/* ===== full-screen incoming-transmission overlay ===== */
.tx-overlay{
  position:fixed;inset:0;z-index:10000;display:none;
  align-items:center;justify-content:center;padding:6vh 1rem;
  background:radial-gradient(ellipse at center,#0a0820 0%,#03010a 100%);
}
.tx-overlay.active{display:flex}
.tx-overlay.closing{animation:tx-fadeout .5s ease forwards}
@keyframes tx-fadeout{to{opacity:0;visibility:hidden}}
.tx-crt{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.22) 3px,rgba(0,0,0,.22) 4px);
}
.tx-modal{
  position:relative;width:min(880px,94vw);max-height:86vh;overflow:auto;
  border:1px solid var(--green);border-radius:8px;
  background:rgba(2,17,13,.82);
  box-shadow:0 0 60px rgba(84,215,95,.22),inset 0 0 70px rgba(0,0,0,.6);
  padding:clamp(1.2rem,4vw,2.8rem);
}
.tx-screen{
  font-family:var(--mono);font-size:clamp(1rem,2.6vw,1.5rem);line-height:1.55;
  color:var(--green);white-space:pre-wrap;word-break:break-word;
  text-shadow:0 0 6px rgba(84,215,95,.4);margin:0;
}
.tx-screen .c-amber{color:var(--amber)}
.tx-screen .c-green{color:var(--green)}
.tx-screen .c-cyan {color:var(--cyan)}
.tx-screen .c-white{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.4)}
.tx-screen .c-dim  {color:var(--ink-dim);text-shadow:none}
.tx-screen .c-rgb{
  font-weight:700;
  background:linear-gradient(100deg,#5b86ff,#ff6b6b 50%,#4fe085);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.tx-cursor{color:var(--green);animation:tx-cur 1s steps(2) infinite}
@keyframes tx-cur{50%{opacity:0}}

.tx-close{
  position:absolute;top:1.4rem;right:1.6rem;z-index:10001;
  width:2.9rem;height:2.9rem;border-radius:50%;cursor:pointer;
  background:rgba(6,1,15,.65);border:1px solid var(--magenta);color:var(--magenta);
  font-size:1.1rem;opacity:0;transform:scale(.5);pointer-events:none;
  transition:opacity .5s ease,transform .5s ease,background .2s,color .2s;
  box-shadow:0 0 18px rgba(255,43,214,.5);
}
.tx-close.show{opacity:1;transform:scale(1);pointer-events:auto}
.tx-close:hover{background:var(--magenta);color:#fff;transform:scale(1.1)}
.tx-hint{
  position:absolute;top:4.7rem;right:1.6rem;z-index:10001;
  font-family:var(--display);font-size:.55rem;letter-spacing:.2em;color:var(--ink-dim);
  opacity:0;transition:opacity .5s ease .15s;text-align:right;
}
.tx-hint.show{opacity:.85}

/* tri-color plate using the real Symbolics logo colors */
.plate-rgb{
  border:2px solid transparent;border-radius:6px;
  background:
    linear-gradient(#06010f,#06010f) padding-box,
    linear-gradient(100deg,#2b5cff,#ff3b3b 50%,#1fc954) border-box;
  box-shadow:0 0 36px rgba(43,92,255,.35), 0 0 36px rgba(255,59,59,.2);
}
.plate-rgb .domain-name{
  background:linear-gradient(100deg,#5b86ff,#ff6b6b 50%,#4fe085);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:none;
}
.plate-rgb .domain-date{color:var(--ink-dim)}

.tx-dedication{font-size:1.3rem;color:var(--ink);line-height:1.5;margin:1.6rem 0 1rem}
.tx-dedication strong{color:var(--cyan)}
.tx-birthday{font-size:1.25rem;color:var(--ink);margin-bottom:1.2rem}
.hb{
  font-family:var(--display);font-weight:900;font-size:1.5rem;display:inline-block;margin-top:.4rem;
  background:linear-gradient(100deg,#5b86ff,#ff6b6b 50%,#4fe085);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 12px rgba(255,107,107,.5));
}
.tx-sig{color:var(--green);font-size:1.1rem;letter-spacing:.02em}
.tx-sig .ret{color:var(--amber)}

.big-claim{max-width:54ch;margin:0 auto 1rem;font-size:1.4rem;color:var(--ink)}
.big-claim code{color:var(--green);background:rgba(84,215,95,.1);padding:0 .3em;border-radius:3px}
.dim{color:var(--ink-dim)}
.dotcom .dim{max-width:54ch;margin:0 auto;font-size:1.1rem}

/* ============================================================
   LEGACY
   ============================================================ */
.quotebox{
  border-left:3px solid var(--magenta);padding:1.4rem 1.6rem;
  background:rgba(255,43,214,.05);border-radius:0 5px 5px 0;box-shadow:0 0 18px rgba(255,43,214,.15);
}
.quotebox blockquote{font-size:1.4rem;color:#fff;line-height:1.45;margin-bottom:1rem}
.quotebox cite{font-style:normal;color:var(--amber);font-size:1rem;letter-spacing:.05em}
.run-today{
  margin-top:2.5rem;border:1px dashed var(--green);border-radius:6px;padding:1.6rem;
  background:rgba(84,215,95,.05);
}
.run-today h3{font-family:var(--display);font-weight:700;color:var(--green);letter-spacing:.1em;margin-bottom:.6rem;text-shadow:0 0 10px var(--green)}
.run-today p{font-size:1.2rem;color:var(--ink);margin:0}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  text-align:center;padding:4rem 1.2rem 3rem;
  background:linear-gradient(180deg,var(--void),#11052a);
  border-top:1px solid var(--magenta);box-shadow:0 -10px 30px rgba(255,43,214,.2);
}
.foot-logo{display:flex;align-items:center;justify-content:center;gap:.7rem;font-family:var(--display);font-weight:900;font-size:1.6rem;color:#fff;letter-spacing:.2em;text-shadow:0 0 14px rgba(0,240,255,.5)}
.foot-mark{width:2rem;height:2rem;filter:drop-shadow(0 0 6px rgba(120,160,255,.6))}
.foot-tag{font-family:var(--display);font-size:.7rem;letter-spacing:.35em;color:var(--magenta);margin:.6rem 0 1.8rem}
.foot-fine{max-width:60ch;margin:0 auto .8rem;font-size:1rem;color:var(--ink-dim)}
.foot-fine .lisp{color:var(--green)}

/* back to top */
.totop{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:8000;
  width:2.8rem;height:2.8rem;border-radius:50%;cursor:pointer;
  background:linear-gradient(180deg,var(--magenta),var(--purple));color:#fff;border:none;
  font-size:1rem;box-shadow:0 0 18px rgba(255,43,214,.6);opacity:0;pointer-events:none;transition:.3s;
}
.totop.show{opacity:1;pointer-events:auto}
.totop:hover{transform:scale(1.1)}

.lisp{font-family:var(--mono)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:880px){
  .machine-grid{grid-template-columns:repeat(2,1fr)}
  .stat-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  body{font-size:18px}
  .nav-links{
    position:absolute;top:100%;right:0;flex-direction:column;gap:0;
    background:var(--void-2);border:1px solid var(--magenta);border-radius:0 0 0 6px;
    min-width:60vw;display:none;
  }
  .nav-links.open{display:flex}
  .nav-links li{border-bottom:1px solid rgba(177,77,255,.2)}
  .nav-links a{display:block;padding:.9rem 1.2rem}
  .nav-toggle{display:block}
  .two-col{grid-template-columns:1fr;gap:1.6rem}
  .feature-cards{grid-template-columns:1fr}
}
@media (max-width:520px){
  .machine-grid{grid-template-columns:1fr}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .cube,.grid-floor,.scroll-cue,.flicker{animation:none}
}