@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg:#05070a; --panel:#0a0e14; --line:rgba(150,180,210,.14);
  --text:#edf5fb; --muted:#7d8b99; --cyan:#54e7ff; --violet:#9a70ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 42%,rgba(65,160,255,.08),transparent 35%),radial-gradient(circle at 75% 65%,rgba(130,70,255,.06),transparent 30%);z-index:-1}
.map-shell{min-height:100vh}
.map-header{height:76px;padding:0 5vw;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:rgba(5,7,10,.78);backdrop-filter:blur(18px);z-index:20}
.back,.brand,.status{font:700 11px "Space Mono",monospace;letter-spacing:.14em;text-decoration:none;color:var(--text)}
.back{color:var(--cyan);transition:.2s}.back:hover{letter-spacing:.2em}
.status{color:#8ea0ad}.status span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#65f2c0;box-shadow:0 0 12px #65f2c0;margin-right:8px}
.intro{max-width:1100px;margin:0 auto;padding:110px 6vw 55px}
.eyebrow{font:700 10px "Space Mono",monospace;letter-spacing:.18em;color:var(--cyan)}
.intro h1{font-size:clamp(50px,9vw,125px);line-height:.86;margin:20px 0 28px;letter-spacing:-.07em}
.intro h1 em{font-style:normal;background:linear-gradient(90deg,var(--text),var(--cyan),#b99cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro p{max-width:650px;color:var(--muted);line-height:1.75;font-size:15px}

.system-map{height:720px;max-width:1200px;margin:0 auto;position:relative;overflow:hidden;border:1px solid var(--line);background:#06090d}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(100,160,200,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(100,160,200,.055) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent)}
.map-grid:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,rgba(65,210,255,.13),transparent 25%)}
.scanline{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.35;animation:scan 6s linear infinite}
@keyframes scan{from{top:-5%}to{top:105%}}
.connections{position:absolute;inset:0;width:100%;height:100%}
.connections path{fill:none;stroke:rgba(84,231,255,.22);stroke-width:1.4;stroke-dasharray:5 9;animation:flow 5s linear infinite}
@keyframes flow{to{stroke-dashoffset:-70}}
.core{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);width:250px;height:250px;border:1px solid rgba(84,231,255,.35);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle,rgba(30,70,95,.32),rgba(5,8,12,.96) 62%);box-shadow:0 0 80px rgba(84,231,255,.1),inset 0 0 40px rgba(120,80,255,.07)}
.core strong{font-size:16px;line-height:1.15;letter-spacing:.04em}.core small{font:8px "Space Mono",monospace;color:var(--muted);letter-spacing:.16em;margin-top:13px}.core-label{font:700 9px "Space Mono",monospace;color:var(--cyan);letter-spacing:.2em;margin-bottom:12px}
.core-ring{position:absolute;border:1px solid rgba(154,112,255,.22);border-radius:50%}.r1{inset:16px}.r2{inset:34px;border-color:rgba(84,231,255,.16)}
.core-orbit{position:absolute;border:1px dashed rgba(84,231,255,.15);border-radius:50%;animation:spin 14s linear infinite}.o1{width:310px;height:105px;transform:rotate(28deg)}.o2{width:105px;height:310px;transform:rotate(-28deg);animation-direction:reverse}
@keyframes spin{to{transform:rotate(388deg)}}

.node{position:absolute;width:170px;min-height:78px;padding:14px 16px;text-align:left;background:rgba(8,13,19,.9);border:1px solid rgba(130,170,200,.2);color:var(--text);cursor:pointer;transition:.25s;clip-path:polygon(0 0,92% 0,100% 22%,100% 100%,8% 100%,0 78%)}
.node:hover,.node.active{border-color:var(--cyan);box-shadow:0 0 28px rgba(84,231,255,.13);transform:translateY(-4px)}
.node span{font:700 9px "Space Mono",monospace;color:var(--cyan);display:block;margin-bottom:7px}.node b{font:800 13px Inter,sans-serif;letter-spacing:.05em;display:block}.node small{font:9px "Space Mono",monospace;color:var(--muted);display:block;margin-top:5px}
.node-01{left:7%;top:37%}.node-02{left:23%;top:17%}.node-03{left:39%;top:8%}.node-04{right:39%;top:8%}.node-05{right:23%;top:17%}.node-06{right:7%;top:37%}.node-07{left:50%;bottom:5%;transform:translateX(-50%)}.node-07:hover,.node-07.active{transform:translate(-50%,-4px)}

