:root{
  --void:#04040a;
  --ink:#f2f4ff;
  --blue:#3ea8ff;
  --blue-deep:#1035c9;
  --red:#ff1f45;
  --red-deep:#8a0018;
  --purple:#a24bff;
  --dim:rgba(242,244,255,.55);
  --edge:rgba(242,244,255,.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--void);
  color:var(--ink);
  font-family:"Space Grotesk",system-ui,-apple-system,sans-serif;
  overflow:hidden;
  cursor:crosshair;
}
::selection{background:var(--purple);color:#fff}

#bg{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

/* ---------- overlays ---------- */
.grain{
  position:fixed;inset:-50%;z-index:3;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 700ms steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}
}
.scanlines{
  position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.28) 2px 3px);
  mix-blend-mode:multiply;
}
.vignette{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 30%,rgba(2,2,8,.55) 72%,#020208 100%);
}
.flash{
  position:fixed;inset:0;z-index:60;pointer-events:none;background:#fff;
}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px clamp(20px,4vw,56px);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.22em;font-size:12px}
.brand-mark{color:var(--purple);text-shadow:0 0 14px var(--purple)}
.brand-txt em{color:var(--red);font-style:normal;padding:0 2px}
.links{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px)}
.links a{
  color:var(--dim);text-decoration:none;font-size:11px;letter-spacing:.2em;font-weight:500;
  transition:color .3s,text-shadow .3s;
}
.links a:hover{color:var(--blue);text-shadow:0 0 12px rgba(62,168,255,.8)}
.links .pill{
  color:var(--ink);border:1px solid var(--edge);padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.03);backdrop-filter:blur(6px);
}
.links .pill:hover{border-color:var(--red);color:#fff;text-shadow:0 0 12px var(--red);box-shadow:0 0 26px rgba(255,31,69,.28) inset}

/* ---------- hero ---------- */
.hero{
  position:relative;z-index:5;height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:90px clamp(20px,6vw,80px) 78px;
}
.stack{max-width:1100px;width:100%;text-align:center;will-change:transform}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.42em;color:var(--dim);margin-bottom:26px;
  font-family:"Noto Sans JP","Space Grotesk",sans-serif;
}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--purple);box-shadow:0 0 16px var(--purple);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.title{
  font-family:"Anton",Impact,sans-serif;font-weight:400;
  line-height:.84;letter-spacing:-.02em;
  font-size:clamp(64px,15.5vw,230px);
  perspective:900px;
}
.title .line{display:block;white-space:nowrap}
.title .ch{
  display:inline-block;position:relative;
  background:linear-gradient(180deg,#ffffff 0%,#cfe4ff 42%,#6f8dff 78%,#2d3fb8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 60px rgba(62,168,255,.25);
  will-change:transform,opacity;
}
.title .line-2 .ch{
  background:linear-gradient(180deg,#ffffff 0%,#ffc9d3 38%,#ff3355 76%,#78000f 100%);
  -webkit-background-clip:text;background-clip:text;
  text-shadow:0 0 60px rgba(255,31,69,.3);
}
/* chromatic aberration ghosts */
.title .ch::before,.title .ch::after{
  content:attr(data-c);position:absolute;inset:0;-webkit-background-clip:initial;background:none;
  opacity:.55;pointer-events:none;mix-blend-mode:screen;
}
.title .ch::before{color:var(--blue);transform:translate(-3px,0)}
.title .ch::after{color:var(--red);transform:translate(3px,0)}
.title .line-2 .ch::before{color:var(--purple)}

.kanji{
  margin-top:22px;font-family:"Noto Sans JP",sans-serif;font-weight:700;
  font-size:clamp(13px,1.5vw,19px);letter-spacing:.3em;color:var(--purple);
  text-shadow:0 0 22px rgba(162,75,255,.6);
}
.kanji span{color:var(--dim);font-weight:300;letter-spacing:.32em;font-size:.8em}

.sub{
  margin:20px auto 0;max-width:560px;color:var(--dim);
  font-size:clamp(13px,1.35vw,16px);line-height:1.75;font-weight:300;
}
.sub b{font-weight:600}
.sub b:nth-of-type(1){color:var(--blue)}
.sub b:nth-of-type(2){color:var(--red)}
.sub b:nth-of-type(3){color:var(--purple)}

.cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.btn{
  position:relative;text-decoration:none;color:var(--ink);
  font-size:11px;letter-spacing:.24em;font-weight:600;
  padding:15px 30px;border:1px solid var(--edge);overflow:hidden;
  background:rgba(255,255,255,.02);backdrop-filter:blur(8px);
  transition:color .35s,border-color .35s,box-shadow .35s,transform .35s;
}
.btn span{position:relative;z-index:2}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;transform:translateY(101%);
  transition:transform .45s cubic-bezier(.7,0,.2,1);
}
.btn:hover{transform:translateY(-2px)}
.btn:hover::before{transform:translateY(0)}
.btn-red::before{background:linear-gradient(180deg,var(--red),var(--red-deep))}
.btn-red:hover{border-color:var(--red);box-shadow:0 12px 40px rgba(255,31,69,.35)}
.btn-blue::before{background:linear-gradient(180deg,var(--blue),var(--blue-deep))}
.btn-blue:hover{border-color:var(--blue);box-shadow:0 12px 40px rgba(62,168,255,.35)}

.meta{
  display:flex;gap:clamp(20px,4vw,60px);justify-content:center;flex-wrap:wrap;
  margin-top:clamp(28px,4.5vh,52px);padding-top:20px;border-top:1px solid var(--edge);
}
.meta div{display:flex;flex-direction:column;gap:6px;align-items:center}
.meta b{font-size:9px;letter-spacing:.28em;color:rgba(242,244,255,.35);font-weight:500}
.meta span{font-size:11px;letter-spacing:.14em;color:var(--dim);font-family:"Noto Sans JP",sans-serif}
.meta .live{color:var(--blue);text-shadow:0 0 14px rgba(62,168,255,.7)}

/* ---------- rails ---------- */
.rail{
  position:fixed;top:0;bottom:0;z-index:8;display:flex;align-items:center;
  pointer-events:none;font-size:10px;letter-spacing:.55em;color:rgba(242,244,255,.28);
}
.rail-l{left:clamp(10px,2.2vw,30px)}
.rail-r{right:clamp(10px,2.2vw,30px)}
.rail span{writing-mode:vertical-rl}
.rail-l span{font-family:"Noto Sans JP",sans-serif;color:rgba(255,31,69,.5)}
.rail-r span{transform:rotate(180deg);color:rgba(62,168,255,.5)}

.scroll{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:8;
  font-size:9px;letter-spacing:.4em;color:rgba(242,244,255,.4);
  display:flex;align-items:center;gap:10px;
}
.scroll i{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--purple),transparent);animation:drop 1.8s ease-in-out infinite}
@keyframes drop{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

@media (max-width:720px){
  .links a:not(.pill){display:none}
  .rail{display:none}
  .meta{gap:22px}
}