/* ============================================================
   DVSN — style.css
   The mark is flat white with a glow behind it, the way it sits
   on the banner. No bevels, no specular, no 3D tilt.
   Layout: insignia hero, then a full-bleed unit statement, then
   numbered sections on a sticky rail.
   ============================================================ */

/* ── 1 · RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

img, svg, iframe { display: block; max-width: 100%; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ── 2 · TOKENS ────────────────────────────────────────── */
:root {
  --f-display : 'Archivo', system-ui, sans-serif;
  --f-body    : 'Inter', system-ui, -apple-system, sans-serif;

  --void   : #05020a;
  --ink    : #0a0512;

  --violet : #7b2ff7;
  --magenta: #c02af0;
  --hot    : #ff4fd8;

  --violet-rgb : 123, 47, 247;
  --magenta-rgb: 192, 42, 240;

  --text  : #f6f2ff;
  --text-2: #a99ec6;
  --text-3: #6d6288;

  --line   : rgba(255, 255, 255, 0.08);
  --line-2 : rgba(255, 255, 255, 0.14);
  --surface: rgba(255, 255, 255, 0.032);

  --wrap   : 1240px;
  --gutter : clamp(20px, 5vw, 44px);
  --nav-h  : 68px;
  --rail-w : 150px;

  --e-out : cubic-bezier(0.22, 1, 0.36, 1);
  --e-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --b-discord: 88, 101, 242;
}


/* ── 3 · BASE ──────────────────────────────────────────── */
body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--void);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

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

.skip {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--violet);
  color: #fff;
  border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

::selection { background: rgba(var(--magenta-rgb), 0.4); color: #fff; }

:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; border-radius: 4px; }


/* ── 4 · TYPE ──────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-variation-settings: 'wght' 650;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(var(--magenta-rgb), 0.95);
  margin-bottom: 22px;
}

.h2 {
  font-size: clamp(30px, 4.6vw, 54px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.035em;
  color: #fff;
}

.grad {
  background: linear-gradient(100deg, var(--violet) 10%, var(--hot) 90%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.lede {
  margin-top: 20px;
  max-width: 60ch;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--text-2);
}


/* ── 5 · BUTTONS ───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 100px;
  border: 1px solid transparent;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.3s var(--e-out), background 0.3s var(--e-out),
              border-color 0.3s var(--e-out), box-shadow 0.3s var(--e-out);
}
.btn i { font-size: 12px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  color: #fff;
  background: linear-gradient(120deg, var(--violet), var(--magenta));
  box-shadow: 0 10px 34px -14px rgba(var(--magenta-rgb), 1);
}
.btn--primary:hover {
  background: linear-gradient(120deg, var(--violet), var(--hot));
  box-shadow: 0 16px 44px -14px rgba(var(--magenta-rgb), 1);
}

/* No backdrop-filter here — it was on every ghost button and
   each one forces its own compositing pass for no visual gain
   over a flat translucent fill. */
.btn--ghost {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-2);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); }

.btn--sm { padding: 9px 18px; font-size: 13px; }
.btn--lg { padding: 17px 32px; font-size: 16px; }


/* ── 6 · NAV ───────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--e-soft), border-color 0.4s var(--e-soft);
}
.nav.is-stuck {
  background: rgba(5, 2, 10, 0.74);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom-color: var(--line);
}

.nav__inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; flex: 0 0 auto; }
.brand__star { width: 18px; height: 18px; object-fit: contain; }
.brand__word {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 118, 'wght' 800;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}

.nav__links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav__links a {
  position: relative;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.25s var(--e-out);
}
.nav__links a:hover,
.nav__links a.is-active { color: #fff; }
.nav__links a.is-active::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--violet), var(--hot));
}

.nav__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.burger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  padding: 0;
  position: relative;
}
.burger span {
  position: absolute;
  left: 11px;
  width: 18px; height: 1.5px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.35s var(--e-out);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger.is-open span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 99;
  background: rgba(5, 2, 10, 0.97);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  display: grid;
  place-items: center;
}
.menu[hidden] { display: none; }
.menu__links { display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(88vw, 380px); }
.menu__links a {
  width: 100%;
  padding: 14px;
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  border-radius: 12px;
}
.menu__links a:hover { background: rgba(255, 255, 255, 0.05); }
.menu__cta { margin-top: 12px; color: #fff !important; background: linear-gradient(120deg, var(--violet), var(--magenta)); }


/* ── 6b · OPENER · full-screen trailer ─────────────────── */
/* Hidden until the file proves readable, so with no trailer the
   page simply starts at the hero. */
.opener {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: var(--void);
}
.opener[hidden] { display: none; }

.opener__video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Just enough grade to hold the controls and blend into the
   hero below — the trailer itself stays clean. */
.opener__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(5, 2, 10, 0.5), transparent 22%,
                    transparent 62%, rgba(5, 2, 10, 0.96) 99%);
}

.opener__sound {
  position: absolute;
  right: clamp(16px, 3vw, 30px);
  bottom: clamp(16px, 3vw, 30px);
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(6, 3, 12, 0.6);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s var(--e-out), transform 0.3s var(--e-out);
}
.opener__sound:hover { background: rgba(var(--magenta-rgb), 0.8); transform: scale(1.06); }

.opener__scroll {
  position: absolute;
  bottom: clamp(20px, 3.5vw, 36px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-variation-settings: 'wght' 650;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.3s;
}
.opener__scroll:hover { color: #fff; }
.opener__scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.9));
  animation: scroll-cue 2.4s var(--e-soft) infinite;
  transform-origin: top;
}


/* ── 7 · HERO · insignia ───────────────────────────────── */
/* Performance note: the previous version stacked seven layers
   here — two 58vmax boxes under `filter: blur(100px)` whose
   scale was animated, plus three `mix-blend-mode` overlays on
   step timers. Animating scale on a blurred box forces the
   browser to re-rasterise the gaussian every frame, and blended
   layers can't be promoted, so the whole hero repainted
   continuously. That was the lag.

   All of it is now one painted background: static radial
   gradients cost a single paint and nothing after that. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--nav-h) + 40px) var(--gutter) 100px;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(58% 48% at 78% 12%, rgba(var(--violet-rgb), 0.34), transparent 68%),
    radial-gradient(52% 44% at 14% 88%, rgba(var(--magenta-rgb), 0.26), transparent 68%),
    radial-gradient(70% 55% at 50% 44%, rgba(var(--violet-rgb), 0.14), transparent 72%),
    linear-gradient(168deg, #0b0418 0%, var(--void) 58%, #0a0316 100%);
}

.hero__fx { position: absolute; inset: 0; pointer-events: none; }


/* Static. A moving 1px grid is the single cheapest way to make a
   page feel expensive and the single easiest way to make it
   janky — this one holds still. */
.hero__scan {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.26) 0px, rgba(0, 0, 0, 0.26) 1px,
    transparent 1px, transparent 3px
  );
}

/* Static grain, no blend mode, sized to the box rather than 4x it */
.hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.09;
  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='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26vh;
  background: linear-gradient(to bottom, transparent, var(--void) 94%);
}

.hero__inner { position: relative; max-width: 820px; }


/* ── 8 · THE MARK ──────────────────────────────────────── */
/* Three exported layers, stacked. The ring's back arc sits under
   the star and its front arc over it, so the weave is the real
   artwork rather than anything reconstructed here.

   Each layer drifts on its own phase and duration. Because the
   amplitudes are small and the periods don't divide evenly, the
   three never resync — the mark reads as having depth without a
   single 3D transform, and every animated property is a
   translate, so it stays on the compositor. */
.insignia {
  display: block;
  width: clamp(210px, 30vw, 340px);
  margin: 0 auto clamp(14px, 2.5vw, 26px);
}
.stack {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  /* One glow for the whole mark rather than a filter per layer */
  filter: drop-shadow(0 0 42px rgba(var(--magenta-rgb), 0.55));
}
.stack__l {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
/* Both ring halves share one animation, identical in every
   respect. They are two halves of a single ring — give them
   separate drifts and they tear apart at the seams where the
   arcs meet. Only the star moves independently, which is what
   produces the depth. */
.stack__l--back,
.stack__l--front { animation: drift-ring 11s ease-in-out infinite; }
.stack__l--back  { z-index: 1; }
.stack__l--star  { z-index: 2; animation: drift-star 8s ease-in-out infinite; }
.stack__l--front { z-index: 3; }

@keyframes drift-ring {
  0%, 100% { transform: translate(0.8%, -0.6%); }
  50%      { transform: translate(-0.8%, 0.6%); }
}
@keyframes drift-star {
  0%, 100% { transform: translateY(-1.5%); }
  50%      { transform: translateY(1.5%); }
}

.hero__word {
  position: relative;
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 120, 'wght' 900;
  font-size: clamp(54px, 12vw, 132px);
  line-height: 0.9;
  letter-spacing: 0.04em;
  text-indent: 0.04em;
  color: #fff;
}
.hero__word::before,
.hero__word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  mix-blend-mode: screen;
  pointer-events: none;
}
.hero__word::before { color: rgba(255, 40, 200, 0.5);  animation: split-a 7s steps(1) infinite; }
.hero__word::after  { color: rgba(60, 220, 255, 0.36); animation: split-b 7s steps(1) infinite; }
@keyframes split-a {
  0%, 91% { transform: translate(-2px, 1px); }
  94%     { transform: translate(-11px, 3px); }
  97%     { transform: translate(7px, -2px); }
}
@keyframes split-b {
  0%, 91% { transform: translate(2px, -1px); }
  94%     { transform: translate(11px, -4px); }
  97%     { transform: translate(-7px, 2px); }
}

.hero__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}
.hero__rule span {
  font-family: var(--f-display);
  font-variation-settings: 'wght' 650;
  font-size: clamp(10px, 1.3vw, 12.5px);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--text-2);
}
.hero__rule i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(var(--magenta-rgb), 0.95);
  box-shadow: 0 0 12px rgba(var(--magenta-rgb), 1);
}

.hero__sub {
  margin: 22px auto 0;
  max-width: 50ch;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.65;
  color: var(--text-2);
}

.hero__cta { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.hero__scroll {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-variation-settings: 'wght' 600;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.3s;
}
.hero__scroll:hover { color: var(--text); }
.hero__scroll-line {
  width: 1px; height: 38px;
  background: linear-gradient(to bottom, transparent, rgba(var(--magenta-rgb), 0.9));
  animation: scroll-cue 2.4s var(--e-soft) infinite;
  transform-origin: top;
}
@keyframes scroll-cue {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}


/* ── 9 · TICKER ────────────────────────────────────────── */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.015);
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee__set { display: flex; align-items: center; gap: 28px; padding-right: 28px; }
.marquee__set b {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 108, 'wght' 700;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.marquee__set i { width: 4px; height: 4px; border-radius: 50%; background: rgba(var(--magenta-rgb), 0.75); flex: 0 0 auto; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / var(--sets, 2))); }
}


/* ── 10 · THE UNIT · full bleed, leads the page ────────── */
.unit {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 11vw, 150px) 0;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}
.unit__fx {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 70% at 20% 34%, rgba(var(--violet-rgb), 0.2), transparent 70%),
    radial-gradient(46% 62% at 82% 88%, rgba(var(--magenta-rgb), 0.16), transparent 70%);
  pointer-events: none;
}
/* Outline export, oversized and nearly transparent behind the
   DIVISION statement. Static — it never animates. */
