*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; background: var(--background-primary); }
body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 73% 10%, rgba(0, 116, 255, 0.11), transparent 26%),
    radial-gradient(circle at 10% 44%, rgba(25, 230, 255, 0.055), transparent 24%),
    linear-gradient(145deg, var(--background-primary) 0%, #020b18 48%, #031222 100%);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { color: inherit; }
::selection { color: #00101a; background: var(--primary-cyan); }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-small);
  background: var(--text-primary);
  color: var(--background-primary);
  transform: translateY(-150%);
  transition: transform var(--transition-fast);
}
.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 2px solid var(--primary-cyan);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(25, 230, 255, 0.12);
}

.ambient {
  position: fixed;
  z-index: -3;
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
}
.ambient-one {
  width: 620px;
  height: 620px;
  top: -260px;
  right: -130px;
  background: radial-gradient(circle, rgba(22, 139, 255, 0.16), rgba(22, 139, 255, 0));
}
.ambient-two {
  width: 520px;
  height: 520px;
  left: -280px;
  top: 42%;
  background: radial-gradient(circle, rgba(25, 230, 255, 0.09), rgba(25, 230, 255, 0));
}
.grid-plane {
  position: fixed;
  z-index: -4;
  inset: 0;
  opacity: 0.26;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(75, 151, 207, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(75, 151, 207, 0.03) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

/* Full-width header/footer; content containers own the reading width. */
.site-shell {
  min-height: 100vh;
  width: 100%;
  container: public-site / inline-size;
}
.page { position: relative; }
.container {
  width: min(calc(100% - 48px), var(--content-max-width));
  margin-inline: auto;
}
.container-narrow { width: min(calc(100% - 48px), 1000px); margin-inline: auto; }
.section { padding-block: 112px; position: relative; }
.section-compact { padding-block: 78px; }
.section-heading { max-width: 720px; margin-bottom: 42px; }
.section-heading.center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--primary-cyan);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow::before {
  width: 24px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--primary-cyan));
  box-shadow: 0 0 12px rgba(25, 230, 255, 0.58);
}

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-heading); letter-spacing: -0.035em; line-height: 1.05; }
h1 { font-size: clamp(3.1rem, 6.8cqw, 6.7rem); font-weight: 760; }
h2 { font-size: clamp(2.15rem, 4.2cqw, 4.2rem); font-weight: 730; }
h3 { font-size: clamp(1.16rem, 2cqw, 1.45rem); font-weight: 700; }
p { color: var(--text-secondary); }
.body-large { font-size: clamp(1.05rem, 1.45cqw, 1.28rem); line-height: 1.72; }
.small { font-size: 0.875rem; }
.caption { color: var(--text-muted); font-size: 0.76rem; letter-spacing: 0.035em; }
.label { font-size: 0.72rem; font-weight: 780; letter-spacing: 0.1em; text-transform: uppercase; }
.metric-large { font: 700 clamp(2rem, 4.2cqw, 4.25rem)/1 var(--font-heading); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.metric-medium { font: 700 1.45rem/1 var(--font-heading); font-variant-numeric: tabular-nums; }
.data { font-family: var(--font-data); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.text-gradient {
  color: transparent;
  background: linear-gradient(110deg, var(--text-primary) 0%, #b8e8ff 46%, var(--primary-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.muted { color: var(--text-muted); }
.cyan { color: var(--primary-cyan); }
.success { color: var(--success); }
.warning { color: var(--warning); }
.critical { color: var(--critical); }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.glass-panel,
.glass-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 78% 6%, rgba(25, 230, 255, 0.075), transparent 28%),
    var(--glass-surface);
  box-shadow: var(--shadow-panel), var(--shadow-glow), inset 0 1px rgba(255, 255, 255, 0.06), inset 0 -32px 80px rgba(0, 8, 22, 0.18);
  -webkit-backdrop-filter: blur(var(--glass-blur-default)) saturate(130%);
  backdrop-filter: blur(var(--glass-blur-default)) saturate(130%);
}
.glass-panel::before,
.glass-card::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 10%;
  left: 10%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(205, 245, 255, 0.72), transparent);
  opacity: 0.58;
}
.glass-panel::after,
.glass-card::after {
  position: absolute;
  z-index: -1;
  width: 180px;
  height: 180px;
  right: -92px;
  bottom: -112px;
  content: "";
  border-radius: 50%;
  background: rgba(22, 139, 255, 0.15);
  filter: blur(28px);
}
.glass-panel { border-radius: var(--radius-xlarge); }
.glass-card { border-radius: var(--radius-large); }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--glass-border), transparent); }

.icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke, 2);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-small { width: 17px; height: 17px; }
.icon-large { width: 32px; height: 32px; }

.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(132, 187, 218, 0.08);
}
.skeleton::after {
  position: absolute;
  inset: 0;
  content: "";
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(207, 242, 255, 0.11), transparent);
  animation: shimmer 1.7s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}