/* =========================================================
   VARIANT VAULT — MCU FAN WEBSITE
   Main colors: crimson, electric blue, cosmic purple, chrome
   ========================================================= */

:root {
  --bg: #05060a;
  --panel: #0d0f16;
  --panel-2: #121520;
  --text: #f7f7f9;
  --muted: #9ca3b7;
  --line: rgba(255,255,255,.12);
  --red: #ff244f;
  --red-dark: #9e0d2b;
  --blue: #4da3ff;
  --purple: #9d63ff;
  --gold: #ffc857;
  --chrome: #d9e2f2;
  --max: 1280px;
  --shadow: 0 30px 90px rgba(0,0,0,.45);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", system-ui, sans-serif;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,36,79,.12), transparent 25%),
    radial-gradient(circle at 90% 20%, rgba(77,163,255,.10), transparent 28%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
  z-index: -1;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .025;
  z-index: 30;
  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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

a {
  color: inherit;
  text-decoration: none;
}

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

.site-header {
  width: min(calc(100% - 36px), var(--max));
  margin: 18px auto 0;
  min-height: 76px;
  padding: 12px 14px 12px 18px;
  border: 1px solid var(--line);
  background: rgba(7,8,13,.75);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: sticky;
  top: 16px;
  z-index: 20;
  box-shadow: 0 16px 50px rgba(0,0,0,.28);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-family: "Anton", sans-serif;
  font-size: 24px;
  background: linear-gradient(145deg, var(--red), #8d0925);
  border: 1px solid rgba(255,255,255,.4);
  box-shadow:
    inset 0 0 0 3px rgba(0,0,0,.2),
    0 0 28px rgba(255,36,79,.24);
}

.brand-mark.small {
  width: 38px;
  height: 38px;
  font-size: 20px;
}

.brand-copy {
  display: grid;
  line-height: 1;
}

.brand-copy strong {
  letter-spacing: .08em;
  font-size: 15px;
}

.brand-copy small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .22em;
}

.nav-links {
  display: flex;
  gap: 26px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #c8cedb;
}

.nav-links a {
  transition: color .25s ease, transform .25s ease;
}

.nav-links a:hover {
  color: white;
  transform: translateY(-2px);
}

.header-button {
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  transition: .25s ease;
}

.header-button:hover {
  background: var(--red);
  border-color: var(--red);
}

.hero {
  min-height: 760px;
  width: min(calc(100% - 36px), var(--max));
  margin: 22px auto 0;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  padding: 70px 72px;
  background:
    linear-gradient(135deg, rgba(255,36,79,.08), transparent 32%),
    linear-gradient(315deg, rgba(77,163,255,.08), transparent 35%),
    #080a10;
  box-shadow: var(--shadow);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.04) 50%, transparent 50.2%),
    linear-gradient(transparent 49.8%, rgba(255,255,255,.04) 50%, transparent 50.2%);
  background-size: 120px 120px;
  opacity: .45;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 700px;
}

.eyebrow {
  color: #b9c3d8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.hero h1,
.section h2,
.cta-section h2 {
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: .015em;
}

.hero h1 {
  font-size: clamp(76px, 9vw, 148px);
  line-height: .82;
  max-width: 900px;
}

.hero h1 span {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--red);
  text-shadow: 0 0 34px rgba(255,36,79,.22);
}

.hero-copy {
  max-width: 650px;
  margin-top: 30px;
  color: #bcc2ce;
  font-size: 16px;
  line-height: 1.8;
}

.hero-copy strong {
  color: white;
}

.hero-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  min-height: 52px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .1em;
  border: 1px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--red), #b31031);
  box-shadow: 0 10px 30px rgba(255,36,79,.22);
}

.btn-primary:hover {
  box-shadow: 0 16px 40px rgba(255,36,79,.34);
}

.btn-secondary {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.025);
}

.btn-secondary:hover {
  background: rgba(255,255,255,.08);
}

.hero-stats {
  margin-top: 44px;
  display: flex;
  gap: 42px;
}

.hero-stats div {
  display: grid;
  gap: 2px;
}

.hero-stats strong {
  font-family: "Anton", sans-serif;
  font-size: 34px;
  font-weight: 400;
}

.hero-stats span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.hero-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .16;
}

.hero-glow-one {
  background: var(--red);
  top: -150px;
  left: -120px;
}

.hero-glow-two {
  background: var(--blue);
  bottom: -180px;
  right: -100px;
}

.portal-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
}

.portal {
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.portal-outer {
  width: min(35vw, 450px);
  aspect-ratio: 1;
  border: 2px solid rgba(77,163,255,.45);
  background:
    conic-gradient(
      from 90deg,
      rgba(77,163,255,.06),
      rgba(157,99,255,.55),
      rgba(255,36,79,.5),
      rgba(255,200,87,.35),
      rgba(77,163,255,.08)
    );
  box-shadow:
    0 0 30px rgba(77,163,255,.2),
    0 0 90px rgba(157,99,255,.18),
    inset 0 0 70px rgba(0,0,0,.7);
  animation: pulsePortal 4s ease-in-out infinite;
}

.portal-mid {
  width: 78%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.28);
  background: #090b12;
  box-shadow: inset 0 0 80px rgba(157,99,255,.18);
}

