:root { --bg:#0f1115; --surface:#161920; --fg:#f2f3f5; --muted:#b4b9c0; --faint:#7d838c; --accent:#ff8a3d; --glass:rgba(15,17,21,.62); --line:rgba(255,255,255,.14); --grid:rgba(255,255,255,.08); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 system-ui,sans-serif; }
body.plain { background:radial-gradient(1200px 600px at 50% -200px, rgba(255,138,61,.12), transparent), var(--bg); }
a { color:var(--accent); }
code { font:.92em ui-monospace,monospace; background:rgba(255,255,255,.06); padding:1px 5px; border-radius:4px; }
#bg { position:fixed; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; filter:blur(28px) brightness(.55); transform:scale(1.15); }
#veil { position:fixed; inset:0; z-index:-1; background:linear-gradient(rgba(15,17,21,.35), rgba(15,17,21,.8)); }

/* Navigation */
.nav { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px clamp(16px,4vw,64px); background:rgba(15,17,21,.78); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; color:var(--fg); font-weight:700; text-decoration:none; font-size:1.1rem; }
.brand img { border-radius:7px; }
.nav nav { display:flex; gap:4px; flex-wrap:wrap; }
.nav nav a { color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:6px; font-size:.95rem; }
.nav nav a:hover, .nav nav a[aria-current="page"] { color:var(--fg); background:rgba(255,255,255,.08); }

/* Wide screens get the width: content grows to 1600px with a gutter that scales from 16px on a phone. */
main { max-width:1600px; margin:0 auto; padding:0 clamp(16px,4vw,64px) 64px; }
section { padding:56px 0 0; }
.hero { text-align:center; padding-top:72px; }
.hero img.logo { width:112px; height:112px; border-radius:24px; box-shadow:0 8px 32px rgba(0,0,0,.5); }
.page-head { text-align:center; padding-top:56px; }
.page-head p { color:var(--muted); max-width:620px; margin:0 auto; font-size:1.1rem; }
h1 { font-size:clamp(2.2rem,6vw,3.6rem); margin:16px 0 8px; line-height:1.15; }
.page-head h1 { font-size:clamp(2rem,5vw,3rem); }
h2 { font-size:1.6rem; margin:0 0 20px; text-align:center; }
h3 { margin:0 0 6px; font-size:1.1rem; }
.lead { color:var(--muted); font-size:1.15rem; max-width:580px; margin:0 auto; }
.muted { color:var(--muted); }
.btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:32px 0 0; }
a.btn { display:inline-block; padding:12px 24px; border-radius:8px; background:var(--accent); color:#111; font-weight:600; text-decoration:none; }
a.btn.alt { background:var(--glass); color:var(--fg); border:1px solid var(--line); backdrop-filter:blur(8px); }

.card { background:var(--glass); border:1px solid var(--line); border-radius:16px; backdrop-filter:blur(10px); overflow:hidden; }
.pad { padding:24px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; }
.grid .card { padding:20px; }
.grid p { margin:0; color:var(--muted); }

/* Hero numbers */
.numbers { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:40px; }
.numbers div { background:var(--glass); border:1px solid var(--line); border-radius:12px; padding:16px; text-align:center; }
.numbers b { display:block; font-size:1.8rem; line-height:1.2; }
.numbers span { color:var(--muted); font-size:.9rem; }

video.tour { display:block; width:100%; }
.shots { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.shots a { display:block; }
.shots img { display:block; width:100%; height:auto; transition:transform .2s; }
.shots a:hover img { transform:scale(1.02); }
.join { display:flex; gap:32px; align-items:center; justify-content:center; flex-wrap:wrap; padding:32px; text-align:center; }
.join img { width:180px; height:180px; background:#fff; padding:10px; border-radius:12px; }
.join p { color:var(--muted); margin:0 0 16px; max-width:360px; }

/* Lists and prose */
.list { margin:0; padding-left:20px; color:var(--muted); }
.list li { margin:6px 0; }
.list b { color:var(--fg); }
.steps { counter-reset:step; list-style:none; padding:0; margin:0; }
.steps li { counter-increment:step; position:relative; padding:0 0 16px 44px; color:var(--muted); }
.steps li::before { content:counter(step); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%; background:var(--accent); color:#111; font-weight:700; display:grid; place-items:center; }
.steps b { color:var(--fg); }
pre { background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:8px; padding:12px; overflow-x:auto; font-size:.9rem; }
table { width:100%; border-collapse:collapse; font-size:.95rem; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--grid); }
th { color:var(--muted); font-weight:600; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }

/* Release */
.release { display:flex; flex-wrap:wrap; gap:16px 32px; align-items:center; justify-content:space-between; }
.release dl { display:grid; grid-template-columns:auto 1fr; gap:4px 16px; margin:0; }
.release dt { color:var(--faint); }
.release dd { margin:0; word-break:break-all; }

/* Team */
.profile { display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.profile img.avatar { width:140px; height:140px; border-radius:50%; border:3px solid var(--accent); }
.profile h2 { text-align:left; margin:0; }
.badge { display:inline-block; padding:2px 10px; border-radius:999px; background:rgba(255,138,61,.15); color:var(--accent); font-size:.85rem; font-weight:600; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.chips span { padding:3px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted); font-size:.85rem; }
.links { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.links a { padding:6px 14px; border-radius:8px; border:1px solid var(--line); color:var(--fg); text-decoration:none; font-size:.9rem; }
.links a:hover { border-color:var(--accent); }
.timeline { border-left:2px solid var(--line); margin-left:8px; padding-left:20px; }
.timeline > div { position:relative; padding-bottom:20px; }
.timeline > div::before { content:""; position:absolute; left:-27px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--bg); }
.timeline .when { color:var(--faint); font-size:.9rem; }
.person { display:flex; align-items:center; gap:12px; }
.person img, .person .initial { width:36px; height:36px; border-radius:50%; flex:none; }
.person .initial { display:grid; place-items:center; background:rgba(255,255,255,.1); font-weight:700; }

/* Charts */
.chart { position:relative; }
.chart svg { display:block; width:100%; height:auto; overflow:visible; }
.chart.scroll { overflow-x:auto; }
.chart.scroll svg { min-width:640px; }
.chart text { fill:var(--muted); font:12px system-ui,sans-serif; }
.chart .value { fill:var(--fg); }
.chart .grid line { stroke:var(--grid); stroke-width:1; }
.chart .mark { fill:var(--accent); }
.chart .hit { fill:transparent; cursor:default; }
.chart .hit:hover + .mark, .chart .hit:focus + .mark { filter:brightness(1.15); }
.tip { position:fixed; z-index:20; pointer-events:none; background:#22262e; color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:.85rem; box-shadow:0 6px 20px rgba(0,0,0,.4); opacity:0; transition:opacity .1s; }
.tip b { display:block; }
details.table { margin-top:12px; }
details.table summary { color:var(--muted); cursor:pointer; font-size:.9rem; }
.chart-head { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.chart-head h3 { margin:0; }
.chart-head span { color:var(--faint); font-size:.9rem; }

/* Landing: ambient glow */
.blobs { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/28px 28px; }
.blobs span { position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(110px); opacity:.35; animation:drift 22s ease-in-out infinite alternate; }
.blobs span:nth-child(1) { background:#ff8a3d; top:-160px; left:-120px; }
.blobs span:nth-child(2) { background:#7c4dff; top:30%; right:-200px; opacity:.18; animation-duration:28s; }
.blobs span:nth-child(3) { background:#ff5f6d; bottom:-220px; left:30%; opacity:.16; animation-duration:34s; }
@keyframes drift { to { transform:translate(120px,80px) scale(1.15); } }

/* Landing: hero */
.hero2 { display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(32px,5vw,96px); align-items:center; padding-top:64px; min-height:min(calc(100vh - 140px), 860px); }
.hero2 .btns { justify-content:flex-start; margin-top:28px; }
/* The opening mirrors media/og-card.png: mark, wordmark, two-line claim, three orange-dot points. */
.hero2 .mark { display:block; width:96px; height:96px; margin-top:22px; border-radius:22px; box-shadow:0 12px 36px rgba(0,0,0,.55), 0 0 40px rgba(255,138,61,.25); }
.hero2 h1 { font-size:clamp(3rem,7vw,5.2rem); margin:14px 0 6px; letter-spacing:-.02em; line-height:1; }
.sub { margin:0; font-size:clamp(1.6rem,3.2vw,2.3rem); font-weight:700; line-height:1.2; }
.dots { list-style:none; padding:0; margin:22px 0 0; color:var(--muted); font-size:1.1rem; }
.dots li { margin:8px 0; }
.dots li::before { content:""; display:inline-block; width:11px; height:11px; margin-right:12px; border-radius:50%; background:var(--accent); vertical-align:1px; }
.grad { background:linear-gradient(90deg,#ff8a3d,#ff5f6d 60%,#c38bff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pill { display:inline-flex; align-items:center; gap:8px; padding:5px 14px; border-radius:999px; border:1px solid var(--line); background:var(--glass); color:var(--muted); font-size:.88rem; }
.pulse { width:8px; height:8px; border-radius:50%; background:#3ddc84; box-shadow:0 0 0 0 rgba(61,220,132,.6); animation:pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 10px rgba(61,220,132,0); } 100% { box-shadow:0 0 0 0 rgba(61,220,132,0); } }
.trust { display:flex; flex-wrap:wrap; gap:8px 20px; list-style:none; padding:0; margin:24px 0 0; color:var(--muted); font-size:.92rem; }
.trust li::before { content:"\2713"; color:#3ddc84; margin-right:6px; font-weight:700; }
.hero-visual { position:relative; padding:24px 0 56px; }
.tablet { position:relative; padding:14px; border-radius:26px; background:linear-gradient(145deg,#2b2f38,#16181d); border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4) inset; transform:perspective(1400px) rotateY(-9deg) rotateX(3deg); transition:transform .6s; }
.tablet:hover { transform:perspective(1400px) rotateY(-2deg) rotateX(1deg); }
.tablet::before { content:""; position:absolute; top:50%; left:5px; width:4px; height:4px; border-radius:50%; background:#444; }
.screen { border-radius:14px; overflow:hidden; aspect-ratio:16/10; background:#111; }
.screen video { display:block; width:100%; height:100%; object-fit:cover; }
.clip-tabs { position:absolute; right:12px; bottom:8px; display:flex; gap:6px; padding:4px; border-radius:999px; background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(10px); }
.clip-tabs button { white-space:nowrap; border:0; background:none; color:var(--muted); font:inherit; font-size:.85rem; padding:5px 12px; border-radius:999px; cursor:pointer; }
.clip-tabs button[aria-pressed="true"] { background:var(--accent); color:#111; font-weight:600; }
.term { position:absolute; left:-12px; bottom:-4px; width:min(310px,62%); text-align:left; border-radius:12px; background:rgba(12,13,16,.94); border:1px solid rgba(255,255,255,.14); box-shadow:0 24px 48px rgba(0,0,0,.6); overflow:hidden; }
.term-bar { display:flex; align-items:center; gap:6px; padding:8px 10px; background:rgba(255,255,255,.05); }
.term-bar i { width:10px; height:10px; border-radius:50%; background:#ff5f56; }
.term-bar i:nth-child(2) { background:#ffbd2e; } .term-bar i:nth-child(3) { background:#27c93f; }
.term-bar span { margin-left:8px; color:var(--faint); font-size:.75rem; }
.term pre { margin:0; padding:10px 12px; height:150px; border:0; background:none; border-radius:0; font:12px/1.55 ui-monospace,monospace; color:#d6dae0; white-space:pre-wrap; overflow:hidden; }
.term .p { color:#3ddc84; } .term .o { color:var(--faint); }
.term .cursor { display:inline-block; width:7px; height:13px; background:var(--accent); vertical-align:-2px; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.chip { position:absolute; padding:7px 14px; border-radius:999px; background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(10px); font-size:.85rem; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.4); }
.chip.c1 { top:4px; right:-10px; }
.chip.c2 { top:42%; right:-28px; animation-delay:-2s; }
.float { animation:float 6s ease-in-out infinite; }
@keyframes float { 50% { transform:translateY(-10px); } }

/* Landing: numbers, features, flow, showcase */
section.numbers { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; padding-top:40px; }
section.numbers div { background:var(--glass); border:1px solid var(--line); border-radius:12px; padding:18px; text-align:center; }
section.numbers b { display:block; font-size:2rem; line-height:1.2; background:linear-gradient(180deg,#fff,#ffb98a); -webkit-background-clip:text; background-clip:text; color:transparent; }
section.numbers span { color:var(--muted); font-size:.9rem; }
.ico { width:40px; height:40px; padding:8px; margin-bottom:12px; border-radius:10px; background:rgba(255,138,61,.12); fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.feature { transition:transform .25s, border-color .25s; }
.feature:hover { transform:translateY(-4px); border-color:rgba(255,138,61,.5); }
.flow { display:flex; align-items:stretch; }
.flow .node { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px 12px; border-radius:16px; background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(10px); }
.flow .node .ico { width:52px; height:52px; padding:11px; }
.flow .node span { color:var(--muted); font-size:.88rem; margin-top:4px; }
.flow .link { flex:0 0 48px; align-self:center; height:3px; border-radius:2px; background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 16px); background-size:32px 3px; animation:flow 1s linear infinite; }
@keyframes flow { to { background-position:32px 0; } }
.showcase { display:flex; flex-direction:column; gap:72px; }
.show { display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(32px,4vw,72px); align-items:center; }
.show.flip > :first-child { order:2; }
.show h3 { font-size:1.6rem; margin-bottom:8px; }
.shot { display:block; border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 60px rgba(0,0,0,.5); transition:transform .4s; }
.shot:hover { transform:scale(1.02) rotate(-.4deg); }
.shot img { display:block; width:100%; height:auto; }
.ticks { list-style:none; padding:0; margin:16px 0 0; }
.ticks li { position:relative; padding-left:28px; margin:10px 0; color:var(--muted); }
.ticks li::before { content:""; position:absolute; left:0; top:5px; width:16px; height:16px; border-radius:50%; background:rgba(255,138,61,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%23ff8a3d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.people { display:flex; flex-wrap:wrap; gap:12px; }
.people a, .people div { display:flex; align-items:center; gap:12px; padding:10px 16px 10px 10px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--fg); text-decoration:none; }
.people a:hover { border-color:var(--accent); }
.people img, .people .initial { width:44px; height:44px; border-radius:50%; }
.people .initial { display:grid; place-items:center; background:rgba(255,255,255,.1); font-weight:700; }
.people .is-lead img { box-shadow:0 0 0 2px var(--accent); }
.people small { display:block; color:var(--muted); }
.people .you { border-style:dashed; color:var(--muted); }
.cta { text-align:center; padding:56px 24px; border-radius:24px; background:linear-gradient(135deg,rgba(255,138,61,.22),rgba(124,77,255,.14)); border:1px solid rgba(255,138,61,.35); }
.cta h2 { margin:0; font-size:clamp(1.4rem,3.5vw,2.1rem); }

/* Scroll reveal: only once JS is running, so content never hides without it */
.js .reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; transition-delay:var(--d,0ms); }
.js .reveal.in { opacity:1; transform:none; }
.js .hero-visual.reveal { transform:translateY(24px) scale(.97); }
.js .hero-visual.reveal.in { transform:none; }

@media (max-width:860px) {
  .hero2 { grid-template-columns:1fr; gap:24px; padding-top:40px; text-align:center; min-height:0; }
  .hero2 .mark { margin:22px auto 0; }
  .dots { display:inline-block; text-align:left; }
  .hero2 .btns, .trust { justify-content:center; }
  .tablet, .tablet:hover { transform:none; }
  .hero-visual { padding-bottom:0; }
  .clip-tabs { position:static; width:max-content; margin:14px auto 0; }
  .term { position:relative; left:auto; bottom:auto; width:100%; margin-top:14px; }
  .chip.c1 { right:0; } .chip.c2 { display:none; }
  .flow { flex-direction:column; }
  .flow .link { flex-basis:28px; width:3px; height:28px; background:repeating-linear-gradient(180deg,var(--accent) 0 8px,transparent 8px 16px); background-size:3px 32px; animation-name:flow-v; }
  .show, .show.flip { grid-template-columns:1fr; gap:20px; }
  .show.flip > :first-child { order:0; }
}
@keyframes flow-v { to { background-position:0 32px; } }

/* Articles (tools/site-pages.py) */
.prose { max-width:760px; margin:0 auto; padding-top:40px; font-size:1.06rem; }
.prose h1 { font-size:clamp(1.9rem,4.5vw,2.8rem); text-align:left; margin:8px 0 8px; }
.prose h2 { text-align:left; font-size:1.45rem; margin:40px 0 12px; }
.prose p, .prose li { color:#d3d7dd; }
.prose ul, .prose ol { padding-left:22px; }
.prose li { margin:6px 0; }
.prose .lede { font-size:1.2rem; color:var(--fg); }
.prose table { margin:16px 0; }
.prose td, .prose th { vertical-align:top; }
.prose .table-wrap { overflow-x:auto; }
.crumbs, .byline { color:var(--faint); font-size:.9rem; margin:0; }
.crumbs a, .byline a { color:var(--muted); }
.note { border-left:3px solid var(--accent); background:rgba(255,138,61,.08); padding:12px 16px; border-radius:0 8px 8px 0; }
.post-card { display:block; color:var(--fg); text-decoration:none; transition:transform .2s, border-color .2s; }
.post-card:hover { transform:translateY(-3px); border-color:rgba(255,138,61,.5); }
.post-card h3 { margin:6px 0; }
.post-card p { margin:0; }

footer { text-align:center; color:var(--muted); padding:48px 16px; font-size:.9rem; }
footer a { color:var(--muted); }
footer nav { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:8px; }
@media (max-width:480px) { .nav nav a { padding:6px 7px; font-size:.9rem; } }
@media (prefers-reduced-motion: reduce) {
  #bg { display:none; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .js .reveal { opacity:1; transform:none; }
}