:root { color-scheme: dark; --ink:#070b17; --panel:#121a2b; --muted:#a9b4c7; --line:rgba(184,205,255,.18); --cyan:#57d9ff; --violet:#9f75ff; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 75% 10%, #192762 0, transparent 28rem), var(--ink); color:#f7f9ff; font:16px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
main { width:min(1120px, calc(100% - 40px)); margin:0 auto; padding:72px 0; }
h1 { max-width:12ch; margin:.15em 0; font:700 clamp(3rem, 9vw, 6.5rem)/.95 ui-sans-serif, system-ui, sans-serif; letter-spacing:-.07em; }
h2, h3 { font-family:ui-sans-serif, system-ui, sans-serif; letter-spacing:-.04em; }
h2 { font-size:clamp(2rem, 4vw, 3.4rem); }
p { max-width:68ch; color:var(--muted); }
a { color:var(--cyan); text-underline-offset:.22em; }
section { margin-top:64px; padding-top:24px; border-top:1px solid var(--line); }
img { display:block; width:min(100%, 340px); margin-top:24px; border:1px solid var(--line); border-radius:28px; box-shadow:0 24px 65px rgba(0,0,0,.45); }
figure { margin:0; }
figcaption { margin-top:12px; color:var(--muted); font-size:.88rem; }
.product-art { margin:48px 0 16px; }
.product-art img { width:100%; max-width:900px; margin:0; aspect-ratio:16 / 9; object-fit:cover; }
.product-art figcaption { max-width:68ch; }
.app-screenshot img { width:min(100%, 340px); }
code { color:#d9e9ff; overflow-wrap:anywhere; }
.eyebrow { color:var(--cyan); font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; }
.product-highlight { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(220px,.6fr); gap:48px; margin-top:48px; padding:36px; background:linear-gradient(145deg, rgba(50,70,148,.32), rgba(18,26,43,.9)); border:1px solid var(--line); border-radius:32px; }
.product-highlight h3 { margin:.15em 0; font-size:clamp(2.2rem, 5vw, 4.6rem); }
.product-highlight__lede { color:#f7f9ff; font-size:1.15rem; }
.product-highlight li { margin:.65rem 0; color:var(--muted); }
.product-highlight__actions { display:flex; gap:20px; flex-wrap:wrap; }
.product-highlight__media img { width:100%; margin:0; }
.product-highlight__media figcaption { margin-top:12px; color:var(--muted); font-size:.8rem; }
@media (max-width:720px) { main { width:min(100% - 28px, 1120px); padding:44px 0; } .product-highlight { grid-template-columns:1fr; gap:24px; padding:24px; } .product-highlight__media img { width:min(100%, 320px); } }