:root{--ink:#171717;--muted:#747474;--line:#e7e7e7;--soft:#f6f6f5;--green:#b8ed77}*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink)}.wrap{width:min(1180px,calc(100% - 52px));margin:auto}.nav{height:80px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-size:20px;font-weight:800;letter-spacing:-1px;text-decoration:none}.logo i{display:grid;place-items:center;width:25px;height:25px;background:var(--ink);color:#fff;border-radius:7px;font-size:15px;font-style:normal;transform:rotate(-18deg)}nav{display:flex;gap:28px;margin-left:70px}nav a,.login{color:#555;text-decoration:none;font-size:13px}.login{margin-right:20px}.button{display:inline-flex;gap:16px;align-items:center;padding:13px 16px;border-radius:7px;background:var(--ink);color:#fff;text-decoration:none;font-size:13px;font-weight:700}.hero{min-height:735px;display:grid;grid-template-columns:48% 52%;align-items:center;overflow:hidden}.eyebrow{font:500 10px 'DM Mono',monospace;letter-spacing:.09em;color:#686868}.eyebrow i{display:inline-block;width:8px;height:8px;background:#99d959;border-radius:50%;box-shadow:0 0 0 4px #edf8df;margin-right:8px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(53px,5.6vw,77px);line-height:1.01;letter-spacing:-.066em;margin-bottom:25px}h1 span{color:#858585;font-weight:400}.lede,.intro>p,.work>p,.developer>div>p{max-width:480px;color:var(--muted);font-size:16px;line-height:1.65}.hero .button{margin:12px 25px 20px 0}.watch{font-size:13px;font-weight:700;color:#222}.copy>small{display:block;color:#777;font:11px 'DM Mono',monospace}.stage{height:100%;position:relative}.dash{position:absolute;top:98px;left:10px;width:750px;height:513px;background:#fff;border:1px solid #dedede;border-radius:10px;box-shadow:0 24px 65px #0002;overflow:hidden;display:flex;transform:perspective(1500px) rotateY(-9deg) rotateX(2deg) rotateZ(2deg);transform-origin:left}.dash aside{width:50px;border-right:1px solid #eee;display:flex;flex-direction:column;gap:14px;align-items:center;padding:12px 8px;color:#999}.dash aside b,.dash aside span{width:27px;height:27px;display:grid;place-items:center;border-radius:5px}.dash aside b{background:#171717;color:#fff}.dash aside .on{background:#eee;color:#111}.panel{width:100%;font-size:10px}.top{height:48px;padding:13px 16px;border-bottom:1px solid #eee}.top label{float:right;border:1px solid #eee;padding:5px 8px;color:#aaa;border-radius:4px;margin-top:-5px}.top em{float:right;background:#f4c9b1;border-radius:50%;padding:4px 6px;font-style:normal;margin:-5px 0 0 10px}.inside{padding:19px 22px}.welcome{display:flex;justify-content:space-between}.welcome h2{font-size:17px;margin-bottom:4px}.welcome p,.volume small{margin:0;color:#999}.welcome button,.form button{border:0;background:#171717;color:#fff;border-radius:4px;padding:7px 9px;font-size:9px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0}.metrics article,.volume,.runs{border:1px solid #e7e7e7;border-radius:6px;padding:12px}.metrics p{font-size:8px;color:#999;margin-bottom:9px}.metrics b{font-size:19px}.metrics small{float:right;color:#60a425}.metrics span{display:block;margin-top:8px;color:#aaa;font-size:8px}.volume{height:164px}.volume h3,.runs>b{font-size:11px}.chart{height:108px;margin-top:8px;background:repeating-linear-gradient(0deg,transparent 0,transparent 26px,#f1f1f1 27px)}svg{width:100%;height:105px}.days{font-size:7px;color:#aaa;word-spacing:23px}.runs{margin-top:10px}.runs>a{float:right;font-size:8px}.runs p{border-top:1px solid #eee;padding-top:8px;font-size:8px}.runs i{font-style:normal;margin-right:8px}.runs em{color:#5b9b25;background:#eff7e6;padding:2px 4px;margin-left:30px;font-style:normal}.runs span{float:right;color:#999}.logos{padding:24px 0;border-block:1px solid var(--line)}.logos .wrap{display:flex;justify-content:space-between}.logos small{font:10px 'DM Mono',monospace;color:#888}.logos p{margin:0;color:#777;font-weight:700;word-spacing:13px}.intro{padding:133px 0 62px}.intro h2,.work h2,.developer h2,.pricing h2,.cta h2{font-size:clamp(39px,4.7vw,62px);line-height:1.04;letter-spacing:-.064em;margin-bottom:22px}.intro h2 em{font-weight:400;color:#808080}.cards{display:grid;grid-template-columns:1.25fr 1fr;gap:14px}.cards article{min-height:374px;border:1px solid #e4e4e4;border-radius:10px;padding:23px;position:relative;overflow:hidden;background:#f7f9f5}.cards small{font:10px 'DM Mono',monospace;color:#777}.cards h3{font-size:27px;letter-spacing:-.05em;margin:35px 0 10px;max-width:315px}.cards p{max-width:310px;color:#777;font-size:13px;line-height:1.6}.form{position:absolute;right:0;bottom:0;width:75%;background:#fff;border:1px solid #e2e2e2;border-radius:8px 0 0 0;padding:17px;font-size:9px}.form span{display:block;margin-bottom:8px;color:#999}.form b{color:#333}.form button{width:100%;text-align:left}.bars{position:absolute;bottom:58px;color:#74aa41;font-size:54px;letter-spacing:-6px}.code{grid-column:span 2!important;min-height:272px!important;background:#171717!important;color:#fff}.code p{color:#aaa}.code pre{position:absolute;right:10%;top:36px;font:12px/1.7 'DM Mono',monospace}.code pre b{color:#bdb2ff}.code pre i{color:#9ee069}.code pre em{color:#e4d18d}.code a{position:absolute;bottom:27px;color:#fff;font-size:12px}.work{margin-top:130px;padding:122px 0;background:var(--soft)}.work .wrap,.developer{display:grid;grid-template-columns:.9fr 1.1fr;gap:110px}.work>p{font-size:14px}.work-list article{display:grid;grid-template-columns:42px 1fr 20px;gap:14px;padding:23px 0;border-top:1px solid #ddd}.work-list article:last-child{border-bottom:1px solid #ddd}.work-list small{font:10px 'DM Mono',monospace;color:#777}.work-list h3{font-size:18px;margin-bottom:8px}.work-list p{color:#777;font-size:13px;line-height:1.5;margin:0}.developer{padding:132px 0;align-items:center}.developer pre{background:#171717;color:#ddd;border-radius:9px;padding:25px;font:12px/1.85 'DM Mono',monospace;box-shadow:10px 10px 0 #eee}.developer pre small{color:#666}.developer pre b{color:#c2b6ff}.developer pre i{color:#92d36a}.developer pre em{color:#e9d494;font-style:normal}.developer pre footer{border-top:1px solid #363636;margin:17px -25px -25px;padding:12px 18px;color:#83c657}.developer pre footer span{color:#bbb}.pricing{padding:25px 0 132px}.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.plans article{border:1px solid #dfdfdf;border-radius:8px;padding:22px;min-height:330px;display:flex;flex-direction:column}.plans small{font:10px 'DM Mono',monospace}.plans h3{font-size:37px;margin:29px 0 6px}.plans h3 i{font-size:12px;color:#777;font-style:normal}.plans p{color:#777;font-size:12px}.plans ul{padding:0;list-style:none;font-size:12px;line-height:2.2}.plans li:before{content:'✓';color:#65a12f;margin-right:8px}.plans a{margin-top:auto;font-size:12px;font-weight:700}.popular{background:#171717!important;color:#fff}.popular p{color:#aaa}.cta{background:var(--green);padding:70px 0}.cta .wrap{display:flex;justify-content:space-between;align-items:end}.light{background:#fff;color:#171717}.footer{min-height:105px;display:flex;align-items:center;gap:26px;font-size:11px;color:#777}.footer>span:nth-of-type(2){margin-left:auto}.footer a:last-child{color:#777}@media(max-width:760px){.wrap{width:min(100% - 32px,1180px)}nav,.login{display:none}.nav{height:67px}.hero{display:block;padding:70px 0 45px;min-height:0}.stage{height:380px}.dash{top:30px;transform:scale(.72) perspective(1500px) rotateY(-7deg) rotateZ(2deg);transform-origin:left top}.logos .wrap{display:block}.logos p{margin-top:15px;font-size:11px}.cards,.work .wrap,.developer,.plans{grid-template-columns:1fr}.code{grid-column:auto!important;min-height:330px!important}.code pre{top:160px;left:23px;font-size:9px}.work{margin-top:80px;padding:80px 0}.developer{padding:80px 0;gap:45px}.pricing{padding-bottom:80px}.cta .wrap{display:block}.cta .button{margin-top:26px}.footer{padding:25px 0;flex-wrap:wrap}.footer>span:nth-of-type(2){margin-left:0}}@media(max-width:430px){h1{font-size:49px}.dash{transform:scale(.61) perspective(1500px) rotateY(-7deg) rotateZ(2deg)}.hero .button{margin-right:8px}.watch{font-size:11px}}