.portal-inner {
  width: 56%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,36,79,.55);
  background:
    radial-gradient(circle at 40% 35%, rgba(255,255,255,.18), transparent 15%),
    radial-gradient(circle, rgba(255,36,79,.28), rgba(4,5,8,.98) 62%);
  box-shadow:
    0 0 30px rgba(255,36,79,.2),
    inset 0 0 36px rgba(255,36,79,.14);
}

.portal-inner span {
  font-family: "Anton", sans-serif;
  font-size: clamp(70px, 8vw, 120px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px white;
  transform: skew(-8deg);
}

.portal-label {
  margin-top: 24px;
  color: #aab3c5;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .24em;
}

@keyframes pulsePortal {
  0%, 100% { transform: scale(1); filter: hue-rotate(0deg); }
  50% { transform: scale(1.035); filter: hue-rotate(16deg); }
}

.ticker {
  margin-top: 18px;
  border-block: 1px solid var(--line);
  background: #0b0d13;
  overflow: hidden;
  white-space: nowrap;
}

.ticker-track {
  display: inline-flex;
  gap: 42px;
  min-width: max-content;
  padding: 14px 0;
  font-family: "Anton", sans-serif;
  font-size: 14px;
  letter-spacing: .12em;
  color: #cbd2df;
  animation: marquee 28s linear infinite;
}

.ticker-track span:nth-child(2n) {
  color: var(--red);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.section {
  width: min(calc(100% - 36px), var(--max));
  margin: 0 auto;
  padding: 100px 0;
}

.section-heading {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 480px);
  gap: 40px;
  align-items: end;
  margin-bottom: 44px;
}

.section-heading h2 {
  font-size: clamp(48px, 7vw, 94px);
  line-height: .95;
}

.section-heading > p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
  justify-self: end;
  max-width: 420px;
}

.universe-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.universe-card {
  min-height: 390px;
  border: 1px solid var(--line);
  padding: 18px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .3s ease, border-color .3s ease;
}

.universe-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255,255,255,.35);
}

.universe-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .85;
}

.universe-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 18%, rgba(0,0,0,.87) 86%);
}

.card-red::before {
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.12), transparent 18%),
    radial-gradient(circle at 50% 42%, rgba(255,36,79,.75), transparent 24%),
    #1a080d;
}

.card-purple::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 40%),
    radial-gradient(circle at 50% 38%, rgba(157,99,255,.78), transparent 24%),
    #10091b;
}

.card-blue::before {
  background:
    radial-gradient(circle at 50% 35%, rgba(77,163,255,.72), transparent 25%),
    repeating-linear-gradient(60deg, transparent 0 16px, rgba(255,255,255,.025) 16px 17px),
    #07121d;
}

.card-gold::before {
  background:
    radial-gradient(circle at 50% 35%, rgba(255,200,87,.72), transparent 25%),
    radial-gradient(circle at 20% 20%, rgba(255,36,79,.24), transparent 20%),
    #171208;
}

.card-number {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  color: rgba(255,255,255,.42);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
}

.symbol {
  position: absolute;
  inset: 36px 18px auto;
  z-index: 2;
  height: 190px;
  display: grid;
  place-items: center;
  font-family: "Anton", sans-serif;
  font-size: 72px;
  color: rgba(255,255,255,.12);
  -webkit-text-stroke: 1px rgba(255,255,255,.23);
}

.universe-card p,
.universe-card h3,
.universe-card .tag {
  position: relative;
  z-index: 3;
}

.universe-card p {
  color: #b9c0ce;
  font-size: 9px;
  letter-spacing: .2em;
  font-weight: 800;
  margin-bottom: 7px;
}

.universe-card h3 {
  font-family: "Anton", sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
}

.tag {
  width: fit-content;
  margin-top: 18px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.2);
  color: #c8ced8;
  font-size: 8px;
  letter-spacing: .18em;
  font-weight: 900;
}

.heroes-section {
  border-top: 1px solid var(--line);
}

.hero-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.character-card {
  border: 1px solid var(--line);
  background: #0b0d13;
  min-height: 235px;
  display: grid;
  grid-template-columns: 42% 58%;
  overflow: hidden;
  transition: transform .3s ease, background .3s ease;
}

.character-card:hover {
  transform: translateY(-5px);
  background: #10131c;
}

.character-art {
  min-height: 235px;
  display: grid;
  place-items: center;
  font-family: "Anton", sans-serif;
  font-size: 62px;
  color: rgba(255,255,255,.15);
  -webkit-text-stroke: 1px rgba(255,255,255,.28);
  border-right: 1px solid var(--line);
}

.character-art {
  overflow: hidden;
  position: relative;
}

.character-art img {
  width: 100%;
  height: 100%;
  min-height: 235px;
  object-fit: cover;
  display: block;
}

.character-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.18), rgba(0,0,0,.02));
  pointer-events: none;
}

.character-art.iron {
  background: radial-gradient(circle at 50% 50%, rgba(255,36,79,.65), transparent 45%), #19080c;
}

.character-art.cap {
  background: radial-gradient(circle at 50% 50%, rgba(77,163,255,.6), transparent 45%), #07101b;
}

.character-art.widow {
  background: radial-gradient(circle at 50% 50%, rgba(255,50,50,.42), transparent 45%), #10080a;
}

.character-art.thor {
  background: radial-gradient(circle at 50% 50%, rgba(80,185,255,.56), transparent 45%), #07131b;
}

