/* ============================================================
   U.N.D Industries — Global Stylesheet
   Brand: U.N.D Industries (Universal Network Development Industries)
   Artist: UND Tyzen
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700;800&display=swap');

/* The HTML `hidden` attribute must always win. Any class that sets `display` (e.g. .form-notice { display: flex })
   otherwise overrides it, and the element shows while the script believes it is hidden. That is how the contact page
   showed "Form temporarily offline" on every load while the form worked (fixed 2026-10-04). */
[hidden] { display: none !important; }

:root {
  /* ── UND corporate palette: black · white · silver · royal purple ── */
  --bg:            #050506;   /* near-pure black, corporate */
  --bg-alt:        #0a0a0d;
  --bg-card:       rgba(255,255,255,0.03);
  --bg-card-hover: rgba(255,255,255,0.06);
  --border:        rgba(255,255,255,0.08);
  --border-accent: rgba(124,58,237,0.4);

  /* Royal purple accent (matches the UND emblem circuit traces) */
  --accent:        #7c3aed;
  --accent-deep:   #5b21b6;   /* deep royal purple for gradients/depth */
  --accent-light:  #a78bfa;
  --accent-glow:   rgba(124,58,237,0.25);

  /* Silver — replaces the old cyan as the secondary metallic tone */
  --silver:        #c4c9d4;
  --silver-light:  #e8eaf0;
  --silver-dark:   #8a909e;
  --silver-grad:   linear-gradient(135deg, #e8eaf0 0%, #b9bfca 45%, #8a909e 100%);
  --cyan:          #c4c9d4;   /* legacy alias → silver (retires cyan) */

  --text:          #f8fafc;
  --text-muted:    #64748b;
  --text-dim:      #64748b;   /* alias of --text-muted; used by register.html app-code label */
  --text-soft:     #94a3b8;

  --success:       #10b981;
  --danger:        #ef4444;
  --warning:       #f59e0b;

  --surface:       rgba(255,255,255,0.04);
  --surface-2:     rgba(255,255,255,0.06);   /* elevated surface; used by academy-student.html cards */

  --radius:        12px;
  --radius-sm:     8px;
  --radius-lg:     20px;
  --radius-full:   9999px;

  --shadow:        0 4px 24px rgba(0,0,0,0.4);
  --shadow-lg:     0 8px 48px rgba(0,0,0,0.6);
  --glow:          0 0 40px var(--accent-glow);

  --font-head:     'Space Grotesk', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --nav-h:         72px;
  --container:     1200px;
  --transition:    0.22s cubic-bezier(0.4,0,0.2,1);
}

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

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: clamp(1rem, calc(0.7725rem + 0.303vw), 1.5rem);
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.6;
  overflow-x: clip;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-tap-highlight-color: transparent;
}

img, video { max-width: 100%; height: auto; display: block; }
a          { color: inherit; text-decoration: none; touch-action: manipulation; }
ul         { list-style: none; }
button     { font-family: var(--font-body); cursor: pointer; border: none; background: none; touch-action: manipulation; }

input, textarea, select {
  font-family: var(--font-body);
  font-size: max(16px, 1rem);
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  color-scheme: dark;
  touch-action: manipulation;
}

select option, select optgroup {
  background-color: #12121c !important;
  color: #f8fafc !important;
}

select optgroup {
  color: #a78bfa !important;
  font-weight: 700 !important;
  background-color: #08080f !important;
}

/* ── Typography ── */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); line-height: 1.15; font-weight: 700; }
h1 { font-size: clamp(2.4rem,6vw,4.5rem);   letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem,4vw,3rem);     letter-spacing: -0.02em; }
h3 { font-size: clamp(1.2rem,2.5vw,1.75rem); }
h4 { font-size: 1.125rem; font-weight: 600; }
p  { color: var(--text-soft); line-height: 1.75; }

/* ── Layout ── */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section    { padding: 96px 0; }
.section-sm { padding: 64px 0; }

.section-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 12px;
}

/* ── Navigation ── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  background: rgba(4,4,15,0.85);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--transition);
}

.nav.scrolled { box-shadow: 0 4px 32px rgba(0,0,0,0.5); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.nav-logo {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text);
  white-space: nowrap;
}
.nav-logo span { color: var(--accent-light); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-soft);
  transition: color var(--transition);
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 9999px;
  background: rgba(57, 255, 157, 0.15);
  color: #39ff9d;
  border: 1px solid rgba(57, 255, 157, 0.35);
  margin-left: 5px;
  vertical-align: middle;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  transition: all var(--transition);
}

/* Modular Badge Color Variants */
.nav-badge.soon,
.nav-badge-soon {
  background: rgba(0, 229, 255, 0.12);
  color: #00e5ff;
  border-color: rgba(0, 229, 255, 0.35);
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.15);
}

.nav-badge.hiring,
.nav-badge-hiring {
  background: rgba(57, 255, 157, 0.15);
  color: #39ff9d;
  border-color: rgba(57, 255, 157, 0.35);
  box-shadow: 0 0 6px rgba(57, 255, 157, 0.15);
}

.nav-badge.new,
.nav-badge-new {
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
  border-color: rgba(167, 139, 250, 0.35);
  box-shadow: 0 0 6px rgba(167, 139, 250, 0.15);
}

.nav-badge.beta,
.nav-badge-beta {
  background: rgba(255, 184, 0, 0.15);
  color: #ffb800;
  border-color: rgba(255, 184, 0, 0.35);
  box-shadow: 0 0 6px rgba(255, 184, 0, 0.15);
}

.nav-badge.hot,
.nav-badge-hot {
  background: rgba(255, 99, 132, 0.15);
  color: #ff6384;
  border-color: rgba(255, 99, 132, 0.35);
  box-shadow: 0 0 6px rgba(255, 99, 132, 0.15);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--accent-light);
  border-radius: var(--radius-full);
  transition: width var(--transition);
}

.nav-links a:hover,
.nav-links a.active { color: var(--text); }

.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

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

/* Login/Sign Up links live in the mobile menu only — hidden on desktop */
.nav-mobile-auth { display: none; }

/* Brand logos are now clickable links to home — keep them looking like text */
.auth-logo, .sidebar-logo, .dash-mobile-logo {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}
.auth-logo:hover, .sidebar-logo:hover, .dash-mobile-logo:hover { opacity: 0.85; }

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 36px; height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.nav-hamburger:hover { background: var(--bg-card-hover); }

.hamburger-line {
  display: block;
  width: 20px; height: 2px;
  background: var(--text);
  border-radius: var(--radius-full);
  transition: transform 0.28s ease, opacity 0.18s ease;
  transform-origin: center;
}

.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all var(--transition);
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 20px var(--accent-glow);
}
.btn-primary:hover {
  background: #6d28d9;
  box-shadow: 0 6px 32px rgba(124,58,237,0.45);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--accent-light);
  border: 1px solid var(--border-accent);
}
.btn-outline:hover {
  background: var(--accent-glow);
  transform: translateY(-1px);
}

.btn-sm  { padding: 8px 20px;  font-size: 0.8rem; }
.btn-lg  { padding: 16px 40px; font-size: 1rem; }

/* ── Cards ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transition: all var(--transition);
}
.card:hover {
  background: var(--bg-card-hover);
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.card-accent {
  border-color: var(--border-accent);
  box-shadow: 0 0 40px var(--accent-glow);
}

/* ── Hero ── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 800px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-accent);
  background: var(--accent-glow);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-light);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.hero-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-light);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.75); }
}

.hero h1 { margin-bottom: 24px; }
.hero h1 .accent { color: var(--accent-light); }
.accent           { color: var(--accent-light); }
.hero-desc        { max-width: 520px; margin-top: 20px; }

.hero-sub {
  font-size: clamp(1rem,2vw,1.25rem);
  color: var(--text-soft);
  max-width: 560px;
  margin-bottom: 40px;
}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── Pillars ── */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}

.pillar-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transition: all var(--transition);
}
.pillar-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-accent);
  transform: translateY(-4px);
  box-shadow: var(--glow);
}

.pillar-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: var(--accent-glow);
  border: 1px solid var(--border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 20px;
}

.pillar-card h3 { margin-bottom: 12px; }
.pillar-card p  { font-size: 0.9rem; }

/* ── Platform links ── */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 16px;
}

.platform-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-soft);
  transition: all var(--transition);
}
.platform-link:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-accent);
  color: var(--text);
  transform: translateY(-2px);
  box-shadow: var(--glow);
}

/* ── Embed ── */
.embed-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.embed-card iframe { display: block; width: 100%; }

/* ── Section header ── */
.section-header { margin-bottom: 56px; }
.section-header h2 { margin-bottom: 16px; }
.section-header p  { max-width: 560px; font-size: 1.05rem; }

/* ── Contact ── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

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

.contact-item { display: flex; align-items: flex-start; gap: 16px; }

.contact-icon {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: var(--radius-sm);
  background: var(--accent-glow);
  border: 1px solid var(--border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.contact-item h4 { margin-bottom: 4px; font-size: 0.875rem; color: var(--text-soft); }
.contact-item a,
.contact-item p  { font-size: 0.95rem; color: var(--text); }
.contact-item a:hover { color: var(--accent-light); }

/* ── Forms ── */
.form { display: flex; flex-direction: column; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }

.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  text-transform: uppercase;
}

.form-input {
  width: 100%;
  padding: 14px 18px;
  background: #0e0e16;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.95rem;
  color-scheme: dark;
  transition: border-color var(--transition), background var(--transition);
}
.form-input:focus {
  border-color: var(--accent);
  background: rgba(124,58,237,0.06);
  outline: none;
}
.form-input::placeholder { color: var(--text-muted); }
textarea.form-input { min-height: 140px; resize: vertical; }

select.form-input {
  background-color: #0e0e16 !important;
  color: #f8fafc !important;
  color-scheme: dark !important;
  cursor: pointer;
}
select.form-input option, select.form-input optgroup {
  background-color: #12121c !important;
  color: #f8fafc !important;
}

/* ── Auth ── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  background: var(--bg);
  position: relative;
}
.auth-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(124,58,237,0.1) 0%, transparent 60%);
  pointer-events: none;
}

.auth-box {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  box-shadow: var(--shadow-lg);
}

.auth-logo {
  text-align: center;
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 32px;
}
.auth-logo span { color: var(--accent-light); }

.auth-title  { font-family: var(--font-head); font-size: 1.75rem; font-weight: 700; margin-bottom: 8px; }
.auth-sub    { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 32px; }

.auth-footer-text {
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 24px;
}
.auth-footer-text a { color: var(--accent-light); font-weight: 500; }
.auth-footer-text a:hover { text-decoration: underline; }

.auth-alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  display: none;
  margin-bottom: 16px;
}
.auth-alert.error   { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5; }
.auth-alert.success { background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3); color: #6ee7b7; }
.auth-alert.visible { display: block; }

/* ── Dashboard ── */
.dashboard-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--bg-alt);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-logo {
  padding: 24px 24px 16px;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.sidebar-logo span { color: var(--accent-light); }

.sidebar-nav {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all var(--transition);
}
.sidebar-link:hover { background: var(--bg-card-hover); color: var(--text); }
.sidebar-link.active {
  background: var(--accent-glow);
  color: var(--accent-light);
  border: 1px solid var(--border-accent);
}

.sidebar-link-icon { font-size: 1rem; width: 20px; text-align: center; }

.sidebar-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 16px 16px 8px;
}

.sidebar-footer { padding: 16px; border-top: 1px solid var(--border); }

.dashboard-main { background: var(--bg); overflow-y: auto; }

.dashboard-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  border-bottom: 1px solid var(--border);
  background: rgba(4,4,15,0.8);
  position: sticky;
  top: 0;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 10;
}

.dashboard-topbar-title { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; }

.dashboard-content { padding: 40px 32px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: all var(--transition);
}
.stat-card:hover { background: var(--bg-card-hover); transform: translateY(-2px); }

.stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.stat-value { font-family: var(--font-head); font-size: 2rem; font-weight: 800; color: var(--text); }
.stat-sub   { font-size: 0.8rem; color: var(--success); margin-top: 4px; }

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Studio Panel */
.studio-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--glow);
}

.studio-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.studio-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent-light);
  animation: pulse-dot 2s ease-in-out infinite;
}

.studio-status-badge {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--accent-glow);
  color: var(--accent-light);
  border: 1px solid var(--border-accent);
}

/* ── Footer ── */
.footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: 48px 0 32px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 40px;
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-brand { font-family: var(--font-head); font-size: 1.15rem; font-weight: 800; }
.footer-brand span { color: var(--accent-light); }

.footer-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.65; max-width: 320px; margin: 0; }

.footer-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(57, 255, 157, 0.08);
  border: 1px solid rgba(57, 255, 157, 0.2);
  color: var(--success);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  width: fit-content;
  margin-top: 6px;
}

.footer-status-dot {
  width: 6px;
  height: 6px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--success);
}

.footer-col h4 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 16px;
}

.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 0.875rem; color: var(--text-muted); transition: color var(--transition); }
.footer-links a:hover { color: var(--text); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copy { font-size: 0.8rem; color: var(--text-muted); }

/* ── Misc ── */
.divider {
  width: 48px; height: 3px;
  background: var(--accent);
  border-radius: var(--radius-full);
  margin: 16px 0 0;
}

.status-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  color: var(--warning);
}

.not-found {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  gap: 16px;
}
.not-found-code {
  font-family: var(--font-head);
  font-size: clamp(6rem,20vw,12rem);
  font-weight: 800;
  color: var(--accent);
  opacity: 0.2;
  line-height: 1;
  letter-spacing: -8px;
}

.pt-nav { padding-top: var(--nav-h); }
.mt-8   { margin-top: 8px; }
.mt-12  { margin-top: 12px; }
.mt-16  { margin-top: 16px; }
.mt-20  { margin-top: 20px; }
.mt-24  { margin-top: 24px; }
.mt-32  { margin-top: 32px; }
.mb-8   { margin-bottom: 8px; }
.mb-12  { margin-bottom: 12px; }
.mb-16  { margin-bottom: 16px; }
.mb-20  { margin-bottom: 20px; }
.mb-24  { margin-bottom: 24px; }
.mb-32  { margin-bottom: 32px; }

/* ── Auth footer utilities ───────────────────────────────── */
.auth-footer-legal { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.auth-link-muted   { color: var(--text-muted); font-size: 0.85rem; font-weight: 400; }

/* ── Music page physical card ────────────────────────────── */
.card-physical { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.card-physical h3 { margin-bottom: 8px; }
.card-physical p  { font-size: 0.9rem; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .pillars-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid    { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }

  .nav-links    { display: none; }
  .nav-hamburger{ display: flex; }
  .nav-cta      { display: none; }

  .nav-links.mobile-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: rgba(4,4,15,0.98);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 16px 0 24px;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    gap: 4px;
    z-index: 99;
  }

  .nav-links.mobile-open a        { padding: 12px 24px; border-radius: 0; }
  .nav-links.mobile-open a::after { display: none; }

  /* Login / Sign Up appear inside the mobile menu */
  .nav-links.mobile-open .nav-mobile-auth { display: block; }
  .nav-links.mobile-open .nav-mobile-auth:first-of-type {
    margin-top: 8px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
  }
  .nav-links.mobile-open .nav-mobile-auth a {
    font-weight: 600;
    color: var(--accent-light);
  }
  .nav-links.mobile-open .nav-mobile-auth:last-of-type a {
    display: inline-block;
    margin: 4px 24px 0;
    padding: 10px 20px;
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-full);
  }

  .hero-actions     { flex-direction: column; align-items: flex-start; }
  .pillars-grid     { grid-template-columns: 1fr; }
  .contact-grid     { grid-template-columns: 1fr; }
  .dashboard-layout { grid-template-columns: 1fr; }
  .sidebar          { display: none; }
  .dashboard-grid   { grid-template-columns: 1fr; }
  .stat-grid        { grid-template-columns: 1fr 1fr; }
  .footer-inner     { grid-template-columns: 1fr; }
  .footer-bottom    { flex-direction: column; text-align: center; }
  .auth-box         { padding: 36px 24px; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
  .hero h1   { font-size: 2.2rem; }
}

/* ── Hero two-column layout ─────────────────────────────── */
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* override the default max-width when inside the new grid */
.hero-inner .hero-content { max-width: none; }

.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-visual svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  filter: drop-shadow(0 0 56px rgba(124,58,237,0.28));
}

/* ── Hero entrance animation ────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-animate {
  opacity: 0;
  animation: fadeUp 0.65s cubic-bezier(0.4,0,0.2,1) both;
  animation-delay: var(--delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .hero-animate { animation: none; opacity: 1; }
}

/* ── Scroll-reveal system (progressive enhancement) ─────────
   Content is fully visible by default. JS adds `.reveal-on` to <html>
   before paint, so ONLY with JS enabled does the hidden initial state
   apply — no-JS users and search/ad crawlers always see full content.
   Opt in with data-reveal on any element; stagger a set of siblings by
   wrapping them in a container with data-reveal-group="<ms-per-item>". */
.reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal-on [data-reveal="left"]  { transform: translateX(-36px); }
.reveal-on [data-reveal="right"] { transform: translateX(36px); }
.reveal-on [data-reveal="scale"] { transform: scale(0.95); }
.reveal-on [data-reveal="fade"]  { transform: none; }
.reveal-on [data-reveal].in-view {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── SVG pillar icons ───────────────────────────────────── */
.pillar-icon { color: var(--accent-light); }
.pillar-icon svg { width: 24px; height: 24px; display: block; }

/* ── Active nav underline glow ──────────────────────────── */
.nav-links a.active::after { box-shadow: 0 0 8px rgba(167,139,250,0.45); }

/* ── About studio two-column grid ───────────────────────── */
.about-studio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* ── Dashboard mobile bar ───────────────────────────────── */
.dash-mobile-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.dash-mobile-logo {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}
.dash-mobile-logo span { color: var(--accent-light); }

/* ── Contact form notice ────────────────────────────────── */
.form-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(245,158,11,0.07);
  border: 1px solid rgba(245,158,11,0.22);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  font-size: 0.85rem;
  color: var(--text-soft);
  line-height: 1.65;
}
.form-notice svg {
  width: 18px; height: 18px; min-width: 18px;
  color: var(--warning);
  margin-top: 1px;
}
.form-notice a {
  color: var(--accent-light);
  font-weight: 500;
}
.form-notice a:hover { text-decoration: underline; }

/* ── Responsive additions ───────────────────────────────── */
@media (max-width: 1024px) {
  .hero-inner        { grid-template-columns: 1fr; gap: 0; }
  .hero-visual       { display: none; }
  .about-studio-grid { gap: 40px; }
}

@media (max-width: 768px) {
  .about-studio-grid { grid-template-columns: 1fr; gap: 32px; }
  .dash-mobile-bar   { display: flex; }
}

/* ── Privacy Policy page ────────────────────────────────── */
.privacy-body {
  max-width: 760px;
}

.privacy-section {
  margin-bottom: 48px;
}

.privacy-section:last-child { margin-bottom: 0; }

.privacy-section > p { margin-bottom: 16px; }
.privacy-section > p:last-child { margin-bottom: 0; }
.privacy-section > ul + p,
.privacy-section > ol + p { margin-top: 16px; }

.privacy-body code {
  font-size: 0.85rem;
  color: var(--accent-light);
  background: rgba(124,58,237,0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ── Legal page hero helpers ─────────────────────────────── */
.legal-title { max-width: 700px; }
.legal-date  { max-width: 600px; margin-top: 20px; color: var(--text-muted); font-size: 0.95rem; }

/* ── Text utilities ───────────────────────────────────────── */
.text-strong { color: var(--text); font-weight: 600; }

.privacy-heading {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.privacy-list {
  list-style: disc;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.privacy-list li {
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.7;
}

.privacy-warning {
  padding: 28px 32px;
  background: rgba(239,68,68,0.05);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: var(--radius);
}

.privacy-contact-link {
  display: inline-block;
  color: var(--accent-light);
  font-weight: 600;
  font-size: 1rem;
  transition: color var(--transition);
}
.privacy-contact-link:hover { color: var(--text); }

/* ── Footer legal link ──────────────────────────────────── */
a.footer-copy,
.footer-legal-link {
  color: var(--text-muted);
  font-size: 0.8rem;
  transition: color var(--transition);
}
a.footer-copy:hover,
.footer-legal-link:hover { color: var(--text-soft); }

/* ── Dashboard legal footer (public + mobile) ───────────── */
.dash-legal-footer {
  padding: 16px 32px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.dash-legal-footer a {
  color: var(--text-muted);
  transition: color var(--transition);
}
.dash-legal-footer a:hover { color: var(--text-soft); }

/* ── Auth offline banner ────────────────────────────────── */
.auth-offline-banner {
  padding: 10px 14px;
  background: rgba(245,158,11,0.07);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}
.auth-offline-banner strong {
  color: var(--warning);
  font-weight: 600;
}

/* ── Auth alert — offline variant ───────────────────────── */
.auth-alert.offline { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3); color: #fcd34d; }

/* ── Role badge ─────────────────────────────────────────── */
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 8px;
}
.role-badge-owner  { background: rgba(168,85,247,0.15); border: 1px solid rgba(168,85,247,0.35); color: var(--accent-light); }
.role-badge-member { background: rgba(100,116,139,0.12); border: 1px solid rgba(100,116,139,0.25); color: var(--text-muted); }

/* ── Backend status indicator ───────────────────────────── */
.backend-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 8px 12px;
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.18);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.backend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); flex-shrink: 0; }
.backend-dot.online { background: #10b981; }

.backend-status.online {
  background: rgba(16,185,129,0.06);
  border-color: rgba(16,185,129,0.2);
  color: #6ee7b7;
}

/* ── Profile edit section ───────────────────────────────── */
.profile-edit-wrap { padding: 0 32px 32px; }
.profile-edit-wrap .card h4 { margin-bottom: 8px; }
.profile-edit-wrap .card p  { font-size: 0.875rem; margin-bottom: 16px; }

/* ── Admin inbox placeholder ────────────────────────────── */
.inbox-placeholder {
  padding: 28px 20px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 16px;
  line-height: 1.6;
}

/* ── Contact inbox (owner dashboard) ───────────────────── */
.inbox-list { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.inbox-message { padding: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.inbox-message-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.inbox-message-from { font-weight: 600; font-size: 0.875rem; color: var(--text); }
.inbox-message-email { font-size: 0.8rem; color: var(--text-muted); }
.inbox-message-date { font-size: 0.75rem; color: var(--text-muted); margin-left: auto; }
.inbox-message-subject { font-size: 0.875rem; font-weight: 600; color: var(--text-soft); margin-bottom: 8px; }
.inbox-message-body { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; white-space: pre-wrap; }
.inbox-empty { font-size: 0.875rem; color: var(--text-muted); text-align: center; padding: 16px 0; }

/* ── Auth Terms Checkbox ────────────────────────────────── */
.auth-terms-check {
  margin: 14px 0 20px 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.auth-terms-check label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
.auth-terms-check a {
  color: var(--accent);
  text-decoration: underline;
}
.auth-terms-check input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.1);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Contact form sensitive data warning ────────────────── */
.form-sensitive-warning {
  font-size: 0.8rem;
  color: var(--text-muted);
  background: rgba(239,68,68,0.07);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  line-height: 1.6;
  margin-top: 16px;
  margin-bottom: 12px;
}
.form-demo-note {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ── Footer legal row ───────────────────────────────────── */
.footer-legal-row {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Auth switch (cross-link between login / register) ──── */
.auth-switch {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.auth-switch a {
  color: var(--accent);
  text-decoration: underline;
}

/* ── Brand token extensions ──────────────────────────────── */
:root {
  --accent-light:  #a855f7;
  --accent-cyan:   #c4c9d4;   /* retired cyan → silver */
  --bg:            #0b0b10;
  --bg-elevated:   #111827;
  --error:         #ef4444;
  --radius-md:     10px;
  --warning:       #f97316;
}

/* ── Auth loading state (prevents flash of protected content) */
body.auth-loading .dashboard-layout,
body.auth-loading .auth-page { opacity: 0; }

/* ── Hero grid (music-focused layout) ────────────────────── */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  min-height: calc(100vh - var(--nav-h));
  padding: 80px 0;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; padding: 60px 0 40px; }
}

.hero-title { font-size: clamp(2.4rem,6vw,4rem); margin-bottom: 24px; }

/* ── Now Playing card ────────────────────────────────────── */
.hero-now-playing {
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--glow);
}

.now-playing-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 24px;
}

.now-playing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-light);
  animation: pulse-dot 2s ease-in-out infinite;
}

.now-playing-track {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.now-playing-art {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  overflow: hidden;
}

.now-playing-art svg { width: 100%; height: 100%; display: block; }

.now-playing-meta { flex: 1; min-width: 0; }

.now-playing-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.now-playing-artist { font-size: 0.85rem; color: var(--text-muted); }

/* ── Platform pills ──────────────────────────────────────── */
.platform-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.platform-pill {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 500;
  background: rgba(124,58,237,0.12);
  border: 1px solid rgba(124,58,237,0.3);
  color: var(--accent-light);
  transition: background var(--transition), border-color var(--transition);
}

.platform-pill:hover {
  background: rgba(124,58,237,0.22);
  border-color: var(--accent);
}

/* ── Featured release block ──────────────────────────────── */
.featured-release { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.featured-release-info { flex: 1; min-width: 260px; }

/* ── Music grid ──────────────────────────────────────────── */
.music-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.music-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}

.music-card:hover { border-color: var(--border-accent); transform: translateY(-2px); }

.music-card-art { aspect-ratio: 1; overflow: hidden; }
.music-card-art svg { width: 100%; height: 100%; display: block; }
.music-card-body { padding: 20px; }

.music-card-type {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 6px;
}

.music-card-title {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0;
}

/* ── Dashboard utilities ─────────────────────────────────── */
.btn-full { width: 100%; }
.sidebar-privacy { margin-top: 14px; font-size: 0.75rem; text-align: center; }
.sidebar-privacy a { color: var(--text-muted); transition: color var(--transition); }
.topbar-brand { font-size: 0.8rem; color: var(--text-muted); }
.stat-value-live { font-size: 1.25rem; color: var(--success); }
.stat-value-accent { font-size: 1.1rem; color: var(--accent-light); }
.quick-links { display: flex; flex-direction: column; gap: 10px; }
.studio-open-btn { width: fit-content; }
.platform-link-start { justify-content: flex-start; gap: 12px; }

/* ── Hero animation delay helpers ───────────────────────── */
.hero-delay-0 { --delay: 0s; }
.hero-delay-1 { --delay: 0.1s; }
.hero-delay-2 { --delay: 0.22s; }
.hero-delay-3 { --delay: 0.34s; }
.hero-delay-4 { --delay: 0.46s; }

/* ── CTA section ─────────────────────────────────────────── */
.card-cta { text-align: center; padding: 56px 40px; }
.cta-heading { margin-bottom: 16px; color: var(--text); }
.cta-desc { max-width: 480px; margin: 0 auto 32px; }

/* ── Utility ─────────────────────────────────────────────── */
.btn-fit { width: fit-content; }

/* ── Admin panel ─────────────────────────────────────────── */
.admin-panel-wrap { padding: 0 32px 32px; }
.admin-panel-wrap .card h4 { margin-bottom: 8px; }
.admin-panel-wrap .card p  { font-size: 0.875rem; }
.admin-panel-wrap .card a  { color: var(--accent-light); }

/* ── Typography utilities ───────────────────────────────── */
.text-center { text-align: center; }
.text-sm     { font-size: 0.875rem; }

/* ── About page ─────────────────────────────────────────── */
.about-hero-desc    { max-width: 600px; margin-top: 24px; font-size: 1.05rem; }
.about-pillar-stack { display: flex; flex-direction: column; gap: 20px; }
.about-stripe       { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.about-quote-wrap   { max-width: 640px; }
.about-cta-wrap     { max-width: 720px; margin: 0 auto; text-align: center; }
.about-cta-desc     { font-size: 1.1rem; color: var(--text-soft); }

/* ── 404 page ────────────────────────────────────────────── */
.notfound-title   { font-size: 1.75rem; }
.notfound-desc    { max-width: 380px; text-align: center; }
.notfound-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.notfound-back    { font-size: 0.75rem; color: var(--text-muted); margin-top: 24px; transition: color var(--transition); }
.notfound-back:hover { color: var(--text-soft); }

/* ── Contact page ────────────────────────────────────────── */
.contact-platforms-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 16px;
}
.contact-platforms-list { display: flex; flex-direction: column; gap: 10px; }

/* ── Studio panel card headers ───────────────────────────── */
.studio-card-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.studio-panel-md { max-width: 640px; }

/* ── Music page ──────────────────────────────────────────── */
.music-catalog-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 24px; }

/* ── Legal page inline links ─────────────────────────────── */
.privacy-body a { color: var(--accent-light); transition: color var(--transition); }

/* ── Settings mode toggle ────────────────────────────────── */
.settings-mode-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 540px) {
  .settings-mode-wrap { grid-template-columns: 1fr; }
}
.settings-mode-btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition), background var(--transition);
}
.settings-mode-btn:hover {
  border-color: var(--accent);
}
.settings-mode-btn.active {
  border-color: var(--accent);
  background: rgba(168, 85, 247, 0.08);
}
.settings-mode-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}
.settings-mode-btn.active .settings-mode-label {
  color: var(--accent-light);
}
.settings-mode-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.settings-mode-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.settings-mode-note a { color: var(--accent-light); }