.unit__watermark {
  position: absolute;
  top: 50%; right: -8%;
  transform: translateY(-50%) rotate(-8deg);
  width: min(52vw, 620px);
  opacity: 0.055;
  pointer-events: none;
}

.unit__inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* DIVISION with VISION lit inside it — the double meaning shown
   rather than explained. Sized to bleed toward both edges. */
.unit__word {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 116, 'wght' 800;
  font-size: clamp(44px, 12.5vw, 190px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: rgba(255, 255, 255, 0.2);
  margin: 4px 0 clamp(32px, 4.5vw, 54px);
}
.unit__word .grad { color: transparent; }

.unit__claim {
  max-width: 70ch;
  font-size: clamp(17px, 1.9vw, 23px);
  line-height: 1.55;
  letter-spacing: -0.015em;
  color: #fff;
}
.unit__claim em { font-style: normal; color: rgba(var(--magenta-rgb), 1); }

.unit__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(22px, 3.5vw, 46px);
  margin-top: clamp(44px, 6vw, 70px);
  padding-top: clamp(30px, 4vw, 44px);
  border-top: 1px solid var(--line);
}
.unit__col-num {
  display: block;
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: rgba(var(--magenta-rgb), 0.95);
  margin-bottom: 12px;
}
.unit__col h3 {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 8px;
}
.unit__col p { font-size: 15px; line-height: 1.65; color: var(--text-2); }


/* ── 11 · SECTION SHELL ────────────────────────────────── */
.sec { padding: clamp(70px, 10vw, 130px) 0; }
.sec--alt { background: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.sec__grid {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

/* The numbered rail sticks alongside its section while it
   scrolls past, so the unit's structure stays visible. */
.sec__rail {
  position: sticky;
  top: calc(var(--nav-h) + 44px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sec__num {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(150deg, #fff 25%, rgba(var(--magenta-rgb), 0.85) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.sec__label {
  font-family: var(--f-display);
  font-variation-settings: 'wght' 650;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sec__tick { margin-top: 6px; width: 34px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--violet), var(--hot)); }

.sec__body > .h2 { margin-bottom: clamp(30px, 4vw, 46px); }
.sec__body > .h2 + .lede { margin-top: -20px; margin-bottom: clamp(34px, 5vw, 52px); }


/* ── 12 · STORY + TIMELINE ─────────────────────────────── */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.story__lead {
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.55;
  letter-spacing: -0.015em;
  color: #fff;
}
.story__p { margin-top: 18px; font-size: clamp(15px, 1.4vw, 16.5px); line-height: 1.7; color: var(--text-2); }
.story__p b { color: #fff; font-weight: 600; }

.timeline {
  list-style: none;
  padding: 28px 26px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.tl { position: relative; padding: 0 0 24px 26px; }
.tl:last-child { padding-bottom: 0; }
.tl::before {
  content: '';
  position: absolute;
  left: 5px; top: 14px; bottom: 2px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(var(--magenta-rgb), 0.45), transparent);
}
.tl:last-child::before { display: none; }
.tl__dot {
  position: absolute;
  left: 0; top: 6px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid rgba(var(--magenta-rgb), 0.6);
}
.tl--now .tl__dot {
  background: linear-gradient(140deg, var(--violet), var(--magenta));
  border-color: transparent;
  box-shadow: 0 0 14px rgba(var(--magenta-rgb), 0.9);
}
.tl b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -0.015em; color: #fff; margin-bottom: 3px; }
.tl span { display: block; font-size: 14px; line-height: 1.55; color: var(--text-3); }


/* ── 13 · THE STANDARD ─────────────────────────────────── */
/* Two across, so four cards land as a clean 2x2 rather than a
   row of three with one orphaned underneath. */
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.rule {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 22px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 0.4s var(--e-out), background 0.4s var(--e-out);
}
.rule:hover { border-color: rgba(var(--magenta-rgb), 0.35); background: rgba(255, 255, 255, 0.05); }
.rule i {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(150deg, rgba(var(--violet-rgb), 0.85), rgba(var(--magenta-rgb), 0.6));
}
.rule b { display: block; font-size: 16px; font-weight: 650; letter-spacing: -0.015em; color: #fff; margin-bottom: 5px; }
.rule span { display: block; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }


/* ── 14 · STATS STRIP ──────────────────────────────────── */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(var(--violet-rgb), 0.07), transparent), var(--void); }
.strip__inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 58px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 28px 20px;
}
.stat { position: relative; padding-left: 20px; }
.stat::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--violet), transparent);
}
.stat b {
  display: block;
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1;
  letter-spacing: -0.035em;
  background: linear-gradient(180deg, #fff 30%, #a493cf 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.stat span { display: block; margin-top: 10px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }


/* ── 15 · ROSTER ───────────────────────────────────────── */
.roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.member {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 0.45s var(--e-out), transform 0.45s var(--e-out), background 0.45s var(--e-out);
}
.member:hover { transform: translateY(-4px); border-color: rgba(var(--magenta-rgb), 0.35); background: rgba(255, 255, 255, 0.05); }
.member__photo {
  position: relative;
  width: 88px; height: 88px;
  flex: 0 0 auto;
  margin-bottom: 20px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(var(--violet-rgb), 0.5), rgba(var(--magenta-rgb), 0.3));
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
}
.member__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s var(--e-out); }
/* Mark underneath is the resting state; a photo that loads fades
   over it, one that 404s simply never appears. */
