body[data-page="about"], body.page-about, body.about {
  /* About page palette helpers (mode-safe)
     Keeps global 3-mode system intact:
     - base stays dark/neutral
     - accents/glows come from global --accent per mode
  */

  /* page surfaces */
  --bg-main: var(--bg);
  --bg-elevated: var(--surface-strong);
  --bg-soft: var(--surface);

  /* derived accents (follow mode) */
  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-strong: color-mix(in srgb, var(--accent) 78%, white 22%);

  /* optional warm reflection for about only */
  --accent-gold: #F7F3DA;
  --accent-gold-soft: rgba(247,243,218,0.18);

  /* text */
  --text-main: var(--text-main);
  --text-muted: var(--text-dim);

  /* shadows */
  --shadow-soft: 0 12px 34px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent);

  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --transition-fast: 180ms ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top, #0f3b3f 0, rgb(var(--panel-rgb)) 55%);
  color: var(--text-main);
  font-family: var(--font-main);
}

/* Header – RAW style left rail */


.header-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}

.header-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}



/* Top-left OUTLXW logo glow + idle breathing */


/* Idle breathing when menu is closed */
body:not(.menu-open) .brand-logo::before,
/* When radial menu is open, keep a softer static glow */
body.menu-open .brand-logo::before,
.brand-tagline {
  font-size: 10px;
  color: var(--text-muted);
}

/* Burger button */

.menu-toggle {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(232,247,245,0.14);
  background: rgba(var(--panel-rgb), 0.9);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 0 10px rgba(var(--spot-rgb), 0.4);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast),
    background var(--transition-fast);
  animation: menuGlow 2.2s ease-in-out infinite;
}

.menu-toggle-icon {
  font-size: 16px;
  line-height: 1;
  color: var(--text-muted);
  transition:
    transform var(--transition-fast),
    color var(--transition-fast),
    opacity var(--transition-fast);
}

.menu-toggle:hover {
  border-color: var(--accent-strong);
  box-shadow: 0 0 12px rgba(var(--spot-rgb), 0.7);
  background: radial-gradient(circle at top, rgba(13,82,88,0.95), rgba(var(--panel-rgb), 0.98));
}

body.menu-open .menu-toggle {
  transform: rotate(90deg);
}

body.menu-open .menu-toggle-icon {
  transform: rotate(90deg);
  color: var(--accent-strong);
}

/* Social icons column */

.header-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-socials {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.social-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(137, 243, 230, 0.7);
  background: radial-gradient(circle at top, rgba(16,72,75,0.96), rgba(var(--panel-rgb), 0.98));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}


.social-icon::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: var(--accent-strong); /* icon lit by default */
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}


.social-spotify::before {
  mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/spotify.svg");
  -webkit-mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/spotify.svg");
}

.social-soundcloud::before {
  mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/soundcloud.svg");
  -webkit-mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/soundcloud.svg");
}

.social-youtube::before {
  mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/youtube.svg");
  -webkit-mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/youtube.svg");
}

.social-instagram::before {
  mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/instagram.svg");
  -webkit-mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/instagram.svg");
}

.social-tiktok::before {
  mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/tiktok.svg");
  -webkit-mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/tiktok.svg");
}

.social-discord::before {
  mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/discord.svg");
  -webkit-mask-image: url("https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/discord.svg");
}

.social-icon:hover {
  border-color: var(--accent-strong);
  box-shadow: 0 0 16px rgba(var(--spot-rgb), 0.9); /* outer glow only on hover */
  transform: translateY(-1px);
  animation: navNeonPulse 1.4s ease-in-out infinite;
}


.social-icon:hover::before {
  background: #ffffff;
}


/* RAW-style overlay nav, using existing .nav + .nav-link */


body.menu-open .nav {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}




/* Layout */

.app-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 32px 120px 140px;
}

@media (max-width: 959.98px) {

  .header-inner {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .header-top {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .header-bottom {
    display: none;
  }


  .app-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px 16px 120px;
  }
}
 */

.app-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 16px 120px;
}

.section {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 26px;
  flex-wrap: wrap;
}

.section-title {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* Buttons */

.btn {
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 7px 16px;
  font-size: 12px;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
  font-family: var(--font-main);
}

.btn-primary {
  background:
    linear-gradient(135deg, var(--accent-strong), var(--accent));
  color: rgb(var(--panel-rgb));
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 36px rgba(0,0,0,0.7);
}

.btn-ghost {
  background: rgba(var(--panel-rgb), 0.7);
  color: var(--text-muted);
  border-color: rgba(232,247,245,0.10);
}

.btn-ghost:hover {
  background: rgba(10,58,63,0.9);
  color: var(--text-main);
}

/* Cards & lists */

.card-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 16px;
}

.card {
  background:
    radial-gradient(circle at top left,
      var(--accent-soft),
      var(--bg-soft));
  border-radius: var(--radius-lg);
  padding: 16px 16px 14px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-subtle);
}

.card-header-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
}

.card-pill {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

.card-badge {
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(var(--panel-rgb), 0.9);
  border: 1px solid rgba(247,243,218,0.55);
  color: var(--accent-gold);
}

.card-title {
  margin: 0 0 4px;
  font-size: 16px;
}

.card-meta {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

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

.card-tag {
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(232,247,245,0.18);
  color: var(--text-muted);
}

/* Track list */

.track-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.track-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  background: rgba(var(--panel-rgb), 0.92);
  border-radius: 999px;
  padding: 8px 10px 8px 12px;
  border: 1px solid rgba(232,247,245,0.10);
}

.track-row-title {
  font-size: 13px;
}

.track-row-meta {
  font-size: 11px;
  color: var(--text-muted);
}

/* Global player */






/* Player iframe overlay - SMALLER */





/* Grouped nav structure */




/* Contact pages – shared styling */

.page-contact {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-contact .page-header {
  margin-bottom: 8px;
}

.page-contact .page-title {
  font-size: 22px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.page-contact .page-subtitle {
  font-size: 13px;
  color: var(--text-muted);
}

.contact-block {
  padding: 18px 20px;
  border-radius: 18px;
  background: radial-gradient(
    circle at top,
    rgba(13, 73, 76, 0.65),
    rgba(3, 20, 23, 0.95)
  );
  box-shadow: 0 18px 38px rgba(2, 10, 12, 0.9);
}

.contact-heading {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.contact-text {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.contact-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-pill {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 6px 14px;
}


/* HOME LANDING */

.home-landing {
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
}

.home-logo {
  width: 52vw;
  max-width: 900px;
  min-width: 300px;
  height: auto;
  display: block;
}

.home-cta {
  padding: 10px 34px;
  font-size: 14px;
  letter-spacing: 0.06em;
}

.home-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.home-social-btn {
  font-size: 11px;
  letter-spacing: 0.08em;
}

@keyframes navNeonPulse {
  0% {
    box-shadow: 0 0 0 rgba(var(--spot-rgb), 0.0);
  }
  50% {
    box-shadow: 0 0 14px rgba(var(--spot-rgb), 0.65);
  }
  100% {
    box-shadow: 0 0 0 rgba(var(--spot-rgb), 0.0);
  }
}

/* Neon hover for home socials & Discord */
.home-social-btn:hover {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
  box-shadow: 0 0 10px rgba(var(--spot-rgb), 0.55);
  text-shadow: 0 0 8px rgba(137,243,230,0.9);
  animation: navNeonPulse 1.4s ease-in-out infinite;
}


/* Vault filter */

.vault-section {
  padding-top: 10px;
}

.vault-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 10px;
}

.vault-filter-btn {
  border-radius: 999px;
  padding: 6px 14px;
  border: 1px solid transparent;
  background: var(--bg-soft);
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
}

.vault-filter-btn:hover {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
  box-shadow: 0 0 10px rgba(var(--spot-rgb), 0.55);
  text-shadow: 0 0 8px rgba(137,243,230,0.9);
  animation: navNeonPulse 1.4s ease-in-out infinite;
}


.vault-filter-btn.active {
  background: radial-gradient(circle at top, var(--accent-strong), var(--accent-gold));
  color: rgb(var(--panel-rgb));
  border-color: var(--accent-strong);
  box-shadow: 0 0 18px rgba(var(--spot-rgb), 0.55);
}

.vault-tracks-container {
  margin-top: 6px;
}

/* Videos */

.video-frame-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 10px;
}

.video-frame-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* About */

.about-text {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 680px;
}

/* Player volume control */




/* Big SoundCloud-style cards (Fresh Drops + Featured) */

.sc-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sc-embed-wrapper {
  position: relative;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.sc-embed-wrapper iframe {
  width: 100%;
  height: 166px;
  border: 0;
}

.card-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Responsive */

@media (min-width: 840px) {
  .card-grid {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  }
}

@media (max-width: 640px) {
  .app-shell {
    padding-inline: 14px;
  }
  .track-row {
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-rows: auto auto;
  }
  .track-row > span.track-row-meta:first-child {
    display: none;
  }
}

/* === Vault Library layout === */

/* Default (album-specific tabs): single column, centered, half-width */
.vault-section .track-list {
  max-width: 640px;
  margin: 0 auto;
}

/* Inside Vault, use flex rows: text left, buttons right */
.vault-section .track-row {
  display: flex;
  align-items: center;
  padding-inline: 18px;
}

.vault-section .track-row > div:first-child {
  flex: 1;
  min-width: 0;
}

.vault-section .track-row > div:last-child {
  margin-left: auto;
  display: inline-flex;
  gap: 8px;
}

/* "All" filter: switch list to 2-column grid */
.vault-section.vault-two-col .track-list {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  column-gap: 32px;
  row-gap: 26px;
}

.vault-section.vault-two-col .track-row {
  width: 100%;
}

/* === Featured small-card layout (text left, small cover right) === */

.card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}

.card-top-main {
  flex: 1;
  min-width: 0;
}

.sc-cover-inline {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(var(--panel-rgb), 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-cover-inline img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sc-cover-inline-placeholder {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   ABOUT PAGE — WORLDBUILDER ERA DESIGN
   Matches screenshot style: neon glow, soft panels, purple dots,
   clean spacing, cinematic typography.
   ============================================================ */

/* Container */
.about-section {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* ------------------------------------------------------------
   HERO PANEL
------------------------------------------------------------ */

.about-hero-card {
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  background: linear-gradient(
      135deg,
      rgba(var(--panel-rgb), 0.94),
      rgba(6, 38, 45, 0.96)
    ),
    radial-gradient(circle at top left, rgba(var(--spot-rgb), 0.16), transparent);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

/* Floating glow inside hero */
.about-hero-card::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(var(--spot-rgb), 0.7),
    transparent 60%
  );
  right: 14%;
  top: 28%;
  filter: blur(10px);
  opacity: 0.4;
}

.about-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
}

.about-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.about-hero-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.about-era-wrap {
  display: flex;
  align-items: center;
}

.about-era-pill {
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   SECTION BLOCKS
------------------------------------------------------------ */

.about-block {
  padding: 24px 26px 22px;
  border-radius: var(--radius-xl);
  background: linear-gradient(
    135deg,
    rgba(var(--panel-rgb), 0.94),
    rgba(6, 38, 45, 0.94)
  );
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
}

.about-heading {
  margin: 0 0 16px;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-main);
}

/* Description paragraphs */
.about-text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 780px;
}

.about-text + .about-text {
  margin-top: 8px;
}

/* Lists */
.about-list {
  margin: 12px 0 10px;
  padding-left: 20px;
}

.about-list li {
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.7;
  margin-bottom: 6px;
}

/* ------------------------------------------------------------
   TIMELINE
------------------------------------------------------------ */

.about-timeline-block {
  margin-top: 6px;
}

.about-timeline {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  padding-left: 22px;
}

/* Vertical line */
.about-timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--accent-strong),
    var(--accent-gold)
  );
  opacity: 0.6;
  border-radius: 10px;
}

/* Row */
.about-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 26px;
}

