/* Tokens, reset, and base */
:root {
  --color-ink: #09213d;
  --color-ink-soft: #36516f;
  --color-blue: #1264d8;
  --color-blue-deep: #0b4ca8;
  --color-electric: #25a7ff;
  --color-paper: #f7faff;
  --color-white: #ffffff;
  --color-line: #d8e4f1;
  --color-line-strong: #b8cde3;
  --color-pale-blue: #eaf3fc;
  --color-on-dark: #c5d7ea;
  --color-dark-line: #294b70;
  --color-dark-surface: #102f53;
  --color-dark-surface-hover: #163d68;
  --color-blue-glow: rgba(18, 100, 216, 0.1);
  --color-electric-glow: rgba(37, 167, 255, 0.12);
  --font-sans: "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --radius-sm: 0.2rem;
  --radius-md: 0.5rem;
  --shadow-soft: 0 1.5rem 3rem rgba(9, 33, 61, 0.08);
  --transition-fast: 180ms ease;
  --max-width: 76rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--color-ink); background: var(--color-paper); font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; }
body:has(.legal-hero) { line-height: 1.7; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }

/* Shared components */
a:focus-visible, button:focus-visible { outline: 3px solid var(--color-electric); outline-offset: 4px; }
.skip-link { position: absolute; left: var(--space-4); top: -4rem; z-index: 10; padding: var(--space-2) var(--space-3); color: var(--color-white); background: var(--color-ink); }
.skip-link:focus { top: var(--space-3); }
.container { width: min(calc(100% - 3rem), var(--max-width)); margin: 0 auto; }
.mono-label { color: var(--color-blue-deep); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.4; text-transform: uppercase; }
.site-header { position: relative; z-index: 5; border-bottom: 1px solid var(--color-line); background: rgba(247, 250, 255, 0.94); }
.nav-shell { display: flex; align-items: center; justify-content: space-between; min-height: 5rem; gap: var(--space-6); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-ink); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.03em; text-decoration: none; }
.brand-mark { display: block; width: 1.35rem; height: 1.35rem; }
.nav-toggle { display: none; padding: var(--space-2); border: 1px solid var(--color-line-strong); color: var(--color-ink); background: transparent; cursor: pointer; }
.nav-toggle span { display: block; width: 1.4rem; height: 2px; margin: 0.25rem; background: currentColor; }
.nav-links { display: flex; align-items: center; gap: var(--space-6); color: var(--color-ink-soft); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.nav-links a { text-decoration: none; transition: color var(--transition-fast); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-blue); }
.nav-cta, .button-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); border: 1px solid var(--color-blue); color: var(--color-white); background: var(--color-blue); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); }
.nav-cta { min-height: 2.5rem; padding: 0 var(--space-4); }
.button-primary { min-height: 3.5rem; padding: 0 var(--space-6); }
.nav-cta:hover, .button-primary:hover { border-color: var(--color-blue-deep); background: var(--color-blue-deep); transform: translateY(-2px); }
.button-arrow { font-size: 1.1rem; line-height: 1; }
footer { border-top: 1px solid var(--color-line); background: var(--color-white); }
.footer-shell { display: flex; align-items: center; justify-content: space-between; min-height: 6rem; gap: var(--space-4); color: var(--color-ink-soft); font-family: var(--font-mono); font-size: 0.68rem; }
.footer-links { display: flex; gap: var(--space-5); }
.footer-links a { text-underline-offset: 0.2rem; }
.hero-kicker { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.hero-kicker::before { width: 2.3rem; height: 1px; background: var(--color-electric); content: ""; }

/* Home page */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--color-line); background: var(--color-white); }
.hero::before { position: absolute; inset: 0; background-image: linear-gradient(var(--color-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-line) 1px, transparent 1px); background-size: 4rem 4rem; content: ""; opacity: 0.4; mask-image: linear-gradient(90deg, black, transparent 80%); }
.hero-shell { position: relative; display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(22rem, 0.97fr); align-items: center; gap: var(--space-8); min-height: 41rem; padding-top: var(--space-9); padding-bottom: var(--space-9); }
.hero-copy { position: relative; z-index: 1; max-width: 38rem; }
.hero h1 { max-width: 39rem; margin-bottom: var(--space-5); color: var(--color-ink); font-size: clamp(3.2rem, 7vw, 6.8rem); font-weight: 600; letter-spacing: -0.075em; line-height: 0.98; }
.hero-copy > p { max-width: 33rem; margin-bottom: var(--space-7); color: var(--color-ink-soft); font-size: 1.15rem; line-height: 1.65; }
.hero-note { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); color: var(--color-ink-soft); font-family: var(--font-mono); font-size: 0.68rem; }
.hero-note i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-electric); box-shadow: 0 0 0 0.3rem var(--color-electric-glow); }
.network-visual { position: relative; min-height: 25rem; border: 1px solid var(--color-line-strong); background: var(--color-paper); box-shadow: var(--shadow-soft); }
.network-visual::before { position: absolute; inset: 2rem; background-image: linear-gradient(var(--color-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-line) 1px, transparent 1px); background-size: 2.5rem 2.5rem; content: ""; }
.network-visual::after { position: absolute; top: 50%; left: 10%; width: 80%; height: 1px; background: var(--color-line-strong); box-shadow: 0 -5rem 0 var(--color-line), 0 5rem 0 var(--color-line); content: ""; transform: rotate(-13deg); transform-origin: center; }
.network-meta { position: absolute; top: var(--space-4); left: var(--space-5); z-index: 2; }
.network-status { position: absolute; right: var(--space-5); bottom: var(--space-4); z-index: 2; color: var(--color-ink-soft); font-family: var(--font-mono); font-size: 0.65rem; }
.node { position: absolute; z-index: 3; width: 0.7rem; height: 0.7rem; border: 2px solid var(--color-blue); border-radius: 50%; background: var(--color-white); box-shadow: 0 0 0 0.4rem var(--color-blue-glow); }
.node::after { position: absolute; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: var(--color-electric); content: ""; inset: 0; margin: auto; }
.node-a { top: 24%; left: 25%; }
.node-b { top: 39%; right: 25%; }
.node-c { bottom: 25%; left: 37%; }
.node-d { right: 13%; bottom: 17%; }
.node-label { position: absolute; z-index: 3; color: var(--color-blue-deep); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; }
.label-a { top: 18%; left: 29%; }
.label-b { top: 33%; right: 15%; }
.label-c { bottom: 18%; left: 42%; }
.section { padding: var(--space-10) 0; }
.section-header { display: grid; grid-template-columns: 0.65fr 1.35fr; gap: var(--space-8); margin-bottom: var(--space-8); }
.section-header h2 { max-width: 36rem; margin-bottom: 0; color: var(--color-ink); font-size: clamp(2.3rem, 4.5vw, 4rem); font-weight: 600; letter-spacing: -0.06em; line-height: 1.05; }
.section-intro { max-width: 34rem; margin: var(--space-3) 0 0; color: var(--color-ink-soft); font-size: 1.1rem; }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--color-line-strong); }
.capability { min-height: 17rem; padding: var(--space-6) var(--space-5) var(--space-5) 0; border-bottom: 1px solid var(--color-line-strong); transition: transform var(--transition-fast), background var(--transition-fast), padding var(--transition-fast); }
.capability + .capability { padding-left: var(--space-5); border-left: 1px solid var(--color-line-strong); }
.capability:hover { padding-top: calc(var(--space-6) - 0.35rem); background: var(--color-pale-blue); transform: translateY(-0.35rem); }
.capability-number { color: var(--color-electric); font-family: var(--font-mono); font-size: 0.75rem; }
.capability h3 { max-width: 15rem; margin: var(--space-8) 0 var(--space-3); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
.capability p { max-width: 16rem; margin-bottom: 0; color: var(--color-ink-soft); font-size: 0.95rem; }
.audience-section { background: var(--color-ink); color: var(--color-white); }
.audience-section .section-header h2 { color: var(--color-white); }
.audience-section .mono-label { color: var(--color-electric); }
.audience-section .section-intro { color: var(--color-on-dark); }
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.audience-item { display: flex; flex-direction: column; min-height: 12rem; padding: var(--space-5); border: 1px solid var(--color-dark-line); background: var(--color-dark-surface); transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); }
.audience-item:hover { border-color: var(--color-electric); background: var(--color-dark-surface-hover); transform: translateY(-0.3rem); }
.audience-index { display: block; margin-bottom: var(--space-7); color: var(--color-electric); font-family: var(--font-mono); font-size: 0.72rem; }
.audience-item h3 { margin-bottom: var(--space-3); color: var(--color-white); font-size: 1.45rem; font-weight: 500; letter-spacing: -0.03em; }
.audience-item p { margin-bottom: var(--space-5); color: var(--color-on-dark); font-size: 0.92rem; line-height: 1.6; }
.audience-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.audience-tags span { padding: 0.3rem var(--space-2); border: 1px solid var(--color-dark-line); color: var(--color-electric); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.04em; line-height: 1.2; }
.contact-section { padding: var(--space-10) 0; background: var(--color-pale-blue); }
.contact-shell { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr); align-items: center; gap: var(--space-8); }
.contact-copy { max-width: 38rem; }
.contact-shell h2 { max-width: 35rem; margin: var(--space-4) 0 var(--space-7); font-size: clamp(2.8rem, 5vw, 4.8rem); font-weight: 600; letter-spacing: -0.07em; line-height: 1; }
.contact-detail { display: flex; align-items: flex-start; flex-direction: column; gap: var(--space-3); }
.contact-visual { display: flex; align-items: center; justify-content: center; min-height: 20rem; }
.contact-illustration { display: block; max-width: 100%; max-height: 22rem; width: auto; height: auto; }
.contact-email-label, .contact-response-time { color: var(--color-ink-soft); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.contact-response-time { letter-spacing: 0; text-transform: none; }
.contact-email { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-blue); font-family: var(--font-sans); font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.2; text-decoration: none; }
.contact-email::after { position: absolute; right: 0; bottom: -0.3rem; left: 0; height: 2px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: right; transition: transform var(--transition-fast); }
.contact-email span { display: inline-block; font-family: var(--font-mono); font-size: 0.7em; transition: transform var(--transition-fast); }
.contact-email:hover { color: var(--color-blue-deep); }
.contact-email:hover::after { transform: scaleX(1); transform-origin: left; }
.contact-email:hover span { transform: translate(0.18rem, -0.18rem); }
body:has(.hero) .reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 700ms ease, transform 700ms ease; }
body:has(.hero) .reveal.is-visible { opacity: 1; transform: translateY(0); }
.hero-copy > * { animation: hero-in 700ms both; }
.hero-copy > :nth-child(2) { animation-delay: 100ms; }
.hero-copy > :nth-child(3) { animation-delay: 180ms; }
.hero-copy > :nth-child(4) { animation-delay: 260ms; }
@keyframes hero-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }

/* Legal pages */
.legal-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--color-line); background: var(--color-white); }
.legal-hero::before { position: absolute; inset: 0; background-image: linear-gradient(var(--color-line) 1px, transparent 1px), linear-gradient(90deg, var(--color-line) 1px, transparent 1px); background-size: 4rem 4rem; content: ""; opacity: 0.4; mask-image: linear-gradient(90deg, black, transparent 80%); }
.legal-hero-content { position: relative; padding: var(--space-9) 0 var(--space-8); }
.legal-hero h1 { max-width: 46rem; margin-bottom: var(--space-5); color: var(--color-ink); font-size: clamp(3.2rem, 7vw, 6rem); font-weight: 600; letter-spacing: -0.075em; line-height: 0.98; }
.intro { max-width: 38rem; margin-bottom: var(--space-5); color: var(--color-ink-soft); font-size: 1.15rem; }
.updated { color: var(--color-blue-deep); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em; }
.document-section { padding: var(--space-9) 0 var(--space-10); }
.document { width: min(calc(100% - 3rem), 48rem); margin-right: auto; margin-left: max(1.5rem, calc((100% - var(--max-width)) / 2)); }
.back-link { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-8); color: var(--color-blue-deep); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; text-underline-offset: 0.25rem; }
.legal-section { padding: var(--space-6) 0; border-top: 1px solid var(--color-line-strong); }
.legal-section:last-child { border-bottom: 1px solid var(--color-line-strong); }
.section-number { display: block; margin-bottom: var(--space-3); color: var(--color-electric); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; }
.document h2 { margin-bottom: var(--space-4); font-size: clamp(1.55rem, 3vw, 2rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1.15; }
.document h3 { margin: var(--space-5) 0 var(--space-2); font-size: 1.05rem; font-weight: 600; }
.document p, .document li { color: var(--color-ink-soft); }
.document p:last-child { margin-bottom: 0; }
.document ul { margin: var(--space-3) 0 0; padding-left: var(--space-5); }
.document li + li { margin-top: var(--space-2); }
.document a { color: var(--color-blue-deep); text-underline-offset: 0.2rem; }
body:has(.legal-hero) .reveal { animation: document-in 600ms both; }
@keyframes document-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 48rem) {
  .container { width: min(calc(100% - 2rem), var(--max-width)); }
  .nav-shell { min-height: 4.25rem; }
  .site-header:has(.nav-toggle) .nav-toggle { display: block; }
  .site-header:has(.nav-toggle) .nav-links { position: absolute; top: 4.25rem; right: 1rem; left: 1rem; display: none; align-items: stretch; flex-direction: column; gap: 0; padding: var(--space-3); border: 1px solid var(--color-line-strong); background: var(--color-white); box-shadow: var(--shadow-soft); }
  .site-header:has(.nav-toggle) .nav-links.is-open { display: flex; }
  .site-header:has(.nav-toggle) .nav-links a, .site-header:has(.nav-toggle) .nav-cta { padding: var(--space-3); }
  .site-header:has(.nav-toggle) .nav-cta { margin-top: var(--space-2); }
  .hero-shell { display: block; min-height: auto; padding-top: var(--space-9); padding-bottom: var(--space-8); }
  .hero h1, .legal-hero h1 { font-size: clamp(3.2rem, 17vw, 5.4rem); }
  .network-visual { min-height: 20rem; margin-top: var(--space-8); }
  .section { padding: var(--space-9) 0; }
  .section-header { display: block; margin-bottom: var(--space-7); }
  .section-header h2 { margin-top: var(--space-4); }
  .capability-grid, .audience-grid { grid-template-columns: 1fr; }
  .capability, .capability + .capability { min-height: auto; padding: var(--space-5) 0; border-left: 0; }
  .capability:hover { padding-top: calc(var(--space-5) - 0.25rem); }
  .capability h3 { margin-top: var(--space-5); }
  .audience-item { min-height: auto; }
  .audience-index { margin-bottom: var(--space-5); }
  .contact-shell { display: block; }
  .contact-visual { min-height: auto; margin-top: var(--space-7); }
  .contact-illustration { max-width: 80%; max-height: 18rem; }
  .legal-hero-content { padding: var(--space-8) 0 var(--space-7); }
  .document-section { padding: var(--space-8) 0; }
  .document { width: min(calc(100% - 2rem), 48rem); margin-right: auto; margin-left: 1rem; }
  body:has(.legal-hero) .nav-links { gap: var(--space-4); font-size: 0.65rem; }
  .footer-shell { align-items: flex-start; flex-direction: column; justify-content: center; padding: var(--space-5) 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; }
  body:has(.hero) .reveal { opacity: 1; transform: none; }
}