.member__fallback { width: 46px; height: 46px; object-fit: contain; opacity: 0.85; }
.member__photo--pending img { opacity: 0; }

.member__role {
  font-family: var(--f-display);
  font-variation-settings: 'wght' 650;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--magenta-rgb), 0.95);
  margin-bottom: 8px;
}
.member__name { font-size: 25px; font-weight: 700; letter-spacing: -0.03em; color: #fff; margin-bottom: 12px; }
.member__name span { font-size: 16px; font-weight: 500; color: var(--text-3); letter-spacing: -0.01em; }
.member__bio { font-size: 15px; line-height: 1.65; color: var(--text-2); flex: 1; }

.member__links { display: flex; gap: 8px; margin-top: 20px; }
.member__links a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-2);
  color: var(--text-2);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.3s, background 0.3s, transform 0.3s var(--e-out);
}
.member__links a:hover { color: #fff; background: rgba(var(--magenta-rgb), 0.6); transform: translateY(-2px); }


/* ── 16 · INSIDE ───────────────────────────────────────── */
/* Same reason as .rules — four cards, two across, no orphan. */
.kit { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.kit__item {
  padding: 28px 24px 30px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 0.45s var(--e-out), background 0.45s var(--e-out), transform 0.45s var(--e-out);
}
.kit__item:hover { transform: translateY(-4px); border-color: rgba(var(--magenta-rgb), 0.35); background: rgba(255, 255, 255, 0.05); }
.kit__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  margin-bottom: 18px;
  background: linear-gradient(150deg, rgba(var(--violet-rgb), 0.85), rgba(var(--magenta-rgb), 0.6));
  color: #fff;
  font-size: 16px;
  box-shadow: 0 8px 24px -12px rgba(var(--magenta-rgb), 1);
}
.kit__item h3 { font-size: 18px; font-weight: 650; letter-spacing: -0.02em; color: #fff; margin-bottom: 9px; }
.kit__item p { font-size: 14.5px; line-height: 1.65; color: var(--text-2); }

.scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 18px; }
.scope__col { padding: 28px 26px 30px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.scope__label {
  font-family: var(--f-display);
  font-variation-settings: 'wght' 650;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  padding: 8px 15px;
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-2);
  transition: background 0.3s var(--e-out), border-color 0.3s var(--e-out), transform 0.3s var(--e-out);
}
.chip:hover { transform: translateY(-2px); background: rgba(var(--magenta-rgb), 0.18); border-color: rgba(var(--magenta-rgb), 0.5); }


/* ── 17 · JOIN ─────────────────────────────────────────── */
.link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(120deg, rgba(var(--violet-rgb), 0.16), rgba(var(--magenta-rgb), 0.1));
  border: 1px solid rgba(var(--magenta-rgb), 0.38);
  transition: transform 0.4s var(--e-out), border-color 0.4s var(--e-out), box-shadow 0.4s var(--e-out);
}
.link:hover { transform: translateY(-3px); border-color: rgba(var(--b-discord), 0.75); box-shadow: 0 18px 44px -22px rgba(var(--b-discord), 1); }
.link__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(var(--violet-rgb), 0.9), rgba(var(--magenta-rgb), 0.75));
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 19px;
  transition: background 0.4s var(--e-out);
}
.link:hover .link__icon { background: rgb(var(--b-discord)); }
.link__text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.link__text b { font-size: 17px; font-weight: 650; letter-spacing: -0.015em; color: #fff; }
.link__text span { font-size: 13.5px; color: var(--text-3); }
.link__tag {
  flex: 0 0 auto;
  font-family: var(--f-display);
  font-variation-settings: 'wght' 750;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  padding: 7px 13px;
  border-radius: 100px;
  color: #fff;
  background: linear-gradient(120deg, var(--violet), var(--magenta));
}

.widget { margin-top: 28px; }
.widget__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-family: var(--f-display);
  font-variation-settings: 'wght' 650;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}