/* ── Chat panel ──────────────────────────────────────────── */
/* ── Community Chat — redesigned ─────────────────────────── */
.chat-shell {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-shell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.chat-shell-title { display: flex; align-items: center; gap: 8px; }
.chat-shell-title h4 { margin: 0; font-size: 0.95rem; }
.chat-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(16,185,129,0.5);
  animation: chatPulse 2s infinite;
}
@keyframes chatPulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

.chat-messages {
  min-height: 280px;
  max-height: 46vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  scroll-behavior: smooth;
}

.chat-day-sep {
  text-align: center;
  margin: 6px 0;
}
.chat-day-sep span {
  font-size: 0.68rem;
  color: var(--text-muted);
  background: var(--bg-alt);
  padding: 2px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
}

.chat-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 82%;
}
.chat-row-own { margin-left: auto; flex-direction: row-reverse; }

.chat-avatar {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: #fff;
}

.chat-bubble-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chat-row-own .chat-bubble-wrap { align-items: flex-end; }

.chat-bubble-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-light);
  padding-left: 4px;
}
.chat-bubble {
  background: var(--bg-elevated, #1a1a22);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
  padding: 8px 12px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.chat-row-own .chat-bubble {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-color: transparent;
  border-radius: 14px 14px 4px 14px;
  color: #fff;
}
.chat-bubble-text { white-space: pre-wrap; }
.chat-gif {
  max-width: 220px;
  max-height: 220px;
  border-radius: 10px;
  display: block;
}
.chat-bubble-time {
  font-size: 0.66rem;
  color: var(--text-muted);
  padding: 0 4px;
}

.chat-empty {
  margin: auto;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
}
.chat-empty-icon { font-size: 2rem; display: block; margin-bottom: 8px; opacity: 0.6; }

.chat-alert-inline { margin: 0 16px; }

/* Composer */
.chat-form {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.chat-input {
  flex: 1;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 10px 16px;
  outline: none;
  transition: border-color var(--transition);
}
.chat-input:focus { border-color: var(--accent); }
.chat-input::placeholder { color: var(--text-muted); }

.chat-icon-btn {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text-soft);
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.chat-icon-btn:hover { border-color: var(--accent); color: var(--accent-light); }
#chat-gif-btn { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.5px; }

.chat-send-btn {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition);
}
.chat-send-btn:hover { background: var(--accent-deep); transform: scale(1.05); }

/* Emoji panel */
.chat-emoji-panel {
  position: absolute;
  bottom: 56px;
  left: 12px;
  width: 280px;
  max-height: 200px;
  overflow-y: auto;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  display: none;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  z-index: 50;
}
.chat-emoji-panel.open { display: grid; }
.chat-emoji {
  background: none; border: none; cursor: pointer;
  font-size: 1.25rem; padding: 4px; border-radius: 6px;
  transition: background var(--transition);
}
.chat-emoji:hover { background: var(--bg-card-hover); }

.chat-foot-note {
  font-size: 0.72rem;
  color: var(--text-muted);
  padding: 0 16px 12px;
  margin: 0;
}
.privacy-body a:hover { color: var(--text); }

/* ── Dashboard tab nav (mobile) ─────────────────────────── */
.dash-tab-nav {
  display: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.dash-tab-nav::-webkit-scrollbar { display: none; }

@media (max-width: 768px) {
  .dash-tab-nav { display: flex; }
}

.dash-tab-btn {
  flex-shrink: 0;
  padding: 12px 18px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.dash-tab-btn:hover { color: var(--text); }
.dash-tab-btn.active {
  color: var(--accent-light);
  border-bottom-color: var(--accent-light);
}

/* sidebar tab buttons */
button.sidebar-link {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}

/* ── Dashboard tab panels ───────────────────────────────── */
.dash-tab-content { padding: 32px 32px 40px; }
@media (max-width: 768px) {
  .dash-tab-content { padding: 20px 16px 32px; }
}

/* ── Topbar backend status (inline pill) ────────────────── */
.topbar-backend-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 4px 12px;
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.18);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.topbar-backend-status.online {
  background: rgba(16,185,129,0.06);
  border-color: rgba(16,185,129,0.2);
  color: #6ee7b7;
}

/* ── Account info grid ──────────────────────────────────── */
.account-info-grid {
  display: flex;
  flex-direction: column;
}
.account-info-item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.account-info-item:last-child { border-bottom: none; }
.account-info-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 88px;
  flex-shrink: 0;
}
.account-info-value {
  font-size: 0.9rem;
  color: var(--text-soft);
  word-break: break-all;
}

/* ── Chat notice banner ─────────────────────────────────── */
.chat-notice {
  font-size: 0.8rem;
  color: var(--text-muted);
  background: rgba(124,58,237,0.06);
  border: 1px solid rgba(124,58,237,0.15);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  margin-bottom: 16px;
  line-height: 1.5;
}

/* ── Owner Panel sections ────────────────────────────────── */
.owner-panel-section {
  margin-bottom: 40px;
}
.owner-panel-section:last-child { margin-bottom: 0; }

.owner-section-hd {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}
.owner-section-hd h4 { margin: 0; }

/* ── Owner chat moderation list ─────────────────────────── */
.owner-chat-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.owner-chat-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.owner-chat-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.owner-chat-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-light);
}
.owner-chat-time {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.owner-chat-body {
  font-size: 0.875rem;
  color: var(--text-soft);
  line-height: 1.5;
  word-break: break-word;
}
.btn-danger-sm {
  align-self: flex-start;
  margin-top: 4px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fca5a5;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.btn-danger-sm:hover {
  background: rgba(239,68,68,0.2);
  border-color: rgba(239,68,68,0.55);
}

/* ── Owner system status grid ───────────────────────────── */
.owner-status-grid {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: 12px;
}
.owner-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.owner-status-item:last-child { border-bottom: none; }
.owner-status-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.owner-status-val {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-soft);
}
.owner-status-val.status-ok  { color: var(--success); }
.owner-status-val.status-err { color: var(--error); }

/* ── Owner inline delete error ───────────────────────────── */
.owner-row-error {
  font-size: 0.8rem;
  color: var(--error);
  padding: 4px 16px 8px;
}

/* ── Owner Promo list ────────────────────────────────────── */
.owner-promo-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.owner-promo-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.owner-promo-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.owner-promo-loc {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-light);
}
.owner-promo-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}
.owner-promo-url {
  font-size: 0.78rem;
  color: var(--text-muted);
  word-break: break-all;
}
.owner-promo-order {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.owner-promo-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.owner-promo-toggle {
  padding: 4px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-accent);
  background: rgba(168,85,247,0.08);
  color: var(--accent-light);
  cursor: pointer;
  transition: background var(--transition);
}
.owner-promo-toggle:hover { background: rgba(168,85,247,0.16); }

