/* =========================================================
   PROJECT CHIMERA — Neo-Noir Glitchwave / Cyberpunk Landing
   ========================================================= */

:root{
  --bg:        #05060a;
  --bg-2:      #0a0c14;
  --bg-3:      #10131f;
  --midnight:  #001f3f;
  --deep-purple:#2a0a2a;

  --cyan:      #00f0ff;
  --magenta:   #ff2fd6;
  --green:     #39ff14;
  --yellow:    #ffe600;

  --silver:    #8b93a7;
  --white:     #f2f5ff;
  --err:       #ff3b5c;

  --font-disp: 'Orbitron', 'Noto Sans JP', sans-serif;
  --font-mono: 'Share Tech Mono', 'Noto Sans JP', monospace;
  --font-body: 'Noto Sans JP', 'Share Tech Mono', sans-serif;

  --glow-c: 0 0 6px rgba(0,240,255,.8), 0 0 18px rgba(0,240,255,.45);
  --glow-m: 0 0 6px rgba(255,47,214,.8), 0 0 18px rgba(255,47,214,.45);

  --max: 1240px;
  --nav-h: 68px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.85;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body.is-loading{ overflow:hidden; }

img,svg,canvas{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--magenta); color:#000; }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#07080d; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--cyan),var(--magenta));
  border:2px solid #07080d;
}

/* =========================================================
   BOOT LOADER
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:1000;
  background:radial-gradient(ellipse at center, #0a0e1a 0%, #04050a 70%);
  display:grid; place-items:center;
  transition:opacity .6s ease, visibility .6s;
}
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }

.loader__inner{ width:min(560px, 86vw); text-align:left; }

.loader__logo{
  font-family:var(--font-disp);
  font-weight:900; font-size:clamp(2.4rem,7vw,4rem);
  letter-spacing:.28em; text-align:center;
  color:var(--cyan);
  text-shadow:var(--glow-c);
  position:relative;
  animation:logoPulse 1.6s ease-in-out infinite alternate;
}
@keyframes logoPulse{ from{opacity:.55} to{opacity:1} }

.loader__log{
  margin:1.6rem 0 1rem;
  font-family:var(--font-mono);
  font-size:.82rem; line-height:1.7;
  color:var(--green);
  min-height:9.2em;
  white-space:pre-wrap;
  text-shadow:0 0 6px rgba(57,255,20,.6);
}
.loader__log .warn{ color:var(--yellow); }
.loader__log .ok{ color:var(--cyan); }

.loader__bar{
  height:6px; background:#131725;
  border:1px solid rgba(0,240,255,.35);
  overflow:hidden;
}
.loader__bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  box-shadow:0 0 12px rgba(0,240,255,.8);
  transition:width .18s linear;
}
.loader__pct{
  margin-top:.5rem; text-align:right;
  font-family:var(--font-mono); color:var(--cyan);
  letter-spacing:.2em; font-size:.85rem;
}
.loader__scan{
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
  animation:scanMove 6s linear infinite;
  pointer-events:none;
}
@keyframes scanMove{ to{ background-position:0 300px; } }

/* =========================================================
   CURSOR
   ========================================================= */
.cursor,.cursor-ring{
  position:fixed; top:0; left:0; z-index:999;
  pointer-events:none; border-radius:50%;
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
  opacity:0; transition:opacity .3s;
}
.cursor{
  width:6px; height:6px;
  background:var(--cyan);
  box-shadow:var(--glow-c);
}
.cursor-ring{
  width:34px; height:34px;
  border:1px solid rgba(0,240,255,.7);
  transition:opacity .3s, width .2s, height .2s, border-color .2s;
}
body.has-cursor .cursor,
body.has-cursor .cursor-ring{ opacity:1; }
body.has-cursor.cursor-hot .cursor-ring{
  width:56px; height:56px;
  border-color:var(--magenta);
}

/* =========================================================
   GLOBAL OVERLAYS (scanlines / noise / vignette)
   ========================================================= */
.scanlines,.noise,.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:900;
}
.scanlines{
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  opacity:.5;
}
.noise{
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:noiseShift .6s steps(3) infinite;
}
@keyframes noiseShift{
  0%{transform:translate(0,0)} 33%{transform:translate(-4px,3px)}
  66%{transform:translate(3px,-4px)} 100%{transform:translate(0,0)}
}
.vignette{
  background:radial-gradient(ellipse at center,
    transparent 55%, rgba(0,0,0,.55) 100%);
}

/* =========================================================
   HEADER / HUD NAV
   ========================================================= */
