:root { --n0:#0a0a0b; --n1:#0e0e10; --n2:#151517; --n3:#17171a; --n4:#1c1c1f; --n5:#232326; --n6:#2a2a2e; --text1:#f4f4f5; --text2:#e4e4e7; --text4:#9a9aa0; --text5:#8a8a90; --text6:#6b6b70; --critical:#e84a5f; --critical-soft:#e0838a; --critical-bg:#1e1010; --critical-border:#3a1c1c; --amber:#e0b950; --green:#7fd996; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { background:var(--n0); color:var(--text1); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; margin:0; } a { color:inherit; text-decoration:none; }.nav, main>section, footer { padding-left:max(24px,calc((100vw - 1160px)/2)); padding-right:max(24px,calc((100vw - 1160px)/2)); }.nav { align-items:center; border-bottom:1px solid var(--n4); display:flex; height:82px; justify-content:space-between; }.brand { align-items:center; display:inline-flex; }.brand img { display:block; height:36px; width:36px; }.nav-links { align-items:center; color:var(--text4); display:flex; font-size:.88rem; gap:28px; }.nav-links a:hover { color:var(--text1); }.github-link { border:1px solid var(--n6); color:var(--text2); padding:10px 14px; }
.hero { background:radial-gradient(ellipse 55% 75% at 92% 46%,#261215 0%,var(--n0) 71%); min-height:690px; overflow:hidden; padding-bottom:96px; padding-top:104px; position:relative; }.eyebrow,.kicker { color:var(--text5); font-size:.72rem; font-weight:750; letter-spacing:.15em; text-transform:uppercase; }.eyebrow i { background:var(--critical); border-radius:50%; display:inline-block; height:8px; margin:0 9px 1px 0; width:8px; } h1,h2,h3,p { margin-top:0; }h1,h2 { letter-spacing:-.06em; }h1 { font-size:clamp(3.8rem,8vw,7rem); line-height:.9; margin:38px 0 28px; position:relative; z-index:1; }h1 em { color:var(--critical); font-family:Georgia,serif; font-weight:400; }.hero-copy { color:var(--text4); font-size:1.1rem; line-height:1.6; max-width:490px; }.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:31px; }.button { border-radius:9px; font-size:.9rem; font-weight:700; padding:15px 20px; }.primary { background:var(--critical); color:#fff; }.primary:hover { background:#ee6577; }.primary span { margin-left:22px; }.secondary { border:1px solid var(--n6); color:var(--text2); }.secondary:hover { background:var(--n3); }.hero-screen { background:#050506; border:1px solid var(--n6); border-radius:28px; box-shadow:0 30px 80px #000b; margin:0; overflow:hidden; position:absolute; right:max(24px,calc((100vw - 1160px)/2)); top:78px; transform:rotate(7deg); width:min(264px,25vw); }.hero-screen img { display:block; height:auto; width:100%; }
.principles { border-bottom:1px solid var(--n4); display:grid; grid-template-columns:repeat(3,1fr); padding-bottom:104px; padding-top:104px; }.principles article { border-left:1px solid var(--n5); padding:0 35px; }.principles article:first-child { border-left:0; padding-left:0; }.principles span,.steps>article>span { color:var(--critical); font-size:.75rem; font-weight:800; }.principles h2 { font-size:2.15rem; margin:20px 0 13px; }.principles p,.steps p,.gallery-copy>p,.console-copy>p,.open-source>p { color:var(--text4); line-height:1.65; }
.app-gallery { background:var(--n1); display:grid; gap:42px; grid-template-columns:5fr 7fr; overflow:hidden; padding-bottom:0; padding-top:110px; }.gallery-copy h2,.console-copy h2,.split-section h2,.open-source h2 { font-size:clamp(2.8rem,5vw,5.15rem); line-height:.91; margin:21px 0; }.gallery-copy>p { max-width:390px; }.phones { align-items:flex-end; display:flex; gap:19px; justify-content:flex-end; min-height:560px; }.phone { background:var(--n0); border:1px solid var(--n6); border-radius:24px 24px 0 0; box-shadow:0 18px 45px #0008; margin:0; overflow:hidden; width:30%; }.phone img { display:block; width:100%; }.phone-one { transform:translateY(56px) rotate(-5deg); }.phone-two { width:34%; z-index:2; }.phone-three { transform:translateY(56px) rotate(5deg); }
.split-section { background:var(--n2); border-top:1px solid var(--n4); display:grid; gap:90px; grid-template-columns:1fr 1fr; padding-bottom:120px; padding-top:120px; }.steps { border-top:1px solid var(--n5); }.steps article { border-bottom:1px solid var(--n5); display:flex; gap:28px; padding:25px 0; }.steps h3 { font-size:1.15rem; margin:0 0 7px; }.steps p { margin:0; }.console-section { background:var(--n0); display:grid; gap:25px; grid-template-columns:1fr 1.1fr; padding-bottom:120px; padding-top:120px; }.console-copy { padding-top:28px; }.console-copy>p { max-width:390px; }.console-shot { background:var(--n2); border:1px solid var(--n5); border-radius:14px; box-shadow:0 20px 55px #0007; margin:0; overflow:hidden; }.console-shot img { display:block; width:100%; }.subscribers-shot { grid-column:1 / span 2; margin-left:auto; width:72%; }
.open-source { background:var(--critical-bg); border-top:1px solid var(--critical-border); padding-bottom:124px; padding-top:124px; }.open-source .kicker { color:var(--critical-soft); }.open-source h2 { color:#fff; }.text-link { border-bottom:1px solid var(--critical-soft); color:var(--critical-soft); display:inline-block; font-size:.95rem; font-weight:750; margin-top:18px; padding-bottom:5px; } footer { align-items:center; border-top:1px solid var(--n4); color:#fff; display:flex; font-size:.82rem; justify-content:space-between; min-height:114px; }footer p { color:var(--text5); margin:0; }footer a:last-child { color:var(--critical-soft); }
@media (max-width:700px) { .nav-links>a:not(.github-link) { display:none; }.hero { min-height:800px; padding-top:72px; }.hero-screen { right:50%; top:465px; transform:translateX(50%) rotate(4deg); width:220px; }.principles,.app-gallery,.split-section,.console-section { grid-template-columns:1fr; }.principles { gap:36px; padding-bottom:70px; padding-top:70px; }.principles article,.principles article:first-child { border-left:0; border-top:1px solid var(--n5); padding:24px 0 0; }.app-gallery { padding-top:76px; }.phones { justify-content:center; min-height:365px; }.phone { border-radius:16px 16px 0 0; }.phone-one,.phone-three { transform:translateY(38px); }.split-section,.console-section { gap:36px; padding-bottom:78px; padding-top:78px; }.console-copy { padding-top:0; }.subscribers-shot { grid-column:auto; width:100%; }footer { align-items:flex-start; flex-direction:column; gap:16px; padding-bottom:28px; padding-top:28px; } }