/* ── Owner Feature Flags ─────────────────────────────────── */
.owner-flags-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: 12px;
}
.owner-flag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.owner-flag-row:last-child { border-bottom: none; }
.owner-flag-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.owner-flag-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}
.owner-flag-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.owner-flag-toggle {
  padding: 6px 20px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  min-width: 52px;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.owner-flag-toggle.flag-on {
  background: rgba(16,185,129,0.1);
  border-color: rgba(16,185,129,0.4);
  color: var(--success);
}
.owner-flag-toggle.flag-off {
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.3);
  color: var(--error);
}

/* ── Owner Announcements panel ───────────────────────────── */
.owner-ann-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.owner-ann-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.owner-ann-row.ann-inactive { opacity: 0.55; }
.owner-ann-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.owner-ann-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
}
.owner-ann-date {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.owner-ann-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}
.owner-ann-body {
  font-size: 0.875rem;
  color: var(--text-soft);
  line-height: 1.5;
  word-break: break-word;
}
.owner-ann-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

/* ── Member Announcements card ───────────────────────────── */
.ann-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ann-item {
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  background: rgba(124,58,237,0.05);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.ann-item-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.ann-item-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
}
.ann-item-date {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.ann-item-body {
  font-size: 0.85rem;
  color: var(--text-soft);
  line-height: 1.5;
  word-break: break-word;
}

/* ── Promo cards (public pages) ──────────────────────────── */
.promo-area {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.promo-card {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  background: rgba(124,58,237,0.08);
  border: 1px solid rgba(124,58,237,0.25);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-light);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.promo-card:hover {
  background: rgba(124,58,237,0.16);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* ============================================================
   Store — public storefront
   ============================================================ */

.store-main { padding-top: var(--nav-h); min-height: 100vh; }

.store-hero {
  padding: 48px 0 32px;
  background: linear-gradient(180deg, rgba(124,58,237,0.06) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
}
.store-hero-title {
  font-family: var(--font-head);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}
.store-hero-sub { color: var(--text-soft); font-size: 1.05rem; }

.store-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding-top: 32px;
  padding-bottom: 64px;
  align-items: start;
}
@media (max-width: 768px) {
  .store-layout { grid-template-columns: 1fr; }
  .store-sidebar, .store-cart { position: static; }
}

/* Sidebar */
.store-sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: calc(var(--nav-h) + 16px); }
.store-filter-group { display: flex; flex-direction: column; gap: 8px; }
.store-filter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.store-type-btns { display: flex; flex-direction: column; gap: 4px; }
.store-type-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 0.875rem;
  padding: 7px 12px;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition);
}
.store-type-btn:hover { background: var(--bg-card-hover); color: var(--text); }
.store-type-btn.active {
  background: rgba(124,58,237,0.15);
  border-color: var(--border-accent);
  color: var(--accent-light);
  font-weight: 600;
}

.store-subcat-filters,
.store-tag-filters { display: flex; flex-wrap: wrap; gap: 6px; }

.store-subcat-btn,
.store-tag-pill {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 0.75rem;
  padding: 4px 10px;
  cursor: pointer;
  transition: all var(--transition);
}
.store-subcat-btn:hover,
.store-tag-pill:hover { border-color: var(--accent-light); color: var(--accent-light); }
.store-subcat-btn.active,
.store-tag-pill.active {
  background: rgba(124,58,237,0.18);
  border-color: var(--accent);
  color: var(--accent-light);
  font-weight: 600;
}
.store-tag-display { cursor: default; }
.store-tag-display:hover { border-color: var(--border); color: var(--text-soft); }
.store-empty-filter { font-size: 0.8rem; color: var(--text-muted); }

/* Toolbar */
.store-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.store-search-wrap { flex: 1; min-width: 200px; }
.store-search-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.875rem;
  padding: 9px 14px;
  transition: border-color var(--transition);
  outline: none;
}
.store-search-input::placeholder { color: var(--text-muted); }
.store-search-input:focus { border-color: var(--accent); }
.store-count { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }

/* Product grid */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.store-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  padding: 48px 0;
}

/* Product card */
.store-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.store-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(124,58,237,0.12);
}
.store-card-cover {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.store-card-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: linear-gradient(135deg, rgba(124,58,237,0.1), rgba(6,182,212,0.05));
}
.store-card-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.store-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.store-card-title { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--text); margin: 0; }
.store-card-desc { font-size: 0.8rem; color: var(--text-soft); line-height: 1.5; flex: 1; }
.store-card-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.store-card-price { font-weight: 700; font-size: 0.9rem; color: var(--accent-light); }

/* Type badges */
.store-type-badge {
  display: inline-block;
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
}
.store-type-music    { background: rgba(6,182,212,0.15);   color: #06b6d4; border: 1px solid rgba(6,182,212,0.3); }
.store-type-game     { background: rgba(124,58,237,0.15);  color: #a78bfa; border: 1px solid rgba(124,58,237,0.3); }
.store-type-software { background: rgba(16,185,129,0.15);  color: #34d399; border: 1px solid rgba(16,185,129,0.3); }
.store-type-story    { background: rgba(245,158,11,0.15);  color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }

.store-cat-pill {
  display: inline-block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  color: var(--text-soft);
  padding: 2px 8px;
}

/* Product modal */
.store-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.store-modal[hidden] { display: none; }
.store-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
}
.store-modal-content {
  position: relative;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.store-modal-close {
  position: absolute;
  top: 12px; right: 14px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.store-modal-close:hover { color: var(--text); background: var(--bg-card-hover); }
.store-modal-body { padding: 24px; }
.store-modal-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  display: block;
}
.store-modal-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.store-modal-title {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
.store-modal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.store-modal-desc {
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 20px;
  white-space: pre-wrap;
}
.store-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.store-modal-price { font-size: 1.2rem; font-weight: 700; color: var(--accent-light); }

/* ── Owner panel — store additions ─────────────────────────── */

.owner-product-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  background: var(--bg-card);
  flex-wrap: wrap;
}
.owner-product-meta { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; }
.owner-product-title { font-weight: 600; font-size: 0.875rem; color: var(--text); flex: 1; min-width: 100px; }
.owner-product-price { font-size: 0.8rem; color: var(--accent-light); font-weight: 600; }
.owner-product-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.owner-pub-toggle {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all var(--transition);
}
.pub-published { background: rgba(16,185,129,0.15); color: #34d399; border-color: rgba(16,185,129,0.3); }
.pub-draft     { background: rgba(100,116,139,0.15); color: #94a3b8; border-color: rgba(100,116,139,0.3); }
.pub-published:hover { background: rgba(16,185,129,0.25); }
.pub-draft:hover     { background: rgba(100,116,139,0.25); }

.owner-product-list { display: flex; flex-direction: column; }

/* Product editor form grid */
.op-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 16px; }
.op-checkbox-group { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.op-cat-option,
.op-tag-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-soft);
  cursor: pointer;
  padding: 3px 0;
}
.op-cat-option input,
.op-tag-option input { accent-color: var(--accent); }
.form-label-hint { font-size: 0.7rem; font-weight: 400; color: var(--text-muted); }

/* Taxonomy grid & rows */
.op-taxonomy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .op-taxonomy-grid { grid-template-columns: 1fr; } }

.owner-tax-list { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; margin-bottom: 8px; }
.owner-tax-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-size: 0.8rem;
}
.owner-tax-label { flex: 1; color: var(--text-soft); font-weight: 500; }
.owner-tax-key   { font-family: monospace; font-size: 0.72rem; color: var(--text-muted); }


/* ============================================================
   Homepage — corporate UND rebrand
   ============================================================ */
.hero-corporate { text-align: center; }
.hero-corp-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-emblem {
  width: 160px; height: 160px;
  margin-bottom: 28px;
  filter: drop-shadow(0 8px 40px rgba(124,58,237,0.35));
}
.hero-corp-title { margin-bottom: 20px; }
.hero-corp-sub { max-width: 600px; margin: 0 auto 32px; }
.hero-corp-actions { justify-content: center; }

.pillars-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 960px) { .pillars-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pillars-grid-4 { grid-template-columns: 1fr; } }

.section-alt { background: linear-gradient(180deg, rgba(124,58,237,0.04), transparent); }

/* Services */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 820px) { .service-grid { grid-template-columns: 1fr; } }
.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  position: relative;
  transition: border-color var(--transition), transform var(--transition);
}
.service-card:hover { border-color: var(--border-accent); transform: translateY(-3px); }
.service-num {
  font-family: var(--font-head);
  font-size: 2.2rem; font-weight: 800;
  background: var(--silver-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block; margin-bottom: 12px;
}
.service-card h3 { margin-bottom: 8px; }
.service-card p { color: var(--text-soft); font-size: 0.92rem; line-height: 1.6; }
.service-cta { text-align: center; margin-top: 36px; }

/* 3D section */
.three-d-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 820px) { .three-d-grid { grid-template-columns: 1fr; gap: 32px; } }
.three-d-list { list-style: none; padding: 0; margin: 8px 0 0; }
.three-d-list li {
  padding: 8px 0 8px 28px;
  position: relative;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border);
}
.three-d-list li::before {
  content: "▸"; position: absolute; left: 6px;
  color: var(--accent-light);
}
.three-d-visual { display: flex; justify-content: center; }
.three-d-emblem {
  width: 100%; max-width: 320px;
  filter: drop-shadow(0 12px 60px rgba(124,58,237,0.4));
  animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* FAQ accordion (customer service) */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 18px;
}
.faq-item summary {
  cursor: pointer;
  padding: 14px 0;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent-light); font-size: 1.3rem; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { padding: 0 0 16px; color: var(--text-soft); font-size: 0.92rem; line-height: 1.6; }