/* Dot */
.about-timeline-marker {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--accent-strong);
  box-shadow: 0 0 18px rgba(var(--spot-rgb), 0.85);
  flex-shrink: 0;
  margin-top: 4px;
}

/* Text group */
.about-timeline-content {
  flex: 1;
  min-width: 0;
}

.about-timeline-period {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.about-timeline-title {
  margin: 4px 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

/* ------------------------------------------------------------
   CLOSING TAGLINE BANNER
------------------------------------------------------------ */

.about-tagline-banner {
  text-align: center;
  padding: 14px 28px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(var(--spot-rgb), 0.12),
    rgba(247, 243, 218, 0.25),
    rgba(var(--spot-rgb), 0.12)
  );
  border: 1px solid rgba(247, 243, 218, 0.38);
  margin-top: 6px;
}

.about-tagline-text {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-main);
}

/* ------------------------------------------------------------
   RESPONSIVE TWEAKS
------------------------------------------------------------ */

@media (max-width: 720px) {
  .about-hero-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .about-hero-card::after {
    right: 6%;
    top: 60%;
  }

  .about-block,
  .about-hero-card {
    padding-inline: 18px;
  }

  .about-timeline {
    padding-left: 18px;
  }

  .about-tagline-banner {
    padding-inline: 18px;
  }
}

/* === Vault search bar === */

.vault-search-bar {
  margin-top: 10px;
  margin-bottom: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vault-search-input {
  flex: 1;
  min-width: 220px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-soft);
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-main);
  outline: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}

.vault-search-input::placeholder {
  color: var(--text-muted);
}

.vault-search-input:focus {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 1px rgba(var(--spot-rgb), 0.35);
  background: rgba(var(--panel-rgb), 0.95);
}

@media (max-width: 640px) {
  .vault-search-bar {
    margin-top: 12px;
  }
}

/* === Neon Global Player Bar (Spotify-style) === */


/* left: art + titles */

.gp-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 0 auto;
}

.gp-artwrap {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: radial-gradient(circle at top left, rgba(var(--spot-rgb), 0.3), rgba(var(--panel-rgb), 1));
  box-shadow: 0 0 18px rgba(var(--spot-rgb), 0.6);
  flex-shrink: 0;
}

.gp-art {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.gp-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gp-title {
  font-size: 13px;
  font-weight: 600;
}

.gp-subtitle {
  font-size: 11px;
  color: var(--text-muted);
}

/* center: controls + timeline */

.gp-center {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gp-controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.gp-btn {
  border: none;
  outline: none;
  cursor: pointer;
  background: transparent;
  color: var(--text-main);
  font-size: 14px;
  padding: 0;
}

.gp-btn-icon {
  opacity: 0.7;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.gp-btn-icon:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* main big play button */

.gp-btn-main {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: none;
  background: radial-gradient(circle at 30% 20%, #89F3E6, rgb(var(--spot-rgb)));
  box-shadow:
    0 0 22px rgba(var(--spot-rgb), 0.8),
    0 10px 20px rgba(0,0,0,0.7);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    filter var(--transition-fast);
}

/* triangle / pause bars drawn via pseudo elements */

.gp-btn-main::before,
.gp-btn-main::after {
  content: "";
  display: block;
}

/* paused state → triangle */

.gp-btn-main[data-state="paused"]::before {
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid rgb(var(--panel-rgb));
  margin-left: 2px;
}

/* playing state → two bars */

.gp-btn-main[data-state="playing"]::before,
.gp-btn-main[data-state="playing"]::after {
  width: 4px;
  height: 16px;
  border-radius: 999px;
  background: rgb(var(--panel-rgb));
}

.gp-btn-main[data-state="playing"]::before {
  margin-right: 3px;
}
.gp-btn-main[data-state="playing"]::after {
  margin-left: 3px;
}

.gp-btn-main:hover {
  transform: translateY(-1px) scale(1.03);
  filter: brightness(1.05);
}

.gp-btn-active {
  color: var(--accent-strong);
}

/* progress row */

.gp-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gp-time {
  font-size: 11px;
  color: var(--text-muted);
  flex: 0 0 auto;
}

.gp-progress-track {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(232,247,245,0.12);
  overflow: hidden;
  cursor: pointer;
}

.gp-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--spot-rgb)), #F7F3DA);
  box-shadow: 0 0 12px rgba(var(--spot-rgb), 0.7);
}

/* right: volume + visual toggle */

.gp-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.gp-toggle-visual {
  border-radius: 999px;
  border: 1px solid rgba(232,247,245,0.16);
  background: rgba(var(--panel-rgb), 0.85);
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast);
}

.gp-toggle-visual:hover {
  border-color: var(--accent-strong);
  color: var(--text-main);
}

