/* EVE Junkie – marketing site. Plain CSS, tokens mirror frontend/src/index.css (app theme). */

/* ------------------------------------------------------------------ fonts */
@font-face { font-family: "Orbitron"; font-weight: 500; font-display: swap; src: url(../fonts/orbitron-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Orbitron"; font-weight: 700; font-display: swap; src: url(../fonts/orbitron-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Orbitron"; font-weight: 900; font-display: swap; src: url(../fonts/orbitron-latin-900-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter Variable"; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin-wght-normal.woff2) format("woff2"); }

/* ------------------------------------------------------------------ tokens */
:root {
  --void: #07080a;
  --void-2: #030406;
  --hull: #0e1014;
  --hull-2: #151820;
  --hull-3: #1d212b;
  --line: #2a2f3a;
  --line-strong: #3a4150;
  --silver: #c9ced6;
  --silver-dim: #8b92a0;
  --silver-mute: #5d6472;
  --white: #f1f3f6;
  --blood: #e0202a;
  --blood-bright: #ff3b45;
  --blood-deep: #9c1219;
  --ok: #3ddc97;
  --warn: #f5b942;
  --info: #4db8ff;
  --violet: #b38cff;
  --blurple: #5865f2;
  --glow: 0 0 0 1px rgb(224 32 42 / .35), 0 0 18px rgb(224 32 42 / .25);
  --glow-strong: 0 0 0 1px rgb(224 32 42 / .6), 0 0 40px rgb(224 32 42 / .35);
  --panel-shadow: 0 10px 30px -12px rgb(0 0 0 / .8);
  --font-sans: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Orbitron", "Inter Variable", sans-serif;
  --cut: 14px;
  --hdr: 76px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: clamp(15px, .3vw + 11px, 20px);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
  background: var(--void);
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--silver);
  background-color: var(--void);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgb(224 32 42 / .08), transparent 60%),
    linear-gradient(rgb(255 255 255 / .015) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .015) 1px, transparent 1px);
  background-size: 100% 100%, 32px 32px, 32px 32px;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: .06em; color: var(--white); margin: 0; line-height: 1.15; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
::selection { background: rgb(224 32 42 / .4); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
:focus-visible { outline: 2px solid var(--blood-bright); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--blood); color: #fff; font-family: var(--font-display); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.wrap { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.wrap.narrow { max-width: 56rem; }

/* ------------------------------------------------------------------ app primitives */
.ej-panel {
  background: rgb(14 16 20 / .9);
  border: 1px solid var(--line);
  box-shadow: var(--panel-shadow);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ej-label { font-family: var(--font-display); font-size: .6875rem; text-transform: uppercase; letter-spacing: .18em; color: var(--silver-dim); }
.ej-divider { height: 1px; background: linear-gradient(90deg, transparent, rgb(224 32 42 / .6), transparent); }
.ej-brackets { position: relative; }
.ej-brackets::before, .ej-brackets::after { content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none; border-color: rgb(224 32 42 / .8); z-index: 3; }
.ej-brackets::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.ej-brackets::after { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
.scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgb(0 0 0 / .18) 0 1px, transparent 1px 3px); z-index: 2; }
.scanlines.soft { opacity: .45; }

.kicker { display: inline-flex; align-items: center; gap: .9em; margin: 0 0 1rem; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .38em; text-transform: uppercase; color: var(--blood-bright); }
.kicker-bar { width: 2.6em; height: 3px; background: var(--blood); box-shadow: 0 0 12px var(--blood); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.25rem 0 0; list-style: none; }
.chips li { font-family: var(--font-display); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .45em .9em; border: 1px solid rgb(224 32 42 / .7); background: rgb(12 14 19 / .85); color: var(--silver); }
.chips li:first-child { background: var(--blood); border-color: var(--blood); color: #fff; }

.badge { display: inline-block; font-family: var(--font-display); font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .35em .7em; border: 1px solid currentColor; line-height: 1.2; white-space: nowrap; }
.badge-free { color: var(--ok); background: rgb(61 220 151 / .08); }
.badge-essentials { color: var(--blood-bright); background: rgb(224 32 42 / .1); }
.badge-ops { color: var(--warn); background: rgb(245 185 66 / .08); }
.badge-trader, .badge-companion { color: var(--info); background: rgb(77 184 255 / .08); }
.badge-music { color: var(--violet); background: rgb(179 140 255 / .08); }

/* buttons */
.btn {
  --c: var(--cut);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  padding: 1em 1.6em; border: 1px solid var(--line-strong); background: rgb(14 16 20 / .7);
  font-family: var(--font-display); font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--silver); text-decoration: none; cursor: pointer; white-space: nowrap;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .25s var(--ease);
}
.btn .ico { width: 1.2em; height: 1.2em; transition: transform .25s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
.btn-sm { padding: .78em 1.2em; font-size: .66rem; }
.btn-red { background: linear-gradient(180deg, var(--blood-bright), var(--blood) 55%, var(--blood-deep)); border-color: var(--blood-bright); color: #fff; box-shadow: 0 0 24px rgb(224 32 42 / .35); }
.btn-red:hover { box-shadow: 0 0 36px rgb(255 59 69 / .6); filter: brightness(1.08); }
.btn-ghost { background: rgb(14 16 20 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn-ghost:hover { border-color: rgb(224 32 42 / .7); color: #fff; box-shadow: var(--glow); }
.btn-ghost .ico[aria-hidden] { color: var(--blood-bright); }

/* EVE SSO button (themed copy of the app's EveSsoButton) */
.btn-sso {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 1.1rem;
  height: 3.6rem; padding: 0 1.8rem 0 1.6rem; overflow: hidden;
  border: 1px solid rgb(93 100 114 / .6); background: linear-gradient(180deg, #1b1e24, #000);
  color: var(--silver); text-decoration: none;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: border-color .2s, box-shadow .2s, transform .25s var(--ease);
}
.btn-sso:hover { border-color: rgb(224 32 42 / .7); box-shadow: 0 0 28px rgb(224 32 42 / .4); color: #fff; }
.sso-bar { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--blood); box-shadow: 0 0 12px var(--blood); }
.sso-eve { width: 4.2rem; height: auto; color: var(--silver); }
.btn-sso:hover .sso-eve { color: #fff; }
.sso-sep { width: 1px; height: 1.5rem; background: var(--line-strong); }
.sso-label { font-family: var(--font-display); font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.sso-shine { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .12), transparent); transform: translateX(-100%); transition: transform .7s; pointer-events: none; }
.btn-sso:hover .sso-shine { transform: translateX(100%); }
.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; }

/* ------------------------------------------------------------------ cursor glow */
.cursor-glow { position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none; z-index: 1; background: radial-gradient(circle, rgb(224 32 42 / .09), transparent 65%); opacity: 0; transition: opacity .4s; will-change: transform; }
.has-cursor .cursor-glow { opacity: 1; }

/* ------------------------------------------------------------------ header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; transition: background .3s, box-shadow .3s, -webkit-backdrop-filter .3s, backdrop-filter .3s; }
.hdr-inner { display: flex; align-items: center; gap: 1.5rem; height: var(--hdr); max-width: 96rem; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); transition: height .3s var(--ease); }
.site-header.scrolled { background: rgb(7 8 10 / .72); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 var(--line), 0 10px 30px -10px rgb(0 0 0 / .8); }
.site-header.scrolled .hdr-inner { height: 58px; }
.brand { display: block; flex: none; width: 112px; height: 56px; overflow: hidden; transition: height .3s var(--ease), width .3s var(--ease); }
.brand img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.55); }
.scrolled .brand { width: 92px; height: 46px; }
.main-nav { display: flex; align-items: center; flex: 1; gap: 1.5rem; }
.main-nav ul { display: flex; gap: .25rem; margin: 0 auto; padding: 0; list-style: none; }
.main-nav ul a { position: relative; display: block; padding: .6em .9em; font-family: var(--font-display); font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--silver-dim); transition: color .2s; }
.main-nav ul a::after { content: ""; position: absolute; left: .9em; right: .9em; bottom: .2em; height: 2px; background: var(--blood); box-shadow: 0 0 10px var(--blood); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.main-nav ul a:hover, .main-nav ul a.active { color: #fff; }
.main-nav ul a.active::after, .main-nav ul a:hover::after { transform: scaleX(1); }
.nav-extra { display: flex; align-items: center; gap: 1rem; }
.lang { display: flex; border: 1px solid var(--line); }
.lang a { padding: .45em .7em; font-family: var(--font-display); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-decoration: none; color: var(--silver-mute); transition: color .2s, background .2s; }
.lang a:hover { color: var(--silver); }
.lang a.on { color: #fff; background: rgb(224 32 42 / .25); box-shadow: inset 0 -2px 0 var(--blood); }
.hdr-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; }
.hdr-progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--blood-deep), var(--blood-bright)); box-shadow: 0 0 8px var(--blood); transform: scaleX(var(--p, 0)); transform-origin: left; }
.burger { display: none; position: relative; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--line-strong); background: rgb(14 16 20 / .7); cursor: pointer; }
.burger i { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--silver); transition: transform .3s var(--ease), opacity .2s; }
.burger i:nth-of-type(1) { top: 14px; } .burger i:nth-of-type(2) { top: 21px; } .burger i:nth-of-type(3) { top: 28px; }
.menu-open .burger i:nth-of-type(1) { transform: translateY(7px) rotate(45deg); background: var(--blood-bright); }
.menu-open .burger i:nth-of-type(2) { opacity: 0; }
.menu-open .burger i:nth-of-type(3) { transform: translateY(-7px) rotate(-45deg); background: var(--blood-bright); }

@media (max-width: 1080px) {
  .burger { display: block; }
  .main-nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; gap: 2rem; padding: 90px 24px 40px; background: rgb(7 8 10 / .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .main-nav ul { flex-direction: column; align-items: center; margin: 0; gap: .4rem; }
  .main-nav ul a { font-size: 1rem; padding: .6em 1em; }
  .menu-open .main-nav { opacity: 1; visibility: visible; }
  .menu-open { overflow: hidden; }
  .nav-extra { flex-direction: column; }
}

/* ------------------------------------------------------------------ HERO */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--hdr) + 4.2rem) 0 3.2rem; overflow: hidden; isolation: isolate; background: var(--void-2); }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0; mix-blend-mode: screen; transition: opacity 2s; }
.hero-video.on { opacity: .22; }
.hero-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(ellipse 60% 55% at 50% 45%, rgb(3 4 6 / .55), transparent 70%),
  radial-gradient(ellipse at center, transparent 50%, rgb(0 0 0 / .7) 100%),
  linear-gradient(to bottom, rgb(3 4 6 / .8), transparent 22%, transparent 70%, var(--void) 100%); }
.hero .scanlines { z-index: 0; opacity: .7; }
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 1; font-family: var(--font-display); }
.hud-c { position: absolute; width: 46px; height: 46px; border: 0 solid rgb(201 206 214 / .5); }
.hud-c.tl { left: 24px; top: calc(var(--hdr) + 12px); border-left-width: 2px; border-top-width: 2px; }
.hud-c.tr { right: 24px; top: calc(var(--hdr) + 12px); border-right-width: 2px; border-top-width: 2px; }
.hud-c.bl { left: 24px; bottom: 24px; border-left-width: 2px; border-bottom-width: 2px; }
.hud-c.br { right: 24px; bottom: 24px; border-right-width: 2px; border-bottom-width: 2px; }
.hud-top { position: absolute; left: 90px; right: 90px; top: calc(var(--hdr) + 26px); display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .6rem; font-weight: 700; letter-spacing: .32em; color: rgb(201 206 214 / .7); white-space: nowrap; }
.hud-ladder { display: flex; gap: 1.4em; }
.hud-ladder span { color: rgb(201 206 214 / .3); transition: color .4s, text-shadow .4s; }
.hud-ladder span.past { color: var(--silver); }
.hud-ladder span.on { color: var(--blood-bright); text-shadow: 0 0 12px var(--blood-bright); }
.hud-live { color: var(--blood-bright); animation: blink 1s steps(2, start) infinite; margin-right: 1.4em; }
.hud-clock { color: var(--silver); font-variant-numeric: tabular-nums; }
@keyframes blink { to { visibility: hidden; } }

.hero-content { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-logo { width: clamp(180px, 15vw, 290px); margin-bottom: .6rem; filter: drop-shadow(0 0 40px rgb(224 32 42 / .5)); animation: logo-in 1.4s var(--ease) both; }
@keyframes logo-in { from { opacity: 0; transform: scale(.85); filter: drop-shadow(0 0 0 rgb(224 32 42 / 0)) blur(8px); } }
.hero-kicker { justify-content: center; }
.hero-title { max-width: 20ch; font-size: clamp(2rem, 5vw, 4.9rem); font-weight: 900; line-height: 1.02; letter-spacing: .05em; text-transform: uppercase; color: #fff; text-shadow: 0 0 30px rgb(224 32 42 / .6), 0 6px 30px rgb(0 0 0 / .9); text-wrap: balance; }
.hero-lead { max-width: 44rem; margin: 1.3rem auto 1.9rem; font-size: clamp(1rem, 1.25vw, 1.15rem); color: var(--silver); text-shadow: 0 2px 12px rgb(0 0 0 / .9); }
.hero-stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(2rem, 5vh, 3.5rem); border-top: 1px solid rgb(42 47 58 / .8); border-bottom: 1px solid rgb(42 47 58 / .8); background: linear-gradient(90deg, transparent, rgb(14 16 20 / .6), transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.stat { padding: 1.1rem 1rem; text-align: center; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: linear-gradient(transparent, rgb(224 32 42 / .6), transparent); }
.stat-n, .stat-s { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.6rem); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 20px rgb(224 32 42 / .5); }
.stat-l { display: block; margin-top: .2rem; font-family: var(--font-display); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--silver-dim); }
.scroll-hint { position: absolute; left: 50%; bottom: 1.2rem; z-index: 3; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: .55rem; letter-spacing: .4em; text-transform: uppercase; color: var(--silver-mute); text-decoration: none; }
.scroll-hint i { width: 1px; height: 34px; background: linear-gradient(var(--blood-bright), transparent); animation: drip 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* glitch headline */
.glitch { position: relative; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.glitch::before { color: rgb(255 40 60 / .9); text-shadow: none; }
.glitch::after { color: rgb(60 220 255 / .8); text-shadow: none; }
.glitch.glitching::before { opacity: 1; animation: gl-a .35s steps(2) both; }
.glitch.glitching::after { opacity: 1; animation: gl-b .35s steps(2) both; }
@keyframes gl-a { 0% { clip-path: inset(10% 0 70% 0); transform: translate(-6px, 0); } 25% { clip-path: inset(60% 0 10% 0); transform: translate(5px, 0); } 50% { clip-path: inset(30% 0 45% 0); transform: translate(-4px, 0); } 75% { clip-path: inset(80% 0 2% 0); transform: translate(6px, 0); } 100% { clip-path: inset(45% 0 40% 0); transform: translate(0); opacity: 0; } }
@keyframes gl-b { 0% { clip-path: inset(70% 0 5% 0); transform: translate(6px, 2px); } 25% { clip-path: inset(5% 0 75% 0); transform: translate(-5px, 0); } 50% { clip-path: inset(50% 0 30% 0); transform: translate(4px, -1px); } 75% { clip-path: inset(20% 0 60% 0); transform: translate(-6px, 0); } 100% { clip-path: inset(0 0 90% 0); transform: translate(0); opacity: 0; } }

/* ------------------------------------------------------------------ sections */
.section { position: relative; padding: clamp(4.5rem, 8vw, 7rem) 0; }
.section[data-hud]::before { content: "// " attr(data-hud); position: absolute; top: clamp(2rem, 4vw, 3rem); left: clamp(16px, 3vw, 40px); font-family: var(--font-display); font-size: .6rem; letter-spacing: .3em; color: var(--silver-mute); }
.sec-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 52rem; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .kicker { justify-content: center; }
.sec-title { font-size: clamp(1.75rem, 4.2vw, 3.5rem); font-weight: 900; text-transform: uppercase; text-wrap: balance; text-shadow: 0 0 30px rgb(224 32 42 / .25); }
.sec-lead { margin: 1.1rem auto 0; max-width: 44rem; font-size: 1.06rem; color: var(--silver-dim); }

/* reveal on scroll */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ TRAILER */
.trailer { background: radial-gradient(ellipse 70% 60% at 50% 60%, rgb(224 32 42 / .09), transparent 70%); }
.player { max-width: 68rem; margin: 0 auto; }
.player-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid rgb(224 32 42 / .45); box-shadow: 0 0 0 1px rgb(0 0 0 / .8), 0 0 80px rgb(224 32 42 / .22), 0 40px 120px -20px rgb(0 0 0 / .9); }
.player-video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.player-play { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; border: 0; cursor: pointer; background: radial-gradient(ellipse at center, rgb(3 4 6 / .15), rgb(3 4 6 / .55)); transition: opacity .4s, visibility .4s; }
.player-play:hover .pp-btn { transform: scale(1.08); box-shadow: 0 0 60px rgb(255 59 69 / .8); }
.pp-btn { position: relative; flex: none; display: grid; place-items: center; width: clamp(4.5rem, 9vw, 7rem); height: clamp(4.5rem, 9vw, 7rem); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--blood-bright), var(--blood) 55%, var(--blood-deep)); color: #fff; box-shadow: 0 0 40px rgb(224 32 42 / .6), inset 0 0 0 2px rgb(255 255 255 / .2); transition: transform .3s var(--ease), box-shadow .3s; }
.pp-btn .ico { width: 40%; height: 40%; margin-left: 8%; stroke: none; }
.pp-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(255 59 69 / .7); animation: ring 2.4s var(--ease) infinite; pointer-events: none; }
.pp-ring.r2 { animation-delay: 1.2s; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
.pp-label { font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 12px #000; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.pp-label small { font-size: .6rem; letter-spacing: .2em; color: var(--silver-dim); }
.player.playing .player-play { opacity: 0; visibility: hidden; }
.player.playing .scanlines { display: none; }
.player-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .9rem .2rem 0; }
.player-q { display: flex; align-items: center; gap: .4rem; }
.player-q button { padding: .4em .8em; border: 1px solid var(--line); background: transparent; cursor: pointer; font-family: var(--font-display); font-size: .62rem; letter-spacing: .12em; color: var(--silver-mute); transition: all .2s; }
.player-q button:hover { color: var(--silver); border-color: var(--line-strong); }
.player-q button[aria-pressed="true"] { color: #fff; border-color: var(--blood); background: rgb(224 32 42 / .2); }

/* ------------------------------------------------------------------ STORY */
.story-grid { display: grid; grid-template-columns: 11rem 1fr; gap: clamp(1.5rem, 4vw, 4rem); }
.story-rail { position: sticky; top: 30vh; align-self: start; display: flex; flex-direction: column; gap: 2.4rem; padding-left: 1.6rem; }
.rail-line { position: absolute; left: 0; top: .4rem; bottom: .4rem; width: 2px; background: var(--line); }
.rail-line span { position: absolute; inset: 0; background: linear-gradient(var(--blood-bright), var(--blood)); box-shadow: 0 0 12px var(--blood); transform: scaleY(var(--p, 0)); transform-origin: top; transition: transform .2s linear; }
.rail-step { position: relative; display: flex; flex-direction: column; font-family: var(--font-display); text-transform: uppercase; color: var(--silver-mute); transition: color .4s; }
.rail-step::before { content: ""; position: absolute; left: calc(-1.6rem - 5px); top: .45rem; width: 12px; height: 12px; background: var(--void); border: 2px solid var(--line-strong); transform: rotate(45deg); transition: all .4s; }
.rail-step b { font-size: 1.6rem; font-weight: 900; line-height: 1; }
.rail-step span { font-size: .62rem; letter-spacing: .22em; margin-top: .3rem; }
.rail-step.on { color: #fff; }
.rail-step.on b { color: var(--blood-bright); text-shadow: 0 0 18px var(--blood); }
.rail-step.on::before, .rail-step.past::before { border-color: var(--blood-bright); background: var(--blood); box-shadow: 0 0 12px var(--blood); }
.rail-step.past { color: var(--silver-dim); }
.chapter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; min-height: 0; padding: clamp(2rem, 5vw, 4.5rem) 0; }
.chapter:nth-child(even) .ch-media { order: -1; }
.ch-num { font-family: var(--font-display); font-size: .66rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--silver-mute); }
.ch-num span { color: var(--blood-bright); }
.ch-title { font-size: clamp(1.5rem, 2.8vw, 2.5rem); font-weight: 900; text-transform: uppercase; margin-bottom: 1rem; }
.ch-text > p:not(.ch-num) { color: var(--silver-dim); font-size: 1.04rem; }
.ch-media { position: relative; aspect-ratio: 16 / 12; }
.ch-shot { position: absolute; padding: 0; border: 1px solid rgb(224 32 42 / .5); background: #000; cursor: zoom-in; box-shadow: 0 0 0 1px rgb(0 0 0 / .8), 0 30px 70px -10px rgb(0 0 0 / .9), 0 0 50px rgb(224 32 42 / .16); transition: transform .5s var(--ease), box-shadow .3s, border-color .3s; overflow: hidden; }
.ch-shot img { width: 100%; }
.ch-shot.a { left: 0; top: 0; width: 86%; transform: translate3d(0, var(--py, 0px), 0) perspective(1400px) rotateY(6deg); }
.ch-shot.b { right: 0; bottom: 0; width: 62%; z-index: 2; transform: translate3d(0, var(--py2, 0px), 0) perspective(1400px) rotateY(-4deg); border-color: rgb(255 59 69 / .8); }
.chapter:nth-child(even) .ch-shot.a { left: auto; right: 0; transform: translate3d(0, var(--py, 0px), 0) perspective(1400px) rotateY(-6deg); }
.chapter:nth-child(even) .ch-shot.b { right: auto; left: 0; transform: translate3d(0, var(--py2, 0px), 0) perspective(1400px) rotateY(4deg); }
.ch-shot:hover { border-color: var(--blood-bright); box-shadow: var(--glow-strong), 0 30px 70px -10px rgb(0 0 0 / .9); z-index: 3; }

/* ------------------------------------------------------------------ FEATURES */
.fx-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.fx-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.fx-filters button { position: relative; padding: .75em 1.2em; border: 1px solid var(--line); background: rgb(14 16 20 / .8); cursor: pointer; font-family: var(--font-display); font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--silver-dim); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: all .2s; }
.fx-filters button sup { margin-left: .5em; font-size: .85em; color: var(--silver-mute); }
.fx-filters button:hover { color: #fff; border-color: var(--line-strong); }
.fx-filters button[aria-pressed="true"] { color: #fff; border-color: var(--blood); background: linear-gradient(180deg, rgb(224 32 42 / .35), rgb(224 32 42 / .12)); box-shadow: inset 0 -2px 0 var(--blood); }
.fx-filters button[aria-pressed="true"] sup { color: var(--blood-bright); }
.fx-tools { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.fx-free { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-family: var(--font-display); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--silver-dim); }
.fx-free input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle { position: relative; width: 36px; height: 18px; border: 1px solid var(--line-strong); background: var(--hull); transition: all .2s; }
.toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; background: var(--silver-mute); transition: all .25s var(--ease); }
.fx-free input:checked + .toggle { border-color: var(--ok); background: rgb(61 220 151 / .15); }
.fx-free input:checked + .toggle::after { left: 20px; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.fx-free input:focus-visible + .toggle { outline: 2px solid var(--blood-bright); outline-offset: 2px; }
.fx-search { display: flex; align-items: center; gap: .5rem; padding: 0 .8rem; border: 1px solid var(--line); background: rgb(14 16 20 / .8); color: var(--silver-mute); transition: border-color .2s; }
.fx-search:focus-within { border-color: var(--blood); box-shadow: var(--glow); }
.fx-search input { width: 14rem; max-width: 50vw; padding: .7rem 0; border: 0; outline: 0; background: transparent; color: var(--silver); font: inherit; font-size: .88rem; }
.fx-search input::placeholder { color: var(--silver-mute); }
.fx-count { margin: 0 0 1.4rem; }
.fx-count span { color: var(--blood-bright); }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: 1rem; }
.fx-card {
  --mx: 50%; --my: 0%;
  position: relative; display: flex; flex-direction: column; padding: 1.4rem 1.4rem 1.2rem;
  background: radial-gradient(400px circle at var(--mx) var(--my), rgb(224 32 42 / .1), transparent 45%), rgb(14 16 20 / .9);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: border-color .25s, box-shadow .25s, transform .35s var(--ease), opacity .35s;
}
.fx-card::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 0; background: var(--blood); box-shadow: 0 0 12px var(--blood); transition: height .35s var(--ease); }
.fx-card:hover { border-color: rgb(224 32 42 / .55); box-shadow: var(--glow), var(--panel-shadow); transform: translateY(-4px); }
.fx-card:hover::before { height: 100%; }
.fx-card[hidden] { display: none; }
.fx-card.pop { animation: pop .45s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.fx-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.fx-ico { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; color: var(--blood-bright); background: linear-gradient(135deg, rgb(224 32 42 / .2), rgb(224 32 42 / .04)); border: 1px solid rgb(224 32 42 / .45); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: all .3s; }
.fx-ico .ico { width: 1.35rem; height: 1.35rem; }
.fx-card:hover .fx-ico { color: #fff; background: var(--blood); box-shadow: 0 0 20px rgb(224 32 42 / .6); }
.fx-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.fx-cat { font-family: var(--font-display); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--silver-mute); }
.fx-card h4 { font-size: .92rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .6rem; }
.fx-card > p { flex: 1; font-size: .9rem; color: var(--silver-dim); margin-bottom: 1.1rem; }
.fx-shot { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--line); background: #000; cursor: zoom-in; aspect-ratio: 16 / 6; }
.fx-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: .55; filter: saturate(.7); transform: scale(1.02); transition: opacity .35s, transform .6s var(--ease), filter .35s; }
.fx-card:hover .fx-shot img, .fx-shot:focus-visible img { opacity: 1; filter: none; transform: scale(1.08); }
.fx-view { position: absolute; left: .6rem; bottom: .5rem; display: inline-flex; align-items: center; gap: .4rem; padding: .3em .6em; font-family: var(--font-display); font-size: .55rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: rgb(7 8 10 / .8); border: 1px solid rgb(224 32 42 / .6); opacity: 0; transform: translateY(6px); transition: all .3s var(--ease); }
.fx-card:hover .fx-view, .fx-shot:focus-visible .fx-view { opacity: 1; transform: none; }
.fx-empty { text-align: center; padding: 3rem 0; color: var(--silver-mute); }

/* ------------------------------------------------------------------ SHOWCASE */
.showcase { overflow: hidden; }
.monitor-stage { position: relative; perspective: 1800px; max-width: 70rem; margin: 0 auto; }
.monitor { --rx: 6deg; --ry: 0deg; position: relative; padding: clamp(6px, 1vw, 12px); background: linear-gradient(180deg, #1a1d24, #0b0d11); border: 1px solid var(--line-strong); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .6s var(--ease); box-shadow: 0 50px 120px -30px rgb(0 0 0 / .9); }
.monitor::before { content: ""; position: absolute; inset: 0; border: 1px solid rgb(224 32 42 / .5); pointer-events: none; clip-path: inherit; }
.monitor-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: 1px solid #000; }
.mon-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .8s var(--ease), transform 6s linear, filter .8s; filter: brightness(1.6) saturate(0); }
.mon-img.on { opacity: 1; transform: scale(1); filter: none; }
.mon-sweep { position: absolute; inset: 0; pointer-events: none; z-index: 3; background: linear-gradient(180deg, transparent, rgb(224 32 42 / .08) 50%, transparent); height: 35%; animation: sweep 5s linear infinite; }
@keyframes sweep { from { transform: translateY(-100%); } to { transform: translateY(290%); } }
.mon-enlarge { position: absolute; right: .8rem; top: .8rem; z-index: 4; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid rgb(224 32 42 / .6); background: rgb(7 8 10 / .75); cursor: zoom-in; color: #fff; opacity: .8; transition: all .2s; }
.mon-enlarge:hover { opacity: 1; background: var(--blood); }
.monitor-hud { display: flex; justify-content: space-between; padding: .7rem .3rem .2rem; }
.monitor-hud b { color: #fff; font-weight: 700; }
.monitor-progress { height: 2px; background: var(--line); margin: .3rem .3rem .2rem; }
.monitor-progress span { display: block; height: 100%; width: 100%; background: var(--blood-bright); box-shadow: 0 0 8px var(--blood); transform: scaleX(0); transform-origin: left; }
.monitor-progress.run span { animation: prog var(--dur, 6s) linear forwards; }
@keyframes prog { to { transform: scaleX(1); } }
.monitor-glow { position: absolute; left: 10%; right: 10%; bottom: -12%; height: 30%; background: radial-gradient(ellipse at center, rgb(224 32 42 / .35), transparent 70%); filter: blur(30px); z-index: -1; pointer-events: none; }
.mon-controls { display: flex; align-items: center; gap: .8rem; max-width: 70rem; margin: 2.2rem auto 0; }
.mon-toggle { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--line-strong); background: var(--hull); cursor: pointer; color: var(--silver); }
.mon-toggle:hover { border-color: var(--blood); color: #fff; }
.mon-toggle .ico { stroke: none; width: 1rem; height: 1rem; }
.mon-toggle .i-play, .mon-toggle.paused .i-pause { display: none; }
.mon-toggle.paused .i-play { display: block; }
.mon-tabs { display: flex; gap: .6rem; overflow-x: auto; padding: .4rem .2rem .8rem; scroll-snap-type: x proximity; flex: 1; }
.mon-tabs button { flex: none; width: 9.5rem; padding: 0; border: 1px solid var(--line); background: var(--hull); cursor: pointer; text-align: left; scroll-snap-align: start; transition: all .25s; }
.mon-tabs img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; opacity: .45; transition: opacity .25s; }
.mon-tabs span { display: block; padding: .5em .6em; font-family: var(--font-display); font-size: .54rem; letter-spacing: .14em; text-transform: uppercase; color: var(--silver-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-tabs button:hover img { opacity: .8; }
.mon-tabs button[aria-selected="true"] { border-color: var(--blood); box-shadow: var(--glow); }
.mon-tabs button[aria-selected="true"] img { opacity: 1; }
.mon-tabs button[aria-selected="true"] span { color: #fff; background: rgb(224 32 42 / .2); }

/* ------------------------------------------------------------------ DISCORD */
.discord { overflow: hidden; }
.discord-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 80% 40%, rgb(88 101 242 / .14), transparent 70%), radial-gradient(ellipse 40% 50% at 15% 70%, rgb(224 32 42 / .12), transparent 70%); }
.dc { display: grid; grid-template-columns: 13rem minmax(0, 1fr); border: 1px solid #1e1f22; background: #313338; box-shadow: 0 0 0 1px rgb(0 0 0 / .6), 0 40px 100px -20px rgb(0 0 0 / .9), 0 0 80px rgb(88 101 242 / .15); border-radius: 10px; overflow: hidden; }
.dc-side { background: #2b2d31; padding: 0 .6rem 1rem; font-family: var(--font-sans); }
.dc-server { display: flex; align-items: center; gap: .6rem; height: 3.2rem; margin: 0 -.6rem .8rem; padding: 0 1rem; border-bottom: 1px solid #1f2023; box-shadow: 0 1px 2px rgb(0 0 0 / .3); color: #f2f3f5; }
.dc-srv-ico { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--blurple); color: #fff; }
.dc-srv-ico .ico { width: 1.1rem; height: 1.1rem; }
.dc-server b { font-weight: 600; font-size: .92rem; }
.dc-cat { margin: 0 0 .3rem .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #949ba4; }
.dc-channels { display: flex; flex-direction: column; gap: 2px; }
.dc-channels button { display: flex; align-items: center; gap: .45rem; padding: .42rem .55rem; border: 0; border-radius: 5px; background: transparent; cursor: pointer; font-size: .92rem; font-weight: 500; color: #949ba4; text-align: left; transition: background .15s, color .15s; }
.dc-channels button .ico { width: 1.05rem; height: 1.05rem; color: #80848e; }
.dc-channels button:hover { background: #35373c; color: #dbdee1; }
.dc-channels button[aria-selected="true"] { background: #404249; color: #fff; }
.dc-channels button[aria-selected="true"] .ico { color: #dbdee1; }
.dc-main { display: flex; flex-direction: column; min-width: 0; }
.dc-frame { position: relative; display: block; padding: 0; border: 0; background: #313338; cursor: zoom-in; aspect-ratio: 16 / 9; overflow: hidden; }
.dc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
.dc-img.on { opacity: 1; }
.dc-caption { padding: 1rem 1.3rem 1.2rem; background: #2b2d31; border-top: 1px solid #1f2023; min-height: 6.5rem; }
.dc-cap h3 { font-family: var(--font-sans); font-size: 1.02rem; font-weight: 700; letter-spacing: 0; color: #f2f3f5; margin-bottom: .3rem; }
.dc-cap h3 small { font-weight: 500; color: #b5bac1; font-size: .92rem; }
.dc-hash { color: #80848e; margin-right: .2em; }
.dc-cap p { color: #b5bac1; font-size: .92rem; }
.dc-cap.on { animation: pop .4s var(--ease) both; }

/* ------------------------------------------------------------------ PRICING */
.pricing { background: radial-gradient(ellipse 60% 40% at 50% 30%, rgb(224 32 42 / .07), transparent 70%); }
.pr-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.pr-tabs { display: flex; border: 1px solid var(--line); background: var(--hull); }
.pr-tabs button { display: inline-flex; align-items: center; gap: .6em; padding: .95em 1.4em; border: 0; background: transparent; cursor: pointer; font-family: var(--font-display); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--silver-dim); transition: all .2s; }
.pr-tabs button + button { border-left: 1px solid var(--line); }
.pr-tabs button:hover { color: #fff; }
.pr-tabs button[aria-selected="true"] { color: #fff; background: linear-gradient(180deg, rgb(224 32 42 / .35), rgb(224 32 42 / .1)); box-shadow: inset 0 -2px 0 var(--blood); }
.pr-tabs button[aria-selected="true"] .ico { color: var(--blood-bright); }
.pr-dur { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pr-dur .ej-label { margin-right: .4rem; }
.pr-dur button { padding: .6em .9em; border: 1px solid var(--line); background: var(--hull); cursor: pointer; font-family: var(--font-display); font-size: .62rem; letter-spacing: .1em; color: var(--silver-dim); transition: all .2s; }
.pr-dur button em { font-style: normal; margin-left: .4em; color: var(--ok); }
.pr-dur button:hover { color: #fff; }
.pr-dur button[aria-pressed="true"] { color: #fff; border-color: var(--blood); background: rgb(224 32 42 / .2); }
.pr-size { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.4rem; padding: 1.1rem 1.4rem; margin-bottom: 1.6rem; border: 1px solid var(--line); background: rgb(14 16 20 / .7); }
.pr-range { position: relative; padding-bottom: 1.4rem; }
.pr-range input { --pct: 0%; width: 100%; height: 22px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.pr-range input::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--blood) var(--pct), var(--line) var(--pct)); }
.pr-range input::-moz-range-track { height: 4px; background: linear-gradient(90deg, var(--blood) var(--pct), var(--line) var(--pct)); }
.pr-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; background: var(--blood-bright); border: 2px solid #fff; transform: rotate(45deg); box-shadow: 0 0 14px var(--blood); }
.pr-range input::-moz-range-thumb { width: 16px; height: 16px; background: var(--blood-bright); border: 2px solid #fff; border-radius: 0; transform: rotate(45deg); box-shadow: 0 0 14px var(--blood); }
.pr-ticks { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-family: var(--font-display); font-size: .55rem; letter-spacing: .08em; color: var(--silver-mute); }
.pr-ticks span { width: 0; display: flex; justify-content: center; white-space: nowrap; }
.pr-ticks span:first-child { justify-content: flex-start; }
.pr-ticks span:last-child { justify-content: flex-end; }
.pr-ticks span.on { color: var(--blood-bright); }
.pr-size-out { font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; min-width: 12rem; text-align: right; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); gap: 1.1rem; align-items: stretch; }
.pr-card { position: relative; display: flex; flex-direction: column; padding: 1.6rem 1.4rem 1.4rem; background: rgb(14 16 20 / .92); border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); transition: border-color .25s, box-shadow .25s, transform .35s var(--ease); }
.pr-card:hover { border-color: rgb(224 32 42 / .5); box-shadow: var(--glow); transform: translateY(-4px); }
.pr-card.hot { border-color: var(--blood); background: linear-gradient(180deg, rgb(224 32 42 / .16), rgb(14 16 20 / .95) 40%); box-shadow: var(--glow-strong); }
.pr-ribbon { position: absolute; right: 1.4rem; top: 0; padding: .35em .8em; font-family: var(--font-display); font-size: .54rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #fff; background: var(--blood); box-shadow: 0 0 18px var(--blood); }
.pr-card h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .1em; margin: .2rem 0 .6rem; }
.pr-desc { font-size: .86rem; color: var(--silver-dim); min-height: 4.2em; }
.pr-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.pr-amount { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.7rem, 2.6vw, 2.3rem); color: #fff; letter-spacing: .02em; font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgb(224 32 42 / .35); }
.pr-per { flex-basis: 100%; font-family: var(--font-display); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--silver-dim); }
.pr-old { margin: .2rem 0 0; font-size: .8rem; color: var(--silver-mute); text-decoration: line-through; }
.pr-total { margin: .3rem 0 0; font-size: .78rem; color: var(--ok); min-height: 1.3em; }
.pr-scope { min-height: 1.2em; margin: .5rem 0 .9rem; font-size: .54rem; }
.pr-card .ej-divider { margin-bottom: .9rem; }
.pr-card > .ej-label { margin: 0 0 .5rem; }
.pr-list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .35rem; font-size: .86rem; flex: 1; align-content: start; }
.pr-list li { display: flex; gap: .55rem; align-items: flex-start; }
.pr-list .ico { color: var(--ok); margin-top: .22em; width: 1em; height: 1em; stroke-width: 2.4; }
.pr-list.cols { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin: 0; }
.pr-card .btn { width: 100%; }
.pr-amount.flash { animation: flash .5s var(--ease); }
@keyframes flash { 0% { color: var(--blood-bright); transform: translateY(-3px); } 100% { color: #fff; transform: none; } }
.pr-bottom { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.1rem; margin-top: 2rem; }
.pr-free { padding: 1.6rem; }
.pr-free-head { margin-bottom: 1.2rem; }
.pr-free-head h3 { font-size: 1.1rem; text-transform: uppercase; margin: .7rem 0 .3rem; }
.pr-free-head p { color: var(--silver-dim); font-size: .9rem; }
.pr-notes { position: relative; padding: 1.6rem 1.6rem 1.6rem 4.6rem; border: 1px solid var(--line); background: rgb(14 16 20 / .6); font-size: .86rem; color: var(--silver-dim); }
.pr-notes em { color: var(--silver); font-style: normal; font-weight: 600; }
.isk-ico { position: absolute; left: 1.4rem; top: 1.6rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; color: var(--warn); }
.isk-ico .ico { width: 2.2rem; height: 2.2rem; filter: drop-shadow(0 0 8px rgb(245 185 66 / .5)); }

/* ------------------------------------------------------------------ HOW */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; counter-reset: s; position: relative; }
.step { position: relative; padding: 2rem 1.6rem 1.8rem; overflow: hidden; }
.step-n { position: absolute; right: 1rem; top: .2rem; font-family: var(--font-display); font-weight: 900; font-size: 4.2rem; color: transparent; -webkit-text-stroke: 1px rgb(224 32 42 / .35); line-height: 1.1; }
.step-ico { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: 1.2rem; color: #fff; background: var(--blood); box-shadow: 0 0 24px rgb(224 32 42 / .5); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.step-ico .ico { width: 1.5rem; height: 1.5rem; }
.step h3 { font-size: .98rem; text-transform: uppercase; margin-bottom: .6rem; }
.step p { color: var(--silver-dim); font-size: .92rem; }

/* ------------------------------------------------------------------ FAQ */
.faq-list { display: grid; gap: .6rem; }
.faq-item { border: 1px solid var(--line); background: rgb(14 16 20 / .85); transition: border-color .25s, box-shadow .25s; }
.faq-item[open] { border-color: rgb(224 32 42 / .5); box-shadow: var(--glow); }
.faq-item summary { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-n { font-family: var(--font-display); font-size: .62rem; font-weight: 700; letter-spacing: .14em; color: var(--blood-bright); }
.faq-q { flex: 1; font-weight: 600; color: var(--white); }
.faq-ico { color: var(--blood-bright); transition: transform .3s var(--ease); }
.faq-item[open] .faq-ico { transform: rotate(45deg); }
.faq-a { padding: 0 1.3rem 1.2rem 4.1rem; color: var(--silver-dim); }
.faq-item[open] .faq-a { animation: pop .4s var(--ease) both; }
.faq-a em { font-style: normal; color: var(--silver); font-weight: 600; }

/* ------------------------------------------------------------------ FINAL */
.final { position: relative; padding: clamp(6rem, 14vw, 11rem) 0; overflow: hidden; text-align: center; isolation: isolate; border-top: 1px solid var(--line); background: radial-gradient(ellipse 60% 70% at 50% 100%, rgb(224 32 42 / .25), transparent 70%), var(--void-2); }
.final-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .9; }
.final-inner { display: flex; flex-direction: column; align-items: center; }
.final-inner .kicker { justify-content: center; }
.final-title { font-size: clamp(2rem, 6.5vw, 5.6rem); font-weight: 900; text-transform: uppercase; text-shadow: 0 0 40px rgb(224 32 42 / .6); }
.final .sec-lead { margin-bottom: 2.2rem; color: var(--silver); }

/* ------------------------------------------------------------------ section HUD (side nav) */
.sec-hud { position: fixed; right: 18px; top: 50%; z-index: 50; transform: translateY(-50%); display: flex; flex-direction: column; gap: .7rem; opacity: 0; transition: opacity .4s; }
.sec-hud.show { opacity: 1; }
.sec-hud a { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; text-decoration: none; font-family: var(--font-display); font-size: .52rem; letter-spacing: .1em; color: transparent; transition: color .3s; }
.sec-hud a i { width: 8px; height: 8px; border: 1px solid var(--line-strong); transform: rotate(45deg); transition: all .3s; }
.sec-hud a:hover { color: var(--silver-dim); }
.sec-hud a.on { color: var(--blood-bright); }
.sec-hud a.on i { background: var(--blood); border-color: var(--blood-bright); box-shadow: 0 0 10px var(--blood); }
@media (max-width: 1280px) { .sec-hud { display: none; } }

/* ------------------------------------------------------------------ lightbox */
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--silver); }
.lightbox::backdrop { background: rgb(3 4 6 / .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lightbox[open] { display: grid; place-items: center; animation: fade .25s ease-out; }
@keyframes fade { from { opacity: 0; } }
.lb-inner { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 3.5rem clamp(12px, 5vw, 5rem); }
.lb-fig { margin: 0; max-width: min(1920px, 100%); }
.lb-img { width: auto; max-width: 100%; max-height: calc(100vh - 9rem); border: 1px solid rgb(224 32 42 / .5); box-shadow: 0 0 80px rgb(224 32 42 / .2); background: #000; }
.lb-img.swap { animation: fade .3s ease-out; }
.lb-fig figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-top: .7rem; }
.lb-title { color: #fff; }
.lb-btn { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--line-strong); background: rgb(14 16 20 / .85); color: #fff; cursor: pointer; transition: all .2s; }
.lb-btn:hover { background: var(--blood); border-color: var(--blood-bright); }
.lb-btn .ico { width: 1.4rem; height: 1.4rem; }
.lb-prev { left: clamp(6px, 1.5vw, 24px); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(6px, 1.5vw, 24px); top: 50%; transform: translateY(-50%); }
.lb-close { right: clamp(6px, 1.5vw, 24px); top: 1rem; }
.lightbox.single .lb-prev, .lightbox.single .lb-next { display: none; }

/* ------------------------------------------------------------------ footer */
.site-footer { position: relative; padding: 0 0 2.5rem; background: var(--void-2); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; padding-top: 3.5rem; padding-bottom: 2.5rem; }
.foot-brand img { width: 12rem; margin: -1.5rem 0 0 -1.6rem; }
.foot-brand p { color: var(--silver-dim); max-width: 24rem; font-size: .9rem; margin-bottom: 1.2rem; }
.foot-col h2 { margin-bottom: 1rem; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.foot-col a { color: var(--silver-dim); text-decoration: none; font-size: .9rem; transition: color .2s; }
.foot-col a:hover { color: #fff; }
.foot-legal { border-top: 1px solid var(--line); padding-top: 1.6rem; font-size: .74rem; color: var(--silver-mute); }
.foot-legal p { max-width: 70rem; }
.foot-copy { font-family: var(--font-display); letter-spacing: .14em; font-size: .6rem; text-transform: uppercase; }

/* ------------------------------------------------------------------ legal pages */
.legal-page { padding: calc(var(--hdr) + 4rem) 0 6rem; }
.legal-page .ej-panel { padding: clamp(1.4rem, 4vw, 3rem); }
.legal-page h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); text-transform: uppercase; margin-bottom: 1.5rem; }
.legal-page h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .1em; margin: 2rem 0 .7rem; color: var(--white); }
.legal-page p, .legal-page li { color: var(--silver-dim); }
.legal-page a { color: var(--blood-bright); }
.todo { display: inline-block; padding: .1em .5em; border: 1px dashed var(--warn); color: var(--warn); background: rgb(245 185 66 / .08); font-family: var(--font-display); font-size: .7em; letter-spacing: .08em; }
.legal-back { margin-bottom: 2rem; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1000px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-rail { display: none; }
  .chapter, .chapter:nth-child(even) { grid-template-columns: 1fr; min-height: 0; padding: 2rem 0; }
  .chapter:nth-child(even) .ch-media { order: 0; }
  .dc { grid-template-columns: 1fr; }
  .dc-side { padding-bottom: .6rem; }
  .dc-channels { flex-direction: row; overflow-x: auto; padding-bottom: .3rem; }
  .dc-channels button { flex: none; }
  .pr-bottom { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .hud-top .hud-l, .hud-top .hud-r { display: none; }
  .hud-top { justify-content: center; }
}
@media (max-width: 720px) {
  :root { --hdr: 64px; }
  .brand { width: 96px; height: 48px; }
  .hero { padding-top: calc(var(--hdr) + 3.5rem); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3)::before { display: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .hud-c { width: 28px; height: 28px; }
  .hud-c.tl, .hud-c.tr { top: calc(var(--hdr) + 8px); }
  .hud-c.tl, .hud-c.bl { left: 10px; } .hud-c.tr, .hud-c.br { right: 10px; }
  .hud-top { left: 40px; right: 40px; font-size: .5rem; letter-spacing: .2em; top: calc(var(--hdr) + 20px); }
  .hud-ladder { gap: .6em; }
  .btn-sso { width: 100%; max-width: 22rem; padding: 0 1.2rem; gap: .8rem; }
  .sso-label { font-size: .64rem; letter-spacing: .14em; }
  .cta-row .btn { width: 100%; max-width: 22rem; }
  .scroll-hint { display: none; }
  .fx-tools, .fx-search { width: 100%; }
  .fx-search input { width: 100%; max-width: none; }
  .fx-filters button { padding: .7em .9em; font-size: .6rem; }
  .pr-controls { flex-direction: column; align-items: stretch; }
  .pr-tabs button { flex: 1; justify-content: center; padding: .9em .5em; font-size: .6rem; }
  .pr-tabs button .ico { display: none; }
  .pr-size { grid-template-columns: 1fr; gap: .6rem; }
  .pr-size-out { text-align: left; }
  .pr-ticks span:nth-child(2), .pr-ticks span:nth-child(4) { visibility: hidden; }
  .faq-a { padding-left: 1.3rem; }
  .monitor { --rx: 0deg; }
  .ch-media { aspect-ratio: 16 / 13; }
  .foot-grid { grid-template-columns: 1fr; }
  .section[data-hud]::before { display: none; }
}
@media (min-width: 2200px) {
  .wrap { max-width: 88rem; }
}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .mon-sweep, .cursor-glow { display: none; }
  .hud-live { animation: none; }
}
@media (hover: none) { .cursor-glow { display: none; } }

/* feature groups */
.fx-group { grid-column: 1 / -1; display: flex; align-items: center; gap: .9rem; margin-top: 1.4rem; }
.fx-group:first-child { margin-top: 0; }
.fx-group[hidden] { display: none; }
.fx-group-ico { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; color: #fff; background: var(--blood); box-shadow: 0 0 18px rgb(224 32 42 / .5); clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.fx-group-ico .ico { width: 1.1rem; height: 1.1rem; }
.fx-group h3 { font-size: 1.05rem; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; }
.fx-group i { flex: 1; height: 1px; background: linear-gradient(90deg, rgb(224 32 42 / .6), transparent); }
.fx-card { --my: -200px; }

@media (max-width: 720px) {
  .hero-kicker, .kicker { letter-spacing: .2em; font-size: .68rem; }
  .hero-kicker .kicker-bar { display: none; }
  .fx-card { padding: 1.2rem; }
  .fx-shot { aspect-ratio: auto; border: 0; background: none; text-align: left; }
  .fx-shot img { display: none; }
  .fx-view { position: static; opacity: 1; transform: none; }
  .fx-card > p { margin-bottom: .8rem; }
  .dc { grid-template-columns: minmax(0, 1fr); }
  .dc-side, .dc-main { min-width: 0; }
  .pp-label small { display: none; }
  .pp-label { font-size: .66rem; }
  .player-play { gap: .8rem; }
}
@media (max-height: 1150px) { .scroll-hint { display: none; } }