.character-art.hulk {
  background: radial-gradient(circle at 50% 50%, rgba(84, 214, 116, .58), transparent 45%), #07150b;
}

.character-art.hawkeye {
  background: radial-gradient(circle at 50% 50%, rgba(157,99,255,.62), transparent 45%), #10091a;
}

.character-art.wanda {
  background: radial-gradient(circle at 50% 50%, rgba(180,25,70,.74), transparent 45%), #17070d;
}

.character-art.strange {
  background: radial-gradient(circle at 50% 50%, rgba(255,145,45,.58), transparent 45%), #160d07;
}

.character-info {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.character-info span {
  color: var(--red);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
  margin-bottom: 8px;
}

.character-info h3 {
  font-family: "Anton", sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
}

.character-info p {
  color: var(--muted);
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
}

.phases-section {
  border-top: 1px solid var(--line);
}

.timeline {
  border-top: 1px solid var(--line);
}

.timeline-item {
  display: grid;
  grid-template-columns: 28px 160px 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}

.phase-dot {
  width: 9px;
  height: 9px;
  margin-top: 42px;
  background: var(--red);
  box-shadow: 0 0 22px rgba(255,36,79,.65);
}

.phase-label {
  padding: 40px 20px 40px 0;
  font-size: 10px;
  letter-spacing: .18em;
  font-weight: 900;
  color: #aeb7c8;
}

.phase-card {
  padding: 32px 0 34px 28px;
  border-left: 1px solid var(--line);
}

.phase-card h3 {
  font-family: "Anton", sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
}

.phase-card p {
  color: var(--muted);
  max-width: 620px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
}

.quote-section {
  width: min(calc(100% - 36px), var(--max));
  margin: 0 auto;
  min-height: 450px;
  padding: 70px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background:
    linear-gradient(rgba(5,6,10,.35), rgba(5,6,10,.7)),
    radial-gradient(circle at center, rgba(255,36,79,.24), transparent 34%),
    radial-gradient(circle at 30% 20%, rgba(77,163,255,.14), transparent 25%),
    #0a0c12;
}

.quote-kicker {
  color: #aeb6c8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .22em;
}

.quote-section blockquote {
  max-width: 920px;
  margin: 24px 0;
  font-family: "Anton", sans-serif;
  font-size: clamp(48px, 7vw, 94px);
  line-height: .98;
  text-transform: uppercase;
  color: white;
}

.quote-section span {
  color: var(--red);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
}

.fan-zone {
  padding-top: 100px;
  padding-bottom: 100px;
}

.fan-panel {
  border: 1px solid var(--line);
  background:
    linear-gradient(120deg, rgba(255,36,79,.08), transparent 40%),
    #0a0c12;
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 50px;
  align-items: center;
}

.fan-copy h2 {
  font-family: "Anton", sans-serif;
  font-size: clamp(54px, 7vw, 88px);
  line-height: .93;
  font-weight: 400;
  text-transform: uppercase;
}

.fan-copy > p:not(.eyebrow) {
  margin-top: 24px;
  color: var(--muted);
  max-width: 650px;
  line-height: 1.8;
  font-size: 14px;
}

.fan-copy strong {
  color: white;
}

.fan-tags {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fan-tags span {
  border: 1px solid rgba(255,255,255,.15);
  padding: 9px 11px;
  color: #bfc7d6;
  background: rgba(255,255,255,.025);
  font-size: 10px;
  font-weight: 800;
}

.fan-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 40%),
    linear-gradient(145deg, #151827, #090b11);
  border: 1px solid rgba(255,255,255,.2);
  min-height: 310px;
  padding: 24px;
  box-shadow: 0 24px 70px rgba(0,0,0,.38);
  transform: rotate(1.5deg);
  transition: transform .3s ease;
}

.fan-card:hover {
  transform: rotate(0deg) translateY(-4px);
}

.mini-label {
  display: inline-block;
  color: var(--red);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .2em;
  margin-bottom: 26px;
}

.fan-id-top {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fan-avatar {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  font-family: "Anton", sans-serif;
  font-size: 42px;
  background: linear-gradient(145deg, var(--red), #641023);
  border: 1px solid rgba(255,255,255,.28);
}

.fan-id-top p,
.fan-id-grid span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
}

.fan-id-top h3 {
  font-family: "Anton", sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  margin-top: 4px;
}

.fan-id-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.fan-id-grid div {
  display: grid;
  gap: 5px;
}

.fan-id-grid strong {
  font-size: 11px;
  letter-spacing: .08em;
}

.barcode {
  margin-top: 26px;
  color: rgba(255,255,255,.36);
  letter-spacing: .08em;
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
}

.cta-section {
  width: min(calc(100% - 36px), var(--max));
  margin: 0 auto 18px;
  padding: 90px 20px;
  border: 1px solid var(--line);
  text-align: center;
  background:
    radial-gradient(circle at center, rgba(255,36,79,.20), transparent 30%),
    #080a10;
}

.cta-section > p {
  color: #afb8c8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .22em;
}

.cta-section h2 {
  font-size: clamp(62px, 8vw, 112px);
  line-height: .95;
  margin: 14px 0 30px;
}

footer {
  width: min(calc(100% - 36px), var(--max));
  margin: 0 auto;
  min-height: 130px;
  padding: 28px 0 36px;
  display: grid;
  grid-template-columns: 1fr 1.3fr auto;
  gap: 30px;
  align-items: center;
  color: var(--muted);
  font-size: 10px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-brand strong {
  color: white;
  letter-spacing: .08em;
}

.footer-brand p {
  margin-top: 5px;
}

.disclaimer {
  line-height: 1.6;
  text-align: center;
}

.copyright {
  text-align: right;
}

/* =========================
   TABLET
   ========================= */
@media (max-width: 1050px) {
  .nav-links {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 60px;
    padding: 70px 46px;
  }

  .portal-wrap {
    padding-bottom: 30px;
  }

  .portal-outer {
    width: min(58vw, 430px);
  }

  .universe-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fan-panel {
    grid-template-columns: 1fr;
  }

  .fan-card {
    max-width: 520px;
  }

  footer {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-brand {
    justify-content: center;
  }

  .copyright {
    text-align: center;
  }
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 700px) {
  .site-header,
  .hero,
  .section,
  .quote-section,
  .cta-section,
  footer {
    width: min(calc(100% - 22px), var(--max));
  }

  .site-header {
    top: 10px;
    margin-top: 10px;
    min-height: 68px;
    padding: 10px 12px;
  }

  .brand-copy strong {
    font-size: 12px;
  }

  .brand-copy small {
    font-size: 7px;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
  }

  .header-button {
    display: none;
  }

  .hero {
    min-height: auto;
    padding: 64px 24px 54px;
  }

  .hero h1 {
    font-size: clamp(66px, 20vw, 98px);
  }

  .hero-copy {
    font-size: 14px;
  }

  .hero-actions {
    display: grid;
  }

  .btn {
    width: 100%;
  }

  .hero-stats {
    gap: 24px;
    justify-content: space-between;
  }

  .hero-stats strong {
    font-size: 28px;
  }

  .portal-outer {
    width: min(82vw, 370px);
  }

  .section {
    padding: 78px 0;
  }

  .section-heading {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
    margin-bottom: 28px;
  }

  .section-heading > p {
    justify-self: start;
  }

  .section-heading h2 {
    font-size: clamp(50px, 15vw, 72px);
  }

  .universe-grid,
  .hero-card-grid {
    grid-template-columns: 1fr;
  }

  .universe-card {
    min-height: 340px;
  }

  .character-card {
    grid-template-columns: 38% 62%;
  }

  .timeline-item {
    grid-template-columns: 22px 1fr;
  }

  .phase-label {
    grid-column: 2;
    padding: 28px 0 8px;
  }

  .phase-card {
    grid-column: 2;
    padding: 8px 0 28px;
    border-left: 0;
  }

  .phase-dot {
    grid-row: 1 / span 2;
    margin-top: 34px;
  }

  .quote-section {
    min-height: 380px;
    padding: 40px 20px;
  }

  .fan-panel {
    padding: 34px 20px;
  }

  .fan-copy h2 {
    font-size: clamp(52px, 15vw, 74px);
  }

  .fan-card {
    padding: 20px;
    transform: none;
  }

  .cta-section {
    padding: 68px 18px;
  }

  footer {
    padding-bottom: 28px;
  }
}


/* =========================
   MULTIVERSE SUBPAGE
   ========================= */
.active-link {
  color: white !important;
}

.subpage-hero {
  width: min(calc(100% - 36px), var(--max));
  margin: 22px auto 0;
  min-height: 540px;
  padding: 90px 72px;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at 72% 35%, rgba(157,99,255,.30), transparent 24%),
    radial-gradient(circle at 25% 30%, rgba(77,163,255,.14), transparent 28%),
    linear-gradient(135deg, rgba(255,36,79,.09), transparent 38%),
    #080a10;
  box-shadow: var(--shadow);
}

.subpage-hero::after {
  content: "∞";
  position: absolute;
  right: 7%;
  top: 50%;
  transform: translateY(-52%);
  font-family: "Anton", sans-serif;
  font-size: clamp(220px, 30vw, 450px);
  line-height: 1;
  color: rgba(255,255,255,.025);
  -webkit-text-stroke: 1px rgba(157,99,255,.2);
  pointer-events: none;
}

.subpage-hero h1 {
  position: relative;
  z-index: 2;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: clamp(78px, 12vw, 170px);
  line-height: .86;
  text-transform: uppercase;
  max-width: 900px;
}

.subpage-hero > p:not(.eyebrow) {
  position: relative;
  z-index: 2;
  max-width: 650px;
  margin: 28px 0;
  color: var(--muted);
  line-height: 1.8;
}

.subpage-hero .btn,
.subpage-hero .eyebrow {
  position: relative;
  z-index: 2;
}

.subpage-hero .btn {
  width: fit-content;
}

.file-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.file-card {
  min-height: 220px;
  padding: 26px;
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(157,99,255,.08), transparent 50%),
    #0b0d13;
  transition: transform .25s ease, border-color .25s ease;
}

.file-card:hover {
  transform: translateY(-5px);
  border-color: rgba(157,99,255,.55);
}

.file-card > span {
  color: var(--purple);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
}

.file-card h3 {
  margin-top: 42px;
  font-family: "Anton", sans-serif;
  font-size: 38px;
  font-weight: 400;
}

.file-card p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .file-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .subpage-hero {
    padding: 72px 42px;
  }
}

@media (max-width: 700px) {
  .subpage-hero {
    width: min(calc(100% - 22px), var(--max));
    min-height: 470px;
    padding: 64px 24px;
  }

  .subpage-hero h1 {
    font-size: clamp(72px, 22vw, 105px);
  }

  .subpage-hero .btn {
    width: 100%;
  }

  .file-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================
   PHASES PAGE
   ========================= */
.phases-hero {
  background:
    radial-gradient(circle at 78% 38%, rgba(255,36,79,.25), transparent 26%),
    radial-gradient(circle at 55% 70%, rgba(77,163,255,.10), transparent 24%),
    linear-gradient(135deg, rgba(255,200,87,.06), transparent 38%),
    #080a10;
}

.phases-hero::after {
  content: "VI";
  color: rgba(255,255,255,.025);
  -webkit-text-stroke: 1px rgba(255,36,79,.19);
}

.phase-archive {
  border-top: 1px solid var(--line);
}

.phase-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.phase-page-card {
  min-height: 610px;
  padding: 28px;
  border: 1px solid var(--line);
  background:
    linear-gradient(160deg, rgba(255,255,255,.05), transparent 36%),
    #0b0d13;
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease;
}

.phase-page-card:hover {
  transform: translateY(-7px);
  border-color: rgba(255,255,255,.28);
}

.phase-page-card::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  right: -100px;
  top: -100px;
  filter: blur(15px);
  opacity: .15;
}

.phase-one::before { background: var(--red); }
.phase-two::before { background: var(--blue); }
.phase-three::before { background: var(--gold); }
.phase-four::before { background: var(--purple); }
.phase-five::before { background: var(--red); }
.phase-six::before { background: var(--blue); }

.phase-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 2;
}

.phase-index {
  font-family: "Anton", sans-serif;
  font-size: 28px;
  color: var(--red);
}

.phase-era {
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .18em;
}

.phase-page-card h3 {
  position: relative;
  z-index: 2;
  margin-top: 34px;
  font-family: "Anton", sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.phase-summary {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  min-height: 78px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.hero-list-title {
  position: relative;
  z-index: 2;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: #cdd4e2;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
}

.phase-hero-list {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.phase-hero-list span {
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.025);
  color: #c3cad8;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}

.phase-page-card:hover .phase-hero-list span {
  border-color: rgba(255,255,255,.18);
}

.phase-status {
  position: relative;
  z-index: 2;
  margin-top: 24px;
  padding: 12px;
  border: 1px solid rgba(77,163,255,.25);
  background: rgba(77,163,255,.06);
  color: var(--blue);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .15em;
  text-align: center;
}

.multiverse-phase-area {
  padding-top: 20px;
}

.phase-note {
  width: min(calc(100% - 36px), var(--max));
  margin: -40px auto 100px;
  padding: 28px 30px;
  border-left: 3px solid var(--red);
  background: #0b0d13;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 28px;
  align-items: start;
}

.phase-note span {
  color: var(--red);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .17em;
}

.phase-note p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 1050px) {
  .phase-page-grid {
    grid-template-columns: 1fr;
  }

  .phase-page-card {
    min-height: auto;
  }

  .phase-summary {
    min-height: auto;
  }
}

@media (max-width: 700px) {
  .phase-page-card {
    padding: 22px;
  }

  .phase-page-card h3 {
    font-size: 46px;
  }

  .phase-note {
    width: min(calc(100% - 22px), var(--max));
    margin-top: -25px;
    grid-template-columns: 1fr;
    gap: 10px;
  }
}


/* =========================
   HEROES PAGE
   ========================= */
.heroes-page-hero {
  background:
    radial-gradient(circle at 78% 35%, rgba(255,36,79,.28), transparent 25%),
    radial-gradient(circle at 54% 70%, rgba(77,163,255,.10), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 42%),
    #080a10;
}

.heroes-page-hero::after {
  content: "A";
  color: rgba(255,255,255,.025);
  -webkit-text-stroke: 1px rgba(255,36,79,.18);
}

.heroes-page-section {
  border-top: 1px solid var(--line);
}

.heroes-page-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.hero-profile-card {
  min-height: 430px;
  display: grid;
  grid-template-columns: 46% 54%;
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 38%),
    #0b0d13;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease;
}

.hero-profile-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.28);
}

