/* ============================================================
   GWA CMH Hub — main.css
   Black + orange & purple, angular "cut-corner" shapes echoing the
   fractured logo mark. Not a CMH Hub reskin — different palette,
   different type, different structural language (see index.html
   for the section reorder too).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Chakra+Petch:wght@400;500;600;700&display=swap');

:root {
  --bg: #07010f;
  --card: #12041f;
  --card2: #1b0a2b;
  --border: #341a55;
  --border2: #46227f;
  --accent: #ff5a14;
  --accent2: #a23dff;
  --accent-bright: #ffae1a;
  --text: #f8f1ff;
  --text-dim: #cdbcdf;
  --text-dimmer: #9a82b8;
  --green: #4ade80;
  --radius: 8px;
  --radius-lg: 12px;
  /* how deep the corner cut is on jagged elements — one variable so
     every cut-corner shape stays consistent if it ever changes */
  --cut: 14px;
  --cut-sm: 8px;

  /* Aliases for CMH Hub's variable naming (used throughout the copied
     cluster.css) — the copied block-editor styling references these
     names directly, and without a real value they silently resolve to
     nothing (no fallback specified), which is exactly why the type
     picker cards rendered with no background at all. Mapped to the
     closest existing GWA CMH Hub value rather than rewriting hundreds of
     var() references throughout cluster.css. */
  --bg-card: var(--card);
  --bg-card-2: var(--card2);
  --bg-card-hover: var(--card2);
  --bg-hover: rgba(255,255,255,.05);
  --border-2: var(--border2);
  --font-mono: 'Chakra Petch', monospace;
  --panel: var(--card);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Chakra Petch', sans-serif;
  min-height: 100vh;
  /* Without this, a single element anywhere on any page being even a
     few pixels wider than the viewport drags the ENTIRE page into
     horizontal scroll, instead of just that one element overflowing
     on its own. This is almost certainly the actual root cause behind
     "page length is broken on every page" — one site-wide gap, not
     dozens of separate per-page bugs. */
  overflow-x: hidden;
  overflow-y: visible;
}

h1, h2, h3, .display { font-family: 'Orbitron', sans-serif; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Reusable jagged shape — cuts the top-left and bottom-right corners
   at an angle, like a sheared metal plate. Applied alongside normal
   card/button classes rather than baked into border-radius. */
.cut-corner {
  border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.cut-corner-sm {
  border-radius: 0;
  clip-path: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
}

/* ── NAV ── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7,1,15,.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  height: 62px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 14px; color: var(--text); text-decoration: none; letter-spacing: .02em; }
.nav-logo {
  width: 26px; height: 26px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  clip-path: polygon(30% 0, 100% 0, 70% 45%, 100% 100%, 30% 100%, 55% 55%, 0 100%, 0 0);
  box-shadow: 0 0 12px rgba(255,90,20,.5);
}
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 600; }
.nav-link { color: var(--text-dim); position: relative; padding: 4px 0; }
.nav-link:hover, .nav-link.active { color: var(--accent-bright); text-decoration: none; text-shadow: 0 0 10px rgba(255,90,20,.5); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.mobile-menu-btn { display: none; background: none; border: 1px solid var(--border2); color: var(--text-dim); padding: 6px 10px; cursor: pointer; font-size: 15px; clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.mobile-nav { display: none; flex-direction: column; background: var(--card); border-bottom: 1px solid var(--border); padding: 10px 0; }
.mobile-nav.open { display: flex; }
.mobile-nav a, .mobile-nav button { padding: 12px 24px; color: var(--text-dim); font-weight: 600; text-decoration: none; font-size: 14px; background: none; border: none; text-align: left; font-family: inherit; cursor: pointer; }

/* ── SIDEBAR (home page only — replaces the top nav for this page,
   see index.html for why other pages keep the old top nav via nav.js) ──
   Structural fix: the sidebar itself never scrolls as a whole (that's
   what was throwing the auth/login area out of view, requiring a scroll
   to reach it). Instead .sidebar-top and .side-auth are fixed in place,
   and ONLY .sidebar-scroll (nav links + cluster list + stats) scrolls
   internally if it's too tall — so the login button/avatar is always
   immediately visible, never something you have to hunt for. */
.shell { display: flex; align-items: flex-start; max-width: 100vw; overflow-x: hidden; overflow-y: visible; }
.sidebar {
  width: 250px; flex-shrink: 0;
  background: #0d0417; border-right: 1px solid var(--border);
  position: fixed; top: 0; left: 0; height: 100vh; z-index: 100;
  display: flex; flex-direction: column;
  transition: width .2s ease;
  /* Switched from position:sticky to position:fixed — sticky kept
     failing to actually stick despite multiple rounds of fixing
     overflow and stacking-context issues on various ancestors (all
     confirmed correctly applied via the actual live file, none of
     which resolved it). Fixed positioning is completely independent
     of ancestor overflow/positioning/stacking context in a way sticky
     fundamentally isn't — sidesteps the whole problem rather than
     continuing to chase it through the ancestor chain. Since fixed
     elements are removed from normal document flow, .main-column
     below now carries a compensating margin-left to preserve the
     layout instead of relying on flexbox to reserve this space.
     No overflow:hidden here — the fixed height + flex:1 on
     .sidebar-scroll already stops the whole sidebar from needing to
     scroll. overflow:hidden would also clip the auth dropdown when it
     opens near the bottom edge, which is exactly what was happening. */
}
.sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 6px; flex-shrink: 0; }
.sidebar .brand { display: flex; align-items: center; gap: 8px; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 15px; color: var(--text); text-decoration: none; overflow: hidden; }
.sidebar .brand-mark { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; border-radius: 4px; }
.brand-text { white-space: nowrap; }
.sidebar-toggle { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--card); border: 1px solid var(--border2); color: var(--text-dim); cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: transform .2s ease; }
.sidebar-toggle:hover { color: var(--accent-bright); border-color: var(--accent); }

.sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px; }
.side-label { font-family: 'Orbitron', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--text); margin: 18px 0 8px; white-space: nowrap; overflow: hidden; }
.side-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 13px; color: var(--text); text-decoration: none; border-left: 2px solid transparent; white-space: nowrap; overflow: hidden; }
.side-link:hover { color: var(--accent-bright); text-decoration: none; }
.side-link.active { color: var(--accent-bright); border-left-color: var(--accent); background: rgba(255,90,20,.06); }
/* Cluster links get a second line for the wipe countdown — needs its
   own layout since the base .side-link is a single-line row. */
