/* ===========================================================
   leviathansi.xyz — shared stylesheet
   Same Metanoia palette as the pumpjam build, slightly tuned
   for "holding page" energy: more breathing room, less neon
   noise, room for branding to evolve.
   =========================================================== */
:root {
  --bg-deep:    #07041a;
  --bg-violet:  #1a0b3d;
  --violet:     #7c3aed;
  --magenta:    #c026d3;
  --pink:       #ec4899;
  --cyan:       #22d3ee;
  --gold:       #facc15;
  --gold-dim:   #c9a84c;
  --text:       #ece9ff;
  --muted:      #9a8fc7;
  --crimson:    #f43f5e;

  --glow-violet:  rgba(124, 58, 237, 0.32);
  --glow-magenta: rgba(192, 38, 211, 0.30);
  --glow-cyan:    rgba(34, 211, 238, 0.20);
  --glow-gold:    rgba(250, 204, 21, 0.22);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-deep);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

.cosmic-bg {
  position: fixed; inset: 0; z-index: 0;
  background:
    /* Milky Way spiral arms — soft conic + radial sweep */
    conic-gradient(from 220deg at 50% 55%,
      rgba(124, 58, 237, 0.00) 0deg,
      rgba(124, 58, 237, 0.14) 25deg,
      rgba(34, 211, 238, 0.10) 70deg,
      rgba(124, 58, 237, 0.00) 130deg,
      rgba(236, 72, 153, 0.08) 200deg,
      rgba(34, 211, 238, 0.10) 260deg,
      rgba(124, 58, 237, 0.00) 320deg,
      rgba(124, 58, 237, 0.00) 360deg),
    /* Galactic core glow */
    radial-gradient(ellipse 60% 30% at 50% 55%, rgba(251, 191, 36, 0.10) 0%, rgba(192, 38, 211, 0.15) 40%, transparent 70%),
    /* Existing nebula glows */
    radial-gradient(ellipse at 18% 22%, rgba(236, 72, 153, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 18%, rgba(124, 58, 237, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(192, 38, 211, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(34, 211, 238, 0.07) 0%, transparent 55%),
    /* Deep space gradient */
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-violet) 60%, var(--bg-deep) 100%);
}

/* Hebrew alphabet floating glyphs — SVG-tiled pattern over everything fixed.
   22 letters of the aleph-bet, scattered, low-opacity, slowly drifting.
   Embedded as SVG data URL so no extra HTTP request. */
.hebrew-rain {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: 0.13;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'><style>text{font-family:'Frank Ruhl Libre',serif;fill:%23facc15;}</style><text x='40'  y='60'  font-size='42'>%D7%90</text><text x='180' y='110' font-size='34' fill='%2322d3ee'>%D7%91</text><text x='340' y='80'  font-size='38' fill='%23c026d3'>%D7%92</text><text x='500' y='130' font-size='30'>%D7%93</text><text x='80'  y='220' font-size='36' fill='%23ec4899'>%D7%94</text><text x='250' y='250' font-size='44' fill='%237c3aed'>%D7%95</text><text x='420' y='220' font-size='32' fill='%2322d3ee'>%D7%96</text><text x='550' y='280' font-size='36'>%D7%97</text><text x='30'  y='340' font-size='40' fill='%23c026d3'>%D7%98</text><text x='200' y='370' font-size='34' fill='%237c3aed'>%D7%99</text><text x='370' y='340' font-size='38' fill='%23ec4899'>%D7%9B</text><text x='510' y='400' font-size='42' fill='%2322d3ee'>%D7%9C</text><text x='60'  y='460' font-size='36'>%D7%9E</text><text x='230' y='490' font-size='40' fill='%23c026d3'>%D7%A0</text><text x='400' y='460' font-size='34' fill='%237c3aed'>%D7%A1</text><text x='540' y='520' font-size='38' fill='%23ec4899'>%D7%A2</text><text x='110' y='570' font-size='32' fill='%2322d3ee'>%D7%A4</text><text x='280' y='560' font-size='44'>%D7%A6</text><text x='450' y='580' font-size='36' fill='%23c026d3'>%D7%A7</text><text x='150' y='30'  font-size='30' fill='%237c3aed'>%D7%A8</text><text x='320' y='40'  font-size='34' fill='%23ec4899'>%D7%A9</text><text x='480' y='30'  font-size='38'>%D7%AA</text></svg>");
  background-size: 600px 600px;
  animation: hebrew-drift 60s linear infinite;
}
@keyframes hebrew-drift {
  from { background-position: 0 0; }
  to   { background-position: 600px 600px; }
}

/* Tree of Life — bump opacity from 0.06 to 0.16 + slow pulse so it actually reads */
.tree-accent {
  opacity: 0.16 !important;
  animation: tree-pulse 7s ease-in-out infinite alternate;
}
@keyframes tree-pulse {
  from { opacity: 0.10; filter: drop-shadow(0 0 18px var(--magenta)); }
  to   { opacity: 0.22; filter: drop-shadow(0 0 38px var(--cyan)); }
}

/* If a page doesn't have a <svg.tree-accent>, render one as a body::before
   so the Tree of Life is universal. Only kicks in when there's no SVG present. */
body:not(:has(.tree-accent))::before {
  content: "";
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 780px; max-width: 95vw; aspect-ratio: 300 / 460;
  z-index: 1; opacity: 0.14; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 460'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0%25' stop-color='%23ec4899'/><stop offset='50%25' stop-color='%23c026d3'/><stop offset='100%25' stop-color='%2322d3ee'/></linearGradient></defs><g fill='none' stroke='url(%23g)' stroke-width='1.2'><circle cx='150' cy='40' r='18'/><circle cx='80' cy='110' r='18'/><circle cx='220' cy='110' r='18'/><circle cx='80' cy='200' r='18'/><circle cx='220' cy='200' r='18'/><circle cx='150' cy='155' r='18'/><circle cx='80' cy='290' r='18'/><circle cx='220' cy='290' r='18'/><circle cx='150' cy='345' r='18'/><circle cx='150' cy='420' r='18'/><path d='M150 40 L80 110 M150 40 L220 110 M150 40 L150 155 M80 110 L220 110 M80 110 L150 155 M80 110 L80 200 M220 110 L150 155 M220 110 L220 200 M80 200 L150 155 M80 200 L220 200 M80 200 L150 345 M80 200 L80 290 M220 200 L150 155 M220 200 L220 290 M220 200 L150 345 M150 155 L150 345 M80 290 L220 290 M80 290 L150 345 M220 290 L150 345 M150 345 L150 420'/></g></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  animation: tree-pulse 7s ease-in-out infinite alternate;
}
.star-field {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 65% 70%, #fff, transparent),
    radial-gradient(1px 1px at 45% 55%, #fff, transparent),
    radial-gradient(1px 1px at 85% 15%, #fff, transparent),
    radial-gradient(1px 1px at 92% 65%, #fff, transparent),
    radial-gradient(1px 1px at 38% 82%, #fff, transparent),
    radial-gradient(1px 1px at 18% 88%, #fff, transparent),
    radial-gradient(1px 1px at 72% 28%, #fff, transparent),
    radial-gradient(1px 1px at 48% 18%, #fff, transparent),
    radial-gradient(1px 1px at 12% 58%, #fff, transparent),
    radial-gradient(2px 2px at 30% 65%, rgba(236,72,153,0.6), transparent),
    radial-gradient(2px 2px at 78% 42%, rgba(34,211,238,0.6), transparent);
  background-size: 100% 100%;
  opacity: 0.5;
  animation: twinkle 9s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.3; } to { opacity: 0.75; } }

.tree-accent {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 780px; max-width: 95vw; height: auto;
  z-index: 1; opacity: 0.06; pointer-events: none;
  filter: drop-shadow(0 0 28px var(--magenta));
}

/* ----------- nav ----------- */
.nav {
  position: relative; z-index: 10;
  max-width: 1200px; margin: 0 auto;
  padding: 22px 24px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.brand {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0 12px var(--glow-gold);
  text-decoration: none;
}
.brand:hover { color: #fff; }
.nav-links { display: flex; gap: 18px; flex-wrap: wrap; }
.nav-links a {
  color: var(--muted); text-decoration: none;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--cyan); }

/* ----------- hero ----------- */
.hero {
  position: relative; z-index: 10;
  max-width: 1100px; margin: 0 auto;
  padding: 88px 24px 32px;
  text-align: center;
  animation: fadeIn 1.0s ease-out;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.30);
  border-radius: 999px; color: var(--cyan);
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  margin-bottom: 28px;
}
.status-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }

h1.title {
  font-size: clamp(48px, 9vw, 104px); line-height: 1.0; font-weight: 900;
  letter-spacing: -0.035em; margin-bottom: 22px;
  background: linear-gradient(135deg, var(--pink) 0%, var(--magenta) 28%, var(--violet) 52%, var(--cyan) 76%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 90px var(--glow-magenta);
}
.lede {
  font-size: clamp(15px, 2vw, 19px); color: var(--text); opacity: 0.85;
  line-height: 1.6; max-width: 680px; margin: 0 auto 18px;
}
.micro {
  font-size: 11px; color: var(--muted);
  letter-spacing: 0.22em; text-transform: uppercase; margin-top: 8px;
}

/* ----------- main grid (3 tracks) ----------- */
section.section { position: relative; z-index: 10; max-width: 1200px; margin: 0 auto; padding: 24px 24px 0; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 24px 0 18px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.18);
  padding-bottom: 10px;
}
.section-title {
  font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--cyan);
}
.section-sub {
  font-size: 11px; color: var(--muted); letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tracks {
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .tracks { grid-template-columns: 1fr; } }

.track {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(26, 11, 61, 0.6), rgba(7, 4, 26, 0.5));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 18px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: all 0.35s cubic-bezier(.2,.7,.2,1);
  position: relative;
  min-height: 260px;
}
.track:hover {
  transform: translateY(-3px);
  border-color: rgba(192, 38, 211, 0.45);
  box-shadow: 0 18px 48px rgba(0,0,0,0.5), 0 0 36px var(--glow-magenta);
}
.track .head {
  padding: 20px 22px 8px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.track .num {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; color: var(--cyan);
  letter-spacing: 0.18em;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(7, 4, 26, 0.72);
  border: 1px solid rgba(34, 211, 238, 0.45);
}
.track .state {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  padding: 3px 8px; border-radius: 4px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.track .state.live    { background: rgba(244,63,94,0.10); border: 1px solid rgba(244,63,94,0.40); color: var(--crimson); }
.track .state.soon    { background: rgba(124,58,237,0.10); border: 1px solid rgba(124,58,237,0.40); color: var(--violet); }
.track .state.brewing { background: rgba(250,204,21,0.08); border: 1px solid rgba(250,204,21,0.35); color: var(--gold-dim); }

.track .body {
  padding: 0 22px 20px;
  flex: 1;
  display: flex; flex-direction: column; gap: 10px;
}
.track .name {
  font-size: 22px; font-weight: 800; letter-spacing: -0.01em;
  margin-top: 6px;
  background: linear-gradient(135deg, var(--text), var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.track .name .accent {
  background: linear-gradient(135deg, var(--magenta), var(--pink));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.track .blurb {
  font-size: 13px; color: rgba(236, 233, 255, 0.72); line-height: 1.55;
}
.track .arrow {
  margin-top: auto;
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--gold-dim); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
.track:hover .arrow { color: var(--gold); }

/* ----------- character grid (metaverse page) ----------- */
.char-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.char {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(26, 11, 61, 0.6), rgba(7, 4, 26, 0.5));
  border: 1px solid rgba(124, 58, 237, 0.25);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px;
  transition: all 0.3s ease;
}
.char:hover {
  transform: translateY(-2px);
  border-color: rgba(236, 72, 153, 0.45);
  box-shadow: 0 0 24px var(--glow-magenta);
}
.char .glyph {
  position: absolute; top: 14px; right: 14px;
  font-size: 10px; letter-spacing: 0.22em;
  color: var(--cyan); opacity: 0.7;
}
.char .silhouette {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 35%, rgba(192, 38, 211, 0.28) 0%, transparent 55%),
              radial-gradient(circle at 50% 70%, rgba(34, 211, 238, 0.15) 0%, transparent 55%);
  opacity: 0.5; pointer-events: none;
}
.char .name {
  font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--text);
  z-index: 1;
}
.char .role {
  font-size: 10px; color: var(--muted);
  letter-spacing: 0.18em; text-transform: uppercase;
  z-index: 1;
}

/* ----------- waitlist ----------- */
.waitlist {
  position: relative; z-index: 10;
  max-width: 760px; margin: 48px auto 0;
  padding: 28px 24px;
  text-align: center;
}
.waitlist h3 {
  font-size: 18px; font-weight: 700;
  letter-spacing: 0.04em; margin-bottom: 8px;
  color: var(--cyan);
}
.waitlist p {
  font-size: 13px; color: var(--muted); margin-bottom: 18px;
  letter-spacing: 0.04em;
}
.waitlist form {
  display: flex; gap: 8px; max-width: 480px; margin: 0 auto;
  flex-wrap: wrap; justify-content: center;
}
.waitlist input[type=email] {
  flex: 1 1 240px;
  background: rgba(7, 4, 26, 0.7);
  border: 1px solid rgba(124, 58, 237, 0.30);
  color: var(--text);
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px; font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.waitlist input[type=email]:focus {
  border-color: rgba(34, 211, 238, 0.55);
  box-shadow: 0 0 18px var(--glow-cyan);
}
.waitlist button {
  background: linear-gradient(135deg, var(--magenta), var(--violet));
  color: #fff; border: 0; cursor: pointer;
  padding: 11px 20px; border-radius: 10px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; font-family: inherit;
  box-shadow: 0 0 22px var(--glow-magenta);
  transition: transform 0.15s ease;
}
.waitlist button:hover { transform: translateY(-1px); }
.waitlist .hint {
  margin-top: 14px; font-size: 10px; color: var(--muted);
  letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.7;
}

/* ----------- footer ----------- */
footer {
  position: relative; z-index: 10;
  max-width: 1200px; margin: 56px auto 0;
  padding: 24px 24px 40px; text-align: center;
  color: var(--muted); font-size: 11px; letter-spacing: 0.18em;
  border-top: 1px solid rgba(124, 58, 237, 0.18);
  text-transform: uppercase;
}
footer a { color: var(--gold-dim); text-decoration: none; }
footer a:hover { color: var(--gold); }

/* ----------- jukebox player ----------- */
#lvtn-jukebox {
  position: fixed; z-index: 50;
  bottom: 16px; right: 16px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(7, 4, 26, 0.86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(124, 58, 237, 0.32);
  border-radius: 999px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.45), 0 0 24px var(--glow-magenta);
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  max-width: calc(100vw - 32px);
}
#lvtn-jukebox .jb-toggle {
  width: 36px; height: 36px; flex: 0 0 36px;
  border: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--magenta), var(--violet));
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 16px var(--glow-magenta);
  transition: transform 0.15s ease;
  font-size: 14px;
}
#lvtn-jukebox .jb-toggle:hover { transform: scale(1.05); }
#lvtn-jukebox .jb-icon-pause { display: none; }
#lvtn-jukebox.playing .jb-icon-play { display: none; }
#lvtn-jukebox.playing .jb-icon-pause { display: inline; }

#lvtn-jukebox .jb-info {
  display: flex; flex-direction: column;
  min-width: 140px; max-width: 220px;
  overflow: hidden;
}
#lvtn-jukebox .jb-title {
  font-size: 12px; font-weight: 600;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.01em;
}
#lvtn-jukebox .jb-artist {
  font-size: 10px; color: var(--muted);
  letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#lvtn-jukebox .jb-controls {
  display: flex; align-items: center; gap: 4px;
}
#lvtn-jukebox .jb-btn {
  width: 28px; height: 28px;
  border: 0; background: transparent;
  color: var(--muted); cursor: pointer; border-radius: 50%;
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
  font-family: inherit;
}
#lvtn-jukebox .jb-btn:hover {
  color: var(--cyan);
  background: rgba(34, 211, 238, 0.10);
}
#lvtn-jukebox .jb-icon-mute { display: none; }
#lvtn-jukebox.muted .jb-icon-sound { display: none; }
#lvtn-jukebox.muted .jb-icon-mute  { display: inline; }
#lvtn-jukebox.muted .jb-mute { color: var(--gold-dim); }

#lvtn-jukebox .jb-unmute-pill {
  position: absolute; left: 50%; bottom: calc(100% + 12px);
  transform: translateX(-50%);
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--magenta), var(--pink));
  color: #fff;
  border-radius: 999px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap; cursor: pointer;
  box-shadow: 0 0 22px var(--glow-magenta);
  animation: bob 1.6s ease-in-out infinite alternate;
  border: 0;
}
@keyframes bob { from { transform: translateX(-50%) translateY(0); } to { transform: translateX(-50%) translateY(-3px); } }

@media (max-width: 520px) {
  #lvtn-jukebox { bottom: 10px; right: 10px; padding: 6px 10px; }
  #lvtn-jukebox .jb-info { min-width: 100px; max-width: 140px; }
}

/* ===========================================================
   UNIVERSE THEME — Leviathan Tamer / Metanoia Unlimited
   "u-" prefix isolates this from the existing utility classes
   used by the sub-pages. Built off the actual character art
   in /assets/img: HaChazal, Star Princess, Storm Princess,
   Vassago, Lilith — and the LEVIATHAN TAMER master sheet.
   Color signatures come from the in-art power-beam colors.
   =========================================================== */
:root {
  --u-parchment:   #ede0c8;
  --u-parchment-2: #d9c79c;
  --u-ink:         #1a0f2e;
  --u-frame:       #0a0820;
  --u-gold:        #fbbf24;
  --u-gold-deep:   #b48c1f;

  --u-hachazal:   #3b82f6;  /* electric blue */
  --u-hachazal-2: #fbbf24;  /* gold spark */
  --u-star:       #10b981;  /* emerald */
  --u-storm:      #ec4899;  /* hot magenta */
  --u-vassago:    #a78bfa;  /* violet */
  --u-vassago-2:  #f97316;  /* orange ember */
  --u-lilith:     #c026d3;  /* deep magenta */
  --u-leviathan:  #06b6d4;  /* sea cyan */
}

