:root { --bg:#070b16; --card:#10182a; --line:rgba(140,170,220,.22); --ink:#f4f7fb; --muted:#b7c3d6; --cyan:#7ec8ff; --amber:#ffc56a; }
* { box-sizing: border-box; }
body { margin:0; background: radial-gradient(900px 420px at 100% -10%, rgba(90,70,220,.45), transparent 55%), var(--bg); color:var(--ink); font:16px/1.5 Geist, -apple-system, sans-serif; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.skip { position:absolute; left:12px; top:-40px; background:#fff; color:#111; padding:8px; }
.skip:focus { top:12px; }
.wrap { width:min(1180px, calc(100% - 40px)); margin-inline:auto; }
.top { display:flex; align-items:center; gap:28px; padding:22px 0 8px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; }
.brand img { width:28px; height:28px; }
nav { display:flex; gap:8px; margin-left:auto; }
nav a { padding:8px 14px; border-radius:999px; color:var(--muted); font-size:14px; }
nav a[aria-current="page"], nav a:hover { color:#fff; background:rgba(255,255,255,.06); }
.buy { background:linear-gradient(180deg,#ffe08a,#ffb14a); color:#1a1208; font-weight:700; padding:10px 16px; border-radius:999px; }
h1 { font-size:clamp(40px, 5vw, 64px); line-height:1.02; letter-spacing:-.04em; margin:10px 0 12px; font-weight:700; }
.kicker { color:var(--cyan); letter-spacing:.18em; font-size:12px; font-weight:700; }
.lede { color:#c5d0e4; max-width:40rem; margin-top:0; }
.bento { display:grid; grid-template-columns:1.15fr 1fr 1fr; grid-template-rows:260px 260px; gap:16px; padding:10px 0 64px; }
.bento .feature { grid-column:1; grid-row:1 / span 2; }
.bento .card:nth-child(2) { grid-column:2 / span 2; }
.bento .card:nth-child(3) { grid-column:2; }
.bento .card:nth-child(4) { grid-column:3; }
.card { position:relative; display:block; overflow:hidden; border-radius:22px; border:1px solid var(--line); background:#0d1424; min-height:220px; }
.card img { width:100%; height:100%; object-fit:cover; min-height:240px; }
.feature img { min-height:520px; }
.card .cap { position:absolute; left:0; right:0; bottom:0; padding:22px; background:linear-gradient(transparent, rgba(5,8,16,.92)); }
.pill { display:inline-block; border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:3px 8px; font-size:11px; letter-spacing:.12em; }
.card h2, .card h3 { margin:8px 0 4px; letter-spacing:-.03em; }
.card h2 { font-size:clamp(28px, 3vw, 40px); max-width:16ch; }
.meta { color:#c5d0e4; font-size:13px; }
.go { position:absolute; right:16px; bottom:16px; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.3); display:grid; place-items:center; }
.prose { max-width:720px; padding-bottom:48px; }
.prose p { font-size:18px; color:#d5deec; }
.hf-stage { position:relative; width:min(100%,960px); aspect-ratio:16/9; overflow:hidden; border-radius:22px; border:1px solid var(--line); margin:12px 0 28px; }
.hf-stage > div { position:absolute; top:0; left:0; }
.grid-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding-bottom:56px; }
.grid-cards .card img { min-height:220px; }
footer.site { border-top:1px solid var(--line); padding:22px 0 40px; display:flex; justify-content:space-between; gap:12px; color:#9eb0c6; font-size:13px; }
@media (max-width:900px) {
  .bento, .bento .feature { grid-template-columns:1fr; grid-row:auto; }
  .feature img { min-height:280px; }
  nav { display:none; }
}