:root{
  --bg:#0d0c0a; --line:#2a2823;
  --cyan:#5CE1E6; --amber:#f2b52c; --red:#ff4d6d; --green:#3ddc97; --violet:#8a7fd6;
  --text:#eee9de; --muted:#8f8a7d;
  --mono:'Share Tech Mono',ui-monospace,monospace;
  --disp:'Orbitron','Share Tech Mono',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;line-height:1.65;min-height:100vh;display:flex;flex-direction:column}
main{flex:1;width:100%}
a{color:var(--amber);text-underline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
nav{border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-family:var(--disp);font-weight:700;letter-spacing:.12em;color:var(--text);text-decoration:none;font-size:1.05rem}
.logo b{color:var(--amber)}

/* hero */
.hero{padding:72px 0 96px;text-align:center}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(2.3rem,6.4vw,4.6rem);line-height:1.12;letter-spacing:.01em}
h1 em{display:block;font-style:normal;color:var(--amber);text-shadow:0 0 28px rgba(242,181,44,.35)}
.cta{display:inline-flex;align-items:center;gap:.8em;margin-top:34px;padding:16px 26px;border-radius:12px;
  font-family:var(--disp);font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:#1a1200;
  background:linear-gradient(180deg,#ffd061,#e0a01c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.6),0 0 28px rgba(242,181,44,.22)}
.cta svg{width:1.3em;height:1.3em;flex:none}
.cta:hover{filter:brightness(1.08)}
.cta:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.6)}
.cta:focus-visible{outline:2px solid var(--text);outline-offset:3px}

footer{border-top:1px solid var(--line);padding:32px 0;color:var(--muted);font-size:.85rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:var(--muted)}

