/* ===================================================================
   THE HELIX ENFORCERS — Neo-Earth command terminal
   Design: obsidian base · cold-cyan + ember-amber duotone · HUD tactical
   =================================================================== */

@font-face{
  font-family:'Helix CNG';
  src:url('../assets/fonts/Helix_enforcer_CNG.ttf') format('truetype');
  font-display:swap;
}

:root{
  --bg:#05070d; --bg-2:#080b14; --bg-3:#0b1019;
  --ink:#e9eef7; --muted:#8593a8; --faint:#566073;
  --line:rgba(120,190,210,.12); --line-2:rgba(120,190,210,.24);
  --cyan:#2ee6e6; --cyan-deep:#13a6b8; --amber:#ff8a1f; --red:#ff3b5c;
  --accent:#2ee6e6;            /* re-themed per character/section */
  --accent-ink:#04201f;
  --glass:rgba(13,19,29,.55);
  --maxw:1240px;

  --f-display:'Oxanium',system-ui,sans-serif;
  --f-body:'Rajdhani',system-ui,sans-serif;
  --f-mono:'Share Tech Mono',ui-monospace,monospace;
  --f-brand:'Helix CNG','Oxanium',sans-serif;

  --ease:cubic-bezier(.16,.84,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:clamp(16px,1.05vw,18px); line-height:1.55;
  font-weight:500; letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* layered atmosphere behind everything */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(46,230,230,.10), transparent 60%),
    radial-gradient(900px 600px at 8% 12%, rgba(255,138,31,.06), transparent 60%),
    radial-gradient(1200px 900px at 50% 120%, rgba(46,230,230,.07), transparent 60%),
    linear-gradient(180deg,#05070d,#04060c 60%,#05080f);
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
::selection{background:var(--accent); color:#04161a}

.wrap{width:min(100% - 2.6rem,var(--maxw)); margin-inline:auto}

/* ---------- typography helpers ---------- */
.eyebrow{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--muted); display:inline-flex; align-items:center; gap:.7rem; margin:0 0 1rem;
}
.eyebrow__pip{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:pip 2.4s var(--ease) infinite}
@keyframes pip{0%,100%{opacity:1}50%{opacity:.25}}

.seclabel{display:flex;align-items:center;gap:1rem;margin-bottom:1.7rem}
.seclabel__num{font-family:var(--f-mono);color:var(--accent);font-size:.85rem;letter-spacing:.2em}
.seclabel__txt{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.34em;font-size:.78rem;color:var(--muted)}
.seclabel__line{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}

.h2{
  font-family:var(--f-display); font-weight:800; line-height:.98;
  font-size:clamp(2.1rem,5.4vw,4rem); letter-spacing:-.01em; margin:0 0 1.1rem;
  text-wrap:balance;
}
.h2__sub{
  display:block; font-family:var(--f-mono); font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; font-size:clamp(.7rem,1.1vw,.82rem); color:var(--accent);
  margin-top:.85rem;
}
.lead{font-size:clamp(1.02rem,1.5vw,1.22rem); color:#c4cdda; max-width:62ch; margin:0 0 1rem; font-weight:500}
.lead em,.lead strong{color:var(--ink)} .lead strong{font-weight:700}
.section{position:relative; padding:clamp(5rem,11vw,9rem) 0}

/* ---------- buttons ---------- */
.btn{
  --b:var(--accent);
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.18em; font-size:.82rem;
  padding:.95em 1.7em; cursor:pointer; border:1px solid var(--b); color:var(--ink);
  background:transparent; transition:.4s var(--ease); clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  overflow:hidden;
}
.btn span{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;background:var(--b);transform:translateY(101%);transition:.45s var(--ease);z-index:1}
.btn:hover{color:#05070d}
.btn:hover::before{transform:translateY(0)}
.btn--solid{background:var(--b);color:#05070d;font-weight:600}
.btn--solid::before{background:#fff;mix-blend-mode:overlay;transform:translateY(101%)}
.btn--solid:hover{color:#05070d;box-shadow:0 0 34px -6px var(--b)}
.btn--ghost{border-color:var(--line-2);color:var(--ink)}
.btn--ghost::before{background:var(--accent)}
.btn--lg{padding:1.15em 2.3em;font-size:.9rem}

/* ===================================================================
   FIXED CHROME — HUD frame, grain, scanline, cursor, preloader
   =================================================================== */
.hud{position:fixed;inset:14px;z-index:60;pointer-events:none}
.hud__corner{position:absolute;width:26px;height:26px;border:1.5px solid var(--line-2);opacity:.7}
.hud__corner--tl{top:0;left:0;border-right:0;border-bottom:0}
.hud__corner--tr{top:0;right:0;border-left:0;border-bottom:0}
.hud__corner--bl{bottom:0;left:0;border-right:0;border-top:0}
.hud__corner--br{bottom:0;right:0;border-left:0;border-top:0}
.hud__tag{position:absolute;top:-2px;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.22em;color:var(--faint)}
.hud__tag--l{left:34px} .hud__tag--r{right:34px}
@media (max-width:760px){.hud__tag{display:none}}

.grain{position:fixed;inset:0;z-index:58;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.scan{position:fixed;inset:0;z-index:57;pointer-events:none;opacity:.4;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);}

.cursor{position:fixed;top:0;left:0;z-index:90;pointer-events:none;mix-blend-mode:difference;will-change:transform}
.cursor__dot{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.cursor__ring{position:absolute;width:34px;height:34px;border:1px solid #fff;border-radius:50%;transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),opacity .25s}
.cursor.is-hot .cursor__ring{width:58px;height:58px;opacity:.6}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

.boot{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg);
  transition:opacity .6s var(--ease),visibility .6s}
.boot.is-done{opacity:0;visibility:hidden}
.boot__inner{text-align:center;color:var(--cyan);width:min(80vw,320px)}
.boot__helix{width:46px;height:46px;margin:0 auto .9rem;animation:spin 1.5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.boot__line{font-family:var(--f-mono);letter-spacing:.2em;font-size:.74rem;color:var(--ink);margin:0 0 .9rem}
.boot__caret{animation:pip 1s steps(1) infinite}
.boot__bar{height:2px;background:rgba(255,255,255,.08);overflow:hidden}
.boot__bar i{display:block;height:100%;width:0;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.boot__meta{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.24em;color:var(--faint);margin:.9rem 0 0}

/* ===================================================================
   NAV
   =================================================================== */
.nav{position:fixed;top:0;left:0;width:100%;z-index:70;display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.3rem,3vw,2.4rem);transition:.45s var(--ease)}
.nav.is-stuck{background:rgba(6,9,15,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding-block:.7rem}
.brand{display:flex;align-items:center;gap:.6rem}
.brand__mark{width:26px;height:33px;color:var(--cyan)}
.brand__mark path{stroke:var(--cyan);stroke-width:2}
.brand__mark .rung{stroke:var(--cyan);stroke-width:1.3;opacity:.55}
.brand__type{font-family:var(--f-brand);font-size:1.18rem;letter-spacing:.06em;line-height:1;color:var(--ink)}
.brand__type em{font-style:normal;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.34em;color:var(--muted);display:block;margin-top:3px}
.nav__links{display:flex;align-items:center;gap:.4rem}
.nav__links>a[data-link]{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;color:var(--muted);
  padding:.6rem .85rem;position:relative;transition:.3s}
.nav__links>a[data-link]::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.35rem;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:.35s var(--ease)}
.nav__links>a[data-link]:hover,.nav__links>a[data-link].is-active{color:var(--ink)}
.nav__links>a[data-link]:hover::after,.nav__links>a[data-link].is-active::after{transform:scaleX(1)}
.nav__store{display:inline-flex;align-items:center;gap:.5rem;margin-left:.6rem;padding:.6rem 1.05rem;border:1px solid var(--line-2);
  font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;color:var(--ink);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:.35s var(--ease)}
.nav__store svg{width:16px;height:16px;color:var(--cyan)}
.nav__store:hover{background:var(--cyan);color:#05070d;border-color:var(--cyan)}
.nav__store:hover svg{color:#05070d}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;z-index:80}
.nav__burger span{width:26px;height:2px;background:var(--ink);transition:.35s var(--ease)}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:880px){
  .nav__burger{display:flex}
  .nav__links{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:1.4rem;
    background:rgba(5,7,13,.96);backdrop-filter:blur(16px);transform:translateX(100%);transition:.5s var(--ease)}
  .nav.is-open .nav__links{transform:translateX(0)}
  .nav__links>a[data-link]{font-size:1.1rem;letter-spacing:.24em}
  .nav__store{margin-left:0;font-size:.9rem}
}

/* ===================================================================
   HERO
   =================================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:7rem 0 4rem}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__glow{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 60% at 72% 50%,rgba(46,230,230,.12),transparent 70%)}
.hero__grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent 85%)}
.hero__inner{position:relative;z-index:3;width:min(100% - 2.6rem,var(--maxw));margin-inline:auto}
.hero__title{font-family:var(--f-display);font-weight:800;line-height:.86;margin:.4rem 0 1.2rem;letter-spacing:-.02em}
.hero__title-l1{display:block;font-size:clamp(2.6rem,9vw,7rem);color:#fff}
.hero__title-l2{display:block;font-size:clamp(3.4rem,13.5vw,10.6rem);
  background:linear-gradient(180deg,#fff 8%,var(--cyan) 58%,var(--cyan-deep));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 40px rgba(46,230,230,.28))}
.hero__tagline{font-family:var(--f-mono);font-size:clamp(.95rem,2vw,1.35rem);letter-spacing:.1em;color:var(--cyan);margin:0 0 1.5rem;min-height:1.4em}
.hero__sub{max-width:54ch;color:#c2ccd9;font-size:clamp(1.02rem,1.5vw,1.2rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.hero__readouts{position:absolute;right:clamp(1.3rem,3vw,3rem);bottom:clamp(5rem,9vw,7rem);z-index:3;display:flex;flex-direction:column;gap:1.1rem;text-align:right}
.readout{border-right:2px solid var(--accent);padding-right:.9rem}
.readout b{display:block;font-family:var(--f-display);font-weight:700;font-size:1.7rem;line-height:1;color:#fff}
.readout span{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.24em;color:var(--muted)}
@media (max-width:880px){.hero__readouts{display:none}}
.scrollcue{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.3em;color:var(--muted)}
.scrollcue i{width:1px;height:34px;background:linear-gradient(var(--cyan),transparent);position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--cyan);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(260%)}}

/* ===================================================================
   01 — WORLD
   =================================================================== */
.world__head{max-width:880px;margin-bottom:3.4rem}
.timeline{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin:0 0 3rem;padding:0}
.tl{background:var(--bg-2);padding:1.7rem;position:relative}
.tl__year{font-family:var(--f-display);font-weight:700;font-size:1.5rem;color:#fff;display:block}
.tl__date{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;color:var(--cyan);display:block;margin:.3rem 0 .9rem}
.tl p{margin:0;color:var(--muted);font-size:.95rem}
.tl--now{background:linear-gradient(180deg,rgba(46,230,230,.08),var(--bg-2))}
.tl--now::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}
@media (max-width:760px){.timeline{grid-template-columns:1fr}}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-bottom:3.4rem}
@media (max-width:900px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pillars{grid-template-columns:1fr}}
.pcard{position:relative;background:var(--glass);border:1px solid var(--line);padding:1.7rem 1.6rem 1.8rem;
  backdrop-filter:blur(6px);transition:.45s var(--ease);overflow:hidden}
.pcard::after{content:"";position:absolute;top:0;right:0;width:12px;height:12px;border-top:1px solid var(--cyan);border-right:1px solid var(--cyan);opacity:.5}
.pcard__ico{font-size:1.5rem;color:var(--cyan);display:block;margin-bottom:.7rem;filter:drop-shadow(0 0 10px rgba(46,230,230,.5))}
.pcard h3{font-family:var(--f-display);font-weight:700;font-size:1.18rem;margin:0 0 .5rem}
.pcard p{margin:0;color:var(--muted);font-size:.95rem}
.pcard:hover{border-color:var(--line-2);transform:translateY(-5px);background:rgba(18,26,38,.6);box-shadow:0 24px 50px -28px rgba(46,230,230,.4)}
.pcard--myth{background:linear-gradient(160deg,rgba(255,138,31,.08),var(--glass))}
.pcard--myth .pcard__ico{color:var(--amber);filter:drop-shadow(0 0 10px rgba(255,138,31,.5))}
.pcard--myth::after{border-color:var(--amber)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--bg-2);padding:1.8rem 1.2rem;text-align:center}
.stat b{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,4vw,3rem);line-height:1;
  background:linear-gradient(180deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.16em;color:var(--muted);display:block;margin-top:.6rem;text-transform:uppercase}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ===================================================================
   02 — ENFORCERS (interactive roster)
   =================================================================== */
.enforcers{background:
  radial-gradient(900px 500px at 85% 0,rgba(46,230,230,.05),transparent 60%),var(--bg)}
.roster{display:grid;grid-template-columns:280px 1fr;gap:1.4rem;margin-top:2.6rem}
@media (max-width:900px){.roster{grid-template-columns:1fr}}

.roster__nav{display:flex;flex-direction:column;gap:.55rem}
@media (max-width:900px){.roster__nav{flex-direction:row;flex-wrap:wrap;gap:.5rem}}
.rtab{position:relative;text-align:left;background:var(--bg-2);border:1px solid var(--line);color:var(--ink);
  padding:.95rem 1.1rem;cursor:pointer;transition:.35s var(--ease);overflow:hidden;flex:1 1 auto;
  display:flex;flex-direction:column;gap:.15rem}
.rtab::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:.4s var(--ease)}
.rtab b{font-family:var(--f-display);font-weight:700;font-size:1.05rem;letter-spacing:.02em}
.rtab span{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.rtab:hover{background:var(--bg-3);border-color:var(--line-2)}
.rtab.is-active{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,transparent),var(--bg-2));border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.rtab.is-active::before{transform:scaleY(1)}
.rtab.is-active b{color:var(--accent)}

.dossier{position:relative;border:1px solid var(--line-2);background:
  linear-gradient(160deg,color-mix(in srgb,var(--accent) 7%,transparent),var(--bg-2));
  min-height:520px;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
.dossier::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0,color-mix(in srgb,var(--accent) 18%,transparent),transparent 55%)}
.dossier::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0;
  background:linear-gradient(transparent,color-mix(in srgb,var(--accent) 30%,transparent),transparent);
  height:40%;}
.dossier.is-scanning::after{animation:scanpass .55s var(--ease)}
@keyframes scanpass{0%{opacity:.9;transform:translateY(-100%)}100%{opacity:0;transform:translateY(280%)}}

.file{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1.15fr;gap:1rem;padding:2.2rem;
  opacity:0;visibility:hidden;transform:translateX(26px);transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s}
.file.is-active{position:relative;opacity:1;visibility:visible;transform:none}
@media (max-width:680px){.file{grid-template-columns:1fr;padding:1.5rem}}
.file__art{position:relative;display:flex;align-items:flex-end;justify-content:center;
  background:radial-gradient(80% 60% at 50% 100%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%)}
.file__art::before{content:"";position:absolute;bottom:8%;left:50%;transform:translateX(-50%);width:62%;height:14px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 40%,transparent);filter:blur(12px)}
.file__art img{max-height:430px;width:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.6));animation:float 6s ease-in-out infinite}
.file__art--drone img{max-height:300px;align-self:center;margin-bottom:8%}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.file__data{display:flex;flex-direction:column;justify-content:center}
.file__codename{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.24em;color:var(--accent);margin-bottom:.5rem}
.file__name{font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1;margin:0 0 .9rem;text-wrap:balance}
.file__spec{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.1rem}
.file__spec span{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;color:var(--ink);
  border:1px solid var(--line-2);padding:.3rem .6rem;background:rgba(0,0,0,.25)}
.file__quote{font-family:var(--f-display);font-style:italic;font-size:1.12rem;color:var(--accent);
  border-left:2px solid var(--accent);padding-left:.9rem;margin:0 0 1.1rem}
.file__bio{color:#c3cdda;font-size:.98rem;margin:0 0 1.3rem;max-width:52ch}
.file__cols{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.file__cols h4{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem;border-bottom:1px solid var(--line);padding-bottom:.4rem}
.file__cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.file__cols li{font-size:.9rem;color:var(--ink);padding-left:1.1rem;position:relative}
.file__cols li::before{content:"▸";position:absolute;left:0;color:var(--accent);font-size:.7rem;top:.18rem}
@media (max-width:680px){.file__art img{max-height:300px}}

/* ===================================================================
   03 — UNIVERSE
   =================================================================== */
.ucards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.6rem}
@media (max-width:900px){.ucards{grid-template-columns:1fr}}
.ucard{position:relative;display:flex;flex-direction:column;gap:.6rem;min-height:300px;padding:1.8rem;
  border:1px solid var(--line);background:var(--bg-2);overflow:hidden;transition:.5s var(--ease)}
.ucard__kicker{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.24em;color:var(--muted)}
.ucard h3{font-family:var(--f-display);font-weight:800;font-size:1.9rem;margin:0;letter-spacing:.01em}
.ucard p{margin:0;color:var(--muted);font-size:.95rem;max-width:34ch}
.ucard__cta{margin-top:auto;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);display:inline-flex;gap:.5rem;align-items:center}
.ucard__cta i{transition:.35s var(--ease)}
.ucard:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 30px 60px -34px rgba(0,0,0,.8)}
.ucard:hover .ucard__cta i{transform:translateX(6px)}
.ucard--radio{background:linear-gradient(165deg,rgba(46,230,230,.12),var(--bg-2))}
.ucard--radio h3,.ucard--radio .ucard__cta{color:var(--cyan)}
.ucard--radio:hover{box-shadow:0 30px 60px -30px rgba(46,230,230,.5)}
.ucard--pop{background:linear-gradient(165deg,rgba(255,61,139,.12),var(--bg-2))}
.ucard--pop h3{color:#ff5ea8} .ucard--pop:hover{box-shadow:0 30px 60px -30px rgba(255,61,139,.5)}
.ucard--game{background:linear-gradient(165deg,rgba(255,138,31,.1),var(--bg-2))}
.ucard--game h3{color:var(--amber)} .ucard--game:hover{box-shadow:0 30px 60px -30px rgba(255,138,31,.4)}
/* radio equalizer viz */
.ucard__viz{position:absolute;right:1.4rem;top:1.6rem;display:flex;align-items:flex-end;gap:3px;height:34px;opacity:.8}
.ucard__viz i{width:3px;background:var(--cyan);height:30%;animation:eq 1.1s var(--ease) infinite}
.ucard__viz i:nth-child(2){animation-delay:.1s}.ucard__viz i:nth-child(3){animation-delay:.25s}.ucard__viz i:nth-child(4){animation-delay:.4s}.ucard__viz i:nth-child(5){animation-delay:.15s}.ucard__viz i:nth-child(6){animation-delay:.3s}.ucard__viz i:nth-child(7){animation-delay:.05s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.ucard__orb{position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ff7eb8,#ff3d8b 45%,transparent 70%);opacity:.45;filter:blur(4px)}
.ucard__scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,138,31,.06) 0 2px,transparent 2px 7px);opacity:.6;pointer-events:none}

/* ===================================================================
   04 — NOVEL
   =================================================================== */
.novel{background:radial-gradient(800px 600px at 12% 30%,rgba(255,138,31,.06),transparent 60%),var(--bg)}
.novel__wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:860px){.novel__wrap{grid-template-columns:1fr}}
/* designed book-cover plate (no scanned cover exists for this title) */
.bookcover{position:relative;aspect-ratio:1/1.5;max-width:360px;margin-inline:auto;overflow:hidden;
  display:flex;flex-direction:column;padding:1.7rem 1.5rem;border:1px solid var(--line-2);
  background:
    radial-gradient(120% 70% at 50% 118%,rgba(46,230,230,.22),transparent 60%),
    radial-gradient(90% 50% at 50% -10%,rgba(255,138,31,.10),transparent 60%),
    linear-gradient(180deg,#070b13,#05080f);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.02);
  transition:.5s var(--ease)}
.bookcover::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px;mask-image:radial-gradient(80% 80% at 50% 30%,#000,transparent 80%)}
.bookcover__series{position:relative;z-index:3;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.34em;color:var(--cyan);text-align:center}
.bookcover__title{position:relative;z-index:3;font-family:var(--f-display);font-weight:800;line-height:.86;text-align:center;
  font-size:clamp(1.8rem,4.6vw,2.5rem);margin:.7rem 0 .3rem;color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.7)}
.bookcover__bookno{position:relative;z-index:3;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.3em;color:var(--muted);text-align:center}
.bookcover__art{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;z-index:2}
.bookcover__art img{max-height:74%;width:auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.7))}
.bookcover__byline{position:relative;z-index:3;margin-top:auto;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.3em;color:var(--ink);text-align:center}
.bookcover::after{content:"";position:absolute;top:-1px;left:-1px;width:26px;height:26px;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan);z-index:4}
.novel__glint{position:absolute;inset:0;z-index:5;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.18) 50%,transparent 58%);
  transform:translateX(-120%);pointer-events:none}