.hero-profile-image {
  min-height: 430px;
  overflow: hidden;
  position: relative;
  border-right: 1px solid var(--line);
}

.hero-profile-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.25), transparent 45%),
    linear-gradient(to right, transparent 70%, rgba(11,13,19,.18));
  pointer-events: none;
}

.hero-profile-image img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}

.hero-profile-card:hover .hero-profile-image img {
  transform: scale(1.035);
}

.hero-profile-content {
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.hero-number {
  position: absolute;
  top: 22px;
  right: 24px;
  color: rgba(255,255,255,.25);
  font-family: "Anton", sans-serif;
  font-size: 24px;
}

.hero-alias {
  color: var(--red);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
  margin-bottom: 10px;
}

.hero-profile-content h3 {
  font-family: "Anton", sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: .95;
}

.hero-description {
  margin-top: 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.hero-tags {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.hero-tags span {
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.025);
  color: #c7cedc;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
}

@media (max-width: 1050px) {
  .heroes-page-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .hero-profile-card {
    grid-template-columns: 1fr;
  }

  .hero-profile-image,
  .hero-profile-image img {
    min-height: 390px;
  }

  .hero-profile-image {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .hero-profile-content {
    padding: 30px 22px 34px;
  }

  .hero-profile-content h3 {
    font-size: 44px;
  }
}


/* =========================
   EXTENDED HERO ROSTER
   ========================= */
.extended-heroes-section {
  border-top: 1px solid var(--line);
  padding-top: 90px;
}

.extended-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.extended-hero-card {
  position: relative;
  min-height: 245px;
  padding: 26px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 85% 15%, rgba(255,36,79,.10), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 42%),
    #0b0d13;
  overflow: hidden;
  transition: transform .28s ease, border-color .28s ease, background .28s ease;
}

.extended-hero-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.28);
  background:
    radial-gradient(circle at 85% 15%, rgba(255,36,79,.16), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.05), transparent 42%),
    #0d1017;
}

