/* Shared foundations. New sections opt in with stage-* classes as they are rebuilt. */
:root {
  --stage-black: #03080c;
  --stage-white: #f7fafc;
  --stage-muted: #e1e8ed;
  --stage-cyan: #00e5ff;
  --stage-line: rgba(203,235,240,.42);
  --stage-line-soft: rgba(193,221,227,.16);
  --stage-line-active: rgba(0,229,255,.65);
  --stage-surface: rgba(3,8,12,.84);
  --stage-surface-raised: rgba(7,17,24,.9);
  --stage-surface-inset: rgba(3,8,12,.6);
  --stage-surface-header: rgba(3,8,12,.93);
  --stage-surface-overlay: rgba(6,16,24,.96);
  --stage-font: "Inter",system-ui,sans-serif;
  --stage-mono: "JetBrains Mono",ui-monospace,monospace;
  --stage-text-small: 14px;
  --stage-text-body: 1rem;
  --stage-text-lead: clamp(19px,1.65vw,25px);
  --stage-text-title: clamp(28px,3.4vw,48px);
  --stage-leading-body: 1.7;
  --stage-leading-lead: 1.55;
  --stage-border-width: 1px;
  --stage-shadow: 0 18px 50px rgba(0,0,0,.25);
  --stage-gutter: clamp(24px,4.6vw,88px);
  --stage-header-height: 100px;
  --stage-ease: cubic-bezier(.22,1,.36,1);
  --stage-duration: .25s;
  --stage-button-shape: polygon(15px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px);
}

html {
  scroll-padding-top: calc(var(--stage-header-height) + 20px);
}

.stage-sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.stage-skip {
  position:fixed;
  top:12px;
  left:24px;
  z-index:11000;
  padding:12px 18px;
  background:var(--stage-cyan);
  color:var(--stage-black);
  font:600 14px var(--stage-font);
  transform:translateY(-180%);
}

.stage-skip:focus {
  transform:none;
  outline:2px solid white;
  outline-offset:4px;
}

.masthead a:focus-visible,.masthead button:focus-visible,.intro a:focus-visible,.stage-button:focus-visible {
  outline:2px solid var(--stage-white);
  outline-offset:6px;
}

/* Typography and surfaces are deliberately opt-in, not a reset of legacy content. */
.stage-title {
  color:var(--stage-white);
  font:600 var(--stage-text-title)/1.15 var(--stage-font);
  letter-spacing:-.03em;
  text-wrap:balance;
}

.stage-kicker {
  color:var(--stage-cyan);
  font:400 12px/1.6 var(--stage-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
}

.stage-copy {
  color:var(--stage-muted);
  font:400 var(--stage-text-body)/var(--stage-leading-body) var(--stage-font);
  text-wrap:pretty;
}

.stage-surface {
  color:var(--stage-white);
  background:var(--stage-surface);
  border:var(--stage-border-width) solid var(--stage-line-soft);
  box-shadow:var(--stage-shadow);
}

.stage-surface--raised {
  background:var(--stage-surface-raised);
  border-color:var(--stage-line);
}

.stage-rule {
  border:0;
  border-top:var(--stage-border-width) solid var(--stage-line-soft);
}

/* The hero uses these same buttons; section layouts decide their width and spacing. */
.stage-button {
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:38px;
  min-height:58px;
  padding:15px 25px;
  border:0;
  background:transparent;
  color:var(--stage-white);
  font:500 16px/1.3 var(--stage-font);
  text-decoration:none;
  cursor:pointer;
  transition:transform var(--stage-duration) var(--stage-ease),filter var(--stage-duration);
}

.stage-button::before,.stage-button::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  clip-path:var(--stage-button-shape);
}

.stage-button::before {
  background:var(--stage-white);
}

.stage-button::after {
  inset:var(--stage-border-width);
  background:var(--stage-black);
}

.stage-button--primary {
  color:var(--stage-black);
  font-weight:600;
}

.stage-button--primary::before,.stage-button--primary::after {
  background:var(--stage-cyan);
}

.stage-button svg {
  width:25px;
  height:20px;
  flex-shrink:0;
  transition:transform var(--stage-duration) var(--stage-ease);
}

.stage-button:hover {
  transform:translateY(-3px);
  filter:drop-shadow(0 3px 16px #00e5ff25);
}

.stage-button:hover svg {
  transform:translateX(4px);
}

@media(max-width:760px) {
  :root {
    --stage-header-height:88px;
    --stage-gutter:28px;
  }
}

@media(max-width:380px) {
  :root {
    --stage-gutter:24px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .stage-button,.stage-button svg {
    transition:none;
  }
  .stage-button:hover,.stage-button:hover svg {
    transform:none;
  }
}