.gp-volume {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gp-volume-icon {
  font-size: 13px;
}

.gp-volume-slider {
  width: 90px;
}

/* empty state */




/* responsive */

@media (max-width: 880px) {
  .gp-left {
    flex: 0 0 100%;
  }
  .gp-center {
    order: 3;
  }
  .gp-right {
    margin-left: auto;
  }
}

@media (max-width: 640px) {
  .gp-left {
    gap: 8px;
  }
  .gp-artwrap {
    width: 40px;
    height: 40px;
  }
  .gp-title {
    font-size: 12px;
  }
}

/* Force-hide SoundCloud iframe: audio engine only */

/* Collapsed global player (when user hides it) */

/* Mute button styling */
.gp-volume-mute {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* Floating restore button at bottom center */



/* Neon Particles */
.home-particles {position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.home-particles::before{content:"";position:absolute;width:140%;height:140%;left:-20%;top:-20%;
background:radial-gradient(circle,rgba(var(--spot-rgb), 0.12),rgba(var(--panel-rgb), 0) 70%);
animation:particlesDrift 18s linear infinite;opacity:.45;}
@keyframes particlesDrift{0%{transform:translate(0,0) scale(1);}50%{transform:translate(22px,-18px) scale(1.05);}100%{transform:translate(0,0) scale(1);}}

/* Logo Glow */
.home-logo-glow{position:relative;display:inline-block;z-index:2;}
.home-logo-glow::after{content:"";position:absolute;inset:-22px;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(var(--spot-rgb), 0.55),rgba(var(--spot-rgb), 0) 65%);filter:blur(38px);
animation:logoGlow 3.2s ease-in-out infinite;}
@keyframes logoGlow{0%,100%{opacity:.45;transform:scale(1);}50%{opacity:.85;transform:scale(1.04);}}

/* Page Transition */
#page-transition{position:fixed;inset:0;pointer-events:none;
background:radial-gradient(circle,rgba(var(--spot-rgb), 0.07),rgba(var(--panel-rgb), 0.95));
opacity:0;transition:opacity .35s ease;z-index:9999;}
#page-transition.active{opacity:1;}

/* Neon Pulse Glow for Play Buttons */
.play-btn {
  position: relative;
  transition: all 0.25s ease;
  z-index: 1;
}

.play-btn:hover {
  color: rgb(var(--panel-rgb));
  background: var(--accent-strong);
  box-shadow: 0 0 10px rgba(var(--spot-rgb), 0.55),
              0 0 20px rgba(var(--spot-rgb), 0.35);
  animation: navNeonPulse 1.4s ease-in-out infinite;
  transform: translateY(-1px);
}

.play-btn:active {
  transform: scale(0.96);
}

.play-btn.playing {
  background: radial-gradient(circle at top, var(--accent-strong), var(--accent-gold));
  box-shadow: 0 0 16px rgba(var(--spot-rgb), 0.55);
  color: rgb(var(--panel-rgb));
}

/* Fix global player bar under RAW left rail */
@media (min-width: 960px) {
}

/* Center menu toggle vertically in left rail on desktop */
@media (min-width: 960px) {
  .menu-toggle {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -16px; /* half of 32px height */
    margin-left: -16px;
  }
}

/* Reset menu toggle positioning on mobile */
@media (max-width: 959.98px) {
  .menu-toggle {
    position: static;
    margin: 0;
  }
}

/* ABOUT — TEAM subpage */

.about-team-member {
  margin-bottom: 10px;
}

.about-team-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.about-team-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  margin-bottom: 6px;
}

.about-team-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.about-team-social-pill {
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(232,247,245,0.22);
  color: var(--text-muted);
}


/* === ABOUT — TEAM card layout (3 members with circular avatars) === */

.team-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

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

.team-card {
  padding: 20px 18px 18px;
  border-radius: 20px;
  background: radial-gradient(
    circle at top,
    rgba(13, 73, 76, 0.6),
    rgba(3, 20, 23, 0.96)
  );
  box-shadow: 0 18px 38px rgba(2, 10, 12, 0.9);
  border: 1px solid rgba(232, 247, 245, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  min-height: 280px;
}

.team-avatar-wrap {
  margin-bottom: 10px;
  align-self: center;
}

.team-avatar-ring {
  width: 110px;
  height: 110px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(137,243,230,0.25), transparent 60%);
}