.extended-number {
  position: absolute;
  top: 18px;
  right: 20px;
  color: rgba(255,255,255,.18);
  font-family: "Anton", sans-serif;
  font-size: 26px;
}

.extended-alias {
  color: var(--red);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  margin-bottom: 14px;
  padding-right: 48px;
}

.extended-hero-card h3 {
  font-family: "Anton", sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
}

.extended-hero-card > p:not(.extended-alias) {
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  padding-bottom: 42px;
}

.roster-tag {
  position: absolute;
  left: 26px;
  bottom: 24px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.025);
  color: #c8cfdd;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}

.roster-note {
  margin-top: 22px;
  padding: 20px 22px;
  border-left: 3px solid var(--red);
  background: #0b0d13;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.roster-note strong {
  color: white;
  letter-spacing: .08em;
}

@media (max-width: 1050px) {
  .extended-hero-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .extended-hero-grid {
    grid-template-columns: 1fr;
  }

  .extended-hero-card {
    min-height: 220px;
  }
}


/* Strengths inside extended hero cards */
.hero-strengths {
  position: relative;
  z-index: 2;
  margin-top: 18px;
  padding-top: 15px;
  padding-bottom: 42px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.hero-strengths > strong {
  display: block;
  color: #d7ddea;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
  margin-bottom: 10px;
}

.strength-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.strength-tags span {
  padding: 6px 8px;
  border: 1px solid rgba(77,163,255,.18);
  background: rgba(77,163,255,.05);
  color: #bfcce0;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.25;
}

.extended-hero-card {
  min-height: 330px;
}

.extended-hero-card > p:not(.extended-alias) {
  padding-bottom: 0;
}


/* =========================
   FAQ SECTION
   ========================= */
.faq-section {
  border-top: 1px solid var(--line);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.faq-item {
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 45%),
    #0b0d13;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}

.faq-item:hover {
  border-color: rgba(255,255,255,.25);
  transform: translateY(-2px);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 22px 54px 22px 22px;
  color: #f2f4f8;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--red);
  font-family: "Anton", sans-serif;
  font-size: 24px;
  font-weight: 400;
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-answer {
  padding: 0 22px 22px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.faq-answer p {
  padding-top: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.75;
}

.legal-disclaimer-box {
  margin-top: 22px;
  padding: 24px 26px;
  border-left: 3px solid var(--red);
  background:
    linear-gradient(90deg, rgba(255,36,79,.07), transparent 50%),
    #0b0d13;
}

.legal-disclaimer-box span {
  display: block;
  margin-bottom: 10px;
  color: var(--red);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .17em;
}

.legal-disclaimer-box p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.75;
}

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


/* =========================
   FAQS PAGE
   ========================= */
.faqs-page-hero {
  background:
    radial-gradient(circle at 78% 35%, rgba(255,36,79,.22), transparent 26%),
    radial-gradient(circle at 58% 70%, rgba(157,99,255,.11), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 42%),
    #080a10;
}

.faqs-page-hero::after {
  content: "?";
  color: rgba(255,255,255,.025);
  -webkit-text-stroke: 1px rgba(255,36,79,.18);
}

.faq-page-section {
  border-top: 1px solid var(--line);
}

.faq-main-disclaimer {
  margin-top: 28px;
}


/* =========================
   FAQ ACCORDION CHEVRONS
   ========================= */
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-right: 22px;
}

.faq-item summary::after {
  content: none !important;
}

.faq-chevron {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.025);
  color: var(--red);
  transition:
    transform .28s ease,
    background .28s ease,
    border-color .28s ease;
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
  background: rgba(255,36,79,.08);
  border-color: rgba(255,36,79,.28);
}

.faq-item .faq-answer {
  animation: faqDrop .24s ease;
}

@keyframes faqDrop {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================
   JOIN THE VARIANTS PAGE
   ========================= */
.active-join {
  background: var(--red);
  border-color: var(--red);
}

.join-page-hero {
  background:
    radial-gradient(circle at 78% 35%, rgba(255,36,79,.27), transparent 24%),
    radial-gradient(circle at 54% 68%, rgba(77,163,255,.11), transparent 27%),
    linear-gradient(135deg, rgba(157,99,255,.06), transparent 45%),
    #080a10;
}

.join-page-hero::after {
  content: "V";
  color: rgba(255,255,255,.025);
  -webkit-text-stroke: 1px rgba(255,36,79,.18);
}

.join-section {
  border-top: 1px solid var(--line);
}

.variant-form {
  display: block;
}

.join-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.join-question {
  position: relative;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 90% 10%, rgba(255,36,79,.07), transparent 25%),
    #0b0d13;
}

.join-question.full-width {
  grid-column: 1 / -1;
}

.question-number {
  position: absolute;
  right: 22px;
  top: 20px;
  font-family: "Anton", sans-serif;
  font-size: 28px;
  color: rgba(255,255,255,.16);
}

.question-copy {
  padding-right: 55px;
  margin-bottom: 24px;
}

.question-kicker {
  color: var(--red);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .18em;
  margin-bottom: 8px;
}

.question-copy h3 {
  font-family: "Anton", sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.question-copy > p:last-child {
  margin-top: 9px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.text-field-wrap {
  display: grid;
  gap: 9px;
}

.text-field-wrap label {
  color: #bfc6d4;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.text-field-wrap input {
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.14);
  outline: none;
  background: rgba(255,255,255,.025);
  color: white;
  font: inherit;
}

.text-field-wrap input:focus {
  border-color: rgba(255,36,79,.55);
  box-shadow: 0 0 0 3px rgba(255,36,79,.07);
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.choice-card,
.check-choice,
.phase-choice-list label,
.team-choice {
  cursor: pointer;
}

.choice-card input,
.check-choice input,
.phase-choice-list input,
.team-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-card-content {
  min-height: 88px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.025);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  transition: .22s ease;
}

.choice-card-content strong {
  font-size: 11px;
  letter-spacing: .08em;
}

.choice-card-content small {
  color: var(--muted);
  font-size: 10px;
}

.choice-card input:checked + .choice-card-content {
  border-color: rgba(255,36,79,.65);
  background: rgba(255,36,79,.09);
  box-shadow: inset 0 0 0 1px rgba(255,36,79,.2);
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.check-choice span {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.02);
  display: flex;
  align-items: center;
  color: #c6cdd9;
  font-size: 10px;
  font-weight: 700;
  transition: .2s ease;
}

.check-choice input:checked + span {
  color: white;
  border-color: rgba(77,163,255,.55);
  background: rgba(77,163,255,.09);
}

.phase-choice-list {
  display: grid;
  gap: 8px;
}

.phase-choice-list label span {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.02);
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  transition: .2s ease;
}

.phase-choice-list input:checked + span {
  border-color: rgba(157,99,255,.55);
  background: rgba(157,99,255,.09);
}

.team-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.team-choice > span {
  min-height: 148px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.13);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: .22s ease;
}

