/* ============== LYRA // terminal-OS theme (Capra-style) ============== */
:root{
  --bg:#08090a;
  --bg-2:#0d0f11;
  --panel:#0f1113;
  --panel-2:#121518;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --txt:#e8eaed;
  --muted:#8b9096;
  --dim:#5a5f66;
  --accent:#ff5a1f;        /* Capra orange */
  --accent-2:#ff7a45;
  --green:#34d399;
  --red:#ff5c5c;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--mono);
  background:var(--bg);color:var(--txt);line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--mono);font-weight:800;letter-spacing:-.01em;line-height:1.05}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.skip-link{position:fixed;top:-60px;left:12px;z-index:2001;background:var(--accent);color:#0a0a0a;
  font-family:var(--mono);font-weight:700;font-size:13px;padding:10px 16px;border-radius:0 0 6px 6px;transition:top .2s}
.skip-link:focus{top:0}
.accent{color:var(--accent)}
b{font-weight:700}

/* ---------- FX layers ---------- */
.grid-bg{position:fixed;inset:0;z-index:-3;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 95%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 95%);opacity:.6}
.scanlines{position:fixed;inset:0;z-index:90;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 2px,rgba(0,0,0,.18) 3px,rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply;opacity:.5}
.vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 80% 80% at 50% 40%,transparent 55%,rgba(0,0,0,.6) 100%)}

/* ===================== cinematic intro ===================== */
.intro{position:fixed;inset:0;z-index:2000;background:#04050a;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity .9s ease}
.intro.gone{opacity:0;pointer-events:none}
.intro-fx{position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,90,31,.16),transparent 55%),radial-gradient(circle at 30% 70%,rgba(54,233,245,.12),transparent 50%);
  animation:introSpin 16s linear infinite}
.intro-grid{position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000,transparent 75%)}
@keyframes introSpin{to{transform:rotate(360deg)}}
.intro-skip{position:absolute;top:18px;right:20px;z-index:5;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--txt);background:rgba(255,255,255,.06);border:1px solid var(--line-2);border-radius:5px;padding:11px 18px;min-height:44px;cursor:pointer;transition:.2s}
.intro-skip:hover{color:var(--accent);border-color:var(--accent)}
.intro-stage{position:relative;z-index:3;text-align:center}

/* gate */
.intro-gate{display:flex;flex-direction:column;align-items:center;gap:18px;cursor:pointer}
.intro-gmark{font-size:64px;color:var(--accent);letter-spacing:-6px;filter:drop-shadow(0 0 24px rgba(255,90,31,.6));animation:introPulse 2.2s ease-in-out infinite}
.intro-gmark svg,.intro-rmark svg{display:block}
.intro-enter{font-family:var(--mono);font-weight:700;font-size:20px;letter-spacing:.34em;color:var(--txt)}
.intro-hint{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--muted)}
@keyframes introPulse{50%{transform:scale(1.08);filter:drop-shadow(0 0 40px rgba(255,90,31,.9))}}
.intro.playing .intro-gate{display:none}

/* reveal */
.intro-reveal{display:none;flex-direction:column;align-items:center;gap:14px}
.intro.playing .intro-reveal{display:flex}
.intro-rmark{font-size:58px;line-height:1;color:var(--accent);letter-spacing:-6px;filter:drop-shadow(0 0 26px rgba(255,90,31,.7))}
.intro.playing .intro-rmark{opacity:0;animation:introMark 1.2s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes introMark{0%{opacity:0;transform:scale(.5) translateY(10px);filter:blur(8px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:scale(1)}}
.intro-mark{filter:drop-shadow(0 0 26px rgba(129,140,248,.45))}
.intro.playing .i-ring1{transform-origin:60px 60px;animation:introMark 1.3s cubic-bezier(.2,.7,.2,1) both,introSpin 14s linear infinite 1.3s}
.intro.playing .i-ring2{transform-origin:60px 60px;animation:introMark 1.3s cubic-bezier(.2,.7,.2,1) both,introSpinR 9s linear infinite 1.3s}
@keyframes introSpinR{to{transform:rotate(-360deg)}}
.intro.playing .i-draw{stroke-dasharray:90;stroke-dashoffset:90;animation:introDraw 1.1s ease .25s forwards}
@keyframes introDraw{to{stroke-dashoffset:0}}
.intro.playing .i-star{opacity:0;animation:introStar .5s ease 1.1s forwards}
@keyframes introStar{to{opacity:1}}
@keyframes introMark{0%{opacity:0;transform:scale(.5);filter:blur(6px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:scale(1)}}
.intro-word{font-family:var(--mono);font-weight:800;font-size:clamp(54px,12vw,120px);letter-spacing:.34em;margin-left:.34em;color:#fff;text-shadow:0 0 40px rgba(255,90,31,.5)}
.intro.playing .intro-word{opacity:0;animation:introWord 1s ease 1.15s both}
@keyframes introWord{0%{opacity:0;letter-spacing:.7em;filter:blur(10px)}100%{opacity:1;letter-spacing:.34em;filter:blur(0)}}
.intro-tag{font-family:var(--mono);font-size:clamp(11px,1.4vw,14px);letter-spacing:.4em;color:var(--accent)}
.intro.playing .intro-tag{opacity:0;animation:introTag .8s ease 1.8s both}
@keyframes introTag{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
.intro-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:4}
.intro.playing .intro-flash{animation:introFlash .55s ease 2.25s}
@keyframes introFlash{0%,100%{opacity:0}45%{opacity:.45}}

/* cyberpunk Hong Kong backdrop.
   Drop a licensed photo at assets/hk-photo.jpg and it is used automatically;
   until then the original SVG skyline below shows through as a fallback. */
.city-bg{position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-5;pointer-events:none;background-color:#04050d;
  background-image:url("assets/hk-photo.jpg"),url("assets/hk-cyberpunk-bg.svg");
  background-position:center center,center bottom;
  background-size:cover,cover;
  background-repeat:no-repeat,no-repeat;
  opacity:.9}
.city-veil{position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-4;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,12,.30) 0%,rgba(8,9,12,.55) 48%,rgba(8,9,12,.86) 80%,rgba(8,9,12,.96) 100%)}

/* static mode (?static): freeze all motion for screenshots / reduced-motion previews */
html.is-static *,html.is-static *::before,html.is-static *::after{animation:none!important}
html.is-static .scanbar{display:none}

/* horizontal scanner sweep */
.scanbar{position:fixed;left:0;right:0;top:0;height:120px;z-index:80;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,90,31,.05) 45%,rgba(255,90,31,.14) 50%,rgba(255,90,31,.05) 55%,transparent);
  animation:scanbar 7s linear infinite;opacity:.7}