/* Hero — parchment banner over cosmic backdrop */
.u-hero {
  position: relative; z-index: 10;
  max-width: 1100px; margin: 0 auto;
  padding: 56px 24px 16px;
  text-align: center;
  animation: fadeIn 1.0s ease-out;
}
.u-hero-banner {
  position: relative;
  margin: 0 auto 28px;
  padding: 28px 32px 32px;
  background:
    repeating-linear-gradient(45deg, rgba(180,140,31,0.04) 0 2px, transparent 2px 6px),
    radial-gradient(ellipse at 50% 0%, rgba(251,191,36,0.10) 0%, transparent 60%),
    linear-gradient(180deg, #1a0f2e 0%, #0d0820 100%);
  border: 1px solid rgba(251,191,36,0.45);
  border-radius: 18px;
  box-shadow:
    inset 0 0 60px rgba(124,58,237,0.18),
    0 0 60px rgba(192,38,211,0.18),
    0 20px 60px rgba(0,0,0,0.5);
}
.u-hero-banner::before,
.u-hero-banner::after {
  content: ""; position: absolute;
  width: 28px; height: 28px;
  border: 1px solid rgba(251,191,36,0.55);
}
.u-hero-banner::before { top: 10px; left: 10px;  border-right: 0; border-bottom: 0; }
.u-hero-banner::after  { top: 10px; right: 10px; border-left: 0;  border-bottom: 0; }
.u-hero-corners {
  position: absolute; inset: 10px; pointer-events: none;
}
.u-hero-corners span {
  position: absolute; width: 28px; height: 28px;
  border: 1px solid rgba(251,191,36,0.55);
}
.u-hero-corners span:nth-child(1) { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.u-hero-corners span:nth-child(2) { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

.u-wordmark {
  font-family: "Cinzel", "Trajan Pro", "Marcellus", "Times New Roman", serif;
  font-size: clamp(34px, 7.5vw, 78px); line-height: 1.0;
  font-weight: 800; letter-spacing: 0.06em;
  color: var(--u-gold);
  text-shadow:
    0 0 18px rgba(251,191,36,0.55),
    0 0 38px rgba(124,58,237,0.45),
    0 2px 0 #6b4c0c;
  margin-bottom: 4px;
}
.u-subwordmark {
  font-family: "Cinzel", "Marcellus", serif;
  font-size: clamp(11px, 1.6vw, 14px); letter-spacing: 0.36em;
  color: rgba(237,224,200,0.78); text-transform: uppercase;
  margin-bottom: 22px;
}
.u-hero-art {
  width: min(680px, 92%);
  margin: 4px auto 18px;
  border-radius: 12px;
  border: 1px solid rgba(124,58,237,0.45);
  box-shadow: 0 0 40px rgba(192,38,211,0.35), 0 0 0 4px rgba(7,4,26,0.6) inset;
  display: block;
}
.u-hero-tag {
  font-size: clamp(13px, 1.8vw, 16px);
  color: rgba(237,224,200,0.92); line-height: 1.55;
  max-width: 620px; margin: 0 auto 10px;
}
.u-hero-tag em { color: var(--u-gold); font-style: italic; }

.u-vows {
  list-style: none; padding: 0; margin: 18px auto 4px;
  display: grid; gap: 6px;
  max-width: 460px;
  text-align: left;
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 14px; letter-spacing: 0.04em;
  color: rgba(237,224,200,0.88);
}
.u-vows li { padding-left: 22px; position: relative; }
.u-vows li::before {
  content: "✦"; position: absolute; left: 0; top: 0;
  color: var(--u-gold);
  text-shadow: 0 0 6px rgba(251,191,36,0.7);
}

/* Section heading for universe sections */
.u-section {
  position: relative; z-index: 10;
  max-width: 1200px; margin: 0 auto;
  padding: 32px 24px 0;
}
.u-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 18px 0;
  border-bottom: 1px solid rgba(251,191,36,0.18);
  padding-bottom: 10px;
}
.u-section-title {
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 14px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--u-gold);
}
.u-section-sub {
  font-size: 11px; color: rgba(237,224,200,0.55);
  letter-spacing: 0.22em; text-transform: uppercase;
}

/* Character-card tracks */
.u-tracks {
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 960px) { .u-tracks { grid-template-columns: 1fr; } }

.u-track {
  --u-track-color: var(--u-leviathan);
  --u-track-color-2: var(--u-gold);
  position: relative;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  border-radius: 16px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(26,15,46,0.92) 0%, rgba(7,4,26,0.96) 100%);
  border: 1px solid rgba(124,58,237,0.30);
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1),
              border-color 0.35s ease, box-shadow 0.35s ease;
  min-height: 420px;
}
.u-track:hover {
  transform: translateY(-4px);
  border-color: var(--u-track-color);
  box-shadow: 0 24px 64px rgba(0,0,0,0.6),
              0 0 42px color-mix(in srgb, var(--u-track-color) 35%, transparent);
}
.u-track-img {
  width: 100%; height: 220px; object-fit: cover; object-position: top center;
  display: block;
  background: #0a0820;
  border-bottom: 1px solid rgba(124,58,237,0.35);
}
.u-track-body {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex; flex-direction: column; gap: 10px;
}
.u-track-tag {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--u-track-color);
  display: inline-flex; align-items: center; gap: 8px;
}
.u-track-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--u-track-color);
  box-shadow: 0 0 8px var(--u-track-color);
}
.u-track-name {
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 22px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--u-gold);
  text-shadow: 0 0 10px color-mix(in srgb, var(--u-track-color) 40%, transparent);
}
.u-track-blurb {
  font-size: 13px; line-height: 1.6;
  color: rgba(237,224,200,0.74);
}
.u-track-cta {
  margin-top: auto;
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 12px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--u-track-color);
}
.u-track:hover .u-track-cta { color: var(--u-gold); }