.hud-nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:0 clamp(1rem,4vw,2.5rem);
  background:rgba(5,6,10,.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,240,255,.15);
}
.hud-nav__line{
  position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--magenta),transparent);
  opacity:.6;
}

.hud-nav__logo{ display:flex; align-items:center; gap:.6rem; }
.logo-mark{
  width:14px; height:14px;
  background:var(--cyan);
  box-shadow:var(--glow-c);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  animation:markSpin 4s linear infinite;
}
@keyframes markSpin{ to{ transform:rotate(360deg); } }
.logo-text{
  font-family:var(--font-disp); font-weight:700;
  letter-spacing:.18em; font-size:.98rem;
}
.logo-text em{
  font-style:normal; font-family:var(--font-mono);
  color:var(--magenta); font-size:.62rem;
  margin-left:.45rem; letter-spacing:.12em;
}

.hud-nav__menu{ display:flex; align-items:center; gap:1.4rem; }
.nav-link{
  font-family:var(--font-mono); font-size:.82rem;
  letter-spacing:.14em; color:var(--silver);
  position:relative; padding:.35rem 0;
  transition:color .2s, text-shadow .2s;
}
.nav-link i{
  font-style:normal; color:var(--cyan);
  font-size:.66rem; margin-right:.35rem; opacity:.7;
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--cyan);
  box-shadow:var(--glow-c); transition:width .25s;
}
.nav-link:hover,.nav-link:focus-visible{
  color:var(--white); text-shadow:0 0 8px rgba(0,240,255,.7);
}
.nav-link:hover::after,.nav-link:focus-visible::after{ width:100%; }
.nav-link.is-active{ color:var(--white); }
.nav-link.is-active::after{ width:100%; background:var(--magenta); box-shadow:var(--glow-m); }

.nav-link--cta{
  color:#04050a; background:var(--cyan);
  padding:.5rem .95rem;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  box-shadow:0 0 14px rgba(0,240,255,.55);
  font-weight:700;
}
.nav-link--cta:hover,.nav-link--cta:focus-visible{
  color:#04050a; background:var(--magenta);
  box-shadow:var(--glow-m); text-shadow:none;
}
.nav-link--cta::after{ display:none; }

.hud-nav__tools{ display:flex; align-items:center; gap:.8rem; }
.tool-btn{
  display:flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.14em; color:var(--silver);
  border:1px solid rgba(139,147,167,.4);
  padding:.3rem .55rem;
  transition:.2s;
}
.tool-btn:hover{ border-color:var(--cyan); color:var(--cyan); }
.tool-btn__state{ color:var(--err); }
.tool-btn[aria-pressed="true"]{ border-color:var(--green); color:var(--green); }
.tool-btn[aria-pressed="true"] .tool-btn__state{ color:var(--green); }

