/* base.css — reset, page frame, shared primitives (pill buttons, eyebrow, reveal ladders). Section CSS lives in section files. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
::selection{background:var(--selection-bg)}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
ul{list-style:none;margin:0;padding:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}  /* giga: --ring is the accent orange (#d14e00 on dark); the census frames show the orange box on hovered/focused triggers */

/* page frame — giga scales #page with CSS zoom toward a 1728 design width; we mirror with --fit-z on the same selector */
#page{position:relative;z-index:10;background:var(--bg)}
.wrap{width:100%;max-width:var(--container-nav);margin:0 auto;padding:0 20px}
@media (min-width:810px){.wrap{padding:0 44px}}
@media (min-width:1680px){.wrap{padding:0 20px}}

/* type roles (measured @1440) */
.t-hero{font-family:var(--font-pixel);font-weight:400;font-size:79.2px;line-height:.95;letter-spacing:-.02em}
.t-sub{font-family:var(--font-sans);font-weight:500;font-size:32px;line-height:1.1;letter-spacing:-.02em}
.t-lede{font-family:var(--font-sans);font-weight:400;font-size:18px;line-height:1.5;color:rgba(255,255,255,.8)}
.t-h3{font-family:var(--font-sans);font-weight:400;font-size:28px;line-height:1.33;letter-spacing:-.02em}
.t-h3-row{font-family:var(--font-sans);font-weight:400;font-size:26px;line-height:1.33;letter-spacing:-.02em}
.t-h4{font-family:var(--font-sans);font-weight:500;font-size:16px;line-height:1.5}
.t-body{font-family:var(--font-sans);font-weight:400;font-size:15px;line-height:1.45;color:rgba(255,255,255,.55)}
.t-headline{font-family:var(--font-pixel);font-weight:400;font-size:var(--text-headline);line-height:1;letter-spacing:var(--tracking-display)}
.t-mono{font-family:var(--font-mono);font-size:11px;line-height:1.5;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase}

/* eyebrow: 6px accent square + mono caps, 2s pulse (giga pulse-dot-colored) */
.eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;line-height:16.5px;letter-spacing:.1px;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--accent);animation:pulse-dot-colored 2s ease-out infinite;--pulse-color:var(--pulse-accent)}
@keyframes pulse-dot-colored{0%{box-shadow:0 0 0 0 var(--pulse-color,#0009)}70%{box-shadow:0 0 0 6px #0000}to{box-shadow:0 0 #0000}}
.eyebrow.is-dim{color:rgba(255,255,255,.6)}.eyebrow.is-dim::before{background:rgba(255,255,255,.6);animation:none}

/* pill buttons (measured: h42, pad 0 20, r9999, 14px/400) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border-radius:var(--radius-full);font-family:var(--font-sans);font-size:14px;font-weight:400;line-height:20px;white-space:nowrap;cursor:pointer;transition:background-color .3s cubic-bezier(0,0,.2,1),color .3s cubic-bezier(0,0,.2,1),border-color .3s cubic-bezier(0,0,.2,1)}
.btn-primary{background:var(--primary);color:var(--primary-fg)}
.btn-primary:hover{background:rgba(255,255,255,.9)}
.btn-ghost{color:var(--fg);background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-outline{border:1px solid rgba(255,255,255,.2);color:var(--fg)}
.btn-outline:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04)}

/* reveal ladders (JS-RECON §7.1) */
@keyframes page-reveal{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
[data-page-reveal]>*{animation:.5s var(--ease) backwards page-reveal}
[data-page-reveal]>:nth-child(2){animation-delay:80ms}[data-page-reveal]>:nth-child(3){animation-delay:160ms}[data-page-reveal]>:nth-child(4){animation-delay:240ms}
[data-page-reveal]>:nth-child(5){animation-delay:320ms}[data-page-reveal]>:nth-child(6){animation-delay:400ms}[data-page-reveal]>:nth-child(7){animation-delay:480ms}[data-page-reveal]>:nth-child(8){animation-delay:560ms}
[data-page-reveal] [data-page-reveal]{animation:none}
@keyframes hero-rise{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
[data-hero-content]>*{animation:.7s var(--ease) backwards hero-rise}
[data-hero-content]>:first-child{animation-delay:0s}
[data-hero-content]>:nth-child(2),[data-hero-content]>:nth-child(3),[data-hero-content]>:nth-child(4){animation-delay:.12s}
@keyframes caret-blink{0%,70%,to{opacity:1}20%,50%{opacity:0}}
@keyframes marquee{0%{transform:translate(0)}to{transform:translateX(var(--marquee-shift,-50%))}}

@media (prefers-reduced-motion:reduce){
  [data-page-reveal]>*,[data-hero-content]>*{animation:none}
  .eyebrow::before{animation:none}
}