.map-hud{position:absolute;font:8px "Space Mono",monospace;color:#536673;letter-spacing:.12em}.hud-a{top:20px;left:20px}.hud-b{top:20px;right:20px;color:var(--cyan)}.hud-c{bottom:20px;left:20px}

.detail-panel{max-width:1200px;margin:24px auto 0;border:1px solid var(--line);background:linear-gradient(110deg,#080c11,#0a0d14);max-height:0;overflow:hidden;opacity:0;transition:max-height .55s ease,opacity .35s ease}
.detail-panel.open{max-height:500px;opacity:1}
.detail-top{display:flex;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line);font:9px "Space Mono",monospace;color:var(--cyan)}
.detail-top button{background:none;border:0;color:var(--muted);font-size:25px;cursor:pointer}
.detail-content{display:grid;grid-template-columns:180px 1fr;gap:25px;padding:35px}
.detail-index{font:800 60px "Space Mono",monospace;color:rgba(84,231,255,.2)}
.detail-content h2{font-size:clamp(25px,4vw,48px);margin:10px 0 15px;letter-spacing:-.04em}.detail-content p{max-width:700px;color:var(--muted);line-height:1.7}
.detail-grid{display:flex;gap:60px;margin-top:25px}.detail-grid label{display:block;font:8px "Space Mono",monospace;color:#596b78;margin-bottom:8px}.detail-grid strong{font:11px "Space Mono",monospace;color:var(--text)}
.signal-demo{height:58px;margin-top:28px;border-top:1px solid rgba(84,231,255,.14);border-bottom:1px solid rgba(84,231,255,.14);background:linear-gradient(90deg,transparent,rgba(84,231,255,.03),transparent);position:relative;overflow:hidden}.signal-demo:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 49%,rgba(84,231,255,.6) 50%,transparent 51%,transparent 61%,rgba(154,112,255,.55) 62%,transparent 63%);background-size:90px 100%;animation:signal 2.8s linear infinite}
@keyframes signal{to{background-position:90px 0}}

.foundation,.future{max-width:1200px;margin:0 auto;padding:120px 6vw}
.foundation h2{font-size:clamp(35px,6vw,75px);line-height:.95;letter-spacing:-.055em;margin:18px 0 25px}.foundation p{max-width:760px;color:var(--muted);line-height:1.8}
.future{border-top:1px solid var(--line)}.future-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:45px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.future-grid div{padding:35px 20px;font:700 11px "Space Mono",monospace;letter-spacing:.08em;border-right:1px solid var(--line);line-height:1.6}.future-grid div:last-child{border:0}.disclaimer{margin-top:35px;color:#566672;font:9px "Space Mono",monospace;line-height:1.8;max-width:800px}

@media(max-width:800px){
  .map-header{height:65px;padding:0 18px}.brand{display:none}.status{font-size:8px}
  .intro{padding:75px 24px 35px}.intro h1{font-size:58px}
  .system-map{height:760px;margin:0 12px}
  .connections{opacity:.65}
  .core{width:190px;height:190px;top:50%}.core strong{font-size:12px}.core-orbit{display:none}
  .node{width:132px;min-height:70px;padding:11px}.node b{font-size:11px}.node small{font-size:7px}
  .node-01{left:3%;top:27%}.node-02{left:3%;top:43%}.node-03{left:3%;top:59%}
  .node-04{right:3%;top:27%}.node-05{right:3%;top:43%}.node-06{right:3%;top:59%}
  .node-07{bottom:5%}
  .hud-b{right:10px}.detail-content{grid-template-columns:1fr;padding:25px}.detail-index{display:none}.detail-grid{gap:25px;flex-wrap:wrap}
  .foundation,.future{padding:80px 24px}.future-grid{grid-template-columns:1fr 1fr}.future-grid div:nth-child(2){border-right:0}.future-grid div{border-bottom:1px solid var(--line)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}