.widget__label i { font-size: 12px; color: rgba(var(--magenta-rgb), 0.95); }
.widget iframe { width: 100%; border-radius: 16px; border: 1px solid var(--line); color-scheme: dark; }


/* ── 18 · CTA + FOOTER ─────────────────────────────────── */
.cta { position: relative; padding: clamp(90px, 13vw, 165px) 0; text-align: center; overflow: hidden; border-top: 1px solid var(--line); }
.cta__fx {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 100% at 50% 100%, rgba(var(--magenta-rgb), 0.22), transparent 70%),
    radial-gradient(80% 90% at 50% 0%,   rgba(var(--violet-rgb), 0.14), transparent 70%);
  pointer-events: none;
}
.cta .wrap { position: relative; }
.cta__star {
  display: block;
  width: 56px; height: 56px;
  object-fit: contain;
  margin: 0 auto 26px;
  filter: drop-shadow(0 0 26px rgba(var(--magenta-rgb), 0.9));
}

.cta__title { font-size: clamp(30px, 5.4vw, 62px); font-weight: 700; line-height: 1.05; letter-spacing: -0.04em; color: #fff; }
.cta__sub { margin: 20px auto 34px; max-width: 50ch; font-size: clamp(15px, 1.5vw, 17.5px); color: var(--text-2); }
.cta__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.foot { padding: 40px 0; border-top: 1px solid var(--line); background: var(--void); }
.foot__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.brand--foot .brand__word { font-size: 14px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 22px; }
.foot__links a { font-size: 13.5px; color: var(--text-3); text-decoration: none; transition: color 0.25s; }
.foot__links a:hover { color: #fff; }
.foot__sig { font-size: 12.5px; color: var(--text-3); }


/* ── 18b · RESOURCES HUB (link-only page) ──────────────── */
.page-res { background: var(--void); }

.res {
  min-height: calc(100svh - 200px);
  padding: calc(var(--nav-h) + clamp(48px, 8vw, 90px)) 0 clamp(60px, 9vw, 110px);
  background:
    radial-gradient(52% 42% at 82% 4%, rgba(var(--violet-rgb), 0.22), transparent 68%),
    radial-gradient(48% 38% at 8% 96%, rgba(var(--magenta-rgb), 0.16), transparent 68%),
    var(--void);
}
.res__wrap {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.res__head { margin-bottom: clamp(30px, 4vw, 44px); }
.res__title {
  font-size: clamp(34px, 6vw, 62px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: #fff;
}

.res__tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(28px, 4vw, 40px);
}
.res__tab {
  position: relative;
  padding: 12px 18px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--f-display);
  font-variation-settings: 'wght' 650;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color 0.25s var(--e-out);
}
.res__tab:hover      { color: var(--text-2); }
.res__tab.is-active  { color: #fff; }

/* Sliding underline, positioned from JS so it tracks the real
   tab widths rather than assuming they're equal. */
.res__ink {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--violet), var(--hot));
  transition: transform 0.4s var(--e-out), width 0.4s var(--e-out);
}

.res__panel[hidden] { display: none; }
.res__panel { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.7; color: var(--text-2); }
.res__panel h2 {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 650;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 30px 0 12px;
}
.res__panel h2:first-child { margin-top: 0; }
.res__panel p  { margin-bottom: 14px; }
.res__panel ul { margin: 0 0 16px 20px; }
.res__panel li { margin-bottom: 8px; }
.res__panel a  { color: var(--hot); }

.res__intro {
  margin-top: 18px;
  max-width: 58ch;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7;
  color: var(--text-2);
}
.res__intro--dim { margin-top: 10px; font-size: 15px; color: var(--text-3); }
.res__intro a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--magenta-rgb), 0.6);
  transition: color 0.25s, border-color 0.25s;
}
.res__intro a:hover { color: #fff; border-bottom-color: var(--hot); }

/* Honest empty state — replaced by .dl rows once files exist. */
.res__empty {
  padding: 26px 24px;
  border-radius: 14px;
  border: 1px dashed var(--line-2);
  background: var(--surface);
  color: var(--text-3);
  font-size: 14.5px;
  text-align: center;
}

/* Download row — one per hosted file */
.dl {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 10px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s var(--e-out), border-color 0.35s var(--e-out),
              background 0.35s var(--e-out);
}
.dl:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--magenta-rgb), 0.45);
  background: rgba(255, 255, 255, 0.05);
}
.dl__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--violet), var(--magenta));
  color: #fff;
  font-size: 16px;
}
.dl__text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.dl__text b { font-size: 16px; font-weight: 650; letter-spacing: -0.015em; color: #fff; }
.dl__text span { font-size: 13.5px; color: var(--text-3); }
.dl__go { font-size: 13px; color: var(--text-3); transition: transform 0.35s var(--e-out), color 0.35s; }
.dl:hover .dl__go { transform: translateY(2px); color: #fff; }


/* ── 19 · REVEAL ───────────────────────────────────────── */
/* Only hidden when JS is present to reveal it, so a failed
   script can't leave the page blank. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--e-out), transform 0.7s var(--e-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }


/* ── 20 · RESPONSIVE ───────────────────────────────────── */
@media (max-width: 1040px) {
  :root { --rail-w: 110px; }
  .sec__num { font-size: 34px; }
}

@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .nav__links { display: none; }
  .burger     { display: block; }
  .nav__actions .btn { display: none; }

  /* Rail flips to a horizontal label above the content */
  .sec__grid { grid-template-columns: 1fr; gap: 20px; }
  .sec__rail { position: static; flex-direction: row; align-items: baseline; gap: 12px; }
  .sec__num  { font-size: 26px; }
  .sec__tick { display: none; }

  .hero__scroll { display: none; }
  .hero { min-height: auto; padding-bottom: 70px; }
}

@media (max-width: 460px) {
  .foot__inner   { flex-direction: column; align-items: flex-start; }
  .timeline      { padding: 22px 18px; }
  .member        { padding: 22px; }
  .cta__row .btn { width: 100%; }
  .hero__rule    { gap: 10px; }
}


/* ── 21 · REDUCED MOTION ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero__grain { display: none; }
  .js .reveal { opacity: 1; transform: none; }
}