/* Base reset */
* { box-sizing: border-box; }
html { color-scheme: light dark; }
:root {
--bg: #fff;
--text: #111;
--muted: #666;
--brand: #4f46e5;
--card: #f6f7f9;
}
@media (prefers-color-scheme: dark) {
:root { --bg: #0b0c0e; --text: #e7e9ee; --muted: #a0a3aa; --card: #121418; }
}
html, body { margin: 0; }
body.site { background: var(--bg); color: var(--text); font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }


/* Layout */
.site__header { position: sticky; top: 0; backdrop-filter: blur(6px); background: color-mix(in oklab, var(--bg) 80%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--text) 12%, transparent); }
.site__main { max-width: 72rem; margin: 0 auto; padding: 2rem 1rem; }
.site__footer { padding: 2rem 1rem; text-align: center; color: var(--muted); border-top: 1px solid color-mix(in oklab, var(--text) 12%, transparent); }


/* Nav */
.nav { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .5rem; max-width: 72rem; margin: 0 auto; padding: .75rem 1rem; }
.nav__brand { font-weight: 700; text-decoration: none; color: var(--text); }
.nav__btn { background: transparent; border: 1px solid color-mix(in oklab, var(--text) 20%, transparent); border-radius: .6rem; padding: .4rem .6rem; cursor: pointer; }
.nav__btn--menu { display: none; }
.nav__list { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; }
.nav__list a { text-decoration: none; color: var(--text); }


@media (max-width: 720px) {
.nav { grid-template-columns: 1fr auto auto; }
.nav__btn--menu { display: inline-block; }
.nav__list { display: block; padding: .75rem 0; }
.nav__list[hidden] { display: none; }
.nav__list li { padding: .35rem 0; }
}


/* Hero */
.hero { display: grid; gap: 1rem; align-content: start; padding: 3rem 0; }
.hero__title { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; }
.hero__lede { color: var(--muted); max-width: 60ch; }
.btn { display: inline-block; background: var(--brand); color: white; padding: .75rem 1rem; border-radius: .75rem; text-decoration: none; font-weight: 600; }


/* Cards */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.card { background: var(--card); border: 1px solid color-mix(in oklab, var(--text) 12%, transparent); border-radius: .9rem; padding: 1rem; }
.card__title { margin-top: 0; }


@media (max-width: 960px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }


/* Utilities */
.flow > * + * { margin-top: 1rem; }