.side-link-cluster { align-items: flex-start; white-space: normal; padding-top: 7px; padding-bottom: 7px; }
.side-link-col { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.side-wipe { font-size: 10px; color: var(--text-dimmer); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.side-link-cluster:hover .side-wipe, .side-link-cluster.active .side-wipe { color: var(--accent-bright); opacity: .75; }
/* The letter-initial only shows in the collapsed icon-rail state (see
   .sidebar.collapsed below) — hidden here so the expanded sidebar is
   clean text only, no icon/emoji clutter. */
.side-icon { display: none; }
.side-cluster { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; font-size: 11px; color: var(--text); white-space: nowrap; overflow: hidden; }
.side-stats { margin: 18px 0; padding: 12px; background: var(--card); border: 1px solid var(--border); }
.side-stats .row { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-dim); padding: 3px 0; white-space: nowrap; overflow: hidden; }
.side-stats .row b { color: var(--accent-bright); font-family: 'Orbitron', sans-serif; flex-shrink: 0; margin-left: 8px; }
/* Same .btn-primary look as the old main-page Discord button, just
   resized to fit the sidebar's ~220px content width instead of sitting
   inline next to other buttons. */
/* Gray border + text at rest, blue border + text + glow only on
   hover — same treatment as .btn-ghost, just resized for the sidebar. */
.side-discord-cta { display: block; width: 100%; text-align: center; margin-top: 10px; padding: 7px 0; font-size: 11px; }
.side-discord-cta:hover { box-shadow: 0 0 14px rgba(255,90,20,.25); }

/* Sidebar Partnerships — intentionally its own compact style, not
   shared with .featured-card (the home page's Partner Cards). Full-size
   image banners (like a Discord invite promo graphic) rather than a
   small icon + text row — the whole banner is the click target. */
/* 92% width (not full-bleed to the sidebar edge) so 3 of these stack
   more comfortably, and a 2:1 aspect ratio to match the actual banner
   images being used (1200×600) — was 1:1, which is why square-boxing a
   wide image left visible empty bars above/below it. */
.side-partner { display: block; width: 92%; margin: 0 auto 10px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.side-partner:hover { border-color: var(--accent); box-shadow: 0 0 20px rgba(255,90,20,.4); transform: scale(1.03); text-decoration: none; }
.side-partner-img { width: 100%; height: 100%; aspect-ratio: 2 / 1; object-fit: cover; background: var(--card2); display: block; }
.side-partner-img-placeholder { width: 100%; aspect-ratio: 2 / 1; background: var(--card2); display: flex; align-items: center; justify-content: center; color: var(--text-dimmer); font-size: 11px; text-align: center; padding: 10px; }
.side-auth { flex-shrink: 0; padding: 14px 16px 18px; border-top: 1px solid var(--border); }

/* Collapsed state — icon rail only. Toggled via #sidebar-toggle in
   home.js, preference remembered in localStorage. */
.sidebar.collapsed { width: 64px; }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .side-label,
.sidebar.collapsed .side-text,
.sidebar.collapsed #sidebar-clusters,
.sidebar.collapsed .side-stats,
.sidebar.collapsed #sidebar-partnerships { display: none; }
.sidebar.collapsed .side-icon {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700;
  color: var(--text-dim); border: 1px solid var(--border2); border-radius: 50%;
}
.sidebar.collapsed .side-link.active .side-icon,
.sidebar.collapsed .side-link:hover .side-icon { color: var(--accent-bright); border-color: var(--accent); }
.sidebar.collapsed .side-link { justify-content: center; padding: 10px 0; }
.sidebar.collapsed .sidebar-toggle { transform: rotate(180deg); }
.sidebar.collapsed .sidebar-top { justify-content: center; flex-direction: column; gap: 10px; }
.sidebar.collapsed .side-auth { display: flex; justify-content: center; }
.sidebar.collapsed .auth-user-btn { padding: 0; width: 32px; height: 32px; justify-content: center; border-radius: 50%; }
.sidebar.collapsed .auth-username { display: none; }
/* .auth-login-btn now has a separate icon + .auth-login-text span
   (see auth.js) — same treatment as .auth-user-btn above: shrink to
   an icon-only circle, hide the text. Previously this button was
   bare text with nothing to target, which is why earlier attempts
   here (white-space:nowrap, smaller font-size) couldn't actually fix
   it — there was no way to keep an icon while dropping the label. */
.sidebar.collapsed .auth-login-btn { padding: 0; width: 32px; height: 32px; justify-content: center; border-radius: 50%; }
.sidebar.collapsed .auth-login-text { display: none; }

.main-column { flex: 1; min-width: 0; max-width: 100%; margin-left: 250px; }
/* .sidebar is now position:fixed (removed from document flow), so
   this margin does the job flexbox used to do automatically —
   reserves the same space so content doesn't render underneath the
   fixed sidebar. Matches its width exactly; the collapsed (icon-only)
   state below matches that narrower width too. */
.sidebar.collapsed ~ .main-column { margin-left: 64px; }
/* Flex-column + min-height only for the cluster page, where
   .cluster-page-glow needs "push to bottom" room via margin-top:auto.
   This was a real regression once — applying it to .main-column
   globally affected every page's layout (grids/cards shrinking
   unexpectedly), not just the cluster page that actually needed it.
   Scoped via a marker class sidebar.js adds only when #cluster-hero
   is present on the page, rather than touching the shared class. */
.main-column.is-cluster-page { min-height: 100vh; display: flex; flex-direction: column; }

@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100% !important; max-width: 100%; box-sizing: border-box; overflow-x: hidden; height: auto; position: relative; flex-direction: row; flex-wrap: wrap; align-items: center; }
  /* .sidebar is back to position:relative (normal flow) here, not
     fixed — the margin-left compensation on .main-column was only
     needed for the desktop fixed-sidebar layout. Reset both states
     (collapsed and not) to 0 so mobile doesn't get a large incorrect
     gap where that margin used to reserve space for a fixed sidebar
     that no longer exists at this width. */
  .main-column, .sidebar.collapsed ~ .main-column { margin-left: 0; }
  /* Flexbox wrapping follows DOM order, and .side-auth comes AFTER
     .sidebar-scroll in the actual HTML — so it can't share a row with
     .sidebar-top (the logo) using plain wrapping alone; the nav links
     sitting between them in the DOM would force a 3rd row instead.
     CSS `order` repositions them visually without touching the HTML:
     logo + profile share row 1 (both compact, fixed-size elements),
     nav links get their own dedicated row 2 (width:100% forces the
     wrap) where they can wrap freely among themselves without
     competing with the profile button for space — that competition
     is what caused the 3-row cascade on an actual narrow phone. */
  .sidebar-top { order: 1; padding: 12px 16px; }
  .side-auth { order: 2; border-top: none; padding: 12px 16px; margin-left: auto; flex-shrink: 0; }
  .sidebar-scroll { order: 3; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 0 16px 10px; overflow: visible; }
  .side-label, #sidebar-clusters, .side-stats, #sidebar-partnerships { display: none; }
  .side-link { padding: 6px 8px; }
  .sidebar-toggle { display: none; } /* collapse doesn't make sense on a horizontal mobile bar */
  /* .side-auth .auth-user-dd is hardcoded to open upward for the
     desktop sidebar, where the auth button sits near the bottom of a
     vertical column — correct there, wrong here. On mobile the
     sidebar becomes a horizontal top bar, so the button is now at the
     TOP of the page; opening upward from there pushes the dropdown
     off-screen (or crammed against the browser's own UI). Reset to
     open downward, matching its actual position here. */
  .side-auth, .auth-user-wrap { position: relative; z-index: 99999 !important; }
  /* Switched from position:absolute to position:fixed here — absolute
     positioning still depends on ancestor context in ways that kept
     causing this to render behind the hero's video despite several
     rounds of z-index changes (the video's clip-path creates its own
     stacking context, among other things). Fixed positions relative
     to the actual viewport instead, completely independent of any
     ancestor's position, overflow, or stacking context — much more
     robust than continuing to chase this through nested contexts. */
  .side-auth .auth-user-dd, .sidebar.collapsed .side-auth .auth-user-dd {
    position: fixed !important; top: 56px !important; right: 12px !important;
    bottom: auto !important; left: auto !important; margin-left: 0 !important;
    z-index: 999999 !important; max-height: 70vh; overflow-y: auto;
  }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-right .auth-desktop { display: none; }
  .mobile-menu-btn { display: flex; align-items: center; }
}

