:root { --paper: #f0eee7; --paper-light: #f7f5ef; --ink: #171714; --muted: #66665d; --rule: #c9c7bd; --accent: #0063a3; --accent-wash: #dcebf1; --mono: "DM Mono", "SFMono-Regular", Consolas, monospace; --sans: Outfit, "Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.site-header { min-height: 72px; padding: 0 4vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule); }
.wordmark { font-size: 1rem; font-weight: 700; letter-spacing: -.05em; }
.nav-action { color: var(--accent); font: 500 .7rem/1 var(--mono); transition: color .2s ease; }
.nav-action:hover { color: var(--ink); }
.hero { min-height: calc(100dvh - 72px); max-width: 1500px; margin: 0 auto; padding: clamp(3rem, 8vw, 8rem) 4vw; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .8fr); gap: clamp(2.5rem, 8vw, 9rem); align-items: center; }
.hero-copy { max-width: 720px; }
.hero h1 { max-width: 680px; margin: 0; font-size: clamp(3.3rem, 6.5vw, 7rem); font-weight: 600; line-height: .9; letter-spacing: -.08em; }
.hero-copy > p { max-width: 520px; margin: 2rem 0 0; color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.55; }
.button { min-height: 48px; margin-top: 2.2rem; padding: 0 1rem; display: inline-flex; align-items: center; gap: .85rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper-light); font: 500 .72rem/1 var(--mono); transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
.button:hover { border-color: var(--accent); background: var(--accent); transform: translateY(-2px); }
.button:active { transform: translateY(1px); }
.hero-field { min-height: min(60vw, 600px); position: relative; overflow: hidden; border: 1px solid var(--ink); background: var(--paper-light); }
.field-label, .field-output { position: absolute; z-index: 2; padding: .9rem; font: 500 .62rem/1 var(--mono); letter-spacing: .08em; }
.field-label { top: 0; left: 0; }
.field-output { right: 0; bottom: 0; color: var(--paper-light); background: var(--ink); }
.field-plane { position: absolute; border: 1px solid var(--rule); transform-origin: center; }
.field-plane--one { top: 15%; left: 10%; width: 52%; height: 63%; background: var(--accent-wash); transform: rotate(-8deg); }
.field-plane--two { top: 31%; right: 10%; width: 54%; height: 48%; background: var(--paper); transform: rotate(13deg); }
.field-mesh { position: absolute; inset: 8%; width: 84%; height: 84%; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 1.2; }
.field-mesh circle { fill: var(--accent); stroke: var(--accent); }

@media (max-width: 760px) { .site-header { padding: 0 1.1rem; }.hero { min-height: calc(100dvh - 72px); padding: 3rem 1.1rem; grid-template-columns: 1fr; gap: 3rem; }.hero-field { min-height: 82vw; }.hero h1 { font-size: clamp(3.1rem, 14vw, 5rem); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }