:root {
  --brand-teal: #00e5a0;
  --brand-cyan: #4cc9ff;
  --brand-dark: #070b12;
  --brand-surface: #0a121c;
  --brand-surface-alt: #101a28;
  --brand-border: rgba(0, 229, 160, 0.18);
  --brand-border-strong: rgba(0, 229, 160, 0.35);
  --grad-brand: linear-gradient(135deg, #00e5a0 0%, #0ea5e9 100%);
  --grad-brand-soft: linear-gradient(135deg, #5fffd0 0%, #4cc9ff 100%);
  --text-dim: rgba(255, 255, 255, 0.55);
}

.page-bg {
  position: relative;
  background: var(--brand-dark);
  min-height: 100vh;
}

.page-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 45% at 85% 12%, rgba(0, 229, 160, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 88%, rgba(76, 201, 255, 0.1) 0%, transparent 58%);
}

.page-bg::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(0, 229, 160, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 201, 255, 0.03) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 10%, transparent 80%);
}

.page-bg > main,
.page-bg > .hero,
.page-bg main {
  position: relative;
  z-index: 1;
}

.subpage-hero {
  position: relative;
  padding: 24px 0 48px;
  overflow: hidden;
}

.subpage-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 75% 20%, rgba(0, 229, 160, 0.1) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 15% 80%, rgba(76, 201, 255, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.subpage-hero > .container {
  position: relative;
  z-index: 1;
}