/* Auth slot (populated by js/auth.js) */
.auth-login-btn { background: #5865F2; color: #fff; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.auth-login-btn:hover { background: #4752c4; text-decoration: none; }
.auth-user-wrap { position: relative; }
.auth-user-btn { display: flex; align-items: center; gap: 8px; background: rgba(255,90,20,.06); border: 1px solid var(--border2); padding: 5px 12px 5px 5px; border-radius: 20px; cursor: pointer; color: var(--text); font-size: 13px; font-weight: 600; font-family: inherit; }
.auth-user-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--card2); }
.auth-user-dd { position: absolute; top: 44px; right: 0; z-index: 50; background: #0e0418; border: 1px solid rgba(255,90,20,.25); border-radius: 10px; padding: 8px; min-width: 150px; display: none; flex-direction: column; gap: 2px; box-shadow: 0 8px 32px rgba(0,0,0,.7); }
.auth-user-dd.open { display: flex; }
/* Inside the sidebar the button sits near the bottom of the viewport —
   opening downward (the default, meant for a top nav bar) would push
   this past the bottom of the screen. Open upward instead. */
.side-auth .auth-user-dd { top: auto; bottom: 44px; }
/* Collapsed sidebar is only 64px wide — the dropdown (min-width 150px)
   has no room to open within that column at all. Flick it out to the
   right instead, into the main content area's space, rather than
   trying to cram it into a rail that's physically too narrow for it. */
.sidebar.collapsed .side-auth .auth-user-dd { top: auto; bottom: 0; left: 100%; right: auto; margin-left: 10px; }
.auth-user-dd a, .auth-user-dd button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; font-size: 13px; background: none; border: none; color: var(--text-dim); cursor: pointer; font-family: inherit; }
.auth-user-dd a:hover, .auth-user-dd button:hover { background: rgba(255,90,20,.1); color: var(--accent-bright); text-decoration: none; }

/* ── HERO ── */
/* Angled bottom edge cuts into the next section instead of a flat
   rectangle handing off to a divider line — the first real structural
   break from the "hero box, then stacked boxes" template. */
.hero {
  position: relative; min-height: 620px; display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; padding: 60px 8vw 100px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 70px), 0 100%);
}
.hero video, .hero .hero-fallback-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; filter: grayscale(.3) contrast(1.1); }
.hero .hero-fallback-img { opacity: .7; filter: none; }
.hero.has-media video, .hero.has-media .hero-fallback-img { opacity: .9; filter: none; }
.hero.has-media .hero-overlay { background: radial-gradient(ellipse at 25% 45%, rgba(162,61,255,.22) 0%, transparent 60%), linear-gradient(100deg, rgba(7,1,15,.78) 0%, rgba(7,1,15,.35) 50%, rgba(7,1,15,.15) 100%), linear-gradient(180deg, transparent 70%, rgba(7,1,15,.8) 100%); }
.hero-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, rgba(255,90,20,.14) 0%, transparent 55%), linear-gradient(100deg, rgba(7,1,15,.75) 0%, rgba(7,1,15,.5) 45%, rgba(7,1,15,.85) 100%); }
/* Left-anchored, not centered — content sits in the left ~55% of the
   frame with the shard/video breathing on the right, rather than a
   single centered column (the CMH/generic default). */
.hero-content { position: relative; z-index: 2; max-width: 560px; margin: 0; text-align: left; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'Chakra Petch', monospace; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-bright); background: rgba(255,90,20,.08); border: 1px solid rgba(255,90,20,.35); padding: 7px 18px; margin-bottom: 22px; clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
#hero-eyebrow::before { content: ''; width: 6px; height: 6px; background: var(--accent-bright); box-shadow: 0 0 8px var(--accent-bright); display: inline-block; }
h1.hero-headline, .hero-content h1 { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 46px; line-height: 1.03; letter-spacing: .01em; margin: 0 0 20px; }
/* Glitch effect — RGB-channel-split text that periodically "breaks" for
   a few frames then settles, instead of a continuous jitter (which reads
   as broken rather than intentional). Two duplicate text layers offset in
   red and cyan, briefly displaced via clip-path + transform on a cycle. */
.glitch-text { position: relative; display: inline-block; color: var(--accent-bright); }
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0; width: 100%;
  background: var(--bg);
  overflow: hidden;
}
.glitch-text::before {
  color: #ff2e63;
  clip-path: polygon(0 2%, 100% 2%, 100% 8%, 0 8%);
  animation: glitch-shift-1 4s infinite linear;
}
.glitch-text::after {
  color: #c58cff;
  clip-path: polygon(0 55%, 100% 55%, 100% 62%, 0 62%);
  animation: glitch-shift-2 4s infinite linear;
}
@keyframes glitch-shift-1 {
  0%, 92%, 100% { transform: translate(0, 0); opacity: 0; }
  93% { transform: translate(-4px, 1px); opacity: 1; }
  94.5% { transform: translate(3px, -1px); opacity: 1; }
  96% { transform: translate(-2px, 0); opacity: 1; }
  97.5% { opacity: 0; }
}
@keyframes glitch-shift-2 {
  0%, 90%, 100% { transform: translate(0, 0); opacity: 0; }
  91% { transform: translate(4px, -1px); opacity: 1; }
  92.5% { transform: translate(-3px, 1px); opacity: 1; }
  94% { transform: translate(2px, 0); opacity: 1; }
  95.5% { opacity: 0; }
}
.hero-sub { font-size: 14px; color: var(--text-dim); max-width: 460px; margin: 0 0 30px; line-height: 1.6; }
.hero-actions { display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; position: relative; }
.btn-primary {
  background: linear-gradient(120deg, var(--accent2), var(--accent));
  color: #fff; padding: 14px 28px; font-weight: 700; font-size: 14px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  box-shadow: 0 0 24px rgba(255,90,20,.35);
  font-family: 'Chakra Petch', sans-serif; letter-spacing: .02em;
}
.btn-primary:hover { text-decoration: none; box-shadow: 0 0 34px rgba(255,90,20,.5); }
.btn-ghost {
  background: rgba(255,255,255,.03); border: 1px solid var(--border2); color: var(--text);
  padding: 14px 28px; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none;
  clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.btn-ghost:hover { text-decoration: none; border-color: var(--accent); color: var(--accent-bright); }
.cjd { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); background: #0e0418; border: 1px solid rgba(255,90,20,.3); padding: 10px; min-width: 200px; box-shadow: 0 10px 40px rgba(0,0,0,.7); text-align: left; display: none; clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.cjd.open { display: block; }
.cjd a { display: block; padding: 8px 10px; border-radius: 4px; color: var(--text-dim); font-size: 13px; }
.cjd a:hover { background: rgba(255,90,20,.1); color: var(--accent-bright); text-decoration: none; }

/* ── SECTION shared ── */
.section { max-width: 1200px; margin: 0 auto; padding: 50px 24px; position: relative; z-index: 1; }
/* Cluster page tab area — matches .cluster-hero's own width mechanics
   exactly (no max-width, same 8vw side padding), so the tab strip and
   every tab's content lines up edge-to-edge with the hero above it,
   pixel for pixel, instead of guessing at a fixed number that may or
   may not be as wide as the hero actually renders. Restored here
   after being lost somewhere in a later file exchange — this exact
   version was previously confirmed working. */
#cluster-content-section { width: 100%; max-width: none; padding-left: 8vw; padding-right: 8vw; box-sizing: border-box; }
.cluster-tab-content { max-width: none; margin: 0; width: 100%; box-sizing: border-box; }
.section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.section-title { font-family: 'Orbitron', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.section-title::before { content: ''; width: 4px; height: 20px; background: var(--accent); box-shadow: 0 0 8px var(--accent); display: inline-block; }
.section-link { font-family: 'Chakra Petch', monospace; font-size: 12px; color: var(--accent-bright); background: rgba(255,90,20,.08); border: 1px solid rgba(255,90,20,.3); padding: 8px 16px; clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.section-link:hover { text-decoration: none; background: rgba(255,90,20,.16); }
.section-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pill-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: rgba(255,90,20,.08); border: 1px solid rgba(255,90,20,.3); color: var(--accent-bright); font-family: 'Chakra Petch', monospace; font-size: 11px; letter-spacing: .05em; clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.pill-btn:hover { text-decoration: none; background: rgba(255,90,20,.16); }
/* jagged divider between sections — an actual angled seam, alternating
   direction each time, instead of a flat line. This is what carries the
   "sheared metal plate" structure down the whole page. */
.diagonal-seam { height: 56px; background: var(--card); clip-path: polygon(0 100%, 100% 0, 100% 100%); position: relative; z-index: 1; }
.diagonal-seam.reverse { clip-path: polygon(0 0, 100% 100%, 0 100%); }

/* ── LANDING-PAGE FLOW BLOCKS ──────────────────────────────────
   Stats strip, trust grid, eyebrow+statement sections, numbered
   steps, community block, closing CTA — the sections that make this
   a proper front-door flow (trust → how it works → community →
   convert) instead of just a stacked info dashboard. */

/* Stats strip — sits under the hero, half-overlapping it */
.stats-strip { position: relative; z-index: 3; max-width: 900px; margin: -46px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--card); border: 1px solid var(--border); clip-path: polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut)); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.stats-strip .stat { padding: 20px 16px; text-align: center; border-right: 1px solid var(--border); }
.stats-strip .stat:last-child { border-right: none; }
.stats-strip .stat .num { font-family: 'Orbitron', sans-serif; font-size: 19px; font-weight: 700; color: var(--accent-bright); text-shadow: 0 0 12px rgba(255,90,20,.4); }
.stats-strip .stat .label { font-family: 'Chakra Petch', monospace; font-size: 10px; color: var(--text-dimmer); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
@media (max-width: 700px) { .stats-strip { grid-template-columns: repeat(2, 1fr); margin-top: 20px; } .stats-strip .stat:nth-child(2) { border-right: none; } }

/* Eyebrow + big statement heading, used to open several sections
   (About, Cluster intro, Community, closing CTA) */
.eyebrow-label { display: inline-flex; align-items: center; gap: 8px; font-family: 'Chakra Petch', monospace; font-size: 11px; font-weight: 700; color: var(--accent-bright); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; padding: 8px 16px; border: 1px solid rgba(255,90,20,.4); background: rgba(255,90,20,.07); clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.eyebrow-label::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; background: var(--accent-bright); box-shadow: 0 0 8px var(--accent-bright); }
.section-statement { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.section-statement h2 { font-family: 'Orbitron', sans-serif; font-size: 26px; font-weight: 700; margin: 0 0 14px; }
.section-statement p { color: var(--text-dim); font-size: 15px; line-height: 1.6; }

/* Trust grid — 4 feature cards, icon + title + desc */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: left; }
.trust-card { background: var(--card); border: 1px solid var(--border); padding: 22px; clip-path: polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm)); }
.trust-card .icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(255,90,20,.1); border: 1px solid rgba(255,90,20,.3); margin-bottom: 14px; clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); font-size: 15px; }
.trust-card h3 { font-family: 'Orbitron', sans-serif; font-size: 14px; margin: 0 0 8px; }
.trust-card p { color: var(--text-dim); font-size: 12.5px; line-height: 1.5; margin: 0; }
@media (max-width: 900px) { .trust-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .trust-grid { grid-template-columns: 1fr; } }

/* Numbered steps — "how it works" */
.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { position: relative; padding-top: 8px; }
.step .step-num { font-family: 'Orbitron', sans-serif; font-size: 34px; font-weight: 900; color: transparent; -webkit-text-stroke: 1.5px var(--accent); opacity: .5; line-height: 1; margin-bottom: 10px; }
.step h3 { font-family: 'Orbitron', sans-serif; font-size: 15px; margin: 0 0 8px; }
.step p { color: var(--text-dim); font-size: 13px; line-height: 1.5; margin: 0; }
@media (max-width: 800px) { .steps-row { grid-template-columns: 1fr; gap: 30px; } }

/* Community / Discord block */
.discord-block { display: flex; align-items: center; justify-content: space-between; gap: 30px; background: var(--card); border: 1px solid var(--border); padding: 36px 40px; clip-path: polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px); flex-wrap: wrap; }
.discord-block .counts { display: flex; gap: 30px; }
.discord-block .counts .c-num { font-family: 'Orbitron', sans-serif; font-size: 22px; font-weight: 700; color: var(--accent-bright); }
.discord-block .counts .c-label { font-family: 'Chakra Petch', monospace; font-size: 11px; color: var(--text-dimmer); text-transform: uppercase; letter-spacing: .05em; }

/* YouTube section — featured latest video (click-to-play) + smaller
   recent row, auto-populated from the channel's real video list. */
.yt-featured { position: relative; display: block; cursor: pointer; overflow: hidden; clip-path: polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut)); background: var(--card); border: 1px solid var(--border); margin-bottom: 16px; transition: border-color .2s, box-shadow .2s; }
.yt-featured:hover { border-color: var(--accent); box-shadow: 0 0 32px rgba(255,90,20,.2); }
.yt-featured img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; filter: brightness(.7); transition: filter .2s; }
.yt-featured:hover img { filter: brightness(.85); }
.yt-featured iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: none; }
.yt-featured .yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; background: rgba(255,90,20,.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; box-shadow: 0 0 40px rgba(255,90,20,.65), 0 0 0 1px rgba(255,255,255,.15); transition: box-shadow .2s, transform .2s; }
.yt-featured:hover .yt-play { box-shadow: 0 0 55px rgba(255,90,20,.85), 0 0 0 1px rgba(255,255,255,.25); transform: translate(-50%, -50%) scale(1.06); }
.yt-featured-info { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(0deg, rgba(7,1,15,.95), transparent); padding: 20px; }
.yt-title { font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.yt-date { font-family: 'Chakra Petch', monospace; font-size: 11px; color: var(--text-dimmer); }
.yt-recent-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.yt-recent-card { position: relative; display: block; background: var(--card); border: 1px solid var(--border); clip-path: polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm)); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.yt-recent-card:hover { border-color: var(--accent); box-shadow: 0 0 20px rgba(255,90,20,.18); text-decoration: none; }
.yt-recent-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; filter: brightness(.65); transition: filter .2s; }
.yt-recent-card:hover img { filter: brightness(.85); }
.yt-play-sm { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; font-size: 13px; background: rgba(255,90,20,.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 0 20px rgba(255,90,20,.6); }
.yt-recent-title { padding: 8px 10px; font-size: 11.5px; color: var(--text-dim); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { .yt-recent-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .yt-recent-row { grid-template-columns: 1fr; } }

/* Scroll reveal — elements fade/slide in on the way down, reset on the
   way back up (see public/js/scroll-reveal.js). Two variants: .reveal
   uses opacity+transform; .reveal-fade is opacity-only for elements that
   already use transform for something else (the .stagger-row zigzag
   offset) so the two don't fight over the same CSS property. */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-fade { opacity: 0; transition: opacity .6s ease; }
.reveal-fade.is-visible { opacity: 1; }
.reveal:nth-child(2), .reveal-fade:nth-child(2) { transition-delay: .08s; }
.reveal:nth-child(3), .reveal-fade:nth-child(3) { transition-delay: .16s; }
.reveal:nth-child(4), .reveal-fade:nth-child(4) { transition-delay: .24s; }
.reveal:nth-child(5), .reveal-fade:nth-child(5) { transition-delay: .32s; }
.reveal:nth-child(6), .reveal-fade:nth-child(6) { transition-delay: .4s; }

/* Closing CTA banner */
.cta-banner { text-align: center; padding: 70px 24px; position: relative; overflow: hidden; }
.cta-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(255,90,20,.14) 0%, transparent 60%); pointer-events: none; }
.cta-banner::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-bright), transparent); box-shadow: 0 0 20px 2px rgba(255,174,26,.6); pointer-events: none; }