.team-avatar-inner {
  width: 92px;
  height: 92px;
  border-radius: 999px;
  border: 2px solid rgba(137,243,230,0.9);
  background-color: rgba(var(--panel-rgb), 0.96);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.team-name {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.team-role {
  font-size: 12px;
  color: var(--accent-gold-soft);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 2px 0 4px;
}

.team-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.team-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  justify-content: center;
  width: 100%;
}

.team-social-pill {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(232,247,245,0.3);
  text-decoration: none;
  color: var(--text-main);
}


/* ===== Radial half-circle navigation ===== */
/* Menu toggle breathing only when menu is closed */
body.menu-open .menu-toggle {
  animation: none;
  box-shadow: 0 0 12px rgba(var(--spot-rgb), 0.7);
}



@keyframes menuGlow {
  0% {
    box-shadow: 0 0 6px rgba(var(--spot-rgb), 0.25);
    transform: translateX(0);
  }
  50% {
    box-shadow: 0 0 20px rgba(137,243,230,0.9);
    transform: translateX(1px);
  }
  100% {
    box-shadow: 0 0 6px rgba(var(--spot-rgb), 0.25);
    transform: translateX(0);
  }
}


/* Floating radial fan menu (style A) */


/* Collapsed: items sit at hub, invisible */





/* Radial labels: hidden by default, reveal on hover (style B2) */

/* When menu is open, fan items out along the arc */
/* H2 radial hub button */
.radial-hub-btn {
  position: fixed;
  left: 48px;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-size: 26px;
  color: var(--text-main);
  background: radial-gradient(circle at top, rgba(16,72,75,0.96), rgba(var(--panel-rgb), 1));
  border: 1px solid rgba(137,243,230,0.65);
  box-shadow: 0 0 14px rgba(var(--spot-rgb), 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 120;
  animation: radialHubGlow 2.4s ease-in-out infinite;
}

@keyframes radialHubGlow {
  0%   { box-shadow: 0 0 8px rgba(var(--spot-rgb), 0.3); }
  50%  { box-shadow: 0 0 22px rgba(137,243,230,0.95); }
  100% { box-shadow: 0 0 8px rgba(var(--spot-rgb), 0.3); }
}
@media (max-width: 767.98px) {
  .radial-hub-btn {
    display: none;
  }
}

/* =========================
   MOBILE OVERRIDES (FINAL)
========================= */

@media (max-width: 767.98px) {
  /* force menu hub visible on mobile (overrides hide rule above) */
  .radial-hub-btn { display: flex !important; }
}

@media (max-width: 900px){
  /* home cubes: stack vertically (prevents viewport % drifting on iOS) */
  .home-cube-stage.home-cube-3{
    height: auto !important;
    min-height: 0 !important;
    padding-top: 28px !important;
    padding-bottom: 140px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 80px !important;
  }

  /* remove absolute positioning */
  .home-cube-stage.home-cube-3 .cube-block{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 auto !important;
  }

  #cube-featured,
  #cube-vault,
  #cube-latest{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }

  /* don’t apply focus translate offsets on mobile */
  .home-cube-stage.has-focus .cube-block.is-focus{ transform: none !important; }

  /* ensure labels are visible */
  .cube-tag{ display: inline-block !important; opacity: 0.95 !important; }
}

/* ============================= */
/* RADIAL MENU LAYOUT + STYLING */
/* ============================= */

/* Position the radial menu around the hub (center-left) */

.radial-root-wrap,
.radial-sub-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Base radial item */

/* Circle badge (always circle) */
.radial-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(137,243,230,0.7);
  background: radial-gradient(circle at top, rgba(16,72,75,0.96), rgba(var(--panel-rgb), 0.98));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(137,243,230,0.65);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-main);
}

/* Labels always visible */

/* ===== ROOT ARC (4 items) ===== */
/* index: 0 = Home, 1 = Releases, 2 = About, 3 = Get to know */
/* Highlight active root on hover (optional) */
/* ===== SUBMENU ARC UNDER RELEASES (Style B) ===== */
/* 3 children → small curved fan under the R root */

.radial-sub-wrap {
  /* shift submenu slightly down-right from center (under R) */
  transform: translate(40px, 45px);
}
/* sub-index: 0,1,2 → arc under the R */
/* ===== 3D HOME CUBE ===== */

.cube-wrap {
  position: absolute;
  right: 120px;
  top: 50%;
  transform: translateY(-50%);
  perspective: 900px;
}

.cube {
  width: 180px;
  height: 180px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1.2s ease;
}

.face {
  position: absolute;
  width: 180px;
  height: 180px;
  background-size: cover;
  background-position: center;
  opacity: 0.95;
  box-shadow: 0 0 30px rgba(var(--spot-rgb), 0.35);
}

.f1 { background-image: url("./assets/c1.png"); transform: rotateY(0deg) translateZ(90px); }
.f2 { background-image: url("./assets/c2.png"); transform: rotateY(90deg) translateZ(90px); }
.f3 { background-image: url("./assets/c3.png"); transform: rotateY(180deg) translateZ(90px); }
.f4 { background-image: url("./assets/c4.png"); transform: rotateY(-90deg) translateZ(90px); }
.f5 { background-image: url("./assets/c5.png"); transform: rotateX(90deg) translateZ(90px); }
.f6 { background-image: url("./assets/c6.png"); transform: rotateX(-90deg) translateZ(90px); }

/* =========================
   HOME CUBE STAGE LAYOUT
========================= */
.home-cube-stage{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 140px; /* room for button */
}
.home-cube-stage .cube-wrap{
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: translateY(-40px) !important; /* cube up */
}
.home-cube-stage .home-latest-btn{
  transform: translateY(40px); /* button down */
}

/* =========================
   HOME — 3 CUBES FORMATION
========================= */

.home-cube-stage.home-cube-3{
  position: relative;
  height: 100vh;
  min-height: 720px;
}

.cube-block{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 3;
}

.cube-block .cube-wrap{
  position: relative; /* each cube has its own wrap now */
  left: auto;
  top: auto;
  transform: none;
  perspective: 900px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.cube-block .cube-wrap:active{ cursor: grabbing; }

.cube-block .cube{
  width: 220px;
  height: 220px;
  position: relative;
  transform-style: preserve-3d;
  transition: none !important;   /* ✅ JS controls animation */
  will-change: transform;
}

.cube-block .face{
  position: absolute;
  width: 220px;
  height: 220px;
  background-size: cover;
  background-position: center;
  opacity: 0.96;
  box-shadow: 0 0 34px rgba(var(--spot-rgb), 0.38);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-color: rgba(255,255,255,0.04); /* fallback if png missing */
}

/* cube depth */
.cube-block .f1 { transform: rotateY(0deg) translateZ(110px); }
.cube-block .f2 { transform: rotateY(90deg) translateZ(110px); }
.cube-block .f3 { transform: rotateY(180deg) translateZ(110px); }
.cube-block .f4 { transform: rotateY(-90deg) translateZ(110px); }
.cube-block .f5 { transform: rotateX(90deg) translateZ(110px); }
.cube-block .f6 { transform: rotateX(-90deg) translateZ(110px); }

.cube-tag{
  padding: 10px 16px;
  border-radius: 14px;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 12px;
  color: rgba(232,247,245,0.92);
  background: rgba(10, 30, 34, 0.35);
  border: 1px solid rgba(var(--spot-rgb), 0.25);
  box-shadow: 0 0 0 1px rgba(var(--spot-rgb), 0.12), 0 0 26px rgba(var(--spot-rgb), 0.18);
  backdrop-filter: blur(10px);
}

#cube-featured .cube-tag,
#cube-vault .cube-tag {
  margin-top: 28px; /* pushes the label down */
}