@keyframes scanbar{0%{transform:translateY(-130px)}100%{transform:translateY(100vh)}}
/* binary data rails on the edges */
.datarail{position:fixed;top:0;bottom:0;width:26px;z-index:-1;pointer-events:none;overflow:hidden;opacity:.13;
  font-family:var(--mono);font-size:12px;line-height:1.35;color:var(--green);letter-spacing:2px;white-space:pre;
  text-align:center;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.dr-left{left:0}.dr-right{right:0}
.datarail::before{content:"0\A 1\A 1\A 0\A 1\A 0\A 0\A 1\A 1\A 1\A 0\A 1\A 0\A 0\A 1\A 1\A 0\A 0\A 1\A 0\A 1\A 1\A 1\A 0\A 0\A 1\A 0\A 1\A 1\A 0\A 1\A 0\A 0\A 1\A 1\A 1\A 0\A 1\A 0\A 0\A 1\A 1\A 0\A 0\A 1\A 0\A 1\A 1\A 1\A 0\A 0\A 1\A 0\A 1\A 1\A 0\A 1\A 0\A 0\A 1";
  display:block;animation:rail 14s linear infinite}
.dr-right::before{animation-direction:reverse;animation-duration:18s}
@keyframes rail{0%{transform:translateY(-50%)}100%{transform:translateY(0)}}

/* ---------- boot overlay ---------- */
.boot{position:fixed;inset:0;z-index:1000;background:#050607;display:flex;align-items:center;justify-content:center;transition:opacity .6s ease,visibility .6s}
.boot.done{opacity:0;visibility:hidden}
.boot-inner{width:min(560px,86vw)}
.boot-log{font-family:var(--mono);font-size:12.5px;color:var(--green);white-space:pre-wrap;min-height:150px;text-shadow:0 0 8px rgba(52,211,153,.4)}
.boot-bar{margin-top:14px;height:4px;background:#15181b;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.boot-bar span{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 12px var(--accent);transition:width .2s linear}

/* ---------- status bar ---------- */
.statusbar{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;gap:18px;align-items:center;
  padding:7px clamp(14px,4vw,40px);font-size:11px;letter-spacing:.06em;color:var(--dim);
  background:rgba(8,9,10,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.sb-id{color:var(--muted);font-weight:700}
.sb-live{color:var(--green);display:flex;align-items:center;gap:6px}
.sb-coord{margin-left:auto}
.led{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 2s infinite}
@keyframes blink{50%{opacity:.35}}

/* ---------- ticker ---------- */
.ticker{position:fixed;top:30px;left:0;right:0;z-index:115;height:30px;overflow:hidden;
  background:var(--bg-2);border-bottom:1px solid var(--line);display:flex;align-items:center}
.ticker-track{display:flex;gap:38px;white-space:nowrap;padding-left:100%;
  font-size:12px;color:var(--muted);animation:scroll 38s linear infinite}
.ticker-track span{display:inline-flex;gap:8px}
.ticker .up{color:var(--green)}.ticker .down{color:var(--red)}
.ticker .sym{color:var(--txt)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- nav ---------- */
.nav{position:fixed;top:60px;left:0;right:0;z-index:110;display:flex;align-items:center;justify-content:space-between;
  padding:12px clamp(14px,4vw,40px);transition:background .3s,padding .3s,box-shadow .3s}
.nav.scrolled{background:rgba(8,9,10,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding-top:9px;padding-bottom:9px}
.brand{display:flex;align-items:center;gap:9px}
.brand-mark{color:var(--accent);font-size:15px;letter-spacing:-2px;display:inline-flex;align-items:center}
.brand-mark svg{display:block}
.brand-word{font-weight:800;font-size:20px;letter-spacing:.18em}
.brand-ver{font-size:10px;color:var(--dim);border:1px solid var(--line);padding:1px 5px;border-radius:3px}
.nav-links{display:flex;align-items:center;gap:26px;font-size:12.5px;letter-spacing:.04em}
.nav-links a{color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--accent)}
.nav-cta{color:var(--txt)!important;border:1px solid var(--line-2);padding:7px 14px;border-radius:4px}
.nav-cta:hover{border-color:var(--accent);background:rgba(255,90,31,.08)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:0;cursor:pointer;padding:6px;min-width:44px;min-height:44px}
.nav-toggle span{width:22px;height:2px;background:var(--txt);transition:.3s}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:700;font-size:13px;
  letter-spacing:.04em;padding:13px 22px;border-radius:5px;cursor:pointer;border:1px solid transparent;transition:.22s}
.btn-primary{background:var(--accent);color:#0a0a0a;box-shadow:0 0 0 rgba(255,90,31,.5)}
.btn-primary:hover{background:var(--accent-2);box-shadow:0 0 26px -4px var(--accent);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-2);color:var(--txt);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.btn.full{width:100%;justify-content:center}

/* ---------- hero ---------- */
.hero{max-width:var(--maxw);margin:0 auto;padding:170px clamp(16px,4vw,40px) 70px;position:relative}
.hero-meta{display:flex;gap:22px;flex-wrap:wrap;font-size:11px;color:var(--muted);letter-spacing:.08em;margin-bottom:26px}
.hero-title{font-size:clamp(34px,6.4vw,76px);font-weight:800}
.hero-title .line{display:block}
.hero-title .accent{color:var(--accent);text-shadow:0 0 40px rgba(255,90,31,.35)}
.hero-tag{font-size:13px;letter-spacing:.34em;color:var(--muted);margin:18px 0 18px}
.hero-sub{max-width:620px;color:var(--muted);font-size:15px;font-family:'Inter',sans-serif}
.hero-sub b{color:var(--txt)}
.hero-cmd{margin:20px 0 0;font-size:14px;color:var(--green);text-shadow:0 0 8px rgba(52,211,153,.3)}
.caret{color:var(--accent);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin:28px 0 46px}

/* ---------- glitch text ---------- */
.glitch{position:relative;display:block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;clip-path:inset(0 0 0 0)}
.glitch::before{color:#5eafff;transform:translate(-2px,0);mix-blend-mode:screen;animation:glx1 3.6s steps(2) infinite}
.glitch::after{color:var(--accent);transform:translate(2px,0);mix-blend-mode:screen;animation:glx2 4.2s steps(2) infinite}
.glitch.accent::after{color:#fff}
@keyframes glx1{0%,92%,100%{clip-path:inset(0 0 100% 0);transform:translate(0)}93%{clip-path:inset(8% 0 70% 0);transform:translate(-3px,0)}96%{clip-path:inset(40% 0 35% 0);transform:translate(3px,0)}}
@keyframes glx2{0%,90%,100%{clip-path:inset(100% 0 0 0);transform:translate(0)}91%{clip-path:inset(62% 0 20% 0);transform:translate(3px,0)}97%{clip-path:inset(18% 0 60% 0);transform:translate(-3px,0)}}

/* ---------- terminal readout ---------- */
.terminal{border:1px solid var(--line-2);border-radius:8px;background:var(--panel);overflow:hidden;
  box-shadow:0 40px 90px -40px #000,inset 0 1px 0 rgba(255,255,255,.04)}
.term-head{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--panel-2);border-bottom:1px solid var(--line)}
.td{width:10px;height:10px;border-radius:50%;background:#2a2f33}
.td:nth-child(1){background:#ff5c5c}.td:nth-child(2){background:#ffb020}.td:nth-child(3){background:#34d399}
.term-path{font-size:12px;color:var(--dim);margin-left:6px}
.term-live{margin-left:auto;font-size:11px;color:var(--green);display:flex;align-items:center;gap:6px}
.term-body{padding:16px 16px 4px;font-size:12.5px;color:var(--green);min-height:118px;white-space:pre-wrap;text-shadow:0 0 6px rgba(52,211,153,.25)}
.term-readout{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
.ro{background:var(--panel);padding:14px;display:flex;flex-direction:column;gap:6px}
.ro span{font-size:10.5px;color:var(--dim);letter-spacing:.06em}
.ro b{font-size:14px}
.ro .up{color:var(--green)}.ro .down{color:var(--red)}

/* ---------- sections ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(64px,8vw,110px) clamp(16px,4vw,40px)}
.sec-head{max-width:680px;margin:0 auto 50px;text-align:center}
.tag{display:inline-block;font-size:11.5px;letter-spacing:.2em;color:var(--accent);border:1px solid var(--line);padding:5px 12px;border-radius:4px;margin-bottom:18px}
.sec-head h2,.split-text h2,.contact-box h2{font-size:clamp(26px,3.6vw,42px)}
.sec-head p{color:var(--muted);font-family:'Inter',sans-serif;margin-top:14px}

/* ---------- modules ---------- */
.modgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.mod{position:relative;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:24px;transition:.3s;overflow:hidden}
.mod::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--accent);transition:width .4s}
.mod:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:0 30px 60px -34px #000}
.mod:hover::after{width:100%}
.mod-top{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-bottom:16px}
.mod-stat{color:var(--green)}
.mod h3{font-size:20px;margin-bottom:10px}
.mod p{color:var(--muted);font-size:13.5px;font-family:'Inter',sans-serif;margin-bottom:14px}
.mod ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.mod li{font-size:12.5px;color:var(--muted);padding-left:18px;position:relative}
.mod li::before{content:">";position:absolute;left:0;color:var(--accent)}

/* ---------- split / core ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split-text .lead{color:var(--muted);font-family:'Inter',sans-serif;margin:14px 0 26px}
.feat{display:flex;gap:16px;margin-bottom:18px}
.fn{color:var(--accent);font-size:13px;width:26px;flex:none}
.feat h4{font-size:15px;margin-bottom:3px;letter-spacing:.04em}
.feat p{color:var(--muted);font-size:13px;font-family:'Inter',sans-serif}
.split-term{border:1px solid var(--line-2);border-radius:8px;background:var(--panel);overflow:hidden;box-shadow:0 40px 90px -44px #000}
.ask{padding:20px;font-size:13px}
.ask p{margin-bottom:8px}
.ask .q{color:var(--txt)}
.ask .a{color:var(--green)}
.ask .dim{color:var(--dim)}
.cursor{animation:blink 1s steps(1) infinite;color:var(--accent)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:24px;transition:.3s}
.step:hover{border-color:var(--accent);transform:translateY(-4px)}
.sn{font-size:26px;font-weight:800;color:var(--accent)}
.step h3{font-size:16px;margin:12px 0 8px}
.step p{color:var(--muted);font-size:12.5px;font-family:'Inter',sans-serif}

/* ---------- band ---------- */
.band{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.band-grid div{padding:38px 24px;text-align:center;border-right:1px solid var(--line)}
.band-grid div:last-child{border-right:0}
.cnt{display:block;font-size:clamp(30px,4vw,46px);font-weight:800;color:var(--accent);text-shadow:0 0 30px rgba(255,90,31,.3)}
.band-grid span{color:var(--muted);font-size:12px;font-family:'Inter',sans-serif}

/* ---------- plans ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plan{position:relative;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:30px 24px;display:flex;flex-direction:column;transition:.3s}
.plan:hover{border-color:var(--line-2);transform:translateY(-4px)}
.plan.featured{border-color:var(--accent);box-shadow:0 30px 70px -34px rgba(255,90,31,.4)}
.flag{position:absolute;top:-11px;left:24px;background:var(--accent);color:#0a0a0a;font-size:11px;font-weight:700;padding:4px 10px;border-radius:4px}
.plan h3{font-size:22px;letter-spacing:.06em}
.pt{color:var(--dim);font-size:12px;margin:6px 0 0;min-height:34px}
.price{font-size:42px;font-weight:800;margin:12px 0 18px;display:flex;align-items:baseline;gap:2px}
.price span{font-size:22px;color:var(--muted)}.price small{font-size:13px;color:var(--muted);font-weight:500}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px;flex:1}
.plan li{font-size:12.5px;color:var(--muted)}
.plan .btn{margin-top:auto}

/* ---------- contact ---------- */
.contact-box{max-width:760px;margin:0 auto;border:1px solid var(--line-2);border-radius:12px;background:var(--panel);padding:clamp(28px,5vw,52px);text-align:center}
.contact-box .lead{color:var(--muted);font-family:'Inter',sans-serif;margin:14px 0 6px}
.form{margin-top:24px;text-align:left;display:flex;flex-direction:column;gap:13px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form label{display:flex;flex-direction:column;gap:7px;font-size:11px;letter-spacing:.08em;color:var(--muted)}
.form input,.form select,.form textarea{background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:12px 14px;color:var(--txt);font-family:var(--mono);font-size:14px;transition:.2s;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,90,31,.32)}
.form select option{background:var(--bg-2)}
.note{color:var(--green);text-align:center;font-size:13px;margin-top:4px}
.note.err{color:var(--red)}

/* direct contact buttons (rendered from CONFIG) */
.contact-methods{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0 2px}
.cm-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:6px;
  font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.03em;color:var(--txt);
  border:1px solid var(--line-2);background:rgba(255,255,255,.02);transition:.2s}
.cm-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.cm-primary{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}
.cm-primary:hover{background:var(--accent-2);color:#0a0a0a}

/* "sample data" badge on demo terminals */
.term-sample{margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;
  color:var(--accent);border:1px solid rgba(255,90,31,.45);border-radius:3px;padding:1px 7px}
.split-term .term-sample{margin-left:auto}

/* illustrative-stats disclaimer */
.band-note{max-width:var(--maxw);margin:14px auto 0;padding:0 clamp(16px,4vw,40px);
  font-size:11px;letter-spacing:.06em;color:var(--muted);text-align:center;font-family:var(--mono)}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);margin-top:50px;background:var(--bg-2)}
.f-top{max-width:var(--maxw);margin:0 auto;padding:30px clamp(16px,4vw,40px);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.f-top .brand-mark{color:var(--accent);display:inline-flex;vertical-align:middle;margin-right:3px}
.f-links{display:flex;gap:18px;font-size:12px}
.f-links a{color:var(--muted)}.f-links a:hover{color:var(--accent)}
.f-bot{max-width:var(--maxw);margin:0 auto;padding:14px clamp(16px,4vw,40px);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.f-bot .led{display:inline-block;margin-right:6px;vertical-align:middle}
.f-sys{max-width:var(--maxw);margin:0 auto;padding:14px clamp(16px,4vw,40px);border-top:1px solid var(--line);display:flex;gap:24px;flex-wrap:wrap;font-size:11px;letter-spacing:.1em;color:var(--green);font-family:var(--mono)}
.f-sys b{color:var(--txt)}

/* ---------- diagonal scrolling background ribbon ---------- */
#core{position:relative;overflow:hidden}
#core > *:not(.ribbon){position:relative;z-index:2}
.ribbon{position:absolute;left:-12%;width:124%;top:46%;z-index:0;pointer-events:none;
  transform:rotate(-11deg);overflow:hidden;padding:16px 0;opacity:.85;
  background:linear-gradient(90deg,transparent,rgba(255,90,31,.10) 25%,rgba(54,233,245,.10) 75%,transparent);
  border-top:1px solid rgba(255,90,31,.30);border-bottom:1px solid rgba(54,233,245,.24);
  box-shadow:0 0 40px -8px rgba(255,90,31,.18)}
.ribbon-track{display:flex;width:max-content;animation:ribbonScroll 36s linear infinite}
.ribbon-run{font-family:var(--mono);font-weight:700;font-size:20px;letter-spacing:.32em;white-space:nowrap;
  color:rgba(232,234,237,.16);padding-right:24px}
@keyframes ribbonScroll{to{transform:translateX(-50%)}}

/* ---------- HUD corner frames + machine accents ---------- */
.terminal,.split-term,.contact-box,.plan,.step{position:relative}
.terminal::before,.split-term::before,.contact-box::before,.plan::before,.step::before{
  content:"";position:absolute;inset:7px;pointer-events:none;z-index:3;opacity:.4;
  background:
    linear-gradient(var(--accent),var(--accent)) left top/14px 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left top/1.5px 14px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right top/14px 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right top/1.5px 14px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left bottom/14px 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left bottom/1.5px 14px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right bottom/14px 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right bottom/1.5px 14px no-repeat}
.plan.featured::before{opacity:.7}
/* scanning glow sweep on module hover */
.mod{overflow:hidden}
.mod::before{content:"";position:absolute;left:0;right:0;top:0;height:46%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,90,31,0),rgba(255,90,31,.16),rgba(255,90,31,0));
  transform:translateY(-130%);transition:transform .75s cubic-bezier(.4,0,.2,1)}
.mod:hover::before{transform:translateY(330%)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .modgrid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:30px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .band-grid{grid-template-columns:repeat(2,1fr)}
  .band-grid div:nth-child(2){border-right:0}
  .band-grid div:nth-child(1),.band-grid div:nth-child(2){border-bottom:1px solid var(--line)}
  .plans{grid-template-columns:1fr;max-width:430px;margin:0 auto}
  .term-readout{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .sb-coord{display:none}
  .sb-id{display:none}
  .statusbar{gap:12px;font-size:10px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
  .hero{padding-top:120px}
  .hero-meta{display:none}
  .f-links{gap:8px;flex-wrap:wrap}
  .f-links a{padding:8px 2px;min-height:44px;display:inline-flex;align-items:center}
  .nav-links{position:fixed;inset:96px 12px auto 12px;flex-direction:column;align-items:stretch;gap:4px;background:rgba(13,15,17,.98);border:1px solid var(--line-2);border-radius:8px;padding:12px;transform:translateY(-10px);opacity:0;pointer-events:none;transition:.3s}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:11px}
  .nav-toggle{display:flex}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .steps{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .f-top{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.boot{display:none}}