/* Same blue glow-line effect as .cta-banner, as its own dedicated
   element rather than pinned to a content section's bottom edge — that
   made it hug whatever card happened to be there instead of sitting at
   the actual bottom of the page. Not applied to .section globally —
   that class is shared across many sections on many pages, and this
   wasn't asked for everywhere yet, just the cluster page for now. */
.cluster-page-glow { position: relative; height: 90px; overflow: hidden; pointer-events: none; margin-top: auto; }
.cluster-page-glow::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(255,90,20,.14) 0%, transparent 60%); }
.cluster-page-glow::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-bright), transparent); box-shadow: 0 0 20px 2px rgba(255,174,26,.6); }
.cta-banner .inner { position: relative; max-width: 560px; margin: 0 auto; }

/* full-bleed background band (used to wrap Featured), so the diagonal
   seams above/below have two actually-different zones to cut between —
   without this, the seam is just a floating triangle with nothing to
   transition from. */
.band-panel { background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* staggered rhythm for a row of equal cards — every other card sits
   lower, breaking the flat grid line without disturbing layout flow
   (transform, not margin, so nothing overlaps unpredictably). */
.stagger-row > *:nth-child(even) { transform: translateY(26px); }
@media (max-width: 900px) { .stagger-row > *:nth-child(even) { transform: none; } }

/* ── LEADERBOARD (tribe cards) ── */
.info-banner { margin-bottom: 16px; padding: 10px 16px; background: rgba(255,90,20,.06); border: 1px solid rgba(255,90,20,.2); font-family: 'Chakra Petch', monospace; font-size: 12px; color: var(--accent-bright); clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.tribe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Same adaptive-column pattern as .cluster-grid right above — 1 board
   doesn't stretch into one giant awkward card, 2 sit side by side,
   3+ uses the default 3-column grid. */
.tribe-grid[data-count="1"] { grid-template-columns: 1fr; }
.tribe-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .tribe-grid, .tribe-grid[data-count="1"], .tribe-grid[data-count="2"] { grid-template-columns: 1fr; } }
.tribe-card { background: var(--card); border: 1px solid var(--border); padding: 18px; clip-path: polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut)); }
.tribe-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tribe-card-label { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 13px; }
.tribe-card-badge { font-family: 'Chakra Petch', monospace; font-size: 10px; padding: 3px 9px; background: rgba(255,90,20,.12); border: 1px solid rgba(255,90,20,.3); color: var(--accent-bright); }
.tribe-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; }
.tribe-row:last-child { border-bottom: none; }
.tribe-score { font-family: 'Chakra Petch', monospace; font-weight: 700; color: var(--green); }

/* ── CLUSTERS ── */
/* Uniform grid, matching CMH Hub's real flat equal-card layout — every
   cluster card the same size, none featured/enlarged. Column count is
   set per-count in JS (home.js sets a data-count attribute), capped at
   3 — so 1 cluster doesn't stretch into one giant awkward card, 2 sit
   side by side instead of one being oddly wide, and 4+ wraps to
   additional rows of 3 rather than ever going wider than that. */