/* Per-character signature tinting */
.u-track--metaverse { --u-track-color: var(--u-star);       --u-track-color-2: var(--u-storm); }
.u-track--pumpjam   { --u-track-color: var(--u-leviathan);  --u-track-color-2: var(--u-hachazal); }
.u-track--portal    { --u-track-color: var(--u-hachazal-2); --u-track-color-2: var(--u-vassago); }

/* Four-worlds strip (Atziluh / Briah / Yetzirah / Assiah / Qlippoth) */
.u-worlds {
  display: grid; gap: 10px;
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 760px) { .u-worlds { grid-template-columns: repeat(2, 1fr); } }
.u-world {
  padding: 18px 14px;
  background: linear-gradient(180deg, rgba(26,15,46,0.7) 0%, rgba(7,4,26,0.7) 100%);
  border: 1px solid rgba(124,58,237,0.30);
  border-radius: 12px;
  text-align: center;
  position: relative;
}
.u-world-num {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.24em; color: var(--u-gold);
  margin-bottom: 6px;
}
.u-world-name {
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 16px; letter-spacing: 0.08em;
  color: rgba(237,224,200,0.95);
  margin-bottom: 4px;
}
.u-world-sub {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(237,224,200,0.50);
}

/* Leviathan evolution strip */
.u-evolution {
  display: grid; gap: 10px;
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 760px) { .u-evolution { grid-template-columns: repeat(2, 1fr); } }
.u-stage {
  padding: 14px 12px 16px;
  background: linear-gradient(180deg, rgba(6,182,212,0.06) 0%, rgba(7,4,26,0.85) 100%);
  border: 1px solid rgba(6,182,212,0.30);
  border-radius: 12px;
  text-align: center;
  position: relative;
}
.u-stage-icon {
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 28px;
  color: var(--u-leviathan);
  text-shadow: 0 0 16px rgba(6,182,212,0.6);
  margin-bottom: 6px;
}
.u-stage-name {
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 13px; letter-spacing: 0.10em;
  color: rgba(237,224,200,0.92);
}
.u-stage-num {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(6,182,212,0.7);
  margin-top: 4px;
}