.hamburger{ display:none; width:34px; height:26px; position:relative; }
.hamburger span{
  position:absolute; left:0; width:100%; height:2px;
  background:var(--cyan); box-shadow:var(--glow-c);
  transition:.3s;
}
.hamburger span:nth-child(1){ top:2px; }
.hamburger span:nth-child(2){ top:12px; }
.hamburger span:nth-child(3){ top:22px; }
.hamburger[aria-expanded="true"] span:nth-child(1){ top:12px; transform:rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ top:12px; transform:rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--nav-h) + 3rem) clamp(1rem,5vw,4rem) 5rem;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(0,31,63,.85), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(42,10,42,.8), transparent 55%),
    var(--bg);
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.75; }
.hero__grid{
  position:absolute; left:0; right:0; bottom:0; height:46%;
  background-image:
    linear-gradient(rgba(0,240,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.22) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(520px) rotateX(64deg);
  transform-origin:bottom;
  mask-image:linear-gradient(to top, #000 5%, transparent 75%);
  -webkit-mask-image:linear-gradient(to top, #000 5%, transparent 75%);
  animation:gridRun 5s linear infinite;
  pointer-events:none;
}
@keyframes gridRun{ to{ background-position:0 64px, 0 0; } }

.hero__city{
  position:absolute; left:0; right:0; bottom:0; height:34%;
  pointer-events:none; opacity:.55;
  background:
    linear-gradient(to top, rgba(5,6,10,.96), transparent 80%),
    repeating-linear-gradient(90deg,
      transparent 0 42px,
      rgba(0,240,255,.07) 42px 46px,
      transparent 46px 90px,
      rgba(255,47,214,.07) 90px 94px),
    repeating-linear-gradient(90deg,
      transparent 0 120px,
      rgba(10,14,26,.9) 120px 200px,
      transparent 200px 260px,
      rgba(8,11,22,.9) 260px 340px);
  mask-image:linear-gradient(to top, #000 30%, transparent 100%);
  -webkit-mask-image:linear-gradient(to top, #000 30%, transparent 100%);
}

.hero__inner{ position:relative; z-index:3; max-width:var(--max); margin:0 auto; width:100%; }

.hero__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-bottom:1.6rem; }
.tag{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em;
  padding:.25rem .6rem; border:1px solid currentColor;
}
.tag--warn{ color:var(--yellow); text-shadow:0 0 8px rgba(255,230,0,.6); animation:blink 1.4s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:.35; } }
.meta-line{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.16em; color:var(--silver); }
.meta-line--dim{ opacity:.55; }

.hero__title{
  margin:0 0 1.4rem;
  font-family:var(--font-disp);
  font-weight:900;
  font-size:clamp(2.6rem, 8.5vw, 6.6rem);
  line-height:1.06;
  letter-spacing:.04em;
}
.hero__title .line{ display:block; }
.hero__title .line:first-child{
  color:transparent;
  -webkit-text-stroke:1.5px var(--cyan);
  text-shadow:0 0 22px rgba(0,240,255,.35);
}

.hero__lead{
  max-width:44rem; margin:0 0 2.4rem;
  color:#c8cee0; font-size:clamp(.95rem,1.6vw,1.1rem);
}
.hl{
  color:var(--green);
  text-shadow:0 0 10px rgba(57,255,20,.55);
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3rem; }

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-disp); font-weight:700;
  font-size:.9rem; letter-spacing:.16em;
  padding:1rem 2.1rem;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  overflow:hidden;
  transition:transform .2s, box-shadow .2s, background .2s, color .2s;
  will-change:transform;
}
.btn__text{ position:relative; z-index:2; }
.btn__bg{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg, var(--cyan), #4ff7ff 45%, var(--magenta));
  opacity:.92;
}
.btn--primary{ color:#04050a; box-shadow:0 0 18px rgba(0,240,255,.45); }
.btn--primary:hover,.btn--primary:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 0 26px rgba(255,47,214,.7), 0 8px 24px rgba(0,0,0,.6);
}
.btn--ghost{
  color:var(--cyan); border:1px solid rgba(0,240,255,.6);
  background:rgba(0,240,255,.05);
  text-shadow:0 0 8px rgba(0,240,255,.5);
}
.btn--ghost:hover,.btn--ghost:focus-visible{
  background:rgba(255,47,214,.12);
  border-color:var(--magenta); color:#fff;
  transform:translateY(-3px);
  box-shadow:0 0 22px rgba(255,47,214,.5);
}
.btn--sm{ padding:.75rem 1.3rem; font-size:.78rem; }

/* glitch hover on primary button */
.btn--primary::after{
  content:attr(data-glitch);
  position:absolute; inset:0; z-index:3;
  display:grid; place-items:center;
  background:#04050a; color:var(--magenta);
  font-family:var(--font-disp); font-weight:700;
  font-size:.9rem; letter-spacing:.16em;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .18s steps(3);
}
.btn--primary:hover::after,
.btn--primary:focus-visible::after{ animation:btnGlitch .5s steps(4) both; }
@keyframes btnGlitch{
  0%{ clip-path:inset(0 0 100% 0); }
  25%{ clip-path:inset(20% 0 55% 0); }
  50%{ clip-path:inset(60% 0 10% 0); }
  75%{ clip-path:inset(35% 0 40% 0); }
  100%{ clip-path:inset(100% 0 0 0); }
}

/* ---------- hero stats ---------- */
.hero__stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:rgba(0,240,255,.22);
  border:1px solid rgba(0,240,255,.22);
  max-width:760px; margin:0;
}
.hero__stats > div{
  background:rgba(6,8,14,.82);
  padding:.9rem 1rem;
}
.hero__stats dt{
  font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.16em; color:var(--silver);
}
.hero__stats dd{
  margin:.15rem 0 0;
  font-family:var(--font-disp); font-weight:700;
  font-size:clamp(1.1rem,2.4vw,1.6rem);
  color:var(--cyan); text-shadow:var(--glow-c);
}
.hero__stats small{ font-size:.6em; color:var(--magenta); margin-left:.15rem; }

/* HUD corners */
.hero__hud{ position:absolute; width:90px; height:90px; z-index:4; pointer-events:none; }
.hero__hud--tl{ top:calc(var(--nav-h) + 18px); left:18px;
  border-top:2px solid var(--cyan); border-left:2px solid var(--cyan);
  box-shadow:-6px -6px 20px rgba(0,240,255,.25) inset; }
