@font-face { font-family:"Unbounded"; font-weight:300; font-display:swap; src:url(fonts/unbounded-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family:"Unbounded"; font-weight:800; font-display:swap; src:url(fonts/unbounded-latin-800-normal.woff2) format("woff2"); }
:root { --bg:#0b0b0f; --surface:#16161b; --line:#2a2a31; --fg:#f5f5f7; --muted:#a1a1aa; --work:#0a84ff; --life:#ff375f; --blend:#bf5af2; --max:760px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color:#5ea8ff; text-underline-offset:3px; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 20px; }
header.top { border-bottom:1px solid var(--line); }
header.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:14px; padding-bottom:14px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; color:var(--fg); text-decoration:none; }
.brand svg { width:34px; height:34px; }
.wordmark { font-family:"Unbounded", sans-serif; font-size:22px; letter-spacing:-.02em; }
.wordmark .a { font-weight:300; } .wordmark .b { font-weight:800; }
nav.links { display:flex; gap:18px; font-size:15px; }
nav.links a { color:var(--muted); text-decoration:none; } nav.links a:hover, nav.links a[aria-current] { color:var(--fg); }
main { padding:40px 0 64px; }
h1 { font-family:"Unbounded", sans-serif; font-weight:800; font-size:clamp(30px, 6vw, 44px); line-height:1.1; letter-spacing:-.02em; margin:0 0 14px; }
h2 { font-size:22px; margin:36px 0 8px; } h3 { font-size:18px; margin:24px 0 6px; }
p, li { color:#e4e4e7; } .muted { color:var(--muted); } small { color:var(--muted); }
ul { padding-left:22px; } li { margin:4px 0; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin:16px 0; }
.hero { text-align:center; padding:28px 0 8px; }
.hero .icon { width:112px; height:112px; border-radius:26px; margin:0 auto 22px; display:block; box-shadow:0 20px 60px rgba(191,90,242,.25); }
.hero .wordmark { font-size:clamp(40px, 10vw, 64px); display:block; }
.tag { font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:6px 0 26px; }
.lead { font-size:19px; max-width:560px; margin:0 auto; color:#e4e4e7; }
.badges { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:28px 0 8px; }
.badge { border:1px solid var(--line); border-radius:12px; padding:10px 16px; color:var(--muted); font-size:15px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:14px; margin-top:34px; }
.grid .card { margin:0; } .grid h3 { margin-top:0; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; vertical-align:1px; }
footer { border-top:1px solid var(--line); padding:22px 0 40px; font-size:14px; color:var(--muted); }
footer .wrap { display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap; }
footer a { color:var(--muted); }
.updated { color:var(--muted); font-size:14px; margin-top:-6px; }