/* ===========================================================
   PUMP DA JAM page — video boxes + live stream + memecoin chars
   `pdj-` prefix isolates from rest of universe theme.
   =========================================================== */

/* Top trio of video boxes */
.pdj-video-trio {
  display: grid; gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 880px) { .pdj-video-trio { grid-template-columns: 1fr; } }

.pdj-vbox {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #07041a;
  border: 1px solid rgba(251,191,36,0.35);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    inset 0 0 30px rgba(124,58,237,0.18),
    0 6px 24px rgba(0,0,0,0.45);
}
.pdj-vbox::before,
.pdj-vbox::after {
  content: ""; position: absolute;
  width: 18px; height: 18px;
  border: 1px solid rgba(251,191,36,0.55);
  pointer-events: none; z-index: 3;
}
.pdj-vbox::before { top: 8px; left: 8px;  border-right: 0; border-bottom: 0; }
.pdj-vbox::after  { top: 8px; right: 8px; border-left: 0;  border-bottom: 0; }
.pdj-vbox iframe,
.pdj-vbox video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  background: #07041a;
}
.pdj-vbox-label {
  position: absolute; bottom: 8px; left: 10px; z-index: 2;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--u-gold);
  background: rgba(7,4,26,0.75);
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(251,191,36,0.45);
}
.pdj-vbox-empty {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  color: rgba(237,224,200,0.55);
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 13px; letter-spacing: 0.18em;
  text-align: center; padding: 16px;
  background:
    repeating-linear-gradient(45deg, rgba(124,58,237,0.05) 0 12px, transparent 12px 24px),
    linear-gradient(180deg, rgba(26,15,46,0.7) 0%, rgba(7,4,26,0.9) 100%);
}
.pdj-vbox-empty span {
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(251,191,36,0.55);
  font-family: "SF Mono", Menlo, Consolas, monospace;
}