.hero__hud--br{ right:18px; bottom:18px;
  border-bottom:2px solid var(--magenta); border-right:2px solid var(--magenta);
  box-shadow:6px 6px 20px rgba(255,47,214,.25) inset; }

.scroll-hint{
  position:absolute; left:50%; bottom:22px; z-index:5;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.3em;
  color:var(--silver);
}
.scroll-hint__bar{
  width:1px; height:46px;
  background:linear-gradient(var(--cyan), transparent);
  position:relative; overflow:hidden;
}
.scroll-hint__bar::after{
  content:''; position:absolute; top:-46px; left:0;
  width:100%; height:46px;
  background:linear-gradient(transparent, var(--magenta));
  animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{ to{ top:46px; } }

/* =========================================================
   TICKER
   ========================================================= */
.ticker{
  overflow:hidden;
  border-block:1px solid rgba(0,240,255,.3);
  background:rgba(0,240,255,.06);
  padding:.55rem 0;
}
.ticker__track{
  display:flex; width:max-content;
  animation:tick 26s linear infinite;
  font-family:var(--font-mono); font-size:.78rem;
  letter-spacing:.22em; color:var(--cyan);
  text-shadow:0 0 8px rgba(0,240,255,.5);
}
@keyframes tick{ to{ transform:translateX(-50%); } }

/* =========================================================
   SECTIONS (shared)
   ========================================================= */
.section{
  position:relative;
  padding:clamp(4.5rem,10vw,8rem) clamp(1rem,5vw,4rem);
  max-width:var(--max); margin-inline:auto;
}
.section--alt::before{
  content:''; position:absolute; inset:0 calc(50% - 50vw);
  background:
    linear-gradient(rgba(10,12,20,.92), rgba(10,12,20,.92)),
    repeating-linear-gradient(45deg, rgba(0,240,255,.06) 0 2px, transparent 2px 22px);
  border-block:1px solid rgba(0,240,255,.14);
  z-index:-1;
}
.section__head{ margin-bottom:clamp(2.2rem,5vw,3.6rem); }
.section__index{
  display:inline-block;
  font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.3em; color:var(--magenta);
  border:1px solid rgba(255,47,214,.5);
  padding:.2rem .6rem; margin-bottom:1rem;
}
.section__title{
  margin:0;
  font-family:var(--font-disp); font-weight:900;
  font-size:clamp(1.9rem,5.4vw,3.6rem);
  letter-spacing:.05em; line-height:1.15;
  text-shadow:0 0 18px rgba(0,240,255,.3);
}
.section__sub{
  margin:.8rem 0 0; color:var(--silver);
  font-family:var(--font-mono); letter-spacing:.1em;
  font-size:clamp(.8rem,1.6vw,.95rem);
}

/* ---------- glitch text ---------- */
.glitch{ position:relative; display:inline-block; }
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute; inset:0;
  overflow:hidden; opacity:0;
  pointer-events:none;
}
.glitch::before{ color:var(--cyan); text-shadow:var(--glow-c); }
.glitch::after{ color:var(--magenta); text-shadow:var(--glow-m); }
.glitch.is-glitching::before{ opacity:.9; animation:glitchA .4s steps(2) both; }
.glitch.is-glitching::after{ opacity:.9; animation:glitchB .4s steps(2) both; }
@keyframes glitchA{
  0%{ transform:translate(0); clip-path:inset(0 0 70% 0); }
  25%{ transform:translate(-5px,-2px); clip-path:inset(30% 0 40% 0); }
  50%{ transform:translate(4px,2px); clip-path:inset(65% 0 10% 0); }
  75%{ transform:translate(-3px,1px); clip-path:inset(10% 0 80% 0); }
  100%{ transform:translate(0); clip-path:inset(0 0 100% 0); }
}
@keyframes glitchB{
  0%{ transform:translate(0); clip-path:inset(60% 0 0 0); }
  25%{ transform:translate(5px,2px); clip-path:inset(10% 0 70% 0); }
  50%{ transform:translate(-4px,-2px); clip-path:inset(45% 0 30% 0); }
  75%{ transform:translate(3px,-1px); clip-path:inset(75% 0 5% 0); }
  100%{ transform:translate(0); clip-path:inset(100% 0 0 0); }
}

/* ---------- reveal on scroll ---------- */
.reveal{
  opacity:0; transform:translateY(38px);
  transition:opacity .8s ease var(--d,0s), transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s);
}
.reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   SEC 01 : GENESIS
   ========================================================= */