.team-choice small {
  color: rgba(255,255,255,.62);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .18em;
}

.team-choice strong {
  margin-top: 4px;
  font-family: "Anton", sans-serif;
  font-size: 30px;
  font-weight: 400;
}

.team-cap > span {
  background:
    radial-gradient(circle at 70% 25%, rgba(77,163,255,.25), transparent 28%),
    #09111a;
}

.team-iron > span {
  background:
    radial-gradient(circle at 70% 25%, rgba(255,36,79,.25), transparent 28%),
    #18090d;
}

.team-choice input:checked + span {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.45);
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
}

.team-cap input:checked + span {
  box-shadow: 0 14px 36px rgba(77,163,255,.12), inset 0 0 0 1px rgba(77,163,255,.35);
}

.team-iron input:checked + span {
  box-shadow: 0 14px 36px rgba(255,36,79,.12), inset 0 0 0 1px rgba(255,36,79,.35);
}

.join-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.join-actions button {
  border-radius: 0;
  font-family: inherit;
  cursor: pointer;
}

.variant-result-section {
  border-top: 1px solid var(--line);
}

.generated-variant-card {
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,.2);
  background:
    radial-gradient(circle at 85% 10%, rgba(255,36,79,.12), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.055), transparent 42%),
    #0b0d13;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}

