/* CSS Reset - modern, minimal */
*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{margin:0;min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;line-height:1.5;color:#0a0a0a;background:#fff}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
input,button,textarea,select{font:inherit;color:inherit}
:root{
  --bg:#ffffff;
  --fg:#0a0a0a;
  --muted:#5a5a5a;
  --accent:#0d6efd;
  --border:#e5e5e5;
  --card:#f8f8f8;
  --max:72rem;
  --pad:clamp(1rem,2vw,1.5rem)
}
@media (prefers-color-scheme: dark){
  :root{--bg:#0b0c0e;--fg:#f4f6f8;--muted:#b0b6bd;--accent:#6ea8fe;--border:#22252a;--card:#121419}
  body{background:var(--bg);color:var(--fg)}
}

/* Layout */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
header{position:sticky;top:0;background:color-mix(in oklab, var(--bg) 92%, transparent);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.75rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit}
.brand-logo{width:2rem;height:2rem;border-radius:.5rem;background:var(--fg);color:var(--bg);display:grid;place-items:center;font-weight:700;letter-spacing:.5px}
.brand-name{font-weight:700}
nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
nav a{color:inherit;text-decoration:none}
nav a:focus, nav a:hover{outline:2px solid transparent;text-decoration:underline}

.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:var(--pad);top:.5rem;width:auto;height:auto;background:var(--fg);color:var(--bg);padding:.5rem .75rem;border-radius:.5rem;z-index:1000}

.hero{padding-block:clamp(4rem,6vw,6rem);border-bottom:1px solid var(--border)}
.hero h1{font-size:clamp(2rem,6vw,3.5rem);line-height:1.1;margin:0}
.hero p{font-size:clamp(1.125rem,2.25vw,1.25rem);max-width:45ch;color:var(--muted)}

.grid{display:grid;gap:1.25rem;grid-template-columns:repeat(12,1fr)}
.col-6{grid-column:span 12}
@media(min-width:48rem){.col-6{grid-column:span 6}}

section{padding-block:clamp(2.5rem,4vw,3.5rem);border-bottom:1px solid var(--border)}
h2{font-size:clamp(1.5rem,3vw,2rem);line-height:1.2;margin:0 0 .75rem 0}
p{margin:.5rem 0 1rem 0;max-width:65ch}

.card{background:var(--card);border:1px solid var(--border);padding:1rem;border-radius:.75rem}
.list{display:grid;gap:.75rem}

.kicker{letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;color:var(--muted)}

.principles{display:grid;gap:1rem}
@media(min-width:48rem){.principles{grid-template-columns:repeat(3,1fr)}}

.contact{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.625rem .9rem;border:1px solid var(--border);border-radius:.6rem;text-decoration:none;background:transparent}
.btn:hover,.btn:focus{text-decoration:none;outline:2px solid transparent;border-color:var(--fg)}

footer{padding-block:2rem;color:var(--muted)}
footer nav ul{flex-wrap:wrap}