.genesis{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4rem); align-items:start;
}
.genesis__text p{ color:#c3cade; }
.genesis__text .drop::first-letter{
  font-family:var(--font-disp); font-weight:900;
  font-size:3.2em; line-height:.9; float:left;
  margin:.08em .18em 0 0;
  color:var(--cyan); text-shadow:var(--glow-c);
}
.genesis__text strong{ color:var(--magenta); font-weight:700; text-shadow:0 0 10px rgba(255,47,214,.5); }

.code-block{
  margin-top:1.8rem;
  background:#070a12;
  border:1px solid rgba(0,240,255,.3);
  box-shadow:0 0 30px rgba(0,0,0,.6), 0 0 18px rgba(0,240,255,.12) inset;
}
.code-block__bar{
  display:flex; align-items:center; gap:.4rem;
  padding:.5rem .8rem;
  border-bottom:1px solid rgba(0,240,255,.2);
  background:rgba(0,240,255,.05);
}
.code-block__bar span{ width:9px; height:9px; border-radius:50%; background:#2a3046; }
.code-block__bar span:nth-child(1){ background:var(--err); }
.code-block__bar span:nth-child(2){ background:var(--yellow); }
.code-block__bar span:nth-child(3){ background:var(--green); }
.code-block__bar em{
  font-style:normal; margin-left:auto;
  font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.15em; color:var(--silver);
}
.code-block pre{
  margin:0; padding:1.1rem 1.2rem;
  font-family:var(--font-mono); font-size:.84rem;
  line-height:1.75; overflow-x:auto;
}
.c-dim{ color:#4c5570; } .c-key{ color:var(--magenta); }
.c-fn{ color:var(--cyan); } .c-val{ color:var(--yellow); }
.c-cmt{ color:var(--green); }
.c-ok{ color:var(--green); } .c-err{ color:var(--err); }

/* radar */
.genesis__viz{ display:grid; gap:1.6rem; }
.radar{
  position:relative; aspect-ratio:1; max-width:380px; margin-inline:auto;
  width:100%;
  border:1px solid rgba(0,240,255,.3);
  background:
    radial-gradient(circle, rgba(0,240,255,.07), transparent 70%),
    #070a12;
  overflow:hidden;
}
.radar__ring{
  position:absolute; inset:15%; border:1px solid rgba(0,240,255,.35);
  border-radius:50%;
}
.radar__ring:nth-child(2){ inset:30%; border-color:rgba(255,47,214,.3); }
.radar__ring:nth-child(3){ inset:44%; border-style:dashed; border-color:rgba(0,240,255,.5); }
.radar__sweep{
  position:absolute; inset:0;
  background:conic-gradient(from 0deg, rgba(0,240,255,.45), transparent 28%);
  animation:sweep 4s linear infinite;
}
@keyframes sweep{ to{ transform:rotate(360deg); } }
.radar__dot{
  position:absolute; left:var(--x); top:var(--y);
  width:8px; height:8px; background:var(--magenta);
  box-shadow:var(--glow-m); border-radius:50%;
  animation:blink 1.6s steps(2) infinite;
}
.radar__core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--font-disp); font-weight:700; font-size:.85rem;
  letter-spacing:.2em; color:var(--cyan); text-align:center;
  text-shadow:var(--glow-c);
}
.radar__core em{
  display:block; font-style:normal;
  font-family:var(--font-mono); font-size:.6rem;
  color:var(--green); letter-spacing:.25em; margin-top:.3rem;
}

.datalist{
  list-style:none; margin:0; padding:0;
  border:1px solid rgba(139,147,167,.3);
  background:rgba(7,10,18,.75);
}
.datalist li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.6rem .9rem;
  font-family:var(--font-mono); font-size:.78rem;
  letter-spacing:.1em;
  border-bottom:1px dashed rgba(139,147,167,.25);
}
.datalist li:last-child{ border-bottom:0; }
.datalist span{ color:var(--silver); }
.datalist b{ color:var(--white); }

/* =========================================================
   SEC 02 : SOLUTION CARDS
   ========================================================= */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:1.4rem;
}
.card{
  position:relative;
  padding:1.8rem 1.5rem 1.4rem;
  background:linear-gradient(160deg, rgba(16,19,31,.95), rgba(7,9,15,.95));
  border:1px solid rgba(139,147,167,.28);
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  transition:transform .3s, border-color .3s, box-shadow .3s;
  overflow:hidden;
}
.card::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 40%, rgba(0,240,255,.14) 50%, transparent 60%);
  transform:translateX(-120%);
  transition:transform .7s;
}
.card:hover{
  transform:translateY(-8px);
  border-color:var(--cyan);
  box-shadow:0 16px 40px rgba(0,0,0,.65), 0 0 24px rgba(0,240,255,.25);
}
.card:hover::before{ transform:translateX(120%); }

.card__no{
  font-family:var(--font-mono); font-size:.65rem;
  letter-spacing:.28em; color:var(--magenta);
}
.card__icon{
  width:64px; height:64px; margin:1.1rem 0 1rem;
  color:var(--cyan);
  filter:drop-shadow(0 0 6px rgba(0,240,255,.7));
  transition:color .3s, filter .3s, transform .3s;
}
.card:hover .card__icon{
  color:var(--magenta);
  filter:drop-shadow(0 0 8px rgba(255,47,214,.8));
  transform:scale(1.08) rotate(-4deg);
}
.card__icon svg{ width:100%; height:100%; }
.card__title{
  margin:0 0 .7rem;
  font-family:var(--font-disp); font-weight:700;
  font-size:1.12rem; letter-spacing:.05em;
}
.card__title em{
  display:block; font-style:normal;
  font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.18em; color:var(--silver); margin-top:.3rem;
}
.card__text{ margin:0 0 1.2rem; font-size:.9rem; color:#b9c0d4; }
.card__foot{ display:flex; align-items:center; gap:.7rem; }
.card__foot .bar{
  flex:1; height:5px; background:#171c2c; overflow:hidden;
}
.card__foot .bar i{
  display:block; height:100%; width:var(--w,50%);
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  box-shadow:0 0 10px rgba(0,240,255,.7);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .3s;
}
.card.is-in .bar i{ transform:scaleX(1); }
.card__foot b{
  font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.12em; color:var(--green);
  text-shadow:0 0 8px rgba(57,255,20,.55);
}

/* =========================================================
   SEC 03 : ARCHITECTURE
   ========================================================= */
.arch{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,3.5rem); align-items:start;
}
.arch__flow{
  background:#070a12;
  border:1px solid rgba(0,240,255,.25);
  padding:1rem;
  position:sticky; top:calc(var(--nav-h) + 20px);
}
.flow-svg{ width:100%; height:auto; }
.flow-node rect{
  fill:#0c1120; stroke:var(--cyan); stroke-width:1.4;
}
.flow-node text{
  fill:var(--white); font-family:'Share Tech Mono',monospace;
  font-size:13px; text-anchor:middle; letter-spacing:1px;
}
.flow-node text.sm{ fill:var(--silver); font-size:9.5px; }
.flow-cap{
  fill:var(--magenta); font-family:'Share Tech Mono',monospace;
  font-size:11px; text-anchor:middle; letter-spacing:2px;
}
.flow-cap.sm{ fill:var(--silver); font-size:9.5px; }
.flow-dash{
  stroke-dasharray:10 16;
  animation:dashRun 1.4s linear infinite;
  opacity:.9;
}
@keyframes dashRun{ to{ stroke-dashoffset:-52; } }