/* POSITIONING (matches your sketch) */
#cube-featured { left: 16%; top: 30%; transform: translate(-50%, -50%); }
#cube-vault    { left: 84%; top: 30%; transform: translate(-50%, -50%); }
#cube-latest   { left: 50%; top: 68%; transform: translate(-50%, -50%); }

/* center hero (yellow box) */
.home-center-hero{
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  opacity: 0.95;
}

.home-center-hero-img{
  width: min(360px, 55vw); /* ✅ smaller */
  height: auto;
  opacity: 0.9;
  filter: drop-shadow(0 0 18px rgba(var(--spot-rgb), 0.20));
}

/* mobile: stack */
@media (max-width: 900px){
  .home-cube-stage.home-cube-3{
    min-height: 820px;
  }
  #cube-featured { left: 50%; top: 22%; }
  #cube-vault    { left: 50%; top: 52%; }
  #cube-latest   { left: 50%; top: 80%; }
  .home-center-hero{ display:none; }
}

/* =========================
   HOME CUBES — PREMIUM FX
   (hover focus + depth glow + parallax)
========================= */

/* make blocks animate smoothly */
.cube-block{
  transition: transform .35s ease, filter .35s ease, opacity .35s ease;
  will-change: transform, filter, opacity;
}

/* ===== PURE RADIAL GLOW (NO BOX EDGES) ===== */
.cube-block::before{
  content:"";
  position:absolute;
  left:50%;
  top:48%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background:
    radial-gradient(circle,
      rgba(var(--spot-rgb), 0.22) 0%,
      rgba(var(--spot-rgb), 0.12) 30%,
      rgba(var(--spot-rgb), 0.05) 48%,
      rgba(0,0,0,0.00) 70%);
  filter: blur(22px);
  opacity: .85;
  pointer-events:none;
  z-index: 0;
}

/* soft floor shadow (also circular) */
.cube-block::after{
  content:"";
  position:absolute;
  left:50%;
  top: calc(50% + 180px);
  width: 360px;
  height: 110px;
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    radial-gradient(ellipse,
      rgba(0,0,0,0.45),
      rgba(0,0,0,0.18) 55%,
      rgba(0,0,0,0) 80%);
  filter: blur(18px);
  opacity: .35;
  pointer-events:none;
  z-index: 0;
}

/* keep actual cube above pseudo elements */
.cube-block .cube-wrap,
.cube-block .cube-tag{
  position: relative;
  z-index: 2;
}

/* base cube glow a bit stronger */
.cube-block .face{
  box-shadow: 0 0 44px rgba(var(--spot-rgb), 0.34);
  transition: box-shadow .35s ease, opacity .35s ease, filter .35s ease;
}

/* label glow upgrade */
.cube-tag{
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, color .35s ease, opacity .35s ease;
}

/* -------------------------
   Hover Focus Mode
-------------------------- */

/* default when one is focused: dim others via parent class */
.home-cube-stage.has-focus .cube-block{
  opacity: .38;
  filter: saturate(.85) brightness(.85);
}

/* the focused cube */
.home-cube-stage.has-focus .cube-block.is-focus{
  opacity: 1;
  filter: saturate(1.1) brightness(1.05);
  transform: translate(-50%, -50%) scale(1.06);
}

/* sharpen glow + glow plate when focused */
.home-cube-stage.has-focus .cube-block.is-focus::before{
  opacity: .95;
  transform: scale(1.05);
}
.home-cube-stage.has-focus .cube-block.is-focus::after{
  opacity: .55;
  transform: translateX(-50%) scale(1.05);
}

/* face glow punch on focus */
.home-cube-stage.has-focus .cube-block.is-focus .face{
  box-shadow: 0 0 70px rgba(var(--spot-rgb), 0.52);
  filter: contrast(1.05);
}

/* label becomes neon on focus */
.home-cube-stage.has-focus .cube-block.is-focus .cube-tag{
  border-color: rgba(var(--spot-rgb), 0.55);
  box-shadow:
    0 0 0 1px rgba(var(--spot-rgb), 0.20),
    0 0 36px rgba(var(--spot-rgb), 0.26);
  transform: translateY(2px) scale(1.03);
  color: rgba(232,247,245,0.98);
}

/* mobile: don’t dim/hover */
@media (max-width: 900px){
  .home-cube-stage.has-focus .cube-block{ opacity: 1; filter:none; }
  .home-cube-stage.has-focus .cube-block.is-focus{ transform: translate(-50%, -50%); }
}

/* =========================================================
   MOBILE HOME: NO 3D CUBES — STATIC VERTICAL CARDS
   Desktop stays exactly the same.
   ========================================================= */