.faq-item a { color: var(--accent-light); }

/* Customer-service support email */
.cta-email {
  font-family: var(--font-mono, monospace);
  font-size: 1rem;
  color: var(--accent-light);
  border-bottom: 1px solid var(--border-accent);
  padding-bottom: 2px;
}
.cta-email:hover { color: var(--text); }

/* Real UND logo in the hero — transparent PNG, full contrast, no box */
.hero-logo {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin-bottom: 12px;
  filter: drop-shadow(0 8px 50px rgba(124,58,237,0.35));
}
@media (max-width: 540px) { .hero-logo { max-width: 290px; } }

/* Flagship division card */
.pillar-card-flagship {
  position: relative;
  border-color: var(--border-accent);
  background: linear-gradient(160deg, rgba(124,58,237,0.10), var(--bg-card) 60%);
}
.pillar-flag {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-light);
  background: rgba(124,58,237,0.16);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-full);
  padding: 3px 10px;
}

/* Store product series / universe label */
.store-modal-series {
  font-size: 0.82rem;
  color: var(--text-soft);
  margin: -6px 0 10px;
}
.store-modal-series strong { color: var(--accent-light); }

/* ── Utility + component styles (2026-07-10) ───────────────────────────────
   Classes used in the HTML that had NO CSS definition (see WEBSITE-AUDIT.md, L1).
   Additive only — no existing rule is modified. ── */

/* Screen-reader-only: visually hidden, still announced by assistive tech.
   Fixes the "Search products" label rendering visibly on store.html. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Muted-text utility (mirrors the --text-muted token). */
.text-muted { color: var(--text-muted); }

/* Ghost button — transparent until hover. Composes with the base .btn. */
.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
}
.btn-ghost:hover {
  background: var(--bg-card-hover);
  color: var(--text);
}

/* Dashboard "Tickets & Orders" — responsive card grid. */
.tickets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Loading spinner (shown on the dashboard while tickets load). */
.loading-spinner {
  width: 34px; height: 34px;
  margin: 28px auto;
  border: 3px solid var(--bg-card-hover);
  border-top-color: var(--accent-light);
  border-radius: var(--radius-full);
  animation: und-spin 0.8s linear infinite;
}
@keyframes und-spin { to { transform: rotate(360deg); } }

/* Chat — online count + typing indicator */
.chat-online {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-left: 4px;
}
.chat-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 8px;
  font-size: 0.78rem;
  color: var(--text-soft);
}
.chat-typing[hidden] { display: none; }
.chat-typing-dots { display: inline-flex; gap: 3px; }
.chat-typing-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-light);
  display: inline-block;
  animation: chatTyping 1.2s infinite ease-in-out;
}
.chat-typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.chat-typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ============================================================
   Featured promo — premium banner (paid placement)
   ============================================================ */
.promo-area { display: flex; flex-direction: column; gap: 16px; }

.promo-banner {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--border-accent);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(124,58,237,0.22), transparent 60%),
    linear-gradient(135deg, rgba(124,58,237,0.10), var(--bg-card) 70%);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.promo-banner:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 16px 60px rgba(124,58,237,0.28);
}
/* No-artwork promo: compact, centered announcement (no dead space) */
.promo-banner-noimg { justify-content: center; text-align: center; min-height: 0; }
.promo-banner-noimg .promo-banner-body { align-items: center; padding: 26px 28px; }
/* Override the default left-stick on the badge + button so it's truly centered */
.promo-banner-noimg .promo-banner-tag,
.promo-banner-noimg .promo-banner-cta { align-self: center; }
/* With-artwork promo: release card, content sits next to the cover */
.promo-banner-withimg { min-height: 150px; }

/* Image variant — media on the left, text on the right */
.promo-banner-media {
  position: relative;
  flex: 0 0 auto;
  width: 150px;
  aspect-ratio: 1 / 1;
  align-self: center;
  margin: 18px 0 18px 18px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
}
.promo-banner-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.promo-banner-media-empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; color: var(--accent-light);
  background: linear-gradient(135deg, rgba(124,58,237,0.22), rgba(124,58,237,0.05));
}
.promo-banner-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #fff;
  background: rgba(5,5,6,0.4);
  opacity: 0;
  transition: opacity var(--transition);
}
.promo-banner:hover .promo-banner-play { opacity: 1; }

.promo-banner-body {
  flex: 1;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.promo-banner-tag {
  align-self: flex-start;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-light);
  background: rgba(124,58,237,0.16);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-full);
  padding: 3px 12px;
}
.promo-banner-title {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  margin: 4px 0 0;
}
.promo-banner-sub {
  font-size: 0.95rem;
  color: var(--text-soft);
  line-height: 1.5;
  margin: 0;
}
.promo-banner-cta {
  margin-top: 10px;
  align-self: flex-start;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  background: var(--accent);
  border-radius: var(--radius-full);
  padding: 9px 22px;
  transition: background var(--transition), gap var(--transition);
}
.promo-banner:hover .promo-banner-cta { background: var(--accent-deep); }

@media (max-width: 700px) {
  .promo-banner { flex-direction: column; }
  .promo-banner-media { width: 120px; margin: 18px auto 0; }
  .promo-banner-body { padding: 22px 22px 26px; }
}

/* Promo banner description — the informational blurb */
.promo-banner-desc {
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 6px 0 2px;
  max-width: 62ch;
}
.promo-banner-noimg .promo-banner-desc { margin-left: auto; margin-right: auto; }

/* Promo banner — embedded song player (Spotify/Apple/YouTube) */
.promo-banner-embed {
  display: block;
  padding: 20px 22px 22px;
}
.promo-embed-head { padding: 0 0 14px; align-items: flex-start; }
.promo-embed-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}
.promo-embed-frame iframe { display: block; width: 100%; border: 0; }

