:root{
  --bg:#0A0A0A;
  --bg-2:#001F3F;
  --bg-3:#2A0A2A;
  --fg:#E6F2F2;
  --muted:#98A9B3;
  --line:#233A52;
  --neon-cyan:#00FFFF;
  --neon-pink:#FF00FF;
  --neon-green:#39FF14;
  --neon-yellow:#FFFF00;
  --shadow:0 0 20px rgba(0,255,255,.25),0 0 40px rgba(0,255,255,.15);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 70% -20%, rgba(0,255,255,.08), transparent 60%),
    radial-gradient(900px 500px at 10% 20%, rgba(255,0,255,.06), transparent 60%),
    linear-gradient(180deg, #0A0A0A 0%, #05070B 100%);
  color:var(--fg);
  font-family:'Source Code Pro', monospace;
  letter-spacing:.2px;
  overflow-x:hidden;
}

.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:#000;color:#fff;padding:8px 12px;z-index:10000}

.hud-header{
  position:fixed;top:0;left:0;right:0;height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(10,10,10,.85), rgba(10,10,10,.35));
  border-bottom:1px solid rgba(0,255,255,.1);
  z-index:999;
}
.brand{font-family:'Orbitron', sans-serif; letter-spacing:2px}
.brand span{color:var(--neon-cyan)}
.hud-nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.hud-nav a{color:var(--fg);text-decoration:none;position:relative}
.hud-nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--neon-cyan);transition:.3s}
.hud-nav a:hover::after{width:100%}
.hud-toggle{display:none;background:none;border:1px solid var(--line);color:var(--fg);padding:6px 10px}

.sfx-toggle{
  background:none;border:1px solid var(--line);color:var(--muted);padding:6px 10px;border-radius:4px
}
.sfx-toggle[aria-pressed="true"]{color:var(--neon-yellow);box-shadow:0 0 12px rgba(255,255,0,.3)}

.section{min-height:100vh;padding:100px 24px 80px;position:relative}
.hero{display:grid;place-items:center;text-align:center}
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 60%, transparent 100%);
  pointer-events:none;
}
.hero-inner{z-index:1;max-width:960px;margin-top:40px}
.glitch{
  font-family:'Orbitron', sans-serif;font-size:clamp(28px,6vw,68px);
  line-height:1.1;position:relative;display:inline-block;text-transform:none;
  text-shadow: 0 0 6px rgba(0,255,255,.4);
}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;mix-blend-mode:screen;clip-path: inset(0 0 0 0);
}
.glitch::before{transform:translate(-2px,-1px);color:var(--neon-pink);text-shadow:0 0 12px rgba(255,0,255,.5)}
.glitch::after{transform:translate(2px,1px);color:var(--neon-cyan);text-shadow:0 0 12px rgba(0,255,255,.5)}
.lead{color:var(--muted);margin:16px 0 32px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border:1px solid rgba(0,255,255,.35);color:var(--fg);text-decoration:none;border-radius:6px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;overflow:hidden
}
.btn-primary{background:rgba(0,255,255,.08);box-shadow: var(--shadow)}
.btn-ghost{background:transparent}
.btn:hover{transform:translateY(-1px);border-color:var(--neon-cyan);box-shadow:0 0 24px rgba(0,255,255,.35)}
.btn[data-scan="true"]::after{
  content:"";position:absolute;left:-100%;top:0;width:60%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform:skewX(-20deg)
}
.btn:hover[data-scan="true"]::after{animation:scan 0.9s}
@keyframes scan{to{left:160%}}