.cluster-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.cluster-grid[data-count="1"] { grid-template-columns: minmax(280px, 380px); justify-content: center; }
.cluster-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
@media (max-width: 900px) { .cluster-grid, .cluster-grid[data-count="1"], .cluster-grid[data-count="2"] { grid-template-columns: 1fr; justify-content: stretch; } }
.cluster-card { position: relative; background: var(--card); border: 1px solid var(--border); padding: 20px; transition: border-color .2s, box-shadow .2s; clip-path: polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut)); overflow: hidden; }
.cluster-card:hover { border-color: var(--accent); box-shadow: 0 0 24px rgba(255,90,20,.15); }
.cluster-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .28; z-index: 0; }
.cluster-card-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,4,31,.4) 0%, var(--card) 85%); }
.cluster-card > *:not(.cluster-card-bg) { position: relative; z-index: 1; }
.cluster-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.cluster-logo-badge { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border2); background: var(--card2); flex-shrink: 0; }
.cluster-logo-badge-ph { width: 44px; height: 44px; border-radius: 10px; background: rgba(255,90,20,.08); border: 1px solid rgba(255,90,20,.2); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.cluster-arrow-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border2); background: rgba(255,90,20,.04); display: flex; align-items: center; justify-content: center; color: var(--text-dim); text-decoration: none; font-size: 15px; transition: all .15s; flex-shrink: 0; }
.cluster-arrow-btn:hover { border-color: var(--accent); color: var(--accent-bright); background: rgba(255,90,20,.12); text-decoration: none; }
.cluster-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.cluster-name { font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 700; }
.cluster-tagline { color: var(--text-dim); font-size: 13px; margin-bottom: 10px; }
.tag { display: inline-block; font-size: 10px; font-weight: 600; padding: 4px 10px; background: rgba(255,90,20,.12); color: var(--accent-bright); margin-right: 6px; clip-path: polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px); }
.cluster-meta { font-family: 'Chakra Petch', monospace; font-size: 11px; color: var(--text-dimmer); margin-top: 10px; }
.cluster-card-wipe-eyebrow { font-family: 'Chakra Petch', monospace; font-size: 10px; color: var(--accent-bright); text-transform: uppercase; letter-spacing: .1em; margin-top: 12px; margin-bottom: 4px; }
.cluster-card-wipe-date { font-family: 'Orbitron', sans-serif; font-size: 13px; margin-bottom: 10px; }
.cluster-card-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 4px; }
.cluster-card-countdown .unit { background: var(--card2); border: 1px solid var(--border2); padding: 7px 4px; text-align: center; }
.cluster-card-countdown .num { font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 700; color: var(--accent-bright); text-shadow: 0 0 8px rgba(255,90,20,.4); }
.cluster-card-countdown .label { font-family: 'Chakra Petch', monospace; font-size: 8px; color: var(--text-dimmer); text-transform: uppercase; letter-spacing: .05em; margin-top: 1px; }
.cluster-footer { display: flex; justify-content: flex-end; align-items: center; margin-top: 14px; }
.online-tag { display: inline-flex; align-items: center; gap: 6px; font-family: 'Chakra Petch', monospace; font-size: 10px; font-weight: 600; color: #86efac; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); border-radius: 20px; padding: 5px 12px; }
.online-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; display: inline-block; box-shadow: 0 0 6px #22c55e; }

/* ── FEATURED ── */
.feat-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.feat-card { background: var(--card); border: 1px solid var(--border); padding: 20px; display: flex; flex-direction: column; color: var(--text); clip-path: polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm)); }
.feat-card:hover { text-decoration: none; }
.feat-card-eyebrow { font-family: 'Chakra Petch', monospace; font-size: 10px; margin-bottom: 8px; }
.feat-card-title { font-family: 'Orbitron', sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.feat-card-desc { color: var(--text-dim); font-size: 12px; flex: 1; margin-bottom: 14px; line-height: 1.5; }
.feat-btn { display: inline-block; padding: 9px 16px; font-size: 12px; font-weight: 700; color: #190a2a; text-align: center; clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.featured-grid { display: grid; gap: 16px; }
.feat-2col { display: grid; gap: 16px; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
/* A grid set to 2/3/4 columns with only ONE actual item in it otherwise
   leaves dead empty space next to a half-width card — stretch a lone
   item to fill the row instead. */
.grid-cols-2 > :only-child, .grid-cols-3 > :only-child, .grid-cols-4 > :only-child { grid-column: 1 / -1; }
.featured-card { background: var(--card); border: 1px solid var(--border); padding: 22px; display: flex; gap: 16px; color: var(--text); clip-path: polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut)); }
.featured-card:hover { text-decoration: none; border-color: var(--accent); }
.featured-img { width: 60px; height: 60px; object-fit: cover; flex-shrink: 0; background: var(--card2); clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.featured-eyebrow { font-family: 'Chakra Petch', monospace; font-size: 10px; color: var(--accent-bright); margin-bottom: 4px; }
.featured-title { font-family: 'Orbitron', sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.featured-desc { color: var(--text-dim); font-size: 12px; line-height: 1.5; margin-bottom: 10px; }
.featured-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--accent-bright); }

@media (max-width: 900px) {
  .tribe-grid { grid-template-columns: 1fr; }
  .cluster-grid { grid-template-columns: 1fr; }
  .feat-4col { grid-template-columns: 1fr 1fr; }
  .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
  h1.hero-headline, .hero-content h1 { font-size: 31px; }
}
@media (max-width: 560px) { .feat-4col { grid-template-columns: 1fr; } }

/* ── FOOTER ── */
.site-footer-full { border-top: 1px solid var(--border); margin-top: 20px; padding: 40px 24px 24px; position: relative; z-index: 1; }
.site-footer-full::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent-bright) 50%, var(--accent) 80%, transparent); }
.sff-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; }
/* These used to be two separate rules (480px full-stack, 760px
   auto-fit) that were actively fighting each other — both apply at
   narrow widths, and since the 760px rule came later in the file, it
   won the cascade even under 480px, undoing the full-stack rule
   exactly where it mattered most. That's the real reason the footer
   kept landing on 2 columns no matter what the auto-fit minmax value
   was. One clean rule now: full 1-column for every phone width,
   removing the 2-column state (and the Legal/Social pairing it kept
   producing) entirely rather than trying to tune it further. */
@media (max-width: 760px) {
    .sff-inner { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; }
    /* Discord spans all 3 columns — since it's the first item, that
       forces it alone onto row 1, with Navigate/Legal/Social flowing
       into the 3 columns of row 2 naturally after it. */
    .sff-discord-col { grid-column: 1 / -1; }
    /* Multiple social icons stack vertically instead of sitting in a
       horizontal row, matching the 3rd column's narrower width here. */
    .sff-social-col { flex-direction: column; align-items: flex-start; }
}
.sff-heading { font-family: 'Orbitron', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dimmer); margin-bottom: 12px; }
.sff-nav-link { display: block; color: var(--text-dim); font-size: 13px; margin-bottom: 8px; }
.sff-nav-link:hover { color: var(--accent-bright); text-decoration: none; }
.sff-discord-col .discord-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.discord-icon { width: 38px; height: 38px; border-radius: 50%; background: #5865F2; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-weight: 700; font-size: 13px; }
.sff-social-col { display: flex; gap: 10px; align-items: flex-start; }
.sff-social-btn { width: 36px; height: 36px; border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 11px; font-weight: 700; clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.sff-social-btn:hover { text-decoration: none; border-color: var(--accent); color: var(--accent-bright); }
.sff-bottom { max-width: 1200px; margin: 24px auto 0; padding-top: 20px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dimmer); text-align: center; font-family: 'Chakra Petch', monospace; }


/* Generic placeholder page (for pages not yet built out) */
.placeholder-page { max-width: 900px; margin: 0 auto; padding: 80px 24px; text-align: center; }
.placeholder-page h1 { font-size: 24px; margin-bottom: 12px; }
.placeholder-page p { color: var(--text-dim); font-size: 14px; }

/* ── ADMIN layout (separate from public site — kept simpler/functional
   rather than fully jagged, since it's a utility tool not a brand page) ── */
.admin-wrap { min-height: 100vh; display: grid; grid-template-columns: 240px 1fr; }
.admin-sidebar { background: var(--card); border-right: 1px solid var(--border); padding: 18px 14px; }

/* Admin mobile — hidden entirely on desktop (button + collapse logic
   only matter below 860px, matching the public site's own sidebar
   breakpoint for consistency). */
.admin-mobile-toggle { display: none; }
@media (max-width: 860px) {
    .admin-wrap { grid-template-columns: 1fr; }
    .admin-mobile-toggle {
        display: block; width: 100%; padding: 14px 16px; background: var(--card);
        border: none; border-bottom: 1px solid var(--border); color: var(--text);
        font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; font-family: inherit;
    }
    /* Collapsed by default — the huge nav tree would otherwise push
       all actual page content off-screen below it. max-height (not
       display:none) so it animates open/closed rather than snapping. */
    .admin-sidebar { max-height: 0; overflow: hidden; padding: 0 14px; border-right: none; border-bottom: 1px solid var(--border); transition: max-height .2s ease, padding .2s ease; }
    .admin-sidebar.mobile-open { max-height: 80vh; overflow-y: auto; padding: 18px 14px; }
}
.admin-sidebar h4 { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dimmer); margin: 14px 0 6px; }
.admin-sidebar a { display: block; padding: 7px 10px; color: var(--text-dim); border-radius: 7px; font-size: 12px; margin-bottom: 1px; }
.admin-sidebar a:hover { background: rgba(255,90,20,.1); color: var(--accent-bright); text-decoration: none; }
.admin-main { padding: 22px 28px; }

/* ============================================================
   Admin utility classes — kept as normal rounded rectangles (not
   jagged) for legibility in dense forms/tables. Colors follow the
   new blue palette automatically via the CSS variables above.
   ============================================================ */

.btn { display: inline-block; background: var(--accent); color: #10031c; border: 0; padding: 7px 14px; border-radius: var(--radius); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: none; }
.btn:hover { background: var(--accent-bright); text-decoration: none; }
.btn.ghost { background: transparent; border: 1px solid var(--border2); color: var(--text); }
.btn.ghost:hover { background: rgba(255,255,255,.05); }
.btn.danger { background: #ef4444; color: #fff; }
.btn.danger:hover { background: #dc2626; }
.btn.sm { padding: 4px 10px; font-size: 12px; }

.table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.table th, .table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
.table th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dimmer); font-weight: 500; }
.table tbody tr:hover { background: rgba(255,255,255,.03); }

.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: var(--radius); background: var(--card2); color: var(--text-dim); }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: none; align-items: center; justify-content: center; z-index: 300; }
.modal-backdrop.open { display: flex; }
.modal { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; width: 480px; max-width: 90vw; max-height: 90vh; overflow-y: auto; }
.modal h2 { margin: 0 0 1rem; font-size: 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 1.25rem; }

.form-row { margin-bottom: 1rem; }
.form-row label { display: block; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.form-row input, .form-row textarea { width: 100%; background: var(--card2); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: var(--radius); font-family: inherit; font-size: 13px; }
/* Defensive fix for browser autofill (Chrome/Edge in particular)
   forcing a white/yellow background on recognized fields regardless
   of the CSS above — this is the standard override technique, a huge
   inset box-shadow the same color as the field paints over the
   browser's own autofill styling. Scoped broadly (any admin input,
   not just .form-row) since autofill can trigger on any text field. */
.admin-wrap input:-webkit-autofill,
.admin-wrap input:-webkit-autofill:hover,
.admin-wrap input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--card2) inset;
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
}
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--accent); }
.form-row .hint { font-size: 12px; color: var(--text-dimmer); margin-top: 4px; }

.msg { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 1rem; font-size: 14px; }
.msg.error { background: rgba(239,68,68,.15); color: #fca5a5; }
.msg.success { background: rgba(34,197,94,.15); color: #86efac; }

.empty { text-align: center; padding: 3rem 1rem; color: var(--text-dim); border: 1px dashed var(--border2); border-radius: var(--radius-lg); }

/* .card — generic admin panel container. Was referenced by class="card"
   across 14 already-delivered admin files (Boss Rewards, Changelog, Mods,
   Polls, RCON Scheduler, Discord Commands, Discord Events, Servers,
   Giveaways, Prize Codes, RCON Templates, Webhooks, Wipe Board) but was
   never actually defined in any stylesheet linked on admin.html — those
   divs have been rendering with no background/border/radius this whole
   time. Values copied from .admin-stat-card below, which is the same
   shape and was already correct. */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 28px; }
.admin-stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; }
.admin-stat-card .num { font-family: 'Chakra Petch', monospace; font-size: 20px; font-weight: 700; color: var(--accent-bright); }
.admin-stat-card .label { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.admin-sidebar a.active { background: rgba(255,90,20,.15); color: var(--accent-bright); }
/* Plain small-caps label for admin panel headers — .eyebrow-label (used
   on the public site) has a "// " prefix baked in that doesn't belong
   here. */
.eyebrow { font-family: 'Chakra Petch', monospace; font-size: 11px; color: var(--text-dimmer); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }

/* ── Caves admin panel (public/js/admin-caves.js) ──────────────
   Small set of admin-only building blocks the Caves panel needs that
   didn't exist yet: a 2-column form grid, an inline checkbox+label
   row, a file-input-with-preview row, a small square delete button,
   on/off badge variants, and the map accordion (rows that expand to a
   cave table per map). Kept together here rather than scattered so
   it's obvious what's Caves-specific. ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.form-row-inline { display: flex; align-items: center; gap: 8px; }
.form-row-inline input[type="checkbox"] { width: auto; }
.file-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.file-picker input[type="file"] { flex: 1; min-width: 160px; }
.preview-thumb { width: 56px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border2); flex-shrink: 0; }
.row-del { width: 26px; height: 26px; border-radius: 50%; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25); color: #f87171; font-size: 14px; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.row-del:hover { background: rgba(239,68,68,.18); }
.badge.on { background: rgba(34,197,94,.12); color: #86efac; }
.badge.off { background: rgba(239,68,68,.12); color: #fca5a5; }
.placement { font-size: 12px; color: var(--text-dim); white-space: nowrap; }

.caves-accordion { display: flex; flex-direction: column; gap: 8px; }
.acc-row { border: 1px solid var(--border2); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); }
.acc-head { display: flex; align-items: center; gap: 7px; padding: 9px 12px; flex-wrap: wrap; }
.acc-toggle { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 11px; transition: transform .15s; padding: 4px; }
.acc-toggle.open { transform: rotate(90deg); }
.acc-name { font-size: 13px; }
.acc-count { font-size: 12px; color: var(--text-dimmer); }
.acc-body { padding: 0 14px 14px; }
.acc-empty, .acc-loading { padding: 1.5rem; text-align: center; color: var(--text-dimmer); font-size: 13px; }
.cave-group { border: 1px solid var(--border2); border-radius: var(--radius); overflow: hidden; }


/* ── Cluster detail page (public/cluster.html) ── */
/* ── Cluster detail page hero — full-bleed background image that fades
   to the page background at the bottom, centered content. Same fade
   technique as the home page's .hero, adapted to centered instead of
   left-anchored (CMH's actual pattern) since a per-cluster page reads
   better centered — a single name/tagline, not a marketing pitch with
   room to breathe on one side. Background image is fixed/site-wide
   (not per-cluster) per explicit instruction — same one everywhere,
   not an admin-uploaded banner_url. ── */
.cluster-hero {
  position: relative; min-height: 420px; display: flex; flex-direction: column;
  justify-content: center; align-items: center; overflow: hidden;
  padding: 70px 8vw 60px;
  background-image: radial-gradient(ellipse at 15% 0%, rgba(162,61,255,.38), transparent 60%), radial-gradient(ellipse at 90% 20%, rgba(255,90,20,.22), transparent 55%);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.cluster-hero.has-hero-media { min-height: 620px; padding-bottom: 100px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 70px), 0 100%); }
