/* styles.css */
:root {
--bg: #0b0c10;
--fg: #e8e8ea;
--muted: #b9bcc6;
--accent: #e11d48; /* rose */
--card: #121317;
--ring: #2a2d39;
}
@media (prefers-color-scheme: light) {
:root { --bg:#ffffff; --fg:#111827; --muted:#6b7280; --card:#f8fafc; --ring:#e5e7eb; }
}
html,body { height: 100%; }
body {
margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, sans-serif;
background: radial-gradient(1200px 600px at 80% -10%, rgba(225,29,72,.08), transparent 60%), var(--bg);
color: var(--fg); display: grid; min-height: 100dvh; grid-template-rows: auto 1fr auto;
}
.wrap { width: min(100%, 960px); margin-inline: auto; padding: 20px; }
header { border-bottom: 1px solid var(--ring); backdrop-filter: blur(6px); position: sticky; top: 0; background: color-mix(in oklab, var(--bg) 92%, transparent); }
.header-row { display:flex; align-items:center; justify-content:space-between; gap:16px }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.logo { width:28px; height:28px; display:grid; place-items:center; border-radius:999px; border:1px solid var(--ring); background: var(--card); }
.logo svg { width:18px; height:18px; }
nav a { color: inherit; text-decoration: none; margin-left: 18px; font-size: 0.95rem; opacity:.9 }
nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }


.hero { padding: clamp(28px, 6vw, 80px) 0; }
h1 { font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.15; margin: 0 0 10px; }
.tag { display:inline-block; font-size: .9rem; color: var(--muted); }
p.lead { font-size: clamp(1rem, 2.1vw, 1.25rem); color: var(--muted); margin: 14px 0 22px; max-width: 58ch; }


.cta { display:flex; gap:12px; flex-wrap:wrap }
.btn { appearance:none; border:1px solid var(--ring); background: var(--card); color: var(--fg); padding: 10px 14px; border-radius: 999px; text-decoration:none; font-weight:600; font-size: .98rem; }
.btn.primary { background: var(--accent); border-color: transparent; color: white; }
.btn:hover { filter: brightness(1.05); }


.grid { display:grid; gap:16px; grid-template-columns: repeat(12, 1fr); margin-top: 26px; }
.card { grid-column: span 12; background: var(--card); border:1px solid var(--ring); border-radius: 16px; padding: 18px 16px; }
.card h3 { margin: 2px 0 6px; font-size: 1.05rem; }
.card p { margin: 0; color: var(--muted); }
@media (min-width: 720px) { .card { grid-column: span 4; } }


footer { border-top: 1px solid var(--ring); font-size: .95rem; color: var(--muted); }
.foot { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.foot a { color: inherit; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }