:root{--bg:#f6f3ea;--ink:#111;--mut:#5b574c;--acc:#f5c400;--acc-ink:#111;--card:#fff;--line:#e2ddcf;--dark:#111;--dark-ink:#f6f3ea;--red:#d62839;--f:'Space Grotesk',system-ui,sans-serif;--m:'JetBrains Mono',ui-monospace,monospace}
[data-theme=modular]{--bg:#eef1f6;--ink:#0b1426;--mut:#4b5870;--acc:#d62839;--acc-ink:#fff;--card:#fff;--line:#d3d9e6;--dark:#0b1426;--dark-ink:#eef1f6;--cob:#2f5bff}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--f)}
a{color:inherit}.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:9}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px max(16px,4vw);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{font-weight:700;font-size:1.5rem;text-decoration:none;letter-spacing:-.03em}
.logo i{display:inline-block;width:.2em;height:.2em;background:var(--acc);margin-left:.06em}
[data-theme=modular] .logo i{background:var(--cob)}
.top nav{display:flex;align-items:center;gap:22px;font-size:.95rem}.top nav a{text-decoration:none}
.pill{display:inline-flex;align-items:center;gap:12px;background:var(--dark);color:var(--dark-ink);border:0;border-radius:99px;padding:14px 18px 14px 26px;font:500 1rem var(--f);text-decoration:none;cursor:pointer}
.pill.sm{padding:9px 16px;font-size:.9rem}.top .pill{color:var(--dark-ink)}
.dot{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--acc);color:var(--acc-ink)}
.pill.sm .dot{display:none}
.ghost{background:none;border:1px solid var(--ink);border-radius:99px;padding:13px 24px;text-decoration:none;font:500 1rem var(--f);cursor:pointer;color:var(--ink)}
.hero,.sec,.foot{padding:clamp(48px,9vw,110px) max(16px,6vw)}
.hero{padding-top:clamp(56px,10vw,130px)}
.eyebrow{font:500 .8rem var(--m);text-transform:uppercase;letter-spacing:.12em;color:var(--mut);margin:0 0 14px}
h1{font-size:clamp(2.6rem,8vw,6rem);line-height:1;letter-spacing:-.045em;margin:0 0 22px;max-width:14ch}
h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--acc) 62%)}
h2{font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 14px;max-width:22ch}
h3{margin:0 0 6px;font-size:1.2rem}
.lead,.sub{font-size:1.2rem;color:var(--mut);max-width:60ch;margin:0 0 26px}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.chips li{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:6px 14px;font-size:.9rem}
.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:30px}
.area{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px}
.area header{margin-bottom:12px}.area header p{margin:0;color:var(--mut);font-size:.95rem}
.num{font:500 .75rem var(--m);text-transform:uppercase;letter-spacing:.1em;color:var(--mut)}
details{border-top:1px solid var(--line);padding:10px 0}details summary{cursor:pointer;font-weight:500}details p{margin:8px 0 0;color:var(--mut);font-size:.95rem}
.dark{background:var(--dark);color:var(--dark-ink)}.dark .eyebrow,.dark .sub,.dark .num{color:#a8b4cc}
.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:30px 0}
.mod{border:1px solid #ffffff2e;border-radius:18px;padding:22px}.mod p{color:#c9c9c2;font-size:.95rem;margin:0}
.dark .note{font-family:var(--m);font-size:.9rem;color:var(--acc)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.filters button{border:1px solid var(--ink);background:none;color:var(--ink);border-radius:99px;padding:7px 16px;font:500 .9rem var(--f);cursor:pointer}
.filters button.on{background:var(--ink);color:var(--bg)}
.proj{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px}.card p{color:var(--mut);margin:0;font-size:.95rem}
.tag{display:inline-block;font:500 .72rem var(--m);text-transform:uppercase;background:var(--acc);color:var(--acc-ink);padding:3px 10px;border-radius:99px;margin-bottom:12px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;list-style:none;padding:0;margin:28px 0 0}
.steps li{border-top:3px solid var(--ink);padding-top:14px}.steps b{display:block;font-size:1.15rem}.steps span{color:var(--mut)}
.form-sec{background:var(--card);border-top:1px solid var(--line)}
form{max-width:640px;margin-top:24px}
fieldset{border:0;padding:0;margin:0 0 22px;display:grid;gap:14px}
legend{font:500 .8rem var(--m);text-transform:uppercase;letter-spacing:.1em;color:var(--mut);margin-bottom:12px;padding:0}
label{display:grid;gap:6px;font-weight:500;font-size:.95rem}label small{font-weight:400;color:var(--mut)}
input,select,textarea{font:400 1rem var(--f);padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);width:100%}
.checks{display:flex;flex-wrap:wrap;gap:8px}.checks>span{width:100%;font-weight:500;font-size:.95rem}
.chk{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:99px;padding:7px 14px;font-weight:400;cursor:pointer;background:var(--bg)}.chk input{width:auto}
.hp{position:absolute;left:-9999px}.nav-steps{display:flex;gap:10px}
.msg{padding:14px 18px;border-radius:14px;max-width:640px}.msg.ok{background:#e4f5e1}.msg.err{background:#fde3e3}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;background:var(--dark);color:var(--dark-ink);padding-top:40px;padding-bottom:40px}.foot p{margin:4px 0 0;color:#a8b4cc}
.err-page{min-height:100vh;display:grid;place-items:center;text-align:center;padding:24px}
.err-page h1{font-size:clamp(4rem,16vw,8rem);max-width:none;margin:0}.err-page h1 i{display:inline-block;width:.16em;height:.16em;background:var(--acc);margin-left:.04em}
.err-page .small{margin-top:30px;font-size:.85rem;color:var(--mut)}.err-page p{color:var(--mut)}
@media(max-width:720px){.top nav a:not(.pill){display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}