@media (max-width: 767.98px){

  /* ensure hub shows on mobile (older rule hides it) */
  .radial-hub-btn{ display: flex !important; }

  /* make home stage a real vertical layout */
  .home-cube-stage.home-cube-3{
    height: auto !important;
    min-height: 0 !important;
    padding-top: 22px !important;
    padding-bottom: 140px !important; /* room for player */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 44px !important;
  }

  /* kill absolute positioning + “top:%” drift on iOS */
  .home-cube-stage.home-cube-3 .cube-block{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 auto !important;
  }

  /* remove big glow plates that make mobile messy */
  .home-cube-stage.home-cube-3 .cube-block::before,
  .home-cube-stage.home-cube-3 .cube-block::after{
    display: none !important;
  }

  /* remove 3D / perspective: turn cube into a flat cover card */
  .home-cube-stage.home-cube-3 .cube-wrap{
    perspective: none !important;
    transform: none !important;
  }
  .home-cube-stage.home-cube-3 .cube{
    width: min(86vw, 340px) !important;
    height: min(86vw, 340px) !important;
    transform: none !important;
    transform-style: flat !important;
  }
  .home-cube-stage.home-cube-3 .face{
    width: 100% !important;
    height: 100% !important;
    inset: 0 !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .home-cube-stage.home-cube-3 .f2,
  .home-cube-stage.home-cube-3 .f3,
  .home-cube-stage.home-cube-3 .f4,
  .home-cube-stage.home-cube-3 .f5,
  .home-cube-stage.home-cube-3 .f6{
    display: none !important;
  }

  /* label: keep below card, centered */
  .home-cube-stage.home-cube-3 .cube-tag{
    display: inline-flex !important;
    margin-top: 14px !important;
    transform: none !important;
  }

  /* prevent any hover-focus scaling on mobile */
  .home-cube-stage.has-focus .cube-block,
  .home-cube-stage.has-focus .cube-block.is-focus{
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* ===== HOME STAGE SPOTLIGHT ===== */
.home-cube-stage {
  position: relative;
  overflow: visible; /* ✅ no clipping */
}

.home-cube-stage::before{
  content:"";
  position:absolute;
  left:50%;
  top:48%;
  transform: translate(-50%,-50%);
  width: min(1100px, 92vw);
  height: min(760px, 72vh);
  border-radius: 60px;
  background:
    radial-gradient(circle at 50% 45%,
      rgba(var(--spot-rgb), 0.20) 0%,
      rgba(var(--spot-rgb), 0.10) 28%,
      rgba(0,0,0,0.00) 70%);
  filter: blur(10px);
  opacity: 0.85;
  pointer-events:none;
  z-index: 0;
}

/* make sure cubes stay above spotlight */
.home-cube-stage .cube-block { z-index: 2; }

/* ===== HOVER FOCUS: DIM OTHERS ===== */
.home-cube-stage.has-focus .cube-block {
  opacity: .40;
  filter: saturate(.85) brightness(.86);
}

.home-cube-stage.has-focus .cube-block.is-focus {
  opacity: 1;
  filter: saturate(1.1) brightness(1.05);
}

/* ===== SUBTLE GRID TEXTURE ===== */
.home-cube-stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 1;

  /* micro grid + faint diagonal */
  background:
    repeating-linear-gradient(0deg,
      rgba(232,247,245,0.045) 0px,
      rgba(232,247,245,0.045) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 38px),
    repeating-linear-gradient(90deg,
      rgba(232,247,245,0.035) 0px,
      rgba(232,247,245,0.035) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 42px),
    repeating-linear-gradient(135deg,
      rgba(var(--spot-rgb), 0.028) 0px,
      rgba(var(--spot-rgb), 0.028) 1px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0) 14px);

  opacity: .55;  /* lower = softer */
  mix-blend-mode: overlay;
}

/* FIX: overlays must stay behind cubes (no square cutting) */
.home-cube-stage { position: relative; }

/* put spotlight + grid behind */
.home-cube-stage::before,
.home-cube-stage::after{
  z-index: 0 !important;
}

/* keep cubes + tags above overlays */
.home-cube-stage .cube-block{
  z-index: 2 !important;
}

/* make sure pseudo glow/shadow of each cube stays above overlays too */
.cube-block .cube-wrap,
.cube-block .cube-tag{
  z-index: 3 !important;
  position: relative;
}

.cube-block{
  position: absolute;
  overflow: visible; /* 🔥 prevents clipping */
}

/* ================================
   FIX: STOP EXTRA HOVER SHADOW
   Keep glow/shadow stable on hover
================================ */

/* Do NOT boost cube floor shadow / glow on hover/focus */
.home-cube-stage.has-focus .cube-block.is-focus::before,
.home-cube-stage.has-focus .cube-block.is-focus::after{
  transform: translate(-50%, -50%) !important;
  opacity: .85 !important; /* same as idle glow */
}

/* Floor shadow should NEVER get stronger on hover */
.cube-block::after{
  opacity: .35 !important;          /* your base value */
  transform: translateX(-50%) !important;
}

/* Prevent any hover/focus from changing floor shadow */
.cube-block.is-focus::after,
.cube-block:hover::after{
  opacity: .35 !important;
  transform: translateX(-50%) !important;
}

/* Optional: if the “extra shadow” is actually a glow punch, soften it */
.home-cube-stage.has-focus .cube-block.is-focus .face{
  box-shadow: 0 0 44px rgba(var(--spot-rgb), 0.34) !important; /* back to base */
  filter: none !important;
}

/* ==========================================
   MOBILE HARD OVERRIDE
   - Stop cube drifting (remove absolute + top%)
   - Disable 3D (flat cards)
   - Make menu vertical circles + labels
   ========================================== */

@media (max-width: 900px){

  /* ---- HOME: stack layout (real spacing) ---- */
  .home-cube-stage.home-cube-3{
    min-height: 0 !important;
    height: auto !important;
    padding: 22px 0 140px !important; /* space for player */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 64px !important; /* <-- real space between items */
  }

  /* kill mobile absolute positions that cause drifting */
  #cube-featured,
  #cube-vault,
  #cube-latest{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }

  /* ---- CUBES: turn into flat cards (no 3D, no rotate) ---- */
  .cube-block{
    position: relative !important;
    animation: none !important;
    transform: none !important;
    transform-style: flat !important;
    will-change: auto !important;
  }

  .cube-wrap,
  .cube{
    animation: none !important;
    transform: none !important;
    transform-style: flat !important;
    perspective: none !important;
  }

  /* show ONLY the front face as a flat image */
  .cube-block .face{ 
    display: none !important;
    transform: none !important;
  }
  .cube-block .face.f1{
    display: block !important;
    width: min(86vw, 340px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  /* label stays as normal text under card */
  .cube-tag{
    position: relative !important;
    margin-top: 12px !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* ---- MENU HUB: force visible on mobile (your CSS hides it) ---- */
  .radial-hub-btn{
    display: flex !important;
  }

  /* ---- MENU: vertical circles + labels (CSS-only) ---- */
  /* make each fan button look like a clean vertical circle row */
}

/* === MOBILE CLEANUP: hide left rail + move menu + smaller cards === */
@media (max-width: 900px){

  /* 1) REMOVE LEFT SOCIAL RAIL ON MOBILE */

  /* give app full width */
  main.app-shell{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* 2) MENU LIST: KEEP IT OFF THE CARDS */
  /* 3) HOME CARDS SMALLER */
  .cube-block .face.f1{
    width: min(78vw, 300px) !important;
    border-radius: 16px !important;
  }

  /* extra spacing */
  .home-cube-stage.home-cube-3{
    gap: 48px !important;
  }
}

/* === MOBILE: RESTORE HEADER (OUTLXW + SOCIALS) === */
@media (max-width: 900px){

  .header-inner{
    width: 100% !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 14px !important;
  }

  /* keep brand */
  .brand{ display: flex !important; align-items: center !important; gap: 10px !important; }
  .brand-logo{ display: inline-block !important; }

  /* keep socials hub button only */
  .header-bottom{ display: flex !important; }
  #social-toggle .social-stack{ display: none !important; } /* no left rail stack on mobile */
  #social-hub-btn{ display: inline-flex !important; }

  /* full width content */
  main.app-shell{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* MOBILE: menu becomes vertical list (no fan arc) */
@media (max-width: 900px){

  /* menu container bottom-right */
  /* hard-disable fan transforms */

  /* label beside each circle */
}

/* =========================================================
   FEATURED — Controls layout (Prev • Play • Next)
   - Play centered
   - Prev left / Next right
   - Hover glow pulse
   - Control vertical position via --ff-controls-bottom
   ========================================================= */

:root{
  --ff-controls-bottom: 90px; /* move LOWER by decreasing, move UP by increasing */
}

/* If your Featured stage uses these classes */
.ff-stage{ position: relative; }

.ff-controls{
  position: absolute;
  left: 50%;
  bottom: var(--ff-controls-bottom);
  transform: translateX(-50%);
  width: min(520px, 82vw);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  z-index: 6;
  pointer-events: auto;
}

.ff-controls > :first-child{ justify-self: start; }
.ff-controls > :last-child{ justify-self: end; }
.ff-controls > :nth-child(2){ justify-self: center; }

/* Prev/Next buttons */
.ff-btn{
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(232,247,245,0.14);
  background: rgba(0,0,0,0.18);
  color: inherit;
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast);
}

.ff-btn:hover{
  border-color: var(--accent-strong);
  box-shadow: 0 0 10px rgba(var(--spot-rgb), 0.55);
  animation: navNeonPulse 1.4s ease-in-out infinite;
  transform: translateY(-1px);
}

/* Center play button (supports .ff-play-btn OR middle child) */
.ff-play-btn,
.ff-controls > :nth-child(2){
  border-radius: 999px;
  border: 1px solid rgba(232,247,245,0.14);
}

.ff-play-btn,
.ff-controls > :nth-child(2):not(.ff-btn){
  padding: 12px 34px;
  background: radial-gradient(circle at 30% 20%, var(--accent-strong), var(--accent));
  color: rgb(var(--panel-rgb));
  letter-spacing: 0.08em;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(var(--spot-rgb), 0.35);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

.ff-play-btn:hover,
.ff-controls > :nth-child(2):not(.ff-btn):hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 0 18px rgba(var(--spot-rgb), 0.55), 0 0 34px rgba(var(--spot-rgb), 0.22);
  animation: navNeonPulse 1.4s ease-in-out infinite;
  filter: brightness(1.05);
}

/* Mobile: keep controls reachable above player */
@media (max-width: 520px){
  :root{ --ff-controls-bottom: 78px; }
  .ff-controls{ width: min(92vw, 520px); }
  .ff-btn{ padding: 9px 14px; }
  .ff-play-btn,
  .ff-controls > :nth-child(2):not(.ff-btn){ padding: 11px 26px; }
}

/* ABOUT OVERRIDE — kill teal backgrounds, keep black glass + mode accent */

.about,
.about-page,
.page-about {
  background: transparent !important;
}

.about::before,
.about::after,
.about-page::before,
.about-page::after,
.page-about::before,
.page-about::after {
  background: transparent !important;
}

.about .card,
.about .panel,
.about .hero {
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.55) !important;
  border-radius: 26px !important;
}

.about .btn,
.about button {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.about .btn.primary {
  background: var(--accent) !important;
  color: #000 !important;
}