:root { --ink:#111411; --paper:#f1efe7; --acid:#d8ff45; --orange:#ff6d3c; --muted:#666b64; --line:rgba(17,20,17,.16); --serif:Georgia, 'Times New Roman', serif; --sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.5 var(--sans); } a { color:inherit; text-decoration:none; } button { font:inherit; } .wrap { width:min(1180px, calc(100% - 48px)); margin-inline:auto; } .grain { position:fixed; z-index:10; inset:0; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.header { height:92px; display:flex; align-items:center; gap:28px; border-bottom:1px solid var(--line); } .brand { display:inline-flex; align-items:center; gap:8px; font-size:1.22rem; font-weight:850; letter-spacing:-.07em; } .brand b { display:grid; place-items:center; width:30px; height:30px; color:var(--acid); background:var(--ink); font:800 .85rem ui-monospace,monospace; letter-spacing:-.12em; } nav { display:flex; gap:27px; margin-left:auto; } nav a,.small-link,.footer a { color:#51564f; font-size:.78rem; font-weight:800; } nav a:hover,.footer a:hover { color:var(--orange); } .head-actions { display:flex; align-items:center; gap:17px; } .language { display:flex; gap:5px; align-items:center; padding:6px 0; border:0; background:transparent; cursor:pointer; color:var(--ink); font-size:.67rem; font-weight:900; letter-spacing:.09em; } .language i { width:7px; height:7px; background:var(--orange); border-radius:50%; transition:transform .2s; } html[lang='de'] .language i { transform:translateX(15px); }
.hero { min-height:650px; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:60px; padding-block:80px 70px; } .eyebrow,.section-label { display:flex; align-items:center; gap:10px; margin:0; color:#62675f; font-size:.66rem; font-weight:850; letter-spacing:.12em; } .eyebrow>span:first-child { width:8px; height:8px; border:1px solid var(--ink); background:var(--acid); box-shadow:0 0 0 3px rgba(216,255,69,.3); } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:var(--serif); font-weight:500; letter-spacing:-.068em; line-height:.91; } h1 { margin:20px 0 27px; font-size:clamp(3.9rem, 7.7vw, 7.4rem); } h1 em,h2 em { color:var(--orange); font-weight:400; } .lede { max-width:555px; color:#40453f; font-size:1.12rem; line-height:1.65; } .actions { display:flex; gap:25px; align-items:center; margin-top:31px; } .button { display:inline-flex; justify-content:center; align-items:center; padding:13px 19px; border:1px solid var(--ink); background:var(--acid); font-size:.83rem; font-weight:900; transition:transform .18s,background .18s; } .button:hover { transform:translateY(-2px); background:#e7ff83; } .underlined { display:inline-flex; color:var(--ink); font-size:.83rem; font-weight:850; text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:5px; } .proof { display:flex; gap:28px; margin-top:57px; } .proof div { display:grid; gap:2px; } .proof strong { font-size:.88rem; } .proof small { color:var(--muted); font-size:.68rem; }
.terminal { position:relative; overflow:hidden; color:#e8ece4; background:#111411; box-shadow:12px 13px 0 var(--ink); transform:rotate(1.5deg); } .terminal:before,.terminal:after { content:''; position:absolute; right:-100px; top:-100px; width:245px; height:245px; border:1px solid rgba(216,255,69,.22); border-radius:50%; } .terminal:after { right:-177px; top:-177px; width:400px; height:400px; } .terminal-top { position:relative; z-index:1; display:flex; align-items:center; gap:6px; height:40px; padding:0 13px; background:#222722; } .terminal-top i { width:8px; height:8px; border-radius:50%; background:#626761; } .terminal-top i:first-child { background:var(--orange); } .terminal-top span { margin-left:7px; color:#abb1a8; font:700 .63rem ui-monospace,monospace; } .terminal-body { position:relative; z-index:1; padding:34px; font:500 .82rem/1.65 ui-monospace,monospace; } .terminal-body p { margin-bottom:7px; } .terminal-body p>b { color:var(--acid); } .terminal-string { padding-left:18px; color:#efa38d; } .terminal hr { height:1px; margin:28px 0 21px; border:0; background:#363c35; } .terminal-body small { color:var(--acid); font-size:.63rem; letter-spacing:.13em; } .terminal-answer { min-height:103px; font:1.08rem/1.45 var(--sans); } .terminal footer { display:flex; justify-content:space-between; gap:12px; padding-top:13px; border-top:1px solid #363c35; color:#90978e; font-size:.61rem; } .terminal footer em { display:inline-block; width:7px; height:7px; margin-right:4px; background:var(--acid); border-radius:50%; }
.ticker { overflow:hidden; padding:15px 0; border-block:1px solid var(--ink); background:var(--acid); white-space:nowrap; } .ticker div { display:inline-flex; gap:24px; min-width:max-content; color:var(--ink); font-size:.76rem; font-weight:950; letter-spacing:.1em; animation:slide 28s linear infinite; } .ticker b { color:var(--orange); } @keyframes slide { to { transform:translateX(-35%); } }
.section { padding-block:132px; } .section-label { margin-bottom:48px; } .section-label>b { color:var(--orange); } .split { display:grid; grid-template-columns:1.05fr .78fr; gap:118px; align-items:end; } h2 { margin:0; font-size:clamp(3.2rem,5.6vw,5.7rem); } .intro .large { font-size:1.25rem; line-height:1.56; } .intro p:not(.large) { color:var(--muted); } .features { display:grid; grid-template-columns:repeat(3,1fr); margin-top:85px; border-top:1px solid var(--line); } .features article { min-height:188px; padding:25px 30px 8px 0; border-right:1px solid var(--line); } .features article+article { padding-left:30px; } .features article:last-child { border:0; } .features b,.cards small { color:var(--orange); font:850 .66rem ui-monospace,monospace; letter-spacing:.12em; } .features h3 { margin:24px 0 8px; font-size:1.07rem; letter-spacing:-.025em; } .features p { color:var(--muted); font-size:.87rem; }
.workflow { border-top:1px solid var(--line); } .workflow-head { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:64px; } .workflow-head p { max-width:340px; margin:0; color:var(--muted); } .workflow ol { margin:0; padding:0; border-top:1px solid var(--ink); list-style:none; } .workflow li { display:grid; grid-template-columns:85px 1fr auto; align-items:center; gap:24px; padding:27px 0; border-bottom:1px solid var(--line); } .workflow li>b { color:var(--orange); font:850 .72rem ui-monospace,monospace; } .workflow h3 { margin:0 0 3px; font-size:1.18rem; letter-spacing:-.035em; } .workflow li p { margin:0; color:var(--muted); font-size:.87rem; } .workflow code { color:#6b7069; font-size:.72rem; }
.performance { padding-block:132px; background:var(--ink); color:#edf0e8; } .performance .split { align-items:center; } .light { color:#a6ada2; } .performance p:not(.section-label) { max-width:500px; color:#b7beb3; } .lime { margin-top:15px; color:var(--acid); } .metrics { display:grid; gap:16px; } .metrics article { position:relative; min-height:210px; padding:31px; overflow:hidden; color:var(--ink); background:var(--acid); } .metrics article:after { content:'↗'; position:absolute; right:25px; top:17px; color:var(--orange); font-size:1.7rem; } .metrics small { display:block; font-size:.64rem; font-weight:950; letter-spacing:.1em; } .metrics strong { display:block; margin:25px 0 7px; font:500 4.4rem/.8 var(--serif); letter-spacing:-.08em; } .metrics strong span { font:900 .94rem var(--sans); letter-spacing:0; } .metrics p { margin:0; color:#333a2e!important; font-size:.77rem; } .metrics .dark-card { min-height:145px; color:#edf0e8; background:#2d332d; } .dark-card strong { margin:23px 0 6px; font:800 1.72rem var(--sans); letter-spacing:-.06em; } .dark-card strong i { color:var(--acid); font-style:normal; } .dark-card p { color:#bdc4b9!important; }
.usecases { padding-bottom:110px; } .cards { display:grid; grid-template-columns:1.15fr 1fr 1fr; border-top:1px solid var(--ink); } .cards article { position:relative; min-height:320px; padding:30px; border-right:1px solid var(--line); } .cards article:last-child { border:0; } .cards .featured { background:var(--orange); } .cards h3 { margin:68px 0 18px; font:500 2rem/.98 var(--serif); letter-spacing:-.06em; } .cards article:not(.featured) h3 { font-size:1.62rem; } .cards p { color:#4d342b; font-size:.87rem; } .cards article:not(.featured) p { color:var(--muted); } .corner { position:absolute; right:25px; bottom:18px; font-size:1.7rem; }
.start { display:grid; grid-template-columns:1fr .9fr; gap:94px; align-items:center; padding-top:70px; } .start h2 { margin:18px 0 23px; } .start>div>p:not(.eyebrow) { max-width:370px; color:var(--muted); } .install { padding:12px; background:#dcd9cf; } .install header { display:flex; justify-content:space-between; padding:8px 9px 12px; font:850 .63rem ui-monospace,monospace; letter-spacing:.12em; } .install button { border:0; color:var(--orange); background:transparent; cursor:pointer; font:850 .7rem var(--sans); } pre { margin:0 0 12px; padding:25px; overflow:auto; background:var(--ink); color:#e9ede5; font:.78rem/1.8 ui-monospace,monospace; } .full { width:100%; }.footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:48px; margin-top:135px; border-top:1px solid var(--line); } .footer p { margin:0; color:var(--muted); font-size:.78rem; } .footer>div { display:flex; gap:16px; }
@media (max-width:820px) { .wrap { width:min(100% - 32px,680px); } .header { height:75px; } nav { display:none; } .head-actions { margin-left:auto; } .hero,.split,.start { grid-template-columns:1fr; gap:44px; } .hero { min-height:0; padding-block:65px; } .terminal { width:calc(100% - 11px); } .section,.performance { padding-block:82px; } .intro { gap:28px; } .features,.cards { grid-template-columns:1fr; } .features article,.features article+article,.cards article { min-height:0; padding:27px 0; border-right:0; border-bottom:1px solid var(--line); } .features article:last-child,.cards article:last-child { border-bottom:0; } .workflow-head { display:block; } .workflow-head p { margin-top:24px; } .workflow li { grid-template-columns:42px 1fr; } .workflow code { grid-column:2; } .footer { flex-wrap:wrap; margin-top:80px; } }
@media (max-width:470px) { .small-link { display:none; } h1 { font-size:3.75rem; } .actions { flex-direction:column; align-items:flex-start; gap:18px; } .proof { gap:16px; } .terminal-body { padding:25px; } .terminal footer { display:block; } .terminal footer span+span { display:block; margin-top:4px; } }