.variant-id-header {
  padding: 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.variant-id-logo {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  font-family: "Anton", sans-serif;
  font-size: 38px;
  background: linear-gradient(145deg, var(--red), #711023);
  border: 1px solid rgba(255,255,255,.3);
}

.variant-id-header small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
}

.variant-id-header h3 {
  margin-top: 5px;
  font-family: "Anton", sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
}

.variant-status {
  padding: 8px 10px;
  border: 1px solid rgba(70,220,130,.28);
  background: rgba(70,220,130,.06);
  color: #8ee5ad;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .13em;
}

.variant-id-details {
  padding: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.variant-id-details div {
  display: grid;
  gap: 7px;
}

.variant-id-details span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
}

.variant-id-details strong {
  font-size: 12px;
  line-height: 1.55;
}

.variant-id-details .wide-result {
  grid-column: 1 / -1;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.variant-id-footer {
  padding: 18px 26px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: rgba(255,255,255,.38);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
}

@media (max-width: 1050px) {
  .choice-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .checkbox-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .join-form-grid {
    grid-template-columns: 1fr;
  }

  .join-question,
  .join-question.full-width {
    grid-column: auto;
  }

  .choice-grid,
  .checkbox-grid {
    grid-template-columns: 1fr 1fr;
  }

  .team-choice-grid {
    grid-template-columns: 1fr;
  }

  .variant-id-details {
    grid-template-columns: 1fr;
  }

  .variant-id-details .wide-result {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  .choice-grid,
  .checkbox-grid {
    grid-template-columns: 1fr;
  }

  .join-actions {
    display: grid;
  }

  .variant-id-header {
    grid-template-columns: auto 1fr;
  }

  .variant-status {
    grid-column: 1 / -1;
    width: fit-content;
  }

  .variant-id-footer {
    flex-direction: column;
  }
}


/* =========================
   PUBLIC VARIANT REGISTRY
   ========================= */
.variants-page-hero {
  background:
    radial-gradient(circle at 78% 35%, rgba(77,163,255,.23), transparent 25%),
    radial-gradient(circle at 55% 70%, rgba(157,99,255,.12), transparent 25%),
    linear-gradient(135deg, rgba(255,36,79,.07), transparent 45%),
    #080a10;
}

.variants-page-hero::after {
  content: "VV";
  color: rgba(255,255,255,.02);
  -webkit-text-stroke: 1px rgba(77,163,255,.18);
}

.public-profile-question {
  background:
    radial-gradient(circle at 88% 18%, rgba(77,163,255,.10), transparent 26%),
    #0b0d13;
}

.public-consent {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.025);
}

.public-consent input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.consent-box {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,255,255,.25);
  display: grid;
  place-items: center;
  transition: .2s ease;
}

.public-consent input:checked + .consent-box {
  background: var(--red);
  border-color: var(--red);
}

.public-consent input:checked + .consent-box::after {
  content: "✓";
  color: white;
  font-size: 14px;
  font-weight: 900;
}

.consent-copy {
  display: grid;
  gap: 5px;
}

.consent-copy strong {
  font-size: 10px;
  letter-spacing: .08em;
}

.consent-copy small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.publish-status {
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  color: #bfc7d7;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
}

.publish-status.publish-success {
  color: #8ee5ad;
  background: rgba(70,220,130,.045);
}

.publish-status.publish-error {
  color: #ff8ca3;
  background: rgba(255,36,79,.05);
}

.btn-danger-outline {
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid rgba(255,36,79,.35);
  background: transparent;
  color: #ff8ca3;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.variants-world-section,
.public-registry-section {
  border-top: 1px solid var(--line);
}

.registry-controls {
  display: grid;
  grid-template-columns: 1.5fr .75fr .75fr;
  gap: 10px;
  margin-bottom: 18px;
}

.registry-search,
.registry-filter {
  display: grid;
  gap: 8px;
}

.registry-search > span,
.registry-filter > span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .15em;
}

.registry-search input,
.registry-filter select {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.13);
  background: #0b0d13;
  color: white;
  font: inherit;
  outline: none;
}

.registry-filter select {
  cursor: pointer;
}

.registry-search input:focus,
.registry-filter select:focus {
  border-color: rgba(77,163,255,.48);
}

.registry-toolbar {
  min-height: 54px;
  padding: 0 16px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.registry-toolbar > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.registry-toolbar strong,
.registry-toolbar a,
.registry-toolbar button {
  color: #c8cfdd;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.registry-toolbar a {
  color: var(--blue);
}

.registry-toolbar button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.registry-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #62e69b;
  box-shadow: 0 0 14px rgba(98,230,155,.7);
}

.public-variants-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.public-variant-card {
  position: relative;
  min-height: 330px;
  padding: 24px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 90% 5%, rgba(77,163,255,.09), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 42%),
    #0b0d13;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease;
}

.public-variant-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.28);
}

.public-variant-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.public-id-badge {
  color: var(--blue);
  font-family: "Anton", sans-serif;
  font-size: 15px;
  letter-spacing: .08em;
}

.public-team-badge {
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.12);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
}

.team-cap-badge {
  color: #8ec7ff;
  border-color: rgba(77,163,255,.28);
  background: rgba(77,163,255,.05);
}

.team-iron-badge {
  color: #ff879f;
  border-color: rgba(255,36,79,.28);
  background: rgba(255,36,79,.05);
}

.public-variant-card h3 {
  margin-top: 34px;
  font-family: "Anton", sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.public-variant-meta {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.public-variant-meta p {
  display: grid;
  gap: 5px;
}

.public-variant-meta span,
.public-other-label {
  color: var(--muted);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
}

.public-variant-meta strong {
  color: #dce2ec;
  font-size: 10px;
  line-height: 1.45;
}

.public-other-label {
  margin-top: 22px;
}

.public-hero-tags {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.public-hero-tags span {
  padding: 6px 8px;
  border: 1px solid rgba(157,99,255,.18);
  background: rgba(157,99,255,.05);
  color: #cfc2e9;
  font-size: 8px;
  font-weight: 700;
}

.registry-message {
  grid-column: 1 / -1;
  min-height: 180px;
  padding: 34px;
  border: 1px dashed rgba(255,255,255,.14);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.registry-error {
  color: #ff9aad;
  border-color: rgba(255,36,79,.25);
}

.compact-registry-toolbar {
  margin-top: -6px;
}

@media (max-width: 1050px) {
  .public-variants-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .registry-controls {
    grid-template-columns: 1fr 1fr;
  }

  .registry-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .public-variants-grid,
  .registry-controls {
    grid-template-columns: 1fr;
  }

  .registry-search {
    grid-column: auto;
  }

  .registry-toolbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 15px;
  }

  .public-variant-meta {
    grid-template-columns: 1fr;
  }
}