/* Tactical visual layer. All instrumentation is illustrative, never live hardware data. */
:root { --green:#91ff57; --cyan:#5ee7ef; --bg:#070c0d; --panel:#101b1e; --line:#29403b; }
body { background:var(--bg); }
.ambient-grid { position:fixed; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,transparent 49.9%,#75ffb406 50%,transparent 50.1%),radial-gradient(ellipse at 70% 15%,#2e8b7130,transparent 55%); background-size:80px 80px,100% 100%; }
.scroll-progress { position:fixed; top:0; left:0; width:100%; height:2px; background:var(--green); transform:scaleX(var(--scroll,0)); transform-origin:left; box-shadow:0 0 15px var(--green); z-index:20; pointer-events:none; }
.system-bar { height:36px; display:flex; align-items:center; justify-content:space-between; gap:16px; font:8px Consolas,monospace; letter-spacing:1.4px; color:#94aaa3; border-bottom:1px solid var(--line); }
.system-bar b { color:var(--green); padding-left:12px; }
.system-status { margin-left:auto; }
.motion-toggle { border:0; background:transparent; color:#c2d8ce; font:9px Consolas,monospace; padding:8px 0 8px 16px; border-left:1px solid var(--line); }
.motion-toggle span { color:var(--green); margin-left:10px; }
[hidden] { display:none!important; }
.header { min-height:92px; }
.brand { letter-spacing:-1px; }
.brand-mark { clip-path:polygon(0 0,100% 0,100% 75%,75% 100%,0 100%); box-shadow:0 0 30px #91ff5733; }
.nav-play { border-color:#6c9a65; position:relative; background:#91ff5708; }
.hero { position:relative; gap:35px; padding-block:55px 70px; min-height:740px; }
.hero-copy { position:relative; z-index:2; }
.hero h1 { position:relative; text-transform:uppercase; font-size:clamp(58px,6.4vw,95px); font-weight:900; letter-spacing:-5px; line-height:1.02; margin:30px 0; }
.hero-outline { color:transparent; -webkit-text-stroke:1px #dcefe5; }
.hero h1 em { color:var(--green); text-shadow:0 0 38px #91ff5725; }
.title-coordinate { display:block; font:8px Consolas,monospace; letter-spacing:3px; color:var(--cyan); margin-top:15px; }
.hero .eyebrow { color:#b2c9bd; font-size:10px; }
.hero .lead { color:#aebeb8; max-width:430px; font-size:16px; }
.button { position:relative; overflow:hidden; text-transform:uppercase; font:700 11px Consolas,monospace; letter-spacing:.5px; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); }
.button::before { content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 20%,#ffffff66 45%,transparent 70%); transform:translateX(-120%); transition:transform .6s; pointer-events:none; }
.button:hover::before { transform:translateX(120%); }
.button:hover { box-shadow:0 0 35px #91ff5730; }
.hero-instrument { isolation:isolate; min-height:600px; border:0; background:radial-gradient(ellipse at center,#0f3029aa,transparent 70%); perspective:1000px; }
.hero-instrument::before { content:''; position:absolute; inset:0; border:1px solid #426854; clip-path:polygon(0 0,24% 0,24% 1px,76% 1px,76% 0,100% 0,100% 28%,calc(100% - 1px) 28%,calc(100% - 1px) 72%,100% 72%,100% 100%,76% 100%,76% calc(100% - 1px),24% calc(100% - 1px),24% 100%,0 100%,0 72%,1px 72%,1px 28%,0 28%); pointer-events:none; }
.hero-instrument::after { content:''; position:absolute; inset:8%; background:repeating-linear-gradient(0deg,transparent 0 4px,#96ff8706 4px 5px); pointer-events:none; z-index:4; opacity:.6; }
.radar { position:absolute; width:106%; aspect-ratio:1; max-height:100%; left:-3%; top:50%; transform:translateY(-50%); border-radius:50%; background:repeating-conic-gradient(from 0deg,#84ba7d55 0deg .35deg,transparent .35deg 10deg); border:1px solid #55896c55; opacity:.65; pointer-events:none; z-index:-1; }
.radar::before { content:''; position:absolute; inset:5%; border:1px solid #537c6755; border-radius:50%; background:repeating-linear-gradient(0deg,transparent 0 39px,#5a9a7e20 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,#5a9a7e20 39px 40px),#07100ee8; }
.radar-ring { position:absolute; border:1px dashed #8dea9b66; border-radius:50%; }
.ring-outer { inset:12%; animation:orbit 90s linear infinite; }
.ring-inner { inset:28%; border-style:solid; border-color:#70c49455; }
.radar-sweep { position:absolute; inset:6%; border-radius:50%; background:conic-gradient(from 0deg,transparent 0deg 280deg,#91ff5705 285deg,#91ff5733 359deg,transparent 360deg); animation:orbit 12s linear infinite; }
.radar-blip { position:absolute; width:5px; height:5px; background:var(--green); border-radius:50%; box-shadow:0 0 12px var(--green); animation:blip 4s ease-in-out infinite; }
.blip-one { left:22%; top:28%; }.blip-two { right:13%; bottom:30%; animation-delay:2s; }
.hero-instrument .phone { position:relative; z-index:2; width:248px; border-color:#5c7a6c; border-width:3px; border-radius:26px; transform:translate3d(var(--px,0px),var(--py,0px),0) rotateY(-12deg) rotateZ(7deg); box-shadow:-15px 25px 0 -17px #91ff57,0 25px 60px #000a,0 0 70px #72ff5a13; animation:phone-drift 8s ease-in-out infinite; }
.instrument-head { z-index:5; inset:15px 12px auto; color:#c2d7c7; font-size:8px; }
.hud-axis { position:absolute; left:10px; top:90px; bottom:95px; display:flex; flex-direction:column; justify-content:space-between; color:#7c9e8c; font:7px Consolas,monospace; }
.hud-axis span::after { content:'—'; margin-left:8px; color:#4c7660; }
.crosshair { z-index:5; }.crosshair::before,.crosshair::after { background:var(--green); box-shadow:0 0 7px #91ff5744; }
.measurement-tag { z-index:5; bottom:70px; left:-24px; background:#0b1917ed; border-color:#74a867; border-left:3px solid var(--green); transform:translate3d(calc(var(--px,0px) * -.5),0,0) rotate(-3deg); backdrop-filter:blur(12px); }
.measurement-tag strong { color:var(--green); font-family:Consolas,monospace; }
.hud-reticle { position:absolute; top:82px; right:0; z-index:3; color:var(--cyan); font:7px Consolas,monospace; letter-spacing:1px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.hud-reticle i { display:block; height:54px; width:54px; border:1px dashed #5ee7ef88; border-radius:50%; position:relative; animation:orbit 24s linear infinite reverse; }
.hud-reticle i::after { content:'+'; position:absolute; inset:0; display:grid; place-items:center; font:25px monospace; }
.hud-reticle small { font-size:7px; color:#9cb8ac; }
.hud-wave { position:absolute; right:14px; bottom:58px; z-index:5; width:120px; overflow:hidden; color:#9fbdaf; font:7px Consolas,monospace; letter-spacing:1px; }
.hud-wave svg { display:block; width:160px; height:32px; margin-top:8px; }
.hud-wave path { stroke:var(--cyan); stroke-width:1; fill:none; stroke-dasharray:35 6; animation:signal-flow 3s linear infinite; }
.instrument-caption { z-index:5; font-size:7px; }
.telemetry-band { overflow:hidden; border-block:1px solid #3b5944; background:#91ff5708; padding:13px 0; }
.telemetry-track { display:flex; align-items:center; width:max-content; gap:44px; color:#c1d2c5; font:9px Consolas,monospace; letter-spacing:2px; animation:telemetry-flow 42s linear infinite; }
.telemetry-track b { color:var(--green); font-size:16px; font-weight:400; }
.spec-strip { border-top:0; background:#090f10cc; }
.section-heading h2 { text-transform:uppercase; font-weight:800; font-size:clamp(40px,4.2vw,64px); letter-spacing:-2.5px; }
.section-heading .eyebrow::before { content:'// '; color:var(--green); }
.series-panel,.app-screen { position:relative; border-color:#365347; box-shadow:inset 0 0 55px #91ff5704; }
.series-panel::before,.app-screen::before { content:''; position:absolute; top:-1px; left:-1px; width:32px; height:4px; background:var(--green); box-shadow:0 0 15px #91ff5744; }
.series-reading p>strong { font-family:Consolas,monospace; font-size:70px; letter-spacing:-5px; text-shadow:0 0 30px #91ff5722; }
.chart-line { stroke:var(--green); filter:drop-shadow(0 0 3px #91ff5755); }
#shot-dot { filter:drop-shadow(0 0 5px #91ff57); transition:cx .45s ease,cy .45s ease; }
.replay-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; color:#9cb4a8; font:8px Consolas,monospace; letter-spacing:1px; }
.replay-controls .signal { width:4px; height:4px; }
.replay-controls button { border:1px solid #436448; background:#91ff5708; color:var(--green); padding:10px 12px; font:10px Consolas,monospace; }
.replay-controls button:hover { background:#91ff571a; }
.series-panel.is-replaying { border-color:var(--green); }
.series-panel.is-replaying .chart-line { stroke-dasharray:1200; animation:trace-line 2s ease both; }
.shot-controls button { min-height:40px; transition:background .2s,border-color .2s; }
.app-section { background:linear-gradient(120deg,#101a1acc,#080f10),repeating-linear-gradient(90deg,transparent 0 79px,#91ff570a 79px 80px); }
.app-screen { overflow:hidden; }
.app-screen::after { content:''; position:absolute; height:2px; left:0; right:0; top:8%; background:linear-gradient(90deg,transparent,#91ff5799,transparent); box-shadow:0 -12px 35px #91ff5715; pointer-events:none; animation:screen-scan 9s ease-in-out infinite; }
.feature { position:relative; transition:padding .3s,color .3s,background .3s; }
.feature[aria-pressed=true] { padding-left:18px; background:linear-gradient(90deg,#91ff570a,transparent); }
.feature[aria-pressed=true]::before { content:''; position:absolute; top:26px; bottom:26px; left:0; width:2px; background:var(--green); }
.feature:hover strong { color:var(--cyan); }
.connection-wire { position:relative; color:var(--cyan); text-shadow:0 0 12px #5ee7ef77; animation:link-pulse 3s ease-in-out infinite; }
.download-section { position:relative; overflow:hidden; background:radial-gradient(ellipse at 80% 50%,#21493b,#10231d 55%,#0b1613); color:var(--ink); border-block:1px solid #52714a; }
.download-section::after { content:''; position:absolute; width:500px; height:500px; right:-100px; top:50%; margin-top:-250px; border:1px dashed #91ff5755; border-radius:50%; box-shadow:0 0 0 55px #91ff5705,0 0 0 110px #91ff5704; animation:orbit 80s linear infinite; pointer-events:none; }
.download-inner { z-index:1; }.download-inner h2 { text-transform:uppercase; font-weight:900; font-size:clamp(60px,7vw,100px); letter-spacing:-4px; }.download-inner em { color:var(--green); }
.download-inner .eyebrow,.download-inner .fine { color:#b2c7b8; }.download-inner .button { background:var(--green); color:#091a0e; border-color:var(--green); }.download-inner .button:hover { background:#b0ff84; }
.download-coordinate { color:#9ac8aa; font-size:16px; }
.is-entering { animation:panel-enter .65s ease both; }
.effects-paused *,.effects-paused *::before,.effects-paused *::after { animation-play-state:paused!important; }
.effects-paused #shot-dot { transition:none; }
.effects-paused .hero-instrument .phone { transform:rotateY(-12deg) rotateZ(7deg); }
@keyframes orbit { to { transform:rotate(360deg); } }
@keyframes blip { 0%,100% { opacity:.25; } 50% { opacity:1; box-shadow:0 0 18px var(--green); } }
@keyframes phone-drift { 0%,100% { translate:0 0; } 50% { translate:0 -10px; } }
@keyframes signal-flow { to { stroke-dashoffset:-82; } }
@keyframes telemetry-flow { to { transform:translateX(-50%); } }
@keyframes screen-scan { 0%,100% { top:8%; opacity:0; } 12%,88% { opacity:.6; } 50% { top:88%; } }
@keyframes link-pulse { 0%,100% { opacity:.55; } 50% { opacity:1; } }
@keyframes trace-line { from { stroke-dashoffset:1200; } to { stroke-dashoffset:0; } }
@keyframes panel-enter { from { opacity:.2; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1050px) { .hero h1 { font-size:64px; letter-spacing:-4px; }.hero-instrument .phone { width:220px; }.hud-reticle { right:-5px; font-size:6px; }.hud-wave { width:90px; }.hero-instrument { min-height:570px; }.series-reading p>strong { font-size:58px; } }
@media(max-width:760px) {
    .system-bar { height:auto; min-height:36px; font-size:7px; letter-spacing:.5px; gap:8px; }.system-status { display:none; }.motion-toggle { font-size:8px; padding-left:10px; }.system-bar b { padding-left:4px; }
    .header { min-height:100px; }.hero { gap:38px; padding-block:40px 50px; min-height:0; }.hero h1 { font-size:clamp(49px,11.8vw,83px); letter-spacing:-3px; }.hero .eyebrow { font-size:8px; }.hero .lead { font-size:14px; }
    .hero-instrument { min-height:530px; margin-inline:0; }.hero-instrument .phone { width:220px; }.radar { width:100%; left:0; }.measurement-tag { left:-6px; bottom:65px; padding:12px 16px; }.measurement-tag strong { font-size:34px; }.hud-reticle { right:0; top:60px; }.hud-reticle i { width:40px; height:40px; }.hud-wave { right:8px; width:85px; bottom:52px; }.hud-axis { left:4px; font-size:6px; }.instrument-head { font-size:6px; letter-spacing:.5px; inset-inline:6px; }.instrument-caption { font-size:6px; right:6px; }
    .telemetry-track { gap:28px; font-size:8px; }.section-heading h2 { font-size:42px; letter-spacing:-2px; }.series-reading p>strong { font-size:60px; }.feature { gap:16px; }.feature[aria-pressed=true] { padding-left:12px; }.feature strong { font-size:20px; }.replay-controls { font-size:7px; letter-spacing:.3px; }.replay-controls button { font-size:9px; padding:10px; }.download-inner h2 { font-size:57px; letter-spacing:-3px; }.download-coordinate { font-size:10px; }.download-section::after { right:-350px; }.app-screen .phone { width:min(250px,100%); }
}
@media(max-width:760px) { .analysis,.connection,.app-explorer { grid-template-columns:minmax(0,1fr); }.section-heading h2 { overflow-wrap:anywhere; }.download-inner h2 { font-size:clamp(34px,8vw,57px); letter-spacing:-2px; } }
@media(max-width:380px) { .hero h1 { font-size:46px; letter-spacing:-2.7px; }.hero-instrument .phone { width:190px; }.hero-instrument { min-height:495px; }.hud-reticle span { display:none; }.measurement-tag strong { font-size:30px; }.hud-wave { width:65px; }.section-heading h2 { font-size:32px; }.series-reading p>strong { font-size:52px; }.replay-controls { gap:6px; }.replay-controls .signal { margin-right:3px; } }
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
    .hero-instrument .phone { translate:0 0; transform:rotateZ(7deg); }.app-screen::after { display:none; }.radar-sweep { opacity:.35; }
}