/* Big live-stream player */
.pdj-live {
  position: relative;
  margin-top: 24px;
  background: #07041a;
  border: 1px solid rgba(6,182,212,0.45);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    inset 0 0 60px rgba(6,182,212,0.10),
    0 0 50px rgba(6,182,212,0.20),
    0 20px 60px rgba(0,0,0,0.55);
}
.pdj-live-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(26,15,46,0.85) 0%, rgba(7,4,26,0.85) 100%);
  border-bottom: 1px solid rgba(6,182,212,0.25);
}
.pdj-live-title {
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 16px; letter-spacing: 0.10em;
  color: var(--u-gold);
  display: inline-flex; align-items: center; gap: 12px;
}
.pdj-live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 12px #ef4444;
  animation: pulse 2s ease-in-out infinite;
}
.pdj-live-controls { display: flex; gap: 8px; }
.pdj-btn {
  appearance: none; border: 0; cursor: pointer;
  background: rgba(7,4,26,0.7);
  border: 1px solid rgba(6,182,212,0.40);
  color: rgba(237,224,200,0.9);
  padding: 8px 14px; border-radius: 8px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  transition: all 0.15s ease;
}
.pdj-btn:hover {
  color: var(--u-gold);
  border-color: rgba(251,191,36,0.55);
  box-shadow: 0 0 18px rgba(251,191,36,0.30);
}
.pdj-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #07041a;
}
.pdj-stage iframe,
.pdj-stage video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  background: #07041a;
}
.pdj-stage:fullscreen {
  background: #000;
}
.pdj-stage:fullscreen iframe,
.pdj-stage:fullscreen video {
  width: 100vw; height: 100vh;
}

/* Memecoin character cards */
.pdj-chars {
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 960px) { .pdj-chars { grid-template-columns: 1fr; } }

.pdj-char {
  position: relative;
  display: flex; flex-direction: column;
  background:
    linear-gradient(180deg, rgba(26,15,46,0.92) 0%, rgba(7,4,26,0.96) 100%);
  border: 1px solid rgba(124,58,237,0.30);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: all 0.35s cubic-bezier(.2,.7,.2,1);
}
.pdj-char:hover {
  transform: translateY(-3px);
  border-color: var(--u-gold);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 36px rgba(251,191,36,0.30);
}
.pdj-char-img {
  width: 100%; height: 260px;
  object-fit: cover; object-position: top center;
  display: block;
  border-bottom: 1px solid rgba(124,58,237,0.30);
}
.pdj-char-body {
  padding: 18px 20px 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.pdj-char-ticker {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--u-gold);
}
.pdj-char-name {
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 22px; font-weight: 700; letter-spacing: 0.02em;
  color: rgba(237,224,200,0.95);
  text-shadow: 0 0 10px rgba(251,191,36,0.20);
}
.pdj-char-blurb {
  font-size: 13px; line-height: 1.55;
  color: rgba(237,224,200,0.72);
}
.pdj-char-cta {
  margin-top: 8px;
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 12px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--u-leviathan);
}
.pdj-char:hover .pdj-char-cta { color: var(--u-gold); }
.pdj-char-stats {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 6px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(237,224,200,0.55);
}
.pdj-char-stats em {
  color: var(--u-gold); font-style: normal;
}

/* Multi-platform live broadcast — main stage on top, side-by-side embeds below */
.pdj-multistream {
  display: flex; flex-direction: column;
  gap: 14px;
}

.pdj-stream-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.pdj-stream-tile {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #07041a;
  border: 1px solid rgba(124,58,237,0.35);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.pdj-stream-tile:hover {
  transform: translateY(-2px);
  border-color: var(--u-gold);
  box-shadow: 0 0 24px rgba(251,191,36,0.30);
}
.pdj-stream-tile iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.pdj-stream-tile-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(26,15,46,0.85), rgba(7,4,26,0.92));
  text-align: center; padding: 16px;
}
.pdj-stream-tile-overlay strong {
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 16px; letter-spacing: 0.08em;
  color: var(--u-gold);
  font-weight: 700;
}
.pdj-stream-tile-overlay span {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase;
  color: rgba(237,224,200,0.62);
}
.pdj-stream-tile-overlay small {
  font-size: 11px; color: rgba(237,224,200,0.55);
  line-height: 1.4; max-width: 260px;
}

.pdj-platform-pill {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(7,4,26,0.85);
  border: 1px solid rgba(251,191,36,0.45);
  color: var(--u-gold);
}

/* Broadcasting setup card */
.pdj-broadcast-setup {
  margin-top: 24px;
  padding: 22px 24px;
  background: linear-gradient(180deg, rgba(124,58,237,0.10) 0%, rgba(7,4,26,0.6) 100%);
  border: 1px dashed rgba(251,191,36,0.40);
  border-radius: 14px;
}
.pdj-broadcast-setup h4 {
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--u-gold);
  margin-bottom: 10px;
}
.pdj-broadcast-setup p {
  font-size: 13px; color: rgba(237,224,200,0.78); line-height: 1.6;
  margin-bottom: 8px;
}
.pdj-broadcast-setup ol {
  list-style: none; padding: 0; margin: 12px 0 0;
  display: grid; gap: 6px;
  counter-reset: pdj-step;
}
.pdj-broadcast-setup ol li {
  counter-increment: pdj-step;
  padding-left: 32px; position: relative;
  font-size: 13px; color: rgba(237,224,200,0.85); line-height: 1.55;
}
.pdj-broadcast-setup ol li::before {
  content: counter(pdj-step);
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.40);
  color: var(--u-gold);
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pdj-broadcast-setup code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--u-leviathan);
  background: rgba(7,4,26,0.65);
  padding: 2px 7px; border-radius: 5px;
  border: 1px solid rgba(6,182,212,0.30);
}
.pdj-broadcast-setup a {
  color: var(--u-gold); text-decoration: none;
  border-bottom: 1px dotted rgba(251,191,36,0.55);
}
.pdj-broadcast-setup a:hover { border-bottom-style: solid; }

/* ===========================================================
   LEVIATHAN S.I. page — download widget + capabilities
   `lsi-` prefix isolates from rest of universe theme.
   =========================================================== */

/* Download widget */
.lsi-download {
  position: relative;
  margin: 0 auto;
  padding: 28px 28px 24px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(251,191,36,0.12) 0%, transparent 60%),
    linear-gradient(180deg, rgba(26,15,46,0.85) 0%, rgba(7,4,26,0.92) 100%);
  border: 1px solid rgba(251,191,36,0.45);
  border-radius: 18px;
  box-shadow:
    inset 0 0 60px rgba(124,58,237,0.15),
    0 16px 50px rgba(0,0,0,0.55),
    0 0 50px rgba(192,38,211,0.15);
}
.lsi-download::before,
.lsi-download::after {
  content: ""; position: absolute;
  width: 22px; height: 22px;
  border: 1px solid rgba(251,191,36,0.55);
  pointer-events: none;
}
.lsi-download::before { top: 10px; left: 10px;  border-right: 0; border-bottom: 0; }
.lsi-download::after  { top: 10px; right: 10px; border-left: 0;  border-bottom: 0; }

.lsi-download-head {
  text-align: center;
  margin-bottom: 22px;
}
.lsi-download-eyebrow {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--u-leviathan);
  margin-bottom: 8px;
}
.lsi-download-title {
  font-family: "Cinzel", "Marcellus", serif;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700; letter-spacing: 0.04em;
  color: var(--u-gold);
  text-shadow: 0 0 16px rgba(251,191,36,0.40);
  margin-bottom: 8px;
}
.lsi-download-sub {
  font-size: 13px; color: rgba(237,224,200,0.72);
  letter-spacing: 0.04em;
  max-width: 560px; margin: 0 auto;
}
.lsi-download-meta {
  display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  margin-top: 14px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(237,224,200,0.55);
}
.lsi-download-meta em { color: var(--u-gold); font-style: normal; }

.lsi-platforms {
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 14px;
}
@media (max-width: 720px) { .lsi-platforms { grid-template-columns: 1fr; } }

.lsi-platform {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 18px 16px;
  background: rgba(7,4,26,0.72);
  border: 1px solid rgba(124,58,237,0.35);
  border-radius: 12px;
  text-decoration: none; color: inherit;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(.2,.7,.2,1);
}
.lsi-platform:hover {
  transform: translateY(-2px);
  border-color: var(--u-gold);
  box-shadow: 0 0 28px rgba(251,191,36,0.30);
  background: rgba(26,15,46,0.85);
}
.lsi-platform-icon {
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 28px; line-height: 1;
  color: var(--u-leviathan);
  text-shadow: 0 0 14px rgba(6,182,212,0.45);
}
.lsi-platform-name {
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 16px; letter-spacing: 0.06em;
  color: rgba(237,224,200,0.95);
  font-weight: 700;
}
.lsi-platform-meta {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--u-gold);
}
.lsi-platform-status {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 9px; letter-spacing: 0.20em; text-transform: uppercase;
  color: rgba(237,224,200,0.50);
}
.lsi-platform[data-state="ready"] .lsi-platform-meta { color: #34d399; }
.lsi-platform[data-state="soon"]  .lsi-platform-meta { color: var(--gold-dim); }

.lsi-cta-row {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 8px;
}
.lsi-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  background: linear-gradient(135deg, var(--u-gold) 0%, #f59e0b 100%);
  color: #1a0f2e;
  border: 0; border-radius: 10px;
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 0 22px rgba(251,191,36,0.40);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lsi-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(251,191,36,0.65);
}
.lsi-cta-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  background: rgba(7,4,26,0.7);
  border: 1px solid rgba(6,182,212,0.45);
  color: var(--u-leviathan);
  border-radius: 10px;
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  transition: all 0.15s ease;
}
.lsi-cta-ghost:hover {
  color: var(--u-gold);
  border-color: var(--u-gold);
  box-shadow: 0 0 22px rgba(251,191,36,0.30);
}

/* Capabilities grid */
.lsi-caps {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 820px) { .lsi-caps { grid-template-columns: 1fr; } }

.lsi-cap {
  position: relative;
  padding: 18px 20px 20px;
  background: linear-gradient(180deg, rgba(26,15,46,0.78) 0%, rgba(7,4,26,0.86) 100%);
  border: 1px solid rgba(124,58,237,0.28);
  border-radius: 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.lsi-cap:hover {
  transform: translateY(-2px);
  border-color: rgba(251,191,36,0.45);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.lsi-cap-num {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.24em;
  color: var(--u-gold);
  margin-bottom: 6px;
}
.lsi-cap-name {
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 17px; font-weight: 700; letter-spacing: 0.02em;
  color: rgba(237,224,200,0.95);
  margin-bottom: 8px;
}
.lsi-cap-blurb {
  font-size: 13px; color: rgba(237,224,200,0.72); line-height: 1.55;
}
.lsi-cap-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 10px;
}
.lsi-cap-tag {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px;
  background: rgba(6,182,212,0.10);
  border: 1px solid rgba(6,182,212,0.30);
  color: var(--u-leviathan);
}
.lsi-cap-tag.gold {
  background: rgba(251,191,36,0.10);
  border-color: rgba(251,191,36,0.30);
  color: var(--u-gold);
}

/* Version badge */
.lsi-version {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px;
  background: rgba(7,4,26,0.75);
  border: 1px solid rgba(251,191,36,0.40);
  border-radius: 999px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(237,224,200,0.85);
  margin-bottom: 18px;
}
.lsi-version-chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(251,191,36,0.20), rgba(192,38,211,0.20));
  border-radius: 999px;
  color: var(--u-gold);
  font-weight: 700;
}

/* ===========================================================
   COMMAND HUB section — mirrors leviathan.metanoiaunlimited.com
   13-module grid styled to match universe theme.
   `hub-` prefix isolates from rest.
   =========================================================== */
.hub-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(26,15,46,0.55) 0%, rgba(7,4,26,0.7) 100%);
  border: 1px solid rgba(6,182,212,0.30);
  border-radius: 12px;
}
.hub-meta strong {
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 14px; letter-spacing: 0.10em;
  color: var(--u-gold);
}
.hub-meta a {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--u-leviathan);
  text-decoration: none;
  border-bottom: 1px dotted rgba(6,182,212,0.45);
}
.hub-meta a:hover { color: var(--u-gold); border-color: var(--u-gold); }