.acc{ display:grid; gap:.9rem; }
.acc__item{
  border:1px solid rgba(139,147,167,.3);
  background:rgba(9,12,20,.9);
  transition:border-color .25s, box-shadow .25s;
}
.acc__item[open]{ border-color:var(--cyan); box-shadow:0 0 18px rgba(0,240,255,.18); }
.acc__item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:.8rem;
  padding:1rem 1.1rem;
  font-family:var(--font-disp); font-weight:700;
  font-size:.95rem; letter-spacing:.06em;
  transition:background .2s, color .2s;
}
.acc__item summary::-webkit-details-marker{ display:none; }
.acc__item summary:hover{ background:rgba(0,240,255,.07); color:var(--cyan); }
.acc__key{
  font-family:var(--font-mono); font-size:.72rem;
  color:#04050a; background:var(--cyan);
  padding:.1rem .45rem; letter-spacing:.1em;
}
.acc__item summary em{
  margin-left:auto; font-style:normal;
  color:var(--magenta); font-size:1.2rem;
  transition:transform .3s;
}
.acc__item[open] summary em{ transform:rotate(135deg); }
.acc__body{ padding:0 1.1rem 1.2rem; border-top:1px dashed rgba(139,147,167,.3); }
.acc__body p{ margin:.9rem 0 .9rem; font-size:.9rem; color:#bcc3d6; }
.spec{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.spec li{
  display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--font-mono); font-size:.75rem;
  letter-spacing:.08em;
  border-left:2px solid var(--magenta); padding-left:.6rem;
}
.spec span{ color:var(--silver); }
.spec b{ color:var(--cyan); }

/* =========================================================
   SEC 04 : TIMELINE
   ========================================================= */
.timeline{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.2rem;
  position:relative;
}
.timeline::before{
  content:''; position:absolute; top:56px; left:0; right:0; height:2px;
  background:repeating-linear-gradient(90deg, var(--cyan) 0 14px, transparent 14px 26px);
  opacity:.5;
}
.timeline__item{
  position:relative;
  background:linear-gradient(170deg, rgba(15,18,30,.96), rgba(7,9,15,.96));
  border:1px solid rgba(139,147,167,.3);
  border-top:3px solid var(--cyan);
  padding:1.4rem 1.2rem 1.2rem;
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.timeline__item:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 34px rgba(0,0,0,.6), 0 0 20px rgba(0,240,255,.25);
}
.timeline__ph{
  font-family:var(--font-mono); font-size:.64rem;
  letter-spacing:.28em; color:var(--magenta);
}
.timeline__item time{
  display:block; margin:.5rem 0 .3rem;
  font-family:var(--font-disp); font-weight:900;
  font-size:1.5rem; color:var(--cyan); text-shadow:var(--glow-c);
}
.timeline__item h3{
  margin:.4rem 0 .6rem;
  font-family:var(--font-disp); font-size:1rem;
  letter-spacing:.05em;
}
.timeline__item p{ margin:0 0 1rem; font-size:.86rem; color:#b6bdd1; }
.timeline__state{
  display:inline-block;
  font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.2em; padding:.2rem .55rem;
  border:1px solid var(--silver); color:var(--silver);
}
.state--done{ border-color:var(--green); color:var(--green); text-shadow:0 0 8px rgba(57,255,20,.5); }
.state--now{
  border-color:var(--yellow); color:#04050a; background:var(--yellow);
  animation:blink 1.4s steps(2) infinite;
}

/* =========================================================
   SEC 05 : CONNECT / FINAL CTA
   ========================================================= */
.connect{
  position:relative;
  padding:clamp(4.5rem,10vw,8rem) clamp(1rem,5vw,4rem);
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(42,10,42,.9), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(0,31,63,.9), transparent 60%),
    var(--bg-2);
  border-top:1px solid rgba(0,240,255,.25);
  text-align:center;
}
.connect__glow{
  position:absolute; left:50%; top:50%;
  width:min(760px,90vw); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,47,214,.18), transparent 65%);
  filter:blur(20px);
  animation:breathe 5s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes breathe{ from{ opacity:.5; transform:translate(-50%,-50%) scale(.9);} to{opacity:1; transform:translate(-50%,-50%) scale(1.08);} }
.connect__inner{ position:relative; z-index:2; max-width:860px; margin-inline:auto; }
.connect .section__head{ text-align:center; }
.connect .section__title{ font-size:clamp(2rem,6.5vw,4.2rem); }

.countdown{
  display:flex; justify-content:center; align-items:center;
  gap:clamp(.4rem,2vw,1.2rem);
  margin:0 0 2.6rem;
}
.cd-cell{
  min-width:clamp(64px,14vw,110px);
  padding:.9rem .5rem .7rem;
  background:rgba(6,8,14,.85);
  border:1px solid rgba(0,240,255,.4);
  box-shadow:0 0 20px rgba(0,240,255,.15) inset;
}
.cd-cell b{
  display:block;
  font-family:var(--font-disp); font-weight:900;
  font-size:clamp(1.7rem,5.5vw,2.8rem);
  color:var(--cyan); text-shadow:var(--glow-c);
  font-variant-numeric:tabular-nums;
}
.cd-cell span{
  font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.24em; color:var(--silver);
}
.cd-sep{
  font-family:var(--font-disp); font-weight:900;
  font-size:clamp(1.4rem,4vw,2.2rem); color:var(--magenta);
  animation:blink 1s steps(2) infinite;
}

