:root {
  --grad-cool: linear-gradient(135deg, #4ADE80 0%, #60A5FA 100%);
  --grad-deep: linear-gradient(135deg, #60A5FA 0%, #A78BFA 100%);
  --grad-warm: linear-gradient(135deg, #F472B6 0%, #FB923C 100%);
  --grad-brand: linear-gradient(135deg, #4ADE80 0%, #60A5FA 50%, #A78BFA 100%);

  --bh-surface-card: hsl(240 18% 6%);
  --bh-surface-elevated: hsl(240 18% 9%);
  --bh-border-subtle: hsl(240 10% 14%);
  --bh-text-muted: hsl(240 10% 70%);
}

.g-cool,
.g-deep,
.g-warm,
.g-brand {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-size: 100% 100%;
}
.g-cool  { background-image: var(--grad-cool); }
.g-deep  { background-image: var(--grad-deep); }
.g-warm  { background-image: var(--grad-warm); }
.g-brand { background-image: var(--grad-brand); }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

.aurora-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.aurora-blob {
  position: absolute;
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  filter: blur(110px);
  mix-blend-mode: screen;
  opacity: 0.35;
  will-change: transform;
}
.aurora-blob--green   { background: radial-gradient(circle, #4ADE80 0%, transparent 65%); }
.aurora-blob--blue    { background: radial-gradient(circle, #60A5FA 0%, transparent 65%); }
.aurora-blob--magenta { background: radial-gradient(circle, #F472B6 0%, transparent 65%); }
.aurora-blob--purple  { background: radial-gradient(circle, #A78BFA 0%, transparent 65%); }
.aurora-blob--orange  { background: radial-gradient(circle, #FB923C 0%, transparent 65%); }
.aurora-blob--amber   { background: radial-gradient(circle, #FBBF24 0%, transparent 65%); }

.aurora-blob--drift1 { animation: drift1 28s ease-in-out infinite; }
.aurora-blob--drift2 { animation: drift2 32s ease-in-out infinite; }
.aurora-blob--drift3 { animation: drift3 24s ease-in-out infinite; }
.aurora-blob--drift4 { animation: drift4 34s ease-in-out infinite; }

@keyframes drift1 {
  0%,100% { transform: translate(-10%, -5%) scale(1); }
  50%     { transform: translate(15%, 10%) scale(1.15); }
}
@keyframes drift2 {
  0%,100% { transform: translate(20%, 0%) scale(1.1); }
  50%     { transform: translate(-10%, 20%) scale(0.95); }
}
@keyframes drift3 {
  0%,100% { transform: translate(0%, 15%) scale(1); }
  50%     { transform: translate(25%, -10%) scale(1.2); }
}
@keyframes drift4 {
  0%,100% { transform: translate(-15%, 20%) scale(1.05); }
  50%     { transform: translate(10%, -15%) scale(1); }
}

@keyframes hero-pulse {
  0%   { box-shadow: 0 0 0 0 hsl(142 69% 58% / 0.6); }
  70%  { box-shadow: 0 0 0 10px hsl(142 69% 58% / 0); }
  100% { box-shadow: 0 0 0 0 hsl(142 69% 58% / 0); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-blob { animation: none !important; }
  .hero__status-dot { animation: none !important; }
}

@media (max-width: 640px) {
  .aurora-blob { animation: none; opacity: 0.25; filter: blur(80px); }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.9em;
  border-radius: 9999px;
  background: hsl(240 18% 9% / 0.6);
  border: 1px solid var(--bh-border-subtle);
  font-family: var(--heading-font-family);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bh-text-muted);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.eyebrow::before { content: "["; opacity: 0.6; }
.eyebrow::after  { content: "]"; opacity: 0.6; }

.eyebrow--primary   { color: var(--primary); }
.eyebrow--secondary { color: var(--secondary); }
.eyebrow--accent    { color: var(--accent); }
.eyebrow--tertiary  { color: var(--tertiary); }
.eyebrow--action    { color: var(--action); }
.eyebrow--warning   { color: var(--warning); }

.bh-surface-card     { background-color: var(--bh-surface-card); }
.bh-surface-elevated { background-color: var(--bh-surface-elevated); }
.bh-border-subtle    { border: 1px solid var(--bh-border-subtle); }