/* CC thematic branding — Aether (aether) */
:root {
  --cc-accent: #7c3aed;
  --cc-accent-dark: #6d28d9;
  --cc-accent-rgb: 124, 58, 237;
}
html[data-cc-theme="aether"] {
  scroll-behavior: smooth;
}
body {
  font-family: 'Space Grotesk', sans-serif !important;
  position: relative;
}
body > * {
  position: relative;
  z-index: 1;
}
h1, h2, h3, .brand, .wordmark {
  font-family: 'Space Grotesk', sans-serif !important;
}

body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--cc-accent-rgb),.12), transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 80%, rgba(var(--cc-accent-rgb),.08), transparent 50%);
}

header{
  background:color-mix(in srgb, var(--cc-accent) 4%, rgba(255,255,255,.88)) !important;
  border-bottom-color:rgba(var(--cc-accent-rgb),.18) !important;
  backdrop-filter:blur(14px) saturate(1.3) !important;
}
::selection {
  background: rgba(124, 58, 237, 0.18) !important;
}
input[type=email]:focus, input[type=text]:focus, textarea:focus {
  border-color: var(--cc-accent) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14) !important;
}
.kicker, .kick, .pre, .sec-label, .hero .tag, .hero .over, .cat-no span,
.status-line, .badge {
  color: var(--cc-accent) !important;
}
.hero {
  position: relative;
}
section.alt, .tier {
  background: color-mix(in srgb, var(--cc-accent) 3%, transparent) !important;
}
.cc-waitlist {
  background: #0a0812 !important;
  border-color: rgba(124, 58, 237, 0.22) !important;
}
.cc-waitlist-label {
  color: rgba(124, 58, 237, 0.85) !important;
}
.cc-waitlist-title {
  color: #f3f4f6 !important;
}
.cc-waitlist-btn {
  background: var(--cc-accent) !important;
  border-color: color-mix(in srgb, var(--cc-accent) 70%, white) !important;
}
.cc-waitlist-btn:hover {
  background: var(--cc-accent-dark) !important;
}
.cc-waitlist-form input:focus {
  outline-color: var(--cc-accent) !important;
}
footer {
  border-top: 1px solid rgba(124, 58, 237, 0.12);
}
footer a:hover {
  color: var(--cc-accent) !important;
}
@media (max-width: 720px) {
  header .bar {
    flex-wrap: nowrap !important;
    gap: 8px 10px !important;
  }
  header .brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  header .bar nav {
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
  }
  header .bar > .btn,
  header .bar > a.btn,
  header .bar-actions .btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-height: 44px !important;
  }
  .hero::before, .hero::after {
    display: none;
  }
}