/* device: the report screen of the app, landscape. 1em = 1/86 of the stage width. */
.stage{container-type:inline-size;max-width:940px;margin:56px auto 0;text-align:left}
.phone{font-size:calc(100cqw / 86);background:#040507;border-radius:4.6em;padding:1em;border:1px solid #2b2e38;
  box-shadow:0 4em 9em rgba(0,0,0,.65),inset 0 0 0 .25em #0c0d11}
.deck{position:relative;overflow:hidden;border-radius:3.8em;padding:1em 1.3em 1.1em;display:grid;gap:.9em;
  background:linear-gradient(180deg,#262A31,#0E1014)}
.deck::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 .05em,transparent .05em .15em)}
.deck>*{position:relative}

.plate{display:flex;align-items:center;gap:1em;height:2.2em;padding:0 .4em;position:relative}
.plate::after{content:"";position:absolute;left:0;right:0;bottom:-.5em;height:.2em;border-top:.1em solid rgba(0,0,0,.6);border-bottom:.1em solid rgba(255,255,255,.08)}
.brand{font-family:'Inter',sans-serif;font-weight:800;font-size:1.15em;letter-spacing:.2em;color:#C8CEDA;text-shadow:0 .1em 0 rgba(0,0,0,.6)}
.n1{font-family:var(--mono);font-weight:700;font-size:.95em;color:#98A1B0;border:.1em solid #98A1B0;border-radius:.25em;padding:.05em .5em}
.eng{font-weight:600;font-size:.85em;letter-spacing:.12em;text-transform:uppercase;color:#98A1B0;text-shadow:0 .06em 0 rgba(255,255,255,.14)}
.sp{flex:1}
.led{display:inline-block;width:.85em;height:.85em;border-radius:50%;flex:none;border:.1em solid rgba(0,0,0,.65);
  background:radial-gradient(circle at 28% 28%,rgba(255,255,255,.85),var(--c) 85%);box-shadow:0 0 .45em var(--c)}
.led.off{background:#1A1D22;box-shadow:none;--c:#1A1D22}

/* recessed LCD glass: bezel, scan lines, top sheen */
.glass{display:flex;flex-direction:column;padding:.25em;border-radius:1.1em;background:linear-gradient(180deg,rgba(0,0,0,.9),#2E333B)}
.gl{position:relative;flex:1;min-height:0;display:flex;border-radius:.85em;overflow:hidden;
  background:linear-gradient(180deg,#071015,#03070A);box-shadow:inset 0 0 0 .15em rgba(0,0,0,.9)}
.gl::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 .1em,transparent .1em .3em)}
.gl::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 50%)}

.tiles{padding:.7em .2em}
.tile{flex:1;padding:0 .8em;position:relative}
.tile+.tile::before{content:"";position:absolute;left:0;top:.4em;bottom:.4em;width:.1em;background:rgba(92,225,230,.15)}
.tile .v{display:flex;align-items:flex-end;gap:.35em;height:3.4em}
.tile .v b{font-family:var(--mono);font-size:1.05em;font-weight:700;opacity:.8;padding-bottom:.1em}
.tile .lb{font-family:var(--mono);font-size:.78em;letter-spacing:.06em;text-transform:uppercase;color:rgba(92,225,230,.75);margin-top:.5em}
.seg{height:100%;width:auto;display:block;overflow:visible;filter:drop-shadow(0 0 .3em currentColor)}
.v>span{display:block;height:100%}

.mid{display:grid;grid-template-columns:1fr 25em;gap:.9em;height:20em}
.disp{flex-direction:column}
.bar{display:flex;justify-content:space-between;align-items:center;height:2em;padding:0 .9em;
  font-family:var(--mono);font-weight:700;font-size:.95em;color:var(--cyan);background:rgba(92,225,230,.10)}
.stf{flex:1;min-height:0;padding:.6em .8em 0}
.stf svg{display:block;width:100%;height:100%}
.nt{filter:drop-shadow(0 0 3px currentColor)}
.legend{display:flex;flex-wrap:wrap;gap:.5em 1.3em;padding:.4em .9em .8em;font-family:var(--mono);font-weight:700;font-size:.8em;letter-spacing:.04em;text-transform:uppercase;color:rgba(92,225,230,.8)}
.legend span{display:inline-flex;align-items:center;gap:.6em}
.legend .led{width:.8em;height:.8em}
.ring{display:inline-block;width:.8em;height:.8em;border-radius:50%;border:.1em solid #48536E}
.ring.dash{border:.15em dashed #FF4D6D}
.rows{padding:.7em;display:grid;gap:.25em;align-content:start}
.row{display:flex;align-items:center;gap:.8em;min-height:3.6em;padding:0 .8em;border:.1em solid transparent;border-radius:.6em;font-size:.95em;color:#C8CEDA}
.row b{width:1.6em;font-family:var(--mono);font-weight:700;font-size:1.05em;color:var(--cyan)}
.row.sel{background:rgba(92,225,230,.12);border-color:var(--cyan)}
.row span{white-space:nowrap}
.sq{display:inline-block;width:.9em;height:.9em;border-radius:.3em;border:.2em dashed #FF4D6D;flex:none}

.bottom{display:grid;grid-template-columns:7.5em 1fr 13em 13em;gap:.9em;align-items:stretch}
.key{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25em;height:4.6em;border-radius:.9em;
  background:linear-gradient(180deg,#3C414B,#1B1E24);color:#C8CEDA;
  box-shadow:inset 0 .1em 0 rgba(255,255,255,.3),inset 0 -.1em 0 rgba(0,0,0,.65),0 .2em .35em rgba(0,0,0,.7)}
.key svg{width:1.7em;height:1.7em;filter:drop-shadow(0 .08em 0 rgba(0,0,0,.5))}
.key span{font-weight:800;font-size:.8em;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 .1em 0 rgba(0,0,0,.5)}
.key .led{position:absolute;top:.45em;right:.45em;width:.55em;height:.55em}
.key.rec{background:linear-gradient(180deg,#FF5D7A,#E8344F);color:#fff}
.lcd{flex-direction:column;justify-content:center;gap:.7em;padding:.6em 1em;color:var(--cyan)}
.clock{height:1.6em;color:var(--cyan)}
.clock .seg{height:1.6em}
.track{height:.4em;border-radius:1em;background:rgba(255,255,255,.08);overflow:hidden}
.track i{display:block;height:100%;width:42%;background:var(--cyan)}

.shot{display:none;width:min(100%,300px);height:auto;margin:40px auto 0;border-radius:14% / 6.4%;
  border:1px solid #2b2e38;box-shadow:0 3em 7em rgba(0,0,0,.65)}

/* legal pages */
.doc{padding:64px 24px;max-width:760px}
.doc h1{font-size:2rem;margin:0 0 12px;max-width:none}
.doc h2{font-family:var(--disp);font-weight:700;font-size:1.15rem;margin:32px 0 8px}
.doc p,.doc li{color:var(--muted);margin-bottom:8px}
.doc ul{padding-left:20px}

@media(max-width:480px){
  .cta{display:flex;justify-content:center;font-size:.68rem;letter-spacing:.05em;padding:16px 12px;gap:.6em;white-space:nowrap}
}
@media(max-width:820px){
  .hero{padding:48px 0 64px}
  .stage{margin-top:40px}
}
@media(max-width:640px){
  .stage{display:none}
  .shot{display:block}
}