.reg{ max-width:640px; margin-inline:auto; }
.reg__field{
  display:flex; align-items:center; gap:.6rem;
  background:rgba(4,6,11,.9);
  border:1px solid rgba(0,240,255,.5);
  padding:.45rem .45rem .45rem 1rem;
  transition:border-color .25s, box-shadow .25s;
}
.reg__field:focus-within{
  border-color:var(--magenta);
  box-shadow:0 0 22px rgba(255,47,214,.35);
}
.reg__prefix{
  font-family:var(--font-mono); color:var(--green);
  text-shadow:0 0 8px rgba(57,255,20,.6);
}
.reg input{
  flex:1; min-width:0;
  background:transparent; border:0; outline:none;
  color:var(--white);
  font-family:var(--font-mono); font-size:1rem;
  letter-spacing:.06em; padding:.6rem 0;
}
.reg input::placeholder{ color:#4d5670; }
.reg__msg{
  min-height:1.6em; margin:.8rem 0 .2rem;
  font-family:var(--font-mono); font-size:.82rem;
  letter-spacing:.08em; color:var(--green);
  text-shadow:0 0 8px rgba(57,255,20,.5);
}
.reg__msg.is-err{ color:var(--err); text-shadow:0 0 8px rgba(255,59,92,.5); }
.reg__note{ margin:.3rem 0 0; font-size:.74rem; color:var(--silver); }

.qr{ margin-top:2.6rem; display:grid; justify-items:center; gap:.6rem; }
.qr__code{
  display:grid; grid-template-columns:repeat(11,10px); gap:2px;
  padding:10px; background:#04050a;
  border:1px solid rgba(0,240,255,.45);
  box-shadow:0 0 24px rgba(0,240,255,.3);
}
.qr__code i{ width:10px; height:10px; background:#141a2b; display:block; }
.qr__code i.on{ background:var(--cyan); box-shadow:0 0 6px rgba(0,240,255,.8); }
.qr__cap{
  font-family:var(--font-mono); font-size:.64rem;
  letter-spacing:.3em; color:var(--silver);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background:#04050a;
  border-top:1px solid rgba(0,240,255,.2);
  padding:3rem clamp(1rem,5vw,4rem) 1.4rem;
}
.footer__grid{
  max-width:var(--max); margin-inline:auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr auto;
  gap:2rem; align-items:start;
}
.footer__brand p{
  margin:.9rem 0 0; font-size:.8rem; color:var(--silver);
  font-family:var(--font-mono); line-height:1.9;
}
.footer__nav,.footer__legal{ display:grid; gap:.6rem; }
.footer__nav a,.footer__legal a{
  font-family:var(--font-mono); font-size:.78rem;
  letter-spacing:.16em; color:var(--silver);
  transition:color .2s, text-shadow .2s;
}
.footer__nav a:hover,.footer__legal a:hover{
  color:var(--cyan); text-shadow:0 0 8px rgba(0,240,255,.6);
}
.footer__sns{ display:flex; gap:.7rem; }
.footer__sns a{
  display:grid; place-items:center;
  width:38px; height:38px;
  border:1px solid rgba(139,147,167,.4);
  color:var(--silver);
  transition:.25s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.footer__sns a:hover{
  color:#04050a; background:var(--cyan);
  border-color:var(--cyan);
  box-shadow:var(--glow-c);
}
.footer__bar{
  max-width:var(--max); margin:2.4rem auto 0;
  padding-top:1.1rem;
  border-top:1px dashed rgba(139,147,167,.35);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem;
  font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.14em; color:var(--silver);
}
.footer__clock{ color:var(--green); text-shadow:0 0 8px rgba(57,255,20,.5); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .genesis, .arch{ grid-template-columns:1fr; }
  .arch__flow{ position:static; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:860px){
  .hamburger{ display:block; }
  .hud-nav__menu{
    position:fixed; top:var(--nav-h); right:0;
    width:min(320px,84vw); height:calc(100svh - var(--nav-h));
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:.4rem; padding:1.6rem 1.4rem;
    background:rgba(5,7,12,.97);
    border-left:1px solid rgba(0,240,255,.35);
    transform:translateX(105%);
    transition:transform .35s cubic-bezier(.2,.7,.2,1);
    overflow-y:auto;
  }
  .hud-nav__menu.is-open{ transform:none; }
  .nav-link{ font-size:1rem; padding:.7rem 0; width:100%; }
  .nav-link--cta{ margin-top:.8rem; text-align:center; }

  .hero__stats{ grid-template-columns:repeat(2,1fr); }
  .timeline::before{ display:none; }
}

@media (max-width:560px){
  body{ font-size:15px; }
  .hero{ padding-bottom:6rem; }
  .hero__cta .btn{ width:100%; }
  .countdown{ flex-wrap:wrap; }
  .cd-sep{ display:none; }
  .cd-cell{ flex:1 1 40%; }
  .reg__field{ flex-wrap:wrap; padding:.7rem; }
  .reg input{ width:100%; padding-inline:.3rem; }
  .reg__field .btn{ width:100%; }
  .footer__grid{ grid-template-columns:1fr; }
  .sp-hide{ display:none; }
}

/* =========================================================
   REDUCED MOTION / ACCESSIBILITY
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .cursor,.cursor-ring{ display:none; }
}