:root {
  --bg: #120d14;
  --bg-soft: #1d1623;
  --panel: rgba(27, 20, 31, 0.80);
  --panel-solid: #2a2131;
  --text: #f8f1ee;
  --muted: #d4bbb4;
  --line: rgba(140, 186, 232, 0.14);
  --accent: #ffad7a;
  --accent-2: #ffd29b;
  --gold: #ffc48a;
  --shadow: 0 22px 82px rgba(8, 3, 9, 0.36);
}
body {
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 173, 122, 0.15), transparent 22%),
    radial-gradient(circle at 82% 14%, rgba(255, 210, 155, 0.10), transparent 24%),
    radial-gradient(circle at 72% 82%, rgba(16, 48, 160, 0.18), transparent 24%),
    radial-gradient(circle at 34% 78%, rgba(0, 128, 208, 0.12), transparent 20%),
    radial-gradient(circle at 54% 100%, rgba(22, 176, 208, 0.10), transparent 26%),
    linear-gradient(180deg, #140d14 0%, #2a1620 28%, #201a32 56%, #132242 78%, #0d1830 100%);
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
body::before {
  opacity: 0.22;
  background:
    linear-gradient(180deg, rgba(18,13,20,0.40), rgba(13,24,48,0.42)),
    radial-gradient(circle at 18% 16%, rgba(255,173,122,0.10), transparent 18%),
    radial-gradient(circle at 72% 78%, rgba(16,48,160,0.12), transparent 20%);
  mix-blend-mode: soft-light;
}
body::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 18%),
    radial-gradient(circle at 18% 16%, rgba(255, 173, 122, 0.10), transparent 18%),
    radial-gradient(circle at 80% 18%, rgba(255, 210, 155, 0.08), transparent 18%),
    radial-gradient(circle at 66% 76%, rgba(16, 48, 160, 0.12), transparent 22%),
    radial-gradient(circle at 42% 82%, rgba(0, 128, 208, 0.10), transparent 20%);
  filter: blur(14px);
  opacity: 0.78;
}
.site-header {
  background: rgba(20, 13, 20, 0.76);
  border-bottom: 1px solid rgba(140, 186, 232, 0.16);
}
.nav-link:hover,
.nav-link.active {
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(140, 186, 232, 0.14);
}
.hero,
.page-hero {
  position: relative;
}
.hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,13,20,0.34), rgba(14,24,46,0.44)),
    radial-gradient(circle at 18% 18%, rgba(255, 173, 122, 0.16), transparent 18%),
    radial-gradient(circle at 84% 18%, rgba(255, 210, 155, 0.10), transparent 20%),
    radial-gradient(circle at 76% 80%, rgba(16, 48, 160, 0.14), transparent 18%),
    url("../images/bg-dunes-subtle.jpg");
  background-size: cover, auto, auto, auto, cover;
  background-position: center, center, center, center, center 32%;
  background-repeat: no-repeat;
  opacity: 0.42;
  mix-blend-mode: soft-light;
  filter: saturate(0.96) contrast(1.04);
  pointer-events: none;
}
.launch-card,
.price-card,
.mini-card,
.post-card,
.role-card,
.bullet-card,
.portrait-card,
.callout-banner,
.quick-jump,
.guide-detail,
.faq-item {
  background: linear-gradient(180deg, rgba(38, 24, 36, 0.88), rgba(19, 22, 40, 0.84));
  border: 1px solid rgba(140, 186, 232, 0.12);
  box-shadow: 0 24px 84px rgba(8, 3, 9, 0.32), inset 0 1px 0 rgba(255,255,255,0.04);
}
.launch-card::before,
.price-card--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,173,122,0.12), transparent 34%, rgba(16,48,160,0.10), rgba(22,176,208,0.08));
  pointer-events: none;
}
.launch-card,
.price-card--featured {
  position: relative;
  overflow: hidden;
}
.button--solid {
  background: linear-gradient(135deg, #ffad7a, #ffd29b);
  color: #1b1120;
  box-shadow: 0 16px 44px rgba(255, 173, 122, 0.22);
}
.button--ghost {
  background: rgba(255,255,255,0.03);
  border-color: rgba(140, 186, 232, 0.16);
}
.eyebrow,
.text-link,
.quick-jump strong {
  color: #ffd29b;
}
.footer-logo,
.brand img {
  filter: drop-shadow(0 8px 30px rgba(22, 176, 208, 0.14));
}
.comparison-table th {
  background: rgba(255,255,255,0.03);
}
.billing-pill-row span,
.hero-pills span,
.stat-grid div {
  background: rgba(255,255,255,0.035);
  border-color: rgba(140, 186, 232, 0.14);
}

.hero,
.page-hero {
  overflow: hidden;
  isolation: isolate;
}
.hero > .container,
.page-hero > .container {
  position: relative;
  z-index: 1;
}