.hub-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.hub-mod {
  display: flex; flex-direction: column;
  padding: 16px 16px 18px;
  background: linear-gradient(180deg, rgba(26,15,46,0.80) 0%, rgba(7,4,26,0.92) 100%);
  border: 1px solid rgba(124,58,237,0.30);
  border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative; min-height: 160px;
}
.hub-mod:hover {
  transform: translateY(-2px);
  border-color: var(--u-gold);
  box-shadow: 0 14px 38px rgba(0,0,0,0.5), 0 0 22px rgba(251,191,36,0.22);
}
.hub-mod-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.hub-mod-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 18px;
  background: rgba(7,4,26,0.7);
  border: 1px solid rgba(6,182,212,0.45);
  border-radius: 8px;
  color: var(--u-leviathan);
  text-shadow: 0 0 10px rgba(6,182,212,0.45);
}
.hub-mod-name {
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 15px; font-weight: 700; letter-spacing: 0.04em;
  color: rgba(237,224,200,0.95);
  flex: 1;
}
.hub-mod-route {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--u-gold);
  margin-bottom: 6px;
}
.hub-mod-blurb {
  font-size: 12px; line-height: 1.5;
  color: rgba(237,224,200,0.70);
  flex: 1;
}
.hub-mod-cta {
  margin-top: 12px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(237,224,200,0.55);
}
.hub-mod:hover .hub-mod-cta { color: var(--u-gold); }
.hub-mod[data-tier="crypto"]     .hub-mod-icon { color: var(--u-storm); border-color: var(--u-storm); text-shadow: 0 0 10px var(--u-storm); }
.hub-mod[data-tier="ai"]         .hub-mod-icon { color: var(--u-hachazal); border-color: var(--u-hachazal); text-shadow: 0 0 10px var(--u-hachazal); }
.hub-mod[data-tier="biological"] .hub-mod-icon { color: var(--u-star); border-color: var(--u-star); text-shadow: 0 0 10px var(--u-star); }
.hub-mod[data-tier="hardware"]   .hub-mod-icon { color: var(--u-vassago); border-color: var(--u-vassago); text-shadow: 0 0 10px var(--u-vassago); }
.hub-mod[data-tier="commerce"]   .hub-mod-icon { color: var(--u-gold); border-color: var(--u-gold); text-shadow: 0 0 10px var(--u-gold); }

/* ===========================================================
   VIDEO-GAME BANNER — Leviathan Tamer · coming soon
   `vgb-` prefix.
   =========================================================== */
.vgb-banner {
  position: relative;
  margin-bottom: 28px;
  border: 1px solid rgba(251,191,36,0.45);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(26,15,46,0.6) 0%, rgba(7,4,26,0.85) 100%);
  box-shadow:
    inset 0 0 80px rgba(124,58,237,0.20),
    0 24px 64px rgba(0,0,0,0.55),
    0 0 60px rgba(251,191,36,0.20);
}
.vgb-banner-img-wrap {
  position: relative;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  background: #07041a;
}
.vgb-banner-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 25% center;
  display: block;
}
.vgb-banner-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,4,26,0.0) 0%, rgba(7,4,26,0.15) 50%, rgba(7,4,26,0.92) 100%),
    linear-gradient(90deg, rgba(7,4,26,0.0) 50%, rgba(7,4,26,0.55) 100%);
}
.vgb-soon-pill {
  position: absolute; top: 18px; left: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: rgba(7,4,26,0.85);
  border: 1px solid rgba(251,191,36,0.65);
  border-radius: 999px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--u-gold);
  z-index: 3;
  box-shadow: 0 0 22px rgba(251,191,36,0.40);
}
.vgb-soon-pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--u-gold);
  box-shadow: 0 0 10px var(--u-gold);
  animation: pulse 2s ease-in-out infinite;
}
.vgb-banner-content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 32px 32px;
  z-index: 2;
}
.vgb-eyebrow {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--u-leviathan);
  margin-bottom: 8px;
}
.vgb-title {
  font-family: "Cinzel", "Marcellus", serif;
  font-size: clamp(32px, 5.5vw, 56px);
  font-weight: 800; letter-spacing: 0.04em;
  color: var(--u-gold);
  text-shadow: 0 0 18px rgba(251,191,36,0.55), 0 2px 0 #6b4c0c;
  margin-bottom: 8px;
  line-height: 1.05;
}
.vgb-sub {
  font-family: "Cinzel", "Marcellus", serif;
  font-size: clamp(13px, 1.6vw, 16px);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(237,224,200,0.78);
  margin-bottom: 12px;
}
.vgb-blurb {
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.55;
  color: rgba(237,224,200,0.85);
  max-width: 720px;
  margin-bottom: 16px;
}
.vgb-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(237,224,200,0.62);
}
.vgb-meta em { color: var(--u-gold); font-style: normal; }
.vgb-cta-row {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.vgb-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  background: linear-gradient(135deg, var(--u-gold) 0%, #f59e0b 100%);
  color: #1a0f2e;
  border: 0; border-radius: 10px;
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 0 22px rgba(251,191,36,0.40);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vgb-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(251,191,36,0.65);
}
.vgb-cta-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  background: rgba(7,4,26,0.7);
  border: 1px solid rgba(6,182,212,0.45);
  color: var(--u-leviathan);
  border-radius: 10px;
  font-family: "Cinzel", "Marcellus", serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  transition: all 0.15s ease;
}
.vgb-cta-ghost:hover {
  color: var(--u-gold); border-color: var(--u-gold);
  box-shadow: 0 0 22px rgba(251,191,36,0.30);
}
@media (max-width: 720px) {
  .vgb-banner-content { padding: 18px 20px 22px; }
}