:root {
  color-scheme: light dark;
  --bg: #f2f0e9;
  --surface: rgba(255,255,255,.55);
  --text: #17202c;
  --muted: #67717f;
  --line: rgba(23,32,44,.16);
  --accent: #315f7c;
  --button-text: #fff;
  --width: 1120px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
  background: radial-gradient(circle at 85% 5%, rgba(49,95,124,.13), transparent 28rem), var(--bg);
}
a { color: inherit; }
.header, main, footer { width: min(calc(100% - 3rem), var(--width)); margin-inline: auto; }
.header { min-height: 5.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { font-weight: 760; letter-spacing: .08em; text-decoration: none; }
nav { display: flex; gap: 1.6rem; }
nav a { color: var(--muted); font-size: .9rem; text-decoration: none; }
nav a:hover, nav a:focus-visible { color: var(--text); }
.hero { min-height: min(42rem,78vh); display: flex; flex-direction: column; justify-content: center; padding: 5rem 0; }
.eyebrow, .number, article span, .error-code { color: var(--accent); font-size: .76rem; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
.hero h1 { max-width: 850px; margin: 0; font-size: clamp(3rem,8.5vw,7rem); line-height: .94; letter-spacing: -.06em; }
.lead { max-width: 43rem; margin: 2rem 0; color: var(--muted); font-size: clamp(1.05rem,2vw,1.3rem); }
.button { display: inline-block; width: fit-content; padding: .78rem 1.05rem; border-radius: .35rem; color: var(--button-text); background: var(--accent); font-weight: 650; text-decoration: none; }
.section { display: grid; grid-template-columns: minmax(10rem,.7fr) minmax(0,1.7fr); gap: 4rem; padding: 6rem 0; border-top: 1px solid var(--line); }
.section h2 { margin: 0; font-size: clamp(2rem,4vw,3.2rem); letter-spacing: -.04em; }
.number { margin: 0 0 1rem; }
.copy { max-width: 44rem; font-size: 1.1rem; }
.copy p:first-child { margin-top: 0; }
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.cards article { min-height: 16rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); }
.cards h3 { margin: 1rem 0; font-size: 1.25rem; }
.cards p, .principles span { color: var(--muted); }
.principles { margin: 0; padding: 0; list-style: none; }
.principles li { display: grid; grid-template-columns: 10rem 1fr; gap: 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.principles li:first-child { border-top: 1px solid var(--line); }
footer { min-height: 8rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.error-page { min-height: 100vh; display: grid; place-items: center; }
.error-box { width: min(calc(100% - 3rem),42rem); margin: 0; }
.error-code { margin: 6rem 0 0; }
.error-box h1 { margin: .5rem 0; font-size: clamp(3rem,10vw,6rem); line-height: 1; letter-spacing: -.06em; }
.error-box > p:not(.error-code) { margin: 1.5rem 0 2rem; color: var(--muted); font-size: 1.1rem; }
@media (max-width: 760px) {
  .header { align-items: flex-start; flex-direction: column; justify-content: center; gap: .75rem; padding: 1.25rem 0; }
  nav { gap: 1rem; }
  .section { grid-template-columns: 1fr; gap: 2rem; padding: 4.5rem 0; }
  .cards { grid-template-columns: 1fr; }
  .cards article { min-height: auto; }
  .principles li { grid-template-columns: 1fr; gap: .3rem; }
  footer { align-items: flex-start; flex-direction: column; justify-content: center; }
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121821; --surface: rgba(255,255,255,.035); --text: #edf1f5; --muted: #9ca7b4; --line: rgba(255,255,255,.13); --accent: #78aac9; --button-text: #101820; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }