/* F — Blueprint: deep navy, pale-cyan dots, faint drafting grid, technical mono labels. */
:root {
  --ground: #08162b; --ground-rgb: 8,22,43; --ground-2: #0c1f3a;
  --ink: #e6f3ff; --ink-soft: #b4c9de; --rule: rgba(150,205,255,.22);
  --accent: #6fd3ff; --btn-bg: #6fd3ff; --btn-fg: #06172c; --btn-hover-fg: #06172c;
  --cta-bg: #6fd3ff; --cta-fg: #06172c; --cta-soft: rgba(6,23,44,.75); --cta-accent: #0a3a63;
  --display: 'Syne', system-ui, sans-serif; --body: 'DM Sans', system-ui, sans-serif; --mono: 'DM Mono', ui-monospace, monospace;
  --display-weight: 700; --h-track: -.03em;
  --brand-font: 800 21px/1 var(--display); --num-font: 500 15px/1 var(--mono); --caption-font: 400 12px var(--mono);
  --radius: 0px;
}
body { background-image: linear-gradient(rgba(111,211,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(111,211,255,.05) 1px, transparent 1px); background-size: 48px 48px; background-attachment: fixed; }
.hero, .tangle { background: var(--ground); background-image: linear-gradient(rgba(111,211,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(111,211,255,.06) 1px, transparent 1px); background-size: 48px 48px; }
.btn-ghost { border-color: rgba(230,243,255,.4); } .btn-ghost:hover { color: #06172c; }
.hero { min-height: 100svh; display: flex; align-items: center; }
.scrim { background: linear-gradient(90deg, rgba(8,22,43,.96) 0%, rgba(8,22,43,.86) 38%, rgba(8,22,43,0) 68%), linear-gradient(180deg, rgba(8,22,43,0) 82%, var(--ground) 100%); }
.hero-copy { max-width: 660px; padding: 120px 28px 96px clamp(24px, 6vw, 96px); }
.hero h1 { font-size: clamp(42px, 6vw, 88px); line-height: 1; margin-top: 16px; }
.hero h1 em { font-style: normal; }
.hero .caption { position: absolute; right: 28px; bottom: 22px; z-index: 2; letter-spacing: .08em; }
.hero-copy::before { content: 'FIG. 01 / LABOUR_ONE'; display: block; margin-bottom: 18px; font: 400 11px/1 var(--mono); letter-spacing: .14em; color: var(--ink-soft); }
.tangle { min-height: 92vh; align-items: flex-end; }
.tangle .scrim { background: linear-gradient(0deg, rgba(8,22,43,.96) 0%, rgba(8,22,43,.8) 34%, rgba(8,22,43,0) 64%), linear-gradient(180deg, var(--ground) 0%, rgba(8,22,43,0) 14%); }
.tangle-copy { max-width: 760px; padding: 96px clamp(24px, 6vw, 96px); }
.tangle-copy .lede { max-width: 560px; }
.chips li { background: rgba(8,22,43,.7); }
.section.alt { background: var(--ground-2); }
@media (max-width: 700px) {
  .hero { align-items: flex-start; min-height: 0; }
  .hero-copy { padding: 92px 20px 62vw; }
  .scrim { background: linear-gradient(180deg, rgba(8,22,43,.94) 0%, rgba(8,22,43,.9) 40%, rgba(8,22,43,.55) 62%, rgba(8,22,43,0) 82%), linear-gradient(180deg, rgba(8,22,43,0) 90%, var(--ground) 100%); }
  .hero .caption { display: none; }
  .tangle { min-height: 0; }
  .tangle-copy { padding: 120px 20px 48px; }
  .tangle .scrim { background: linear-gradient(180deg, var(--ground) 0%, rgba(8,22,43,0) 18%, rgba(8,22,43,.6) 50%, rgba(8,22,43,.95) 100%); }
}

/* final call-to-action: ants marching behind the type */
.cta { position: relative; overflow: hidden; min-height: 80vh; display: flex; align-items: center; }
.cta .wrap { position: relative; z-index: 2; width: 100%; }
.cta [data-dither] { mix-blend-mode: multiply; }
.cta-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 44% 54% at 50% 50%, rgba(111,211,255,.97) 0%, rgba(111,211,255,.9) 52%, rgba(111,211,255,0) 100%); }
@media (max-width: 700px) {
  .cta { min-height: 0; padding: 120px 0; }
  .cta-scrim { background: radial-gradient(ellipse 80% 46% at 50% 50%, rgba(111,211,255,.96) 0%, rgba(111,211,255,.9) 55%, rgba(111,211,255,0) 100%); }
}