:root {
  --ink: #02060d;
  --ink-2: #06101d;
  --blue: #118cff;
  --blue-2: #39b9ff;
  --blue-3: #0068ff;
  --text: #f5f9ff;
  --muted: #9eb0c7;
  --line: rgba(112, 175, 255, 0.18);
  --glass: rgba(4, 14, 28, 0.58);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -10%, rgba(17, 140, 255, .20), transparent 35%),
    var(--ink);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(17, 140, 255, .45); color: white; }

.cinematic-title {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .88;
  text-transform: uppercase;
}

.film-grain {
  position: fixed;
  inset: -25%;
  pointer-events: none;
  z-index: 80;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation: grain .16s steps(2) infinite;
}
@keyframes grain { 0%{transform:translate3d(0,0,0)} 25%{transform:translate3d(3%,-2%,0)} 50%{transform:translate3d(-2%,3%,0)} 75%{transform:translate3d(2%,2%,0)} 100%{transform:translate3d(-3%,-2%,0)} }

.scanline {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 79;
  opacity: .10;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(102, 172, 255, .10) 4px);
  mix-blend-mode: soft-light;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 78px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(122, 181, 255, .10);
  background: linear-gradient(to bottom, rgba(0, 4, 10, .84), rgba(0, 4, 10, .18));
  backdrop-filter: blur(14px);
}
.header-inner { width: min(1440px, calc(100% - 44px)); margin: auto; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand img { display:block; width: clamp(176px, 16vw, 255px); height:auto; }
.nav { display:flex; gap:26px; align-items:center; }
.nav a { color:#dbeaff; font-size:.82rem; letter-spacing:.11em; text-transform:uppercase; opacity:.72; transition:.25s ease; }
.nav a:hover { opacity:1; color:white; text-shadow:0 0 18px rgba(57,185,255,.8); }
.header-cta { display:inline-flex; align-items:center; gap:12px; padding:12px 18px; border:1px solid rgba(57,185,255,.55); border-radius:999px; background:rgba(17,140,255,.10); box-shadow:inset 0 0 24px rgba(17,140,255,.08); font-weight:800; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; transition:.25s ease; }
.header-cta:hover { transform:translateY(-1px); border-color:#66c8ff; box-shadow:0 0 28px rgba(17,140,255,.25), inset 0 0 24px rgba(17,140,255,.12); }

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display:grid;
  place-items:center;
  background:#01040a;
  overflow:hidden;
}
.intro::before { content:""; position:absolute; width:60vw; height:1px; background:linear-gradient(90deg, transparent, #45b7ff, white, #45b7ff, transparent); box-shadow:0 0 30px #118cff; transform:scaleX(0); }
.intro-logo { width:min(520px, 72vw); opacity:0; transform:scale(.92); filter:drop-shadow(0 0 26px rgba(17,140,255,.28)); }
.intro-kicker { position:absolute; bottom:13vh; font-size:.68rem; letter-spacing:.54em; text-transform:uppercase; color:#78bbff; opacity:0; }

.hero {
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
}
.hero-media { position:absolute; inset:0; z-index:-5; }
.hero-media img { width:100%; height:100%; object-fit:cover; object-position:56% 50%; transform:scale(1.06); filter:saturate(.95) contrast(1.05) brightness(.76); }
.hero-media::after {
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(1,5,11,.98) 0%, rgba(1,5,11,.88) 26%, rgba(1,5,11,.43) 53%, rgba(1,5,11,.20) 72%, rgba(1,5,11,.52) 100%),
    linear-gradient(180deg, rgba(0,4,10,.15) 0%, rgba(0,4,10,.08) 58%, #02060d 96%);
}
.hero-media::before {
  content:"";
  position:absolute; inset:0; z-index:2;
  background:radial-gradient(circle at 70% 30%, rgba(39,164,255,.14), transparent 28%), radial-gradient(circle at 54% 45%, transparent 20%, rgba(1,6,14,.46) 75%);
  mix-blend-mode:screen;
}
#three-canvas { position:absolute; inset:0; z-index:-2; pointer-events:none; opacity:.50; }
.hero-content { width:min(1440px, calc(100% - 44px)); margin:auto; padding-top:76px; position:relative; z-index:4; }
.hero-copy { width:min(760px, 62vw); }
.eyebrow { display:flex; align-items:center; gap:14px; color:#7fc9ff; font-size:.72rem; font-weight:800; letter-spacing:.42em; text-transform:uppercase; margin-bottom:24px; }
.eyebrow::before { content:""; width:42px; height:1px; background:#34aaff; box-shadow:0 0 12px #118cff; }
.hero h1 { margin:0; font-size:clamp(4.4rem, 8.2vw, 9rem); text-shadow:0 12px 45px rgba(0,0,0,.58); }
.hero h1 .blue { color:transparent; background:linear-gradient(180deg, #8cd8ff 2%, #1da2ff 36%, #0d63ff 100%); -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 0 18px rgba(17,140,255,.25)); }
.hero-sub { margin:26px 0 0; max-width:590px; color:#c8d8ea; font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.75; }
.hero-actions { display:flex; gap:14px; align-items:center; margin-top:34px; flex-wrap:wrap; }
.primary-cta { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:16px; min-width:260px; padding:17px 24px; border-radius:999px; color:white; background:linear-gradient(180deg,#1fa4ff,#056bff); font-weight:900; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; box-shadow:0 0 0 1px rgba(124,205,255,.72),0 0 36px rgba(17,140,255,.43),inset 0 1px 1px rgba(255,255,255,.28); transition:.3s ease; overflow:hidden; }
.primary-cta::before { content:""; position:absolute; top:-100%; left:-30%; width:25%; height:300%; transform:rotate(18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent); transition:.5s ease; }
.primary-cta:hover { transform:translateY(-2px) scale(1.015); box-shadow:0 0 0 1px #9fddff,0 0 54px rgba(17,140,255,.62); }
.primary-cta:hover::before { left:118%; }
.secondary-note { color:#7190ad; font-size:.71rem; letter-spacing:.25em; text-transform:uppercase; }
.hero-meta { position:absolute; right:0; bottom:9vh; display:grid; grid-template-columns:repeat(3, auto); gap:0; border:1px solid var(--line); border-radius:18px; background:rgba(3,12,24,.48); backdrop-filter:blur(12px); overflow:hidden; }
.meta-item { padding:17px 22px; min-width:150px; border-left:1px solid var(--line); }
.meta-item:first-child { border-left:0; }
.meta-item strong { display:block; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; }
.meta-item span { display:block; margin-top:6px; color:#7890aa; font-size:.72rem; }
.scroll-cue { position:absolute; left:50%; bottom:24px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:#7791ac; font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; }
.scroll-cue::after { content:""; width:1px; height:28px; background:linear-gradient(#35b2ff,transparent); animation:pulse 1.7s infinite; }
@keyframes pulse { 0%,100%{opacity:.35;transform:scaleY(.65)}50%{opacity:1;transform:scaleY(1)} }

.section { position:relative; padding:120px 0; }
.container { width:min(1440px, calc(100% - 44px)); margin:auto; }
.section-kicker { color:#4db7ff; font-size:.70rem; letter-spacing:.42em; text-transform:uppercase; font-weight:800; }
.section-title { margin:14px 0 0; font-size:clamp(2.5rem,5vw,5.2rem); }
.section-lead { margin:18px 0 0; max-width:640px; color:#90a6be; line-height:1.75; }

.genre-section { background:linear-gradient(180deg,#02060d 0%,#04101d 48%,#02060d 100%); border-top:1px solid rgba(107,173,255,.08); }
.genre-head { display:flex; justify-content:space-between; gap:32px; align-items:end; margin-bottom:38px; }
.genre-rule { max-width:470px; color:#6e86a0; font-size:.78rem; letter-spacing:.17em; text-transform:uppercase; text-align:right; }
.genre-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.genre-card { position:relative; min-height:340px; border-radius:18px; overflow:hidden; border:1px solid rgba(113,177,255,.16); background:#07111f; transform:translateZ(0); transition:.38s cubic-bezier(.2,.8,.2,1); }
.genre-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.03) 22%,rgba(0,6,14,.18) 47%,rgba(0,6,14,.94) 100%); }
.genre-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.72) brightness(.84); transition:.5s ease; }
.genre-card:hover { transform:translateY(-9px); border-color:rgba(91,195,255,.52); box-shadow:0 24px 70px rgba(0,40,92,.32); }
.genre-card:hover img { transform:scale(1.06); filter:saturate(1) brightness(.95); }
.genre-card-content { position:absolute; z-index:2; left:20px; right:20px; bottom:20px; }
.genre-card small { display:block; color:#70bbf5; font-size:.60rem; letter-spacing:.3em; text-transform:uppercase; margin-bottom:8px; }
.genre-card h3 { margin:0; font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; font-size:1.65rem; letter-spacing:.02em; text-transform:uppercase; }
.genre-card .arrow { position:absolute; right:0; bottom:0; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(109,190,255,.42); background:rgba(8,21,40,.58); transition:.3s ease; }
.genre-card:hover .arrow { background:#0b82ff; border-color:#69c7ff; }

.manifesto { min-height:78vh; display:grid; align-items:center; overflow:hidden; }
.manifesto-bg { position:absolute; inset:0; background:radial-gradient(circle at 62% 48%,rgba(17,140,255,.24),transparent 28%),linear-gradient(125deg,#02060d 0%,#04111e 45%,#02060d 100%); }
.manifesto-lines { position:absolute; inset:0; opacity:.35; background:linear-gradient(108deg, transparent 0 48%, rgba(64,176,255,.2) 48.2%, transparent 48.4% 100%),linear-gradient(72deg, transparent 0 56%, rgba(64,176,255,.16) 56.2%, transparent 56.4% 100%); }
.manifesto-content { position:relative; z-index:2; display:grid; grid-template-columns:1.08fr .92fr; gap:60px; align-items:center; }
.manifesto-copy h2 { margin:0; font-size:clamp(3.5rem,7vw,7.4rem); }
.manifesto-copy p { max-width:580px; color:#95a9bf; line-height:1.85; margin:24px 0 0; }
.stat-stack { display:grid; gap:12px; }
.stat { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 24px; border:1px solid rgba(98,173,255,.14); border-radius:16px; background:linear-gradient(90deg,rgba(9,25,47,.64),rgba(3,10,20,.42)); backdrop-filter:blur(10px); }
.stat b { font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; }
.stat span { color:#49b6ff; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; }

.final-cta { min-height:62vh; display:grid; place-items:center; text-align:center; border-top:1px solid rgba(100,170,255,.10); background:radial-gradient(circle at 50% 40%,rgba(17,140,255,.19),transparent 30%),#02060d; }
.final-inner { position:relative; z-index:2; width:min(900px,calc(100% - 44px)); }
.final-inner img { width:min(390px,68vw); filter:drop-shadow(0 0 28px rgba(17,140,255,.2)); }
.final-inner h2 { font-size:clamp(3rem,6vw,6.4rem); margin:34px 0 12px; }
.final-inner p { color:#8399b1; margin:0 auto 30px; max-width:620px; line-height:1.75; }
.footer-note { margin-top:36px; color:#52667d; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; }

@media (max-width:1180px) {
  .nav { display:none; }
  .hero-copy { width:min(720px,75vw); }
  .hero-meta { display:none; }
  .genre-grid { grid-template-columns:repeat(3,1fr); }
  .genre-card { min-height:300px; }
}
@media (max-width:760px) {
  .site-header { height:68px; }
  .header-inner,.hero-content,.container { width:min(100% - 28px, 1440px); }
  .brand img { width:180px; }
  .header-cta { width:43px; height:43px; min-width:43px; padding:0; border-radius:50%; font-size:0; }
  .header-cta::after { content:"→"; font-size:1rem; }
  .hero { min-height:920px; align-items:flex-end; }
  .hero-media img { object-position:62% 50%; }
  .hero-media::after { background:linear-gradient(180deg,rgba(2,6,13,.12) 0%,rgba(2,6,13,.20) 36%,rgba(2,6,13,.84) 66%,#02060d 100%),linear-gradient(90deg,rgba(2,6,13,.30),rgba(2,6,13,.08)); }
  .hero-content { padding:0 0 115px; }
  .hero-copy { width:100%; }
  .eyebrow { letter-spacing:.28em; font-size:.62rem; }
  .hero h1 { font-size:clamp(4.1rem,21vw,6.2rem); }
  .hero-sub { font-size:.98rem; max-width:520px; }
  .primary-cta { min-width:100%; }
  .secondary-note { width:100%; text-align:center; }
  .section { padding:88px 0; }
  .genre-head { display:block; }
  .genre-rule { text-align:left; margin-top:16px; }
  .genre-grid { grid-template-columns:1fr 1fr; }
  .genre-card { min-height:260px; }
  .manifesto-content { grid-template-columns:1fr; }
  .manifesto { min-height:auto; }
}
@media (max-width:520px) {
  .genre-grid { grid-template-columns:1fr; }
  .genre-card { min-height:280px; }
  .hero h1 { font-size:3.95rem; }
  .intro-kicker { letter-spacing:.28em; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .intro { display:none!important; }
}

.preview-static .intro{display:none!important}.preview-static .reveal{opacity:1!important;transform:none!important}