.page-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; z-index: 0; }
.cluster-hero.has-hero-media .cluster-hero-overlay { background: radial-gradient(ellipse at 50% 45%, rgba(162,61,255,.2) 0%, transparent 60%), linear-gradient(100deg, rgba(7,1,15,.6) 0%, rgba(7,1,15,.3) 50%, rgba(7,1,15,.6) 100%), linear-gradient(180deg, transparent 65%, rgba(7,1,15,.8) 100%); }
.cluster-hero.has-hero-media .cluster-hero-title, .cluster-hero.has-hero-media .cluster-hero-tagline { text-shadow: 0 2px 14px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.7); }
.cluster-hero.has-hero-media::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(162,61,255,.08), transparent 65%); pointer-events: none; }
.cluster-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,1,15,.5) 0%, rgba(7,1,15,.72) 55%, var(--bg) 100%);
}
.cluster-hero-content { position: relative; z-index: 2; max-width: 720px; text-align: center; }
.cluster-hero-title { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 37px; line-height: 1.1; margin: 0 0 14px; color: var(--text); }
.cluster-hero-tagline { font-size: 14px; color: var(--text-dim); margin: 0 0 20px; }
.cluster-hero-tags { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.cluster-hero-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
@media (max-width: 640px) { .cluster-hero-title { font-size: 26px; } }

.cluster-tabs-nav { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 24px; width: 100%; box-sizing: border-box; }
.cluster-tab-btn { background: var(--card); border: 1px solid var(--border2); color: var(--text-dim); padding: 9px 16px; font-size: 13px; font-weight: 500; font-family: 'Chakra Petch', sans-serif; cursor: pointer; border-radius: 6px; transition: border-color .15s ease, color .15s ease; }
.cluster-tab-btn:hover { color: var(--accent-bright); border-color: var(--accent); }
.cluster-tab-btn.active { color: var(--accent-bright); border-color: var(--accent); background: rgba(255,90,20,.08); }

.cluster-tab-placeholder { background: var(--card); border: 1px dashed var(--border2); border-radius: var(--radius-lg); padding: 40px; text-align: center; }
.cluster-tab-placeholder-label { font-family: 'Orbitron', sans-serif; font-size: 13px; color: var(--accent-bright); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.cluster-tab-placeholder p { color: var(--text-dim); font-size: 14px; max-width: 460px; margin: 0 auto; }
.cluster-tab-placeholder code { background: var(--card2); padding: 2px 6px; border-radius: 4px; font-family: 'Chakra Petch', monospace; color: var(--accent-bright); }

/* ── Wipes tab — live countdown cards, matches CMH Hub's real public
   rendering (public/js/cluster.js renderWipes/tickCountdowns) ── */
.wipe-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.wipe-card { background: var(--card); border: 1px solid var(--border); padding: 28px; clip-path: polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut)); }
.wipe-card-eyebrow { font-family: 'Chakra Petch', monospace; font-size: 11px; color: var(--accent-bright); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.wipe-date { font-family: 'Orbitron', sans-serif; font-size: 15px; margin-bottom: 20px; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.countdown .unit { background: var(--card2); border: 1px solid var(--border2); padding: 12px 6px; text-align: center; }
.countdown .num { font-family: 'Orbitron', sans-serif; font-size: 22px; font-weight: 700; color: var(--accent-bright); text-shadow: 0 0 12px rgba(255,90,20,.4); }
.countdown .label { font-family: 'Chakra Petch', monospace; font-size: 9px; color: var(--text-dimmer); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.wipe-meta { border-top: 1px solid var(--border); padding-top: 14px; }
.wipe-meta .row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 5px 0; color: var(--text-dim); }
.wipe-meta .row .k { color: var(--text-dimmer); text-transform: uppercase; font-family: 'Chakra Petch', monospace; font-size: 10px; letter-spacing: .05em; }

/* Content Blocks — two-column zoned layout, only used when a tab
   actually has sidebar-zoned blocks (see BlockRenderer.renderBlocksZoned). */
.blocks-zoned { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.blocks-sidebar { position: sticky; top: 20px; }
@media (max-width: 860px) { .blocks-zoned { grid-template-columns: 1fr; } }
/* ============================================================
   Site-wide atmosphere layer — the black page background stays
   exactly as-is; this just adds a few soft, low-opacity glow blobs
   on top of it via body::before, matching the blue-glow accent
   style already used in page hero banners (leaderboard's glowing
   angular shape, etc.) rather than any photo. Positioned at three
   different points for asymmetric interest instead of one centered
   glow, which would read as a flat vignette. ============================================================ */

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(circle 500px at 15% 15%, rgba(255,90,20, 0.11), transparent 70%),
        radial-gradient(circle 600px at 88% 70%, rgba(147, 51, 234, 0.08), transparent 70%),
        radial-gradient(circle 450px at 45% 100%, rgba(255,90,20, 0.08), transparent 70%);
    animation: bg-glow-drift 24s ease-in-out infinite alternate;
}

@keyframes bg-glow-drift {
    0%   { opacity: 0.7; }
    100% { opacity: 1; }
}

/* body didn't previously establish its own stacking context (no
   position/z-index/transform on it), so the z-index:-1 above was
   resolving against the root context instead — putting the effect
   behind the entire page rather than just behind body's own content.
   Uses isolation:isolate instead of position:relative — creates a new
   stacking context the same way, so the glow layering still works
   correctly, but WITHOUT making body a positioned element. A
   positioned ancestor sitting between the viewport and .sidebar
   (which uses position:sticky) is a known way to break sticky
   positioning's own calculation — isolation achieves the same
   stacking goal without that side effect. */
body {
    isolation: isolate;
}

@media (prefers-reduced-motion: reduce) {
    body::before {
        animation: none;
    }
}


/* ============================================================
   THEME LAYER — logo palette (red-orange #fb3000 / gold #fba40f /
   violet) with the PURPLE made prominent: purple-black surfaces,
   purple borders & glows, purple-led gradients.
   ============================================================ */
:root { --purple-glow: rgba(162,61,255,.45); --purple-soft: rgba(162,61,255,.12); }
body { background-image: radial-gradient(ellipse 60% 45% at 100% 0%, rgba(130,0,180,.28), transparent 70%), radial-gradient(ellipse 50% 40% at 0% 100%, rgba(130,0,180,.2), transparent 70%); background-attachment: fixed; background-color: var(--bg); }
.sidebar { background: linear-gradient(180deg, #14052a 0%, #0d0417 60%, #12031f 100%); border-right: 1px solid var(--border2); box-shadow: 4px 0 28px rgba(130,0,180,.18); }
.nav { border-bottom: 1px solid var(--border2); box-shadow: 0 2px 22px rgba(130,0,180,.2); }
.side-label { color: #c58cff; }
.side-link.active { color: #fff; border-left-color: var(--accent2); background: linear-gradient(90deg, rgba(162,61,255,.28), rgba(162,61,255,.04)); }
.side-link:hover { background: rgba(162,61,255,.12); }
.side-stats { background: rgba(162,61,255,.08); border-color: var(--border2); }
.side-stats .row b { color: #c58cff; }
.nav-link:hover, .nav-link.active { color: #c58cff; text-shadow: 0 0 10px var(--purple-glow); }
.nav-logo { background: linear-gradient(135deg, var(--accent2), var(--accent)); box-shadow: 0 0 14px var(--purple-glow); }
.sidebar .brand-mark { width: 30px; height: 30px; border-radius: 6px; box-shadow: 0 0 12px var(--purple-glow); }
.section-title::before { background: linear-gradient(180deg, var(--accent2), var(--accent)); box-shadow: 0 0 10px var(--purple-glow); }
.hero-eyebrow, .eyebrow-label { color: #c58cff; background: var(--purple-soft); border-color: rgba(162,61,255,.55); }
.btn-primary { background: linear-gradient(120deg, #8a1fe0 0%, var(--accent2) 35%, var(--accent) 100%); box-shadow: 0 0 26px var(--purple-glow); }
.btn-primary:hover { box-shadow: 0 0 36px rgba(162,61,255,.7), 0 0 20px rgba(255,90,20,.4); }
.btn-ghost { border-color: rgba(162,61,255,.6); color: #e4ccff; }
.btn-ghost:hover { border-color: var(--accent2); color: #fff; background: var(--purple-soft); }
.sidebar-toggle { border-color: var(--accent2); color: #c58cff; }
.hero-overlay { background: radial-gradient(ellipse at 30% 40%, rgba(162,61,255,.22) 0%, transparent 55%), linear-gradient(100deg, rgba(7,1,15,.75) 0%, rgba(7,1,15,.5) 45%, rgba(7,1,15,.85) 100%); }
.cluster-hero-title, .hero h1 .accent { text-shadow: 0 0 24px rgba(162,61,255,.55); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0d0417; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #7a1fd0, #4a1485); border-radius: 6px; border: 2px solid #0d0417; }
::selection { background: rgba(162,61,255,.55); color: #fff; }