/* Service Modal Dynamic Elements */
.svc-modal-price { font-size: 1.5rem; font-weight: 700; color: var(--text); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.svc-modal-warn, .svc-modal-note { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 0.9rem; line-height: 1.4; }
.svc-modal-warn { background: rgba(255, 68, 68, 0.1); border: 1px solid rgba(255, 68, 68, 0.2); color: #ffcccc; }
.svc-modal-note { background: rgba(57, 255, 157, 0.05); border: 1px solid rgba(57, 255, 157, 0.15); color: var(--text-muted); }
.svc-modal-terms { list-style: none; padding: 0; margin: 0 0 20px 0; }
.svc-modal-terms li { position: relative; padding-left: 24px; margin-bottom: 12px; font-size: 0.95rem; color: var(--text-muted); line-height: 1.4; }
.svc-modal-terms li::before { content: "?"; position: absolute; left: 0; top: 0; color: var(--accent-light); font-weight: bold; }
.svc-modal-check { display: flex; align-items: flex-start; gap: 12px; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; cursor: pointer; margin-bottom: 16px; padding: 12px; background: var(--bg-card-hover); border-radius: var(--radius); border: 1px solid var(--border); }
.svc-modal-check input[type="checkbox"] { margin-top: 4px; flex-shrink: 0; width: 16px; height: 16px; }
.svc-modal-check a { color: var(--accent-light); text-decoration: none; }
.svc-modal-check a:hover { text-decoration: underline; }
.svc-modal-check-warn { background: rgba(255, 68, 68, 0.05); border-color: rgba(255, 68, 68, 0.2); }


/* Ticket Tab Badges */
.bg-accent { background: rgba(124,58,237,0.2); color: #c4b5fd; padding: 2px 6px; border-radius: 4px; }
.bg-success { background: rgba(16,185,129,0.2); color: #6ee7b7; padding: 2px 6px; border-radius: 4px; }
.bg-error { background: rgba(239,68,68,0.2); color: #fca5a5; padding: 2px 6px; border-radius: 4px; }



/* =========================================================================
   GLOBAL PREMIUM CARD OVERRIDES (UNIFIED AESTHETIC)
   ========================================================================= */
.card, .pillar-card, .stat-card, .music-card, .promo-card, .service-card {
  background: rgba(21, 21, 26, 0.7) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.card:hover, .pillar-card:hover, .stat-card:hover, .music-card:hover, .promo-card:hover, .service-card:hover {
  border-color: rgba(124,92,255,0.4) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(124,92,255,0.15) !important;
}


/* ── Nav Dropdown ── */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: flex !important;
  align-items: center;
  gap: 4px;
}

.nav-dropdown-toggle svg {
  transition: transform 0.2s ease;
  margin-top: 1px;
}

.nav-dropdown:hover .nav-dropdown-toggle svg {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(15, 15, 20, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 0;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  z-index: 200;
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu li {
  display: block;
}

.nav-dropdown-menu a {
  display: block;
  padding: 10px 20px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-soft) !important;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.nav-dropdown-menu a::after {
  display: none !important;
}

.nav-dropdown-menu a:hover {
  background: var(--bg-card-hover);
  color: #fff !important;
}

/* Mobile dropdown: show submenu when JS adds .mobile-dropdown-open */
@media (max-width: 1024px) {
  .nav-dropdown .nav-dropdown-menu {
    display: none;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: rgba(255,255,255,0.03);
    border-left: 2px solid rgba(124,58,237,0.4);
    border-radius: 0 8px 8px 0;
    margin: 4px 16px 8px 24px;
    padding: 6px 0;
  }
  .nav-dropdown.mobile-dropdown-open .nav-dropdown-menu {
    display: block;
  }
  .nav-dropdown .nav-dropdown-menu a {
    padding: 10px 18px !important;
    font-size: 0.9rem !important;
    color: #cbd5e1 !important;
    display: block;
  }
  .nav-dropdown .nav-dropdown-menu a:hover {
    color: #fff !important;
    background: rgba(124,58,237,0.15) !important;
  }
  .nav-dropdown.mobile-dropdown-open .nav-dropdown-toggle svg {
    transform: rotate(180deg);
  }
}


/* ── availability note (DB-driven, from store_products.availability_note) ──
   Small line under a service button: "Back Aug 1", "2 slots left". Written by
   services.js paintButton() when the DB supplies one. Added 2026-07-19. */
.svc-avail-note{
  margin-top:8px;
  font-size:.78rem;
  line-height:1.4;
  color:#9a8cff;
  text-align:center;
  opacity:.9;
}
.btn-cs[data-svc-state="paused"]{
  border-color:rgba(245,158,11,.42);
  color:#fcd9a0;
}
.btn-cs[data-svc-state="quote"]{
  border-color:rgba(124,92,255,.30);
}

/* ============================================================
   CONTINUOUS SCROLL PARALLAX & DYNAMIC MOTION ENGINE
   ============================================================ */

/* Top Reading Scroll Progress Indicator */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #7c3aed 0%, #a78bfa 50%, #39ff9d 100%);
  transform-origin: 0 50%;
  z-index: 99999;
  pointer-events: none;
  transform: scaleX(0);
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.9), 0 0 24px rgba(167, 139, 250, 0.5);
  transition: transform 0.05s ease-out;
}

/* Ambient Floating Glow Orbs (Layered Background Parallax) */
.ambient-glow-orb {
  position: absolute;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(90px);
  opacity: 0.22;
  will-change: transform;
}
.ambient-glow-orb.orb-purple {
  background: radial-gradient(circle, rgba(124, 58, 237, 0.8) 0%, rgba(91, 33, 182, 0.3) 60%, transparent 80%);
}
.ambient-glow-orb.orb-silver {
  background: radial-gradient(circle, rgba(196, 201, 212, 0.6) 0%, rgba(138, 144, 158, 0.2) 60%, transparent 80%);
}

/* Parallax Hardware-Accelerated Subjects */
.parallax-item {
  will-change: transform, opacity;
  transform-style: preserve-3d;
}

/* Hero Elements Continuous Motion */
.hero-corporate {
  position: relative;
  overflow: hidden;
}
.hero-logo {
  /* Fade + rise in, then a slow "breathe": a barely-there scale with the purple aura
     pulsing. Premium/enterprise, not a bounce. Running CSS animation owns the transform,
     so the scroll parallax no longer fights it. Transparent logo (und-logo-alpha.png). */
  animation: fadeUp 0.7s cubic-bezier(0.4,0,0.2,1) both, und-logo-breathe 6s ease-in-out 0.7s infinite;
  will-change: transform, filter;
}
@keyframes und-logo-breathe {
  0%, 100% { transform: scale(1);     filter: drop-shadow(0 10px 42px rgba(124,58,237,0.32)); }
  50%      { transform: scale(1.022); filter: drop-shadow(0 16px 66px rgba(124,58,237,0.52)); }
}
@media (prefers-reduced-motion: reduce) { .hero-logo { animation: fadeUp 0.7s ease both; } }
.hero-corp-title, .hero-corp-sub, .hero-corp-actions {
  will-change: transform, opacity;
}

/* 3D Perspective Grid & Card Depth */
.pillars-grid {
  perspective: 1200px;
}
.pillar-card {
  will-change: transform, border-color, box-shadow;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}
.pillar-card.scroll-active {
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 12px 36px rgba(124, 58, 237, 0.18);
}
.pillar-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(124, 58, 237, 0.8);
  box-shadow: 0 20px 50px rgba(124, 58, 237, 0.28);
}

/* Animated Section Divider */
.divider {
  width: 60px;
  height: 3px;
  background: var(--silver-grad);
  border-radius: var(--radius-full);
  margin-top: 16px;
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), width 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .ambient-glow-orb, .parallax-item, .hero-logo, .pillar-card {
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   CLEANUP & UNSTYLED CLASSES MAPPINGS (Audit Fixes)
   ============================================================ */
.hero-trust {
  margin-top: 32px;
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.hero-delay-5 {
  --delay: 0.5s;
}
.tickets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.sidebar-tab-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  transition: var(--transition);
}
.sidebar-tab-btn:hover, .sidebar-tab-btn.active {
  background: var(--bg-card-hover);
  color: var(--text);
}
.notfound-legal {
  margin-top: 24px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.featured-release-embed {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.store-content {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
}
@media (max-width: 900px) {
  .store-content {
    grid-template-columns: 1fr;
  }
}

.text-soft { color: var(--text-soft); }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-24 { margin-top: 24px; }
.stagger-parent { position: relative; }

/* ============================================================
   INTERACTIVE HOMEPAGE UPGRADE MODULES
   ============================================================ */

/* 1. Live Interactive Terminal Window */
.terminal-container {
  max-width: 920px;
  margin: 36px auto 0;
  position: relative;
  z-index: 2;
}
.terminal-window {
  background: rgba(10, 10, 14, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(124, 58, 237, 0.35);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(124, 58, 237, 0.2);
  overflow: hidden;
  font-family: var(--font-mono);
  text-align: left;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.terminal-window:hover {
  border-color: rgba(124, 58, 237, 0.6);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 50px rgba(124, 58, 237, 0.3);
}
.terminal-header {
  background: rgba(255, 255, 255, 0.04);
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.terminal-dots {
  display: flex;
  gap: 8px;
}
.term-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.term-dot.red { background: #ff5f56; }
.term-dot.yellow { background: #ffbd2e; }
.term-dot.green { background: #27c93f; }

.terminal-tabs {
  display: flex;
  gap: 6px;
}
.term-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.75rem;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-body);
}
.term-tab-btn:hover, .term-tab-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.terminal-body {
  padding: 20px 22px;
  height: min(360px, 56vh);   /* FIXED window — content scrolls inside, box never grows */
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 0.88rem;
  line-height: 1.65;
  color: #e2e8f0;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.5) transparent;
}
.terminal-body::-webkit-scrollbar { width: 8px; }
.terminal-body::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.4); border-radius: 4px; }
.terminal-body::-webkit-scrollbar-track { background: transparent; }
/* inline text flow like a real terminal — preserve spacing, wrap long lines, no flex stacking */
.term-line { margin-bottom: 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
.term-prompt { color: var(--accent-light); font-weight: 700; }
.term-cmd { color: #fff; }
.term-success { color: #39ff9d; font-weight: 600; }
.term-dim { color: var(--text-muted); }
.term-accent { color: #a78bfa; font-weight: 600; }
.term-cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: #39ff9d;
  vertical-align: middle;
  animation: blink 1s infinite;
  margin-left: 4px;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* 2. Infinite Tech Stack Marquee (Top Ribbon under Nav) */
.marquee-section {
  margin-top: var(--nav-h);
  padding: 14px 0;
  border-bottom: 1px solid rgba(124, 58, 237, 0.3);
  background: rgba(8, 8, 14, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  position: relative;
  z-index: 50;
}
.hero-corporate {
  padding-top: 40px !important;
  min-height: auto !important;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
  gap: 36px;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--silver);
  white-space: nowrap;
}
.marquee-item span { color: var(--accent-light); font-size: 1.1rem; }

/* Featured-song bar (Option B) — rides above the tech strip; filled from promo_links(location='featured'). */
.home-featured-bar {
  display: none;
  align-items: center;
  gap: 14px;
  margin-top: var(--nav-h);
  padding: 9px 20px;
  background: linear-gradient(90deg, rgba(124,58,237,0.22), rgba(56,189,248,0.10) 55%, rgba(8,8,14,0.4));
  border-bottom: 1px solid rgba(124,58,237,0.35);
  font-size: 0.85rem;
  position: relative;
  z-index: 51;
}
.home-featured-bar.is-visible { display: flex; }
body.has-featured-bar .marquee-section { margin-top: 0; }
.hfb-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; flex-shrink: 0; animation: hfb-pulse 2.2s infinite; }
@keyframes hfb-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.hfb-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #38bdf8; white-space: nowrap; }
.hfb-song { color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hfb-by { color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hfb-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.hfb-cta:hover { color: #38bdf8; }
@media (max-width: 640px) { .home-featured-bar { gap: 9px; } .hfb-by { display: none; } }

/* Legal callout box (academy-enroll consent notices, etc.) — base border/padding so the
   inline border-color + faint background land on an actual bordered, padded box instead of
   text touching the edge with no outline. Inline styles still override colour per instance. */
.legal-box { border: 1px solid var(--border, rgba(255,255,255,0.12)); border-radius: 12px; padding: 1rem 1.25rem; }

/* 3. High-Impact Quantified Metrics Row */
.metrics-section { padding: 56px 0 32px; }
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.metric-card {
  background: rgba(21, 21, 28, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.metric-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-accent);
}
.metric-number {
  font-family: var(--font-head);
  font-size: 2.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #fff 0%, #a78bfa 60%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
  margin-bottom: 6px;
}
.metric-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.metric-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* 4. Interactive Before & After System Comparison */
.compare-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 36px;
}
@media (max-width: 768px) {
  .compare-container { grid-template-columns: 1fr; }
}
.compare-card {
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
}
.compare-card.before {
  background: rgba(239, 68, 68, 0.03);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.compare-card.after {
  background: rgba(16, 185, 129, 0.04);
  border: 1px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 12px 40px rgba(16, 185, 129, 0.1);
}
.compare-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.compare-badge.bad { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.compare-badge.good { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }
.compare-list { list-style: none; margin: 20px 0 0; padding: 0; }
.compare-list li {
  padding: 10px 0 10px 28px;
  position: relative;
  font-size: 0.95rem;
  color: var(--text-soft);
}
.compare-card.before .compare-list li::before { content: "✕"; position: absolute; left: 0; color: #ef4444; font-weight: 700; }
.compare-card.after .compare-list li::before { content: "✓"; position: absolute; left: 0; color: #10b981; font-weight: 700; }

/* 5. 6-Discipline Interactive Command Center */
.command-center {
  margin-top: 36px;
}
.cc-nav-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.cc-tab {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 10px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.cc-tab:hover { background: var(--bg-card-hover); color: #fff; }
.cc-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
}
.cc-pane {
  display: none;
  background: rgba(18, 18, 24, 0.7);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.cc-pane.active { display: block; }
.cc-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 860px) {
  .cc-grid { grid-template-columns: 1fr; }
}

/* 6. Interactive AI Tutoring Rate Calculator */
.tutor-calc-box {
  background: rgba(18, 18, 24, 0.8);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  padding: 36px;
  margin-top: 36px;
  box-shadow: 0 16px 48px rgba(124, 58, 237, 0.15);
}
.calc-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.calc-pill {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s ease;
}
.calc-pill.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.calc-slider-wrap {
  margin: 28px 0;
}
.calc-slider {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}
.calc-result-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 24px;
}
.calc-price-display {
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 800;
  color: #39ff9d;
}

/* 7. UND Music Interactive Audio Visualizer */
.music-widget-box {
  background: linear-gradient(135deg, rgba(21, 21, 28, 0.9) 0%, rgba(10, 10, 14, 0.9) 100%);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  padding: 36px;
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 860px) {
  .music-widget-box { grid-template-columns: 1fr; }
}
.eq-bars-container {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 36px;
  margin-top: 12px;
}
.eq-bar {
  width: 5px;
  background: linear-gradient(to top, #7c3aed, #a78bfa, #39ff9d);
  border-radius: 2px;
  animation: eq-bounce 1.2s ease-in-out infinite alternate;
}
.eq-bar:nth-child(1) { height: 30%; animation-delay: 0.1s; }
.eq-bar:nth-child(2) { height: 70%; animation-delay: 0.3s; }
.eq-bar:nth-child(3) { height: 100%; animation-delay: 0.15s; }
.eq-bar:nth-child(4) { height: 50%; animation-delay: 0.4s; }
.eq-bar:nth-child(5) { height: 85%; animation-delay: 0.25s; }
.eq-bar:nth-child(6) { height: 40%; animation-delay: 0.35s; }
.eq-bar:nth-child(7) { height: 90%; animation-delay: 0.05s; }
.eq-bar:nth-child(8) { height: 60%; animation-delay: 0.2s; }
@keyframes eq-bounce {
  0% { height: 20%; }
  100% { height: 100%; }
}

/* ============================================================
   RESPECTFUL, CLEAN AD CONTAINER STYLING (Google AdSense / Tech Ads)
   Non-intrusive, zero-layout-shift, dark-mode matching
   ============================================================ */
.adsbygoogle {
  display: block !important;
  margin: 24px auto !important;
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 100%;
}
.ad-slot-wrapper {
  margin: 40px auto;
  max-width: 728px;
  text-align: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ad-slot-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════
   UNIVERSAL DEVICE SCALING — responsive safety layer (2026-08-23)
   Nothing overflows the viewport; content scales cleanly on phones/tablets.
   Safe globals + targeted fixes for MEASURED overflow (terminal @ 417px on
   a 375px screen). Typography breakpoints already exist (768/480) and are
   left intact — this only adds guards and fixes, never restyles desktop.
   ═══════════════════════════════════════════════════════════════════════ */

/* Hard stop on horizontal scroll — clip (not hidden) keeps sticky/fixed working. */
html { overflow-x: clip; }

/* Raster media & embeds never burst their container. (SVG icons excluded —
   they carry intrinsic width/height and must not be forced to height:auto.) */
img, video, canvas, iframe { max-width: 100%; height: auto; }

/* Small screens: long unbreakable strings (URLs, IDs) wrap instead of overflowing. */
@media (max-width: 600px) {
  p, li, h1, h2, h3, h4, .hero-desc, .metric-sub { overflow-wrap: break-word; }

  /* Hero terminal — measured overflow. Wrap the header tabs and command lines. */
  .terminal-container { max-width: 100%; }
  .terminal-header { flex-wrap: wrap; gap: 10px; }
  .terminal-tabs { flex-wrap: wrap; }
  .term-tab-btn { font-size: 0.66rem; padding: 3px 8px; }
  .terminal-body { padding: 16px; font-size: 0.76rem; }
  .term-line { flex-wrap: wrap; }
  .term-line > * { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
}


/* ── Contact form — enterprise validation, counter, auto-grow ─────────── */
/* Honeypot: off-screen, non-interactive; bots fill it, humans never see it. */
.hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.form-error { display: none; font-size: 0.78rem; color: #fca5a5; line-height: 1.4; }
.form-error.show { display: block; }
.form-input.invalid, .form-input.invalid:focus { border-color: rgba(239,68,68,0.6); box-shadow: 0 0 0 3px rgba(239,68,68,0.12); }
.form-field-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.form-field-meta .form-error { flex: 1 1 auto; }
.form-counter { margin-left: auto; font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.form-counter.near { color: var(--warning); }
.form-counter.at { color: var(--danger); font-weight: 600; }
/* Auto-grow textarea: JS grows height with content up to this cap, then scrolls. */
textarea#c-message { max-height: 400px; overflow-y: auto; transition: border-color 0.2s ease, box-shadow 0.2s ease; }

/* ── Contact page: compact hero + form-first so "Send an Inquiry" is not buried ── */
body[data-page="contact"] section[data-section="hero"] {
  padding-top: calc(var(--nav-h, 72px) + 28px);
  padding-bottom: 18px;
}
body[data-page="contact"] section[data-section="contact-body"] { padding-top: 28px; }
/* On stacked layouts, show the form BEFORE the long contact-info list. */
@media (max-width: 900px) {
  body[data-page="contact"] .contact-grid > .card { order: -1; margin-bottom: 20px; }
}

/* Dark "stage" behind the hero logo so the breathing glow never fades it out.
   NOTE (Alex): whenever the logo glows/breathes, the area behind it MUST stay dark
   so the mark retains visibility — a light/purple-washed backdrop faded it. */
.hero-corp-inner { position: relative; }
.hero-corp-inner::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  width: min(560px, 92%);
  height: 470px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(4,4,7,0.95) 0%, rgba(4,4,7,0.68) 40%, rgba(4,4,7,0) 72%);
  z-index: 0;
  pointer-events: none;
}
.hero-corp-inner > * { position: relative; z-index: 1; }

/* Hero title letter-by-letter reveal (types into being on load, fast + natural). */
.reveal-word {
  display: inline-block;
  opacity: 0;
  animation: charIn 0.55s ease forwards;
  animation-delay: var(--d, 0s);
  will-change: opacity;
}
/* Fade only — NO vertical rise/dip, so the line never looks wavy while revealing. */
@keyframes charIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .reveal-word { opacity: 1; animation: none; }
}

/* Live terminal: each line runs in, a green cursor blinks + moves down, then it loops. */
.term-line-in { animation: termLineIn 0.28s ease both; }
@keyframes termLineIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.term-live-cursor {
  display: inline-block; width: 8px; height: 1.05em; margin-left: 5px;
  vertical-align: text-bottom; background: #39ff9d; box-shadow: 0 0 6px #39ff9d;
  animation: termBlink 1s steps(1) infinite;
}
@keyframes termBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .term-line-in { animation: none; }
  .term-live-cursor { animation: none; }
}