@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#e9e8e1; --muted:#98a0a8; --faint:#636b74; --line:#292e35; --panel:#14171c; --panel-2:#191d23; --bg:#0b0d10; --green:#31ca98; --green-deep:#164b3d; --red:#ff6e71; --blue:#6b94ff; --orange:#ffac4b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); font:15px/1.6 Manrope, Arial, sans-serif; }
a { color:inherit; text-decoration:none; } button,input { font:inherit; } code,.eyebrow,.caption,.traffic,.connected { font-family:"DM Mono",monospace; }
.site-header { height:76px; max-width:1320px; margin:auto; padding:0 42px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.07); }
.header-left { display:flex; align-items:center; gap:14px; }
.company { font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.02em; padding-right:8px; border-right:1px solid var(--line); white-space:nowrap; }
.company:hover { color:var(--green); }
.wordmark { display:flex; align-items:center; gap:11px; font-size:20px; font-weight:800; letter-spacing:-.06em; }.mark { display:grid; gap:3px; width:21px; }.mark i { height:3px; border-radius:9px; background:var(--green); transform:skew(-30deg); }.mark i:nth-child(2){width:16px}.mark i:nth-child(3){width:12px}
nav { display:flex; gap:30px; color:var(--muted); font-size:13px; } nav a:hover,.text-link:hover { color:var(--green); }
.button { display:inline-flex; gap:11px; align-items:center; justify-content:center; padding:13px 18px; border-radius:7px; color:#06110d; background:var(--green); border:1px solid var(--green); font-weight:800; font-size:13px; transition:transform .18s,background .18s; }.button:hover { transform:translateY(-2px); background:#55dbaf; }.button-small { padding:9px 13px; font-size:12px; }
.hero { max-width:1320px; margin:0 auto; padding:108px 42px 94px; display:grid; grid-template-columns:.83fr 1.17fr; gap:55px; align-items:center; }.eyebrow { margin:0 0 18px; color:#aab1b9; text-transform:uppercase; letter-spacing:.12em; font-size:11px; }.hero .eyebrow { color:var(--green); }.hero .eyebrow span { display:inline-block; width:8px; height:8px; margin-right:8px; background:var(--green); border-radius:99px; box-shadow:0 0 0 5px rgba(49,202,152,.12); }
h1,h2,h3,p { margin-top:0; }h1 { max-width:680px; margin-bottom:24px; font-size:clamp(46px,5vw,76px); line-height:1.03; letter-spacing:-.065em; } h1 em { color:var(--green); font-style:normal; } .lede { max-width:510px; color:var(--muted); font-size:18px; line-height:1.65; }.hero-actions { display:flex; gap:25px; align-items:center; margin-top:34px; }.text-link { color:#c9ccc9; font-weight:700; font-size:13px; }.text-link span { color:var(--green); margin-left:5px; }.hero-proof { display:flex; flex-wrap:wrap; gap:21px; margin:58px 0 0; }.hero-proof div { padding-right:21px; border-right:1px solid var(--line); }.hero-proof div:last-child { border:0; }.hero-proof dt { color:var(--faint); font:10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }.hero-proof dd { margin:4px 0 0; font-size:12px; font-weight:700; }
.window { overflow:hidden; border:1px solid #2d333b; border-radius:11px; background:#101217; box-shadow:0 30px 80px rgba(0,0,0,.42); transform:perspective(1600px) rotateY(-3deg) rotateX(1deg); }.window-bar { height:34px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 12px; color:#818994; font:10px "DM Mono",monospace; text-align:center; background:#15181e; border-bottom:1px solid #292e35; }.traffic { display:flex; gap:5px; }.traffic i { width:8px; height:8px; border-radius:50%; background:#ff605b; }.traffic i:nth-child(2){background:#ffbe3d}.traffic i:nth-child(3){background:#27c840}.connected { justify-self:end; color:#87919b; }.connected i,.passing i { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(49,202,152,.17); }
.product-preview { min-height:410px; display:grid; grid-template-columns:145px 1fr; font-size:10px; }.product-preview aside { padding:16px 10px; color:#9199a4; background:#15171d; border-right:1px solid #292e35; }.product-preview aside b { display:block; margin:0 0 20px 5px; color:#e3e2dc; font-size:13px; }.mini-mark { color:var(--green); }.product-preview aside>span { display:block; padding:7px 7px; margin-bottom:2px; border-radius:5px; }.product-preview aside .active { color:#e8e6df; background:#20242c; }.product-preview aside small { display:block; margin:19px 5px 7px; color:#6e7580; font:8px "DM Mono",monospace; letter-spacing:.11em; }.stream i { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); margin-right:5px; }.stream em { float:right; font-style:normal; color:#747b85; }.stream.blue i{background:var(--blue)}.stream.amber i{background:var(--orange)}
.preview-main { padding:22px 26px; }.preview-title { display:flex; justify-content:space-between; gap:10px; }.preview-title strong { font-size:23px; letter-spacing:-.04em; }.preview-title p { margin:2px 0 0; color:#8c94a0; }.preview-title button { padding:8px 11px; height:max-content; background:var(--green); border:0; border-radius:6px; color:#092319; font-size:10px; font-weight:800; }.live-card { position:relative; margin:20px 0 14px; padding:18px; overflow:hidden; border:1px solid #2b3c3b; border-radius:11px; background:radial-gradient(circle at 70% 0,#1e5547,transparent 60%),#171a20; }.tip { display:inline-block; margin-bottom:16px; padding:4px 9px; border-radius:99px; color:var(--green); background:#163d33; font-size:9px; font-weight:bold; }.live-card h3 { margin:0 0 3px; font-size:27px; letter-spacing:-.04em; }.live-card h3 span { color:#99a1ab; font-size:15px; }.passing { color:var(--green); font-family:"DM Mono",monospace; font-size:9px; font-weight:bold; }.passing span { color:#9ba2aa; font-weight:400; }.delta { max-width:54%; margin-top:13px; padding:10px; border:1px solid #176750; border-radius:7px; background:rgba(10,54,43,.35); color:#d8dad4; line-height:1.5; }.delta b { color:var(--green); }.platform-grid { position:absolute; right:18px; bottom:18px; display:grid; grid-template-columns:1fr 1fr; gap:7px; width:39%; }.platform-grid span { padding:9px; border:1px solid #30343d; border-radius:6px; background:#1a1d24; color:#939ba4; font-family:"DM Mono",monospace; }.platform-grid b { color:var(--green); }.build-row { display:grid; grid-template-columns:8px 47px 1fr 1fr auto; gap:6px; align-items:center; padding:12px 10px; margin-top:7px; border:1px solid #2a2e37; border-radius:7px; color:#9299a3; }.build-row>i { width:7px; height:7px; border-radius:50%; background:var(--green); }.build-row>i.red{background:var(--red)}.build-row b{color:var(--green)}.build-row b.fail{color:var(--red)}.build-row strong{color:#e4e3dd}.build-row em{color:var(--green);font-style:normal;font-weight:bold}.caption { margin:13px 0 0; color:#747c85; font-size:11px; text-align:right; }.caption span { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--green); }
.statement { padding:105px max(42px,calc((100vw - 1236px)/2)); background:#12151a; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.statement>div { display:grid; grid-template-columns:1.2fr .8fr; gap:70px; align-items:end; }.statement h2,.section-heading h2,.feature h2 { margin:0; font-size:clamp(35px,4vw,58px); line-height:1.08; letter-spacing:-.055em; }.statement h2 span { color:#79818b; }.statement p:last-child { margin:0 0 5px; max-width:425px; color:var(--muted); font-size:16px; }
.steps { max-width:1320px; margin:auto; padding:125px 42px; }.section-heading { margin-bottom:57px; }.steps ol { display:grid; grid-template-columns:repeat(3,1fr); padding:0; margin:0; list-style:none; border-top:1px solid var(--line); }.steps li { min-height:340px; padding:28px 27px 24px 0; margin-right:27px; border-right:1px solid var(--line); }.steps li:last-child { margin:0; border:0; }.steps li>span,.audience article>span { color:var(--green); font:11px "DM Mono",monospace; }.steps h3,.audience h3 { margin:43px 0 10px; font-size:19px; letter-spacing:-.04em; }.steps li>p { color:var(--muted); font-size:13px; }.steps code { display:block; margin-top:25px; padding:10px; overflow:hidden; color:#bfc5c4; background:#171a20; border:1px solid #292e35; border-radius:6px; font-size:10px; white-space:nowrap; }.stream-demo,.fetch-demo { display:flex; align-items:center; justify-content:space-between; margin-top:38px; padding:13px; border:1px solid #2a3037; border-radius:7px; background:#15181d; font-size:11px; }.stream-demo b { color:#cdd3cf; }.stream-demo i { display:inline-block; width:7px; height:7px; background:var(--green); border-radius:50%; margin-right:5px; }.stream-demo span { color:#87909a; }.fetch-demo span { color:#8d959f; }.fetch-demo b { color:var(--green); font-family:"DM Mono",monospace; }
.technical { padding:110px max(42px,calc((100vw - 1236px)/2)); background:#12151a; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.technical-grid { display:grid; grid-template-columns:.88fr 1.12fr; gap:90px; align-items:center; }.technical-copy { color:var(--muted); font-size:14px; }.technical-copy p { margin-bottom:18px; }.technical-copy b { color:var(--ink); }.technical-note { padding:14px 16px; border-left:2px solid var(--orange); color:#a9afb2; background:rgba(255,172,75,.05); font-size:12px; line-height:1.55; }.diagram { padding:36px; overflow:hidden; border:1px solid #30363e; border-radius:11px; background:radial-gradient(circle at 80% 0,rgba(49,202,152,.09),transparent 46%),#12161b; }.manifest-node { max-width:290px; padding:15px; border:1px solid #386b5c; border-radius:8px; background:#13251f; }.manifest-node span { display:block; color:#8aa69b; font:10px "DM Mono",monospace; letter-spacing:.09em; }.manifest-node b { display:block; margin:7px 0 3px; color:#e9ece7; font:14px "DM Mono",monospace; }.manifest-node small { color:#92a09b; font:10px "DM Mono",monospace; }.diagram-line { width:1px; height:32px; margin:0 0 0 31px; background:linear-gradient(var(--green),#45525a); }.chunk-set { display:flex; flex-wrap:wrap; gap:8px; max-width:320px; }.chunk { padding:8px 9px; border:1px solid #34424a; border-radius:5px; color:#c5cfca; background:#182026; font:10px "DM Mono",monospace; }.chunk.shared { border-color:#23634f; color:#82c8b1; background:#142a23; }.chunk.new { border-color:#9e6e2d; color:#f0b15a; background:#302419; }.diagram-labels { display:flex; gap:24px; margin:15px 0 26px; color:#98a29f; font:10px "DM Mono",monospace; }.diagram-labels span::before { content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--green); }.diagram-labels span:last-child::before { background:var(--orange); }.store-row { display:flex; justify-content:space-between; padding-top:15px; border-top:1px solid #2c333a; color:#7f8993; font:10px "DM Mono",monospace; }.store-row i { display:inline-block; width:8px; height:8px; margin-right:6px; border:1px solid #63717a; border-radius:2px; }.cli-section { display:grid; grid-template-columns:.9fr 1.1fr; gap:85px; align-items:center; max-width:1320px; margin:auto; padding:115px 42px; }.cli-section h2 { margin-bottom:19px; font-size:42px; line-height:1.12; letter-spacing:-.055em; }.cli-section p:not(.eyebrow) { max-width:490px; color:var(--muted); font-size:14px; }.cli-section p code { color:#c8d2ce; font-size:12px; }.cli-section pre { margin:0; padding:29px; overflow:auto; color:#d8ddd8; border:1px solid #2f363d; border-radius:10px; background:#111419; box-shadow:0 20px 45px rgba(0,0,0,.2); font:11px/1.75 "DM Mono",monospace; }.cli-section .prompt { color:#6bdab5; }.cli-section .green { color:var(--green); }.cli-section .muted { color:#7c858f; }
.feature { display:grid; grid-template-columns:.78fr 1.22fr; gap:80px; align-items:center; max-width:1320px; margin:auto; padding:95px 42px; }.feature-reverse { grid-template-columns:1.22fr .78fr; }.feature-reverse .feature-copy { order:2; }.feature h2 { font-size:46px; margin-bottom:20px; }.feature-copy>p:not(.eyebrow) { max-width:450px; color:var(--muted); }.feature ul { padding:0; margin:34px 0 0; list-style:none; }.feature li { display:grid; grid-template-columns:160px 1fr; gap:14px; padding:13px 0; border-top:1px solid var(--line); font-size:12px; }.feature li b { color:#dcded8; }.feature li span { color:var(--muted); }.feature figure { margin:0; }.feature figure img { width:100%; display:block; border:1px solid #30353c; border-radius:10px; box-shadow:0 22px 55px rgba(0,0,0,.33); }.feature figcaption { margin-top:12px; color:#737b84; font:11px "DM Mono",monospace; }
.audience { padding:105px max(42px,calc((100vw - 1236px)/2)); background:#12151a; border-top:1px solid var(--line); }.audience-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:42px; border-top:1px solid var(--line); }.audience article { min-height:210px; padding:27px 26px 20px 0; margin-right:26px; border-right:1px solid var(--line); }.audience article:last-child { margin:0; border:0; }.audience h3 { margin:36px 0 8px; }.audience p { color:var(--muted); font-size:13px; }
footer { display:grid; grid-template-columns:1fr auto auto; gap:30px; align-items:center; max-width:1320px; padding:18px 42px; margin:auto; color:#7e868e; border-top:1px solid var(--line); font-size:11px; }.devhippo { display:block; width:220px; height:78px; }.devhippo img { display:block; width:220px; height:78px; object-fit:cover; object-position:center 53%; filter:brightness(0) invert(1); opacity:.88; transition:opacity .18s; }.devhippo:hover img { opacity:1; } footer p b { color:#c8cfca; font-weight:700; }
@media (max-width:900px) { .site-header{padding:0 24px}.site-header nav{display:none}.hero{grid-template-columns:1fr;padding:72px 24px}.hero-visual{max-width:700px}.statement,.technical,.audience{padding-left:24px;padding-right:24px}.statement>div,.technical-grid,.cli-section,.feature,.feature-reverse{grid-template-columns:1fr}.steps,.feature,.cli-section{padding-left:24px;padding-right:24px}.technical-grid{gap:36px}.cli-section{gap:38px}.feature-reverse .feature-copy{order:0}.feature{gap:38px}.feature h2{font-size:40px}footer{padding-left:24px;padding-right:24px} }
@media (max-width:620px) { .site-header{height:66px}.site-header .button{display:none}.hero{padding-top:55px;gap:37px}h1{font-size:46px}.lede{font-size:16px}.hero-proof{margin-top:38px;gap:13px}.hero-proof div{padding-right:13px}.product-preview{grid-template-columns:1fr}.product-preview aside{display:none}.preview-main{padding:16px}.live-card{padding:13px}.platform-grid{position:static;width:100%;margin-top:12px}.delta{max-width:none}.preview-title strong{font-size:20px}.preview-title p{font-size:8px}.build-row{grid-template-columns:7px 43px 1fr auto}.build-row span{display:none}.statement{padding-top:75px;padding-bottom:75px}.statement>div{gap:25px}.steps,.technical,.cli-section{padding-top:76px;padding-bottom:76px}.steps ol,.audience-grid{grid-template-columns:1fr}.steps li,.audience article{min-height:0;margin:0;padding:26px 0;border-right:0;border-bottom:1px solid var(--line)}.steps li:last-child,.audience article:last-child{border-bottom:0}.steps h3,.audience h3{margin-top:23px}.diagram{padding:23px}.diagram-labels{gap:12px;font-size:9px}.store-row{gap:10px;flex-wrap:wrap}.cli-section h2{font-size:36px}.cli-section pre{padding:20px;font-size:10px}.feature{padding-top:65px;padding-bottom:65px}.feature li{grid-template-columns:1fr;gap:2px}footer{grid-template-columns:1fr;gap:9px}footer p{margin:0}.caption{text-align:left}.window{transform:none} }