.hud-line{
  position:absolute; left:10%; right:10%; bottom:18%;
  height:1px;background:linear-gradient(90deg, transparent, rgba(0,255,255,.5), transparent);
}
.hud-kpi{position:absolute; bottom:14%; left:50%; transform:translateX(-50%); display:flex; gap:16px; font-size:12px; color:#9ED; opacity:.8}

.panel .section-head h2{
  font-family:'Share Tech Mono', monospace;letter-spacing:1px;margin:0 0 8px 0;
}
.panel .section-head p{color:var(--muted);margin:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.card{
  border:1px solid rgba(0,255,255,.15); padding:20px; border-radius:10px;
  background: linear-gradient(180deg, rgba(0,20,30,.6), rgba(0,0,0,.4));
  box-shadow: inset 0 0 40px rgba(0,255,255,.05);
}
.card.holo{position:relative;overflow:hidden}
.card.holo::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(0,255,255,.08), rgba(255,0,255,.06), rgba(57,255,20,.05));
  mix-blend-mode:overlay; opacity:.5; pointer-events:none;
}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.feature{border:1px solid rgba(255,0,255,.15);padding:20px;border-radius:10px;background:rgba(20,0,30,.35)}
.icon{width:36px;height:36px;border:1px solid rgba(255,0,255,.3); border-radius:6px; box-shadow:0 0 12px rgba(255,0,255,.25) inset; margin-bottom:10px}

.diagram{position:relative;margin-top:24px;border:1px solid rgba(0,255,255,.15);padding:20px;border-radius:10px}
.diagram .node{
  display:inline-block;margin:6px 10px;padding:8px 12px;border:1px solid rgba(0,255,255,.35);border-radius:8px;background:rgba(0,20,25,.35)
}
.diagram .wires{width:100%;height:120px}
.diagram polyline{fill:none;stroke:rgba(0,255,255,.4);stroke-width:2;filter:drop-shadow(0 0 6px rgba(0,255,255,.4))}

.expander summary{cursor:pointer}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:16px}
.time-item{border:1px solid rgba(57,255,20,.25);border-radius:10px;padding:20px;background:rgba(0,30,10,.35)}
.time{color:var(--neon-green);font-family:'Share Tech Mono', monospace}

.cta{text-align:center;display:grid;place-items:center;gap:8px}
.cta-form{max-width:720px;width:100%;text-align:left;border:1px solid rgba(255,255,0,.25);padding:20px;border-radius:12px;background:rgba(30,30,0,.2)}
.input-row{display:flex;gap:10px;margin-top:6px}
input[type="email"]{
  flex:1;background:#0C0C0C;color:#DDE;border:1px solid rgba(255,255,0,.35);
  padding:12px;border-radius:8px;outline:none
}
input[type="email"]:focus{box-shadow:0 0 0 3px rgba(255,255,0,.25)}

.counter{margin-top:12px;color:#EEE}

.footer{
  border-top:1px solid rgba(0,255,255,.12); padding:24px; text-align:center; color:#9AB
}
.footer .logo{font-family:'Orbitron', sans-serif; letter-spacing:2px; margin-bottom:8px}
.footer nav{display:flex; gap:12px; justify-content:center; margin-bottom:8px}
.fx-link{color:#ABE; text-decoration:none; position:relative}
.fx-link::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background: linear-gradient(90deg, transparent, #9EF, transparent); opacity:.6; transform:scaleX(.2); transform-origin:left; transition:transform .25s}
.fx-link:hover::after{transform:scaleX(1)}

/* クラス切替方式（CSP/拡張のstyle書換え制限を回避） */
#boot-loader{
  position:fixed; inset:0; background:radial-gradient(1200px 600px at 50% -10%, rgba(0,255,255,.12), transparent 60%), #000;
  display:grid; place-items:center; z-index:10000; overflow:hidden;
  opacity:1; transition:opacity .5s ease;
}
#boot-loader.boot-hide{opacity:0; pointer-events:none}
#boot-loader.boot-none{display:none}
.boot-stage{position:relative; width:min(960px, 92vw); height:min(540px, 56vh);}
.scanlines{
  position:absolute; inset:0; background: repeating-linear-gradient(transparent 0 2px, rgba(255,255,255,.02) 2px 3px);
  mix-blend-mode:overlay; pointer-events:none; animation:sl 6s linear infinite;
}
@keyframes sl{to{transform:translateY(3px)}}

.boot-rings{position:absolute; inset:0; display:grid; place-items:center; filter:drop-shadow(0 0 24px rgba(0,255,255,.25))}
.ring{
  position:absolute; border:1px solid rgba(0,255,255,.35); border-radius:50%;
  box-shadow: inset 0 0 40px rgba(0,255,255,.12), 0 0 24px rgba(0,255,255,.12);
}
.ring-a{width:68vmin; height:68vmin; animation:spinA 8s linear infinite}
.ring-b{width:52vmin; height:52vmin; border-color:rgba(255,0,255,.35); box-shadow: inset 0 0 40px rgba(255,0,255,.12), 0 0 24px rgba(255,0,255,.12); animation:spinB 6.5s linear infinite reverse}
.ring-c{width:36vmin; height:36vmin; border-color:rgba(57,255,20,.35); box-shadow: inset 0 0 40px rgba(57,255,20,.12), 0 0 24px rgba(57,255,20,.12); animation:spinC 5s linear infinite}
.core-glow{
  position:absolute; width:10vmin; height:10vmin; border-radius:50%;
  background:radial-gradient(circle, rgba(0,255,255,.8), rgba(0,255,255,.25) 60%, transparent 70%);
  animation:pulse 1.8s ease-in-out infinite;
}

@keyframes spinA{to{transform:rotate(360deg)}}
@keyframes spinB{to{transform:rotate(360deg)}}
@keyframes spinC{to{transform:rotate(360deg)}}
@keyframes pulse{50%{transform:scale(1.08)}}

.boot-grid{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.boot-grid .grid-anim{
  width:100%; height:100%;
  background-image:
    linear-gradient(rgba(0,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,255,.08) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse at 50% 50%, #000 60%, transparent 100%);
  animation:gridPulse 3s ease-in-out infinite;
}
@keyframes gridPulse{50%{filter:brightness(1.25)}}

.boot-meta{
  position:absolute; left:50%; bottom:10%; transform:translateX(-50%);
  display:grid; gap:10px; text-align:center;
}
.brand-sig{font-family:'Orbitron', sans-serif; letter-spacing:2px; color:#CFE}
.brand-sig span{color:var(--neon-cyan)}
.progress-wrap{display:flex; align-items:center; gap:12px; justify-content:center}
.progress-bar{width:min(60vw,420px); height:8px; border:1px solid rgba(0,255,255,.35); border-radius:999px; overflow:hidden; background:rgba(0,30,40,.4)}
.progress-bar .bar{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, rgba(0,255,255,.2), rgba(255,0,255,.35));
  box-shadow:0 0 14px rgba(0,255,255,.35);
  animation:progressAnim 2.2s ease forwards;
}
.progress-text{font-family:'Share Tech Mono', monospace; color:#9EF}

@keyframes progressAnim{to{width:100%}}

.boot-log{
  position:absolute; left:50%; top:10%; transform:translateX(-50%);
  color:#7FF; width:min(720px, 90%); border:1px solid rgba(0,255,255,.25); padding:12px 16px; border-radius:8px;
  background:rgba(0,10,15,.6); box-shadow: inset 0 0 24px rgba(0,255,255,.1);
  max-height:28vh; overflow:auto; font-size:12px;
  animation:bootIn .5s ease;
}
@keyframes bootIn{from{opacity:0;transform:translate(-50%, calc(10% + 8px))}}

#fx-particles{position:fixed; inset:0; z-index:0; opacity:.6}
.section, .hud-header, .footer{position:relative; z-index:1}

/* success flash */
.btn.success{box-shadow:0 0 0 3px rgba(57,255,20,.35), 0 0 24px rgba(57,255,20,.3) inset; border-color:rgba(57,255,20,.6)}

@media (max-width: 960px){
  .features{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .hud-nav ul{display:none; position:absolute; top:64px; right:12px; background:#0B0F16; padding:12px; border:1px solid rgba(0,255,255,.2); border-radius:8px; flex-direction:column}
  .hud-toggle{display:block}
  .features{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr}
  .input-row{flex-direction:column}
}