.bookcover:hover .novel__glint{transform:translateX(120%);transition:transform 1.1s var(--ease)}
/* real cover photo variant — keeps frame, corner bracket & glint; drops the designed plate */
.bookcover--photo{padding:0;aspect-ratio:1120/1717}
.bookcover--photo::before{display:none}
.bookcover__full{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.novel__pitch{color:var(--muted);font-size:1rem;max-width:56ch;margin:.4rem 0 1.2rem}
.novel__pitch em{color:var(--ink);font-style:italic}
.novel__meta{display:flex;flex-wrap:wrap;gap:.6rem;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:.4rem}
.novel__meta span:nth-child(even){color:var(--faint)}

/* ===================================================================
   STORE BAND
   =================================================================== */
.storeband{position:relative;padding:clamp(3.5rem,7vw,5.5rem) 0;overflow:hidden;border-block:1px solid var(--line)}
.storeband__bg{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(5,7,13,.92),rgba(5,7,13,.6)),
  url('../assets/img/bg-reactor.jpg') center/cover;filter:saturate(.7)}
.storeband__bg::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 2px,transparent 2px 6px)}
.storeband__inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.storeband__h{font-family:var(--f-display);font-weight:800;font-size:clamp(1.8rem,4.5vw,3.2rem);margin:.3rem 0;
  background:linear-gradient(180deg,#fff,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.storeband__p{color:#c2ccd9;max-width:44ch;margin:0}
.storeband .btn--solid{--accent:var(--amber)}

/* ===================================================================
   05 — STUDIO
   =================================================================== */
.studio__grid{display:grid;grid-template-columns:1.3fr .8fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:860px){.studio__grid{grid-template-columns:1fr}}
.rights{position:relative;border:1px solid var(--line-2);background:var(--glass);backdrop-filter:blur(6px);padding:2rem;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.rights__ico{font-family:var(--f-display);font-size:2.6rem;font-weight:800;color:var(--cyan);line-height:1;display:block;margin-bottom:.6rem}
.rights h3{font-family:var(--f-display);font-weight:700;font-size:1.2rem;margin:0 0 .8rem}
.rights p{color:var(--muted);font-size:.95rem;margin:0 0 .8rem}
.rights p strong{color:var(--ink)}
.rights__small{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;color:var(--faint)}

/* ===================================================================
   SUPPLY DROP
   =================================================================== */
.supply{padding:clamp(4rem,8vw,6rem) 0;border-top:1px solid var(--line);
  background:radial-gradient(700px 400px at 50% 0,rgba(46,230,230,.07),transparent 60%)}
.supply__inner{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap}
.supply__h{font-family:var(--f-display);font-weight:800;font-size:clamp(1.6rem,3.6vw,2.6rem);margin:0 0 .5rem}
.supply__copy p{color:var(--muted);margin:0;max-width:40ch}
.supply__form{flex:1;min-width:300px}
.supply__field{display:flex;gap:.6rem;flex-wrap:wrap}
.supply__field input{flex:1;min-width:200px;background:var(--bg-2);border:1px solid var(--line-2);color:var(--ink);
  font-family:var(--f-mono);font-size:.9rem;padding:1em 1.1em;letter-spacing:.04em;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.supply__field input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 0 24px -6px var(--cyan)}
.supply__field input::placeholder{color:var(--faint)}
.supply__note{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;color:var(--faint);margin:.9rem 0 0}
.supply__note.is-ok{color:var(--cyan)}

/* ===================================================================
   FOOTER
   =================================================================== */
.foot{border-top:1px solid var(--line);padding:clamp(3rem,6vw,4.5rem) 0 1.6rem;background:var(--bg-2)}
.foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
@media (max-width:760px){.foot__grid{grid-template-columns:1fr 1fr}.foot__brand{grid-column:1/-1}}
.foot__tag{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;color:var(--muted);margin:1rem 0 1.3rem}
.foot__social{display:flex;gap:.6rem}
.foot__social a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line-2);
  font-family:var(--f-mono);font-size:.72rem;color:var(--muted);transition:.35s var(--ease)}
.foot__social a:hover{background:var(--cyan);color:#05070d;border-color:var(--cyan)}
.foot__col h4{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin:0 0 1.1rem}
.foot__col a{display:block;color:var(--muted);font-size:.92rem;padding:.32rem 0;transition:.3s}
.foot__col a:hover{color:var(--ink);transform:translateX(4px)}
.foot__base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.foot__base p{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;color:var(--faint);margin:0}
.foot__loc{color:var(--cyan)!important;opacity:.7}

/* ===================================================================
   REVEAL ANIMATIONS
   =================================================================== */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal].in.d1{transition-delay:.08s}[data-reveal].in.d2{transition-delay:.16s}[data-reveal].in.d3{transition-delay:.24s}

/* ===================================================================
   BRAND DISPLAY FONT — the official Helix Enforcers face.
   Titles only (never paragraphs, subtitles, labels or quotes).
   It is an uppercase angular display face, so it stays on big headings.
   =================================================================== */
.brand__type,
.hero__title,
.h2,
.file__name,
.bookcover__title,
.ucard h3,
.storeband__h,
.supply__h{
  font-family:var(--f-brand);
  font-weight:400;            /* single-weight face */
  text-transform:uppercase;
}
.brand__type{letter-spacing:.04em;font-size:1.32rem}
.hero__title{letter-spacing:.03em;line-height:.96}
.hero__title-l1{font-size:clamp(2.2rem,7.6vw,5.6rem)}
.hero__title-l2{font-size:clamp(3rem,12vw,9.2rem);line-height:.98}
.h2{letter-spacing:.035em;line-height:1.04}
.file__name{letter-spacing:.035em;line-height:1.08}
.bookcover__title{letter-spacing:.04em;line-height:1}
.ucard h3{letter-spacing:.05em;font-size:1.7rem}
.storeband__h,.supply__h{letter-spacing:.035em;line-height:1.04}
/* subtitles / sub-headings explicitly stay in the clean fonts */
.h2__sub,.brand__type em{font-family:var(--f-mono)}
.pcard h3,.rights h3{font-family:var(--f-display)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .file__art img{animation:none}
}