:root { --bg:#09090a; --panel:#141416; --panel-light:#1b1b1e; --text:#f4f4f1; --muted:#a4a4a8; --line:#353539; --acid:#d8ff62; --red:#ff574d; --green:#56d778; --blue:#9ac9e2; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Manrope,Arial,sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible { outline:3px solid var(--acid); outline-offset:4px; }
.skip-link { background:var(--acid); color:#111; left:16px; padding:8px 14px; position:absolute; top:-60px; z-index:10; }.skip-link:focus { top:16px; }
.site-header { align-items:center; border-bottom:1px solid var(--line); display:flex; height:76px; justify-content:space-between; padding:0 clamp(22px,5vw,76px); position:relative; z-index:3; }
.brand { align-items:center; display:inline-flex; font-size:19px; font-weight:800; gap:9px; letter-spacing:-.04em; }.brand-mark { align-items:center; background:var(--text); color:var(--bg); display:inline-flex; font:500 12px/1 'DM Mono',monospace; height:25px; justify-content:center; width:20px; }
nav { display:flex; gap:26px; margin-left:auto; margin-right:34px; } nav a { color:var(--muted); font-size:13px; font-weight:700; } nav a:hover { color:var(--text); }
.header-download { border-bottom:1px solid var(--text); font-size:13px; font-weight:800; padding-bottom:3px; }.menu-button { background:none; border:0; color:var(--text); display:none; font:700 13px Manrope; padding:10px; }
.hero { min-height:740px; overflow:hidden; padding:clamp(72px,10vw,145px) clamp(22px,10vw,150px) 70px; position:relative; }.hero::before { border:1px solid var(--line); border-radius:50%; content:""; height:760px; position:absolute; right:-185px; top:-105px; width:760px; }.eyebrow { color:var(--acid); font:500 11px 'DM Mono',monospace; letter-spacing:.12em; margin:0 0 21px; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { letter-spacing:-.055em; line-height:1.04; } h1 { font-size:clamp(47px,7.5vw,112px); font-weight:500; margin:0; max-width:900px; position:relative; } h1 em { color:var(--acid); font-style:normal; } .hero-copy { color:var(--muted); font-size:clamp(17px,1.55vw,21px); margin:30px 0; max-width:585px; position:relative; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; position:relative; }.button { align-items:center; border:1px solid var(--text); display:inline-flex; font-size:14px; font-weight:800; gap:28px; justify-content:space-between; padding:14px 18px; transition:transform .18s,background .18s,color .18s; }.button:hover { transform:translateY(-2px); }.button-primary { background:var(--acid); border-color:var(--acid); color:#101010; }.button-secondary:hover { background:var(--text); color:#101010; }.microcopy { color:var(--muted); font-size:12px; margin-top:16px; }
.hero-visual { background:var(--panel); border:1px solid var(--line); bottom:-120px; box-shadow:0 28px 70px #0009; overflow:hidden; position:absolute; right:11vw; transform:rotate(4deg); width:min(25vw,340px); }.hero-visual img { display:block; width:100%; }.marker { color:var(--acid); font:500 11px 'DM Mono',monospace; position:absolute; z-index:1; }.marker span { color:var(--text); display:block; font:700 12px Manrope; letter-spacing:0; margin-top:4px; white-space:nowrap; }.marker-one { left:-105px; top:95px; }.marker-two { bottom:100px; right:-105px; }
.statement,.privacy { border-top:1px solid var(--line); padding:clamp(75px,11vw,150px) clamp(22px,10vw,150px); }.section-grid { display:grid; gap:35px; grid-template-columns:1fr 3fr; }.section-grid h2 { font-size:clamp(36px,5vw,70px); font-weight:500; margin-bottom:26px; max-width:850px; }.large-copy { color:var(--muted); font-size:clamp(18px,2vw,27px); max-width:820px; }
.steps { background:var(--panel); padding:clamp(72px,9vw,130px) clamp(22px,10vw,150px); }.section-heading h2 { font-size:clamp(36px,5vw,70px); font-weight:500; margin-bottom:0; }.steps ol { display:grid; gap:0; grid-template-columns:repeat(4,1fr); list-style:none; margin:67px 0 0; padding:0; }.steps li { border-left:1px solid var(--line); min-height:200px; padding:0 24px; }.steps li:first-child { padding-left:0; border:0; }.steps span,.number { color:var(--acid); font:500 12px 'DM Mono',monospace; }.steps h3,.feature-grid h3 { font-size:24px; font-weight:600; margin:35px 0 12px; }.steps p,.feature-grid p,.feature-copy p { color:var(--muted); font-size:14px; }
.split-feature { align-items:center; display:grid; gap:clamp(48px,10vw,160px); grid-template-columns:minmax(240px,410px) 1fr; padding:clamp(70px,10vw,150px) clamp(22px,15vw,240px); }.visual-frame { background:var(--panel); box-shadow:20px 20px 0 var(--panel-light); overflow:hidden; }.visual-frame img { display:block; width:100%; }.feature-copy h2 { font-size:clamp(40px,5.2vw,75px); font-weight:500; margin-bottom:24px; max-width:590px; }.feature-copy p { font-size:18px; max-width:530px; }.legend { display:flex; gap:10px; margin-top:25px; }.legend span { border:1px solid; border-radius:50px; font:500 11px 'DM Mono',monospace; padding:5px 10px; }.kept { color:var(--green); }.missed { color:var(--red); }.paused { color:var(--muted); }
.features { border-top:1px solid var(--line); padding:clamp(70px,10vw,150px) clamp(22px,10vw,150px); }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:60px; }.feature-grid article { border-right:1px solid var(--line); border-top:1px solid var(--line); min-height:230px; padding:25px; }.feature-grid article:nth-child(3n+1) { padding-left:0; }.feature-grid article:nth-child(3n) { border-right:0; }.feature-grid article:nth-child(n+5) { padding-top:48px; }
.gallery { background:var(--panel); overflow:hidden; padding:clamp(70px,10vw,150px) 0; }.gallery .section-heading { padding:0 clamp(22px,10vw,150px); }.gallery .section-heading > p:last-child { color:var(--muted); margin-top:16px; }.screenshots { display:flex; gap:22px; margin-top:55px; overflow-x:auto; padding:0 clamp(22px,10vw,150px) 15px; scrollbar-color:var(--acid) var(--panel); }.screenshots figure { flex:0 0 min(250px,65vw); margin:0 0 15px; }.screenshots img { border:1px solid var(--line); display:block; width:100%; }.screenshots figcaption { font-size:13px; font-weight:800; margin-top:13px; }
.principles { display:grid; gap:35px; grid-template-columns:1fr 3fr; padding:clamp(75px,11vw,155px) clamp(22px,10vw,150px); }.principles h2 { font-size:clamp(38px,5.5vw,78px); font-weight:500; margin-bottom:25px; }.principles div p { color:var(--muted); font-size:18px; max-width:680px; }
.privacy { background:var(--panel); }.privacy p { color:var(--muted); max-width:760px; }.text-links { display:flex; flex-wrap:wrap; gap:22px; margin-top:28px; }.text-links a { border-bottom:1px solid var(--text); font-size:13px; font-weight:800; padding-bottom:3px; }
.download { padding:clamp(75px,10vw,150px) clamp(22px,10vw,150px); }.download-panel { border:1px solid var(--line); display:grid; gap:37px; grid-template-columns:1fr auto; padding:clamp(27px,5vw,65px); }.download h2 { font-size:clamp(39px,5vw,72px); font-weight:500; margin-bottom:14px; }.download-panel > div > p { color:var(--muted); }.download dl { border-top:1px solid var(--line); display:grid; gap:0; grid-column:1/-1; grid-template-columns:repeat(3,1fr); margin:0; }.download dl div { border-right:1px solid var(--line); padding:22px 20px 0 0; }.download dl div+div { padding-left:20px; }.download dl div:last-child { border-right:0; }.download dt { color:var(--muted); font-size:11px; margin-bottom:8px; text-transform:uppercase; }.download dd { font-size:14px; font-weight:700; margin:0; }.download dd a { border-bottom:1px solid var(--text); }.download .checksum { grid-column:1/-1; padding-left:0; }.download code { font:11px/1.5 'DM Mono',monospace; overflow-wrap:anywhere; }
footer { align-items:center; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:25px; justify-content:space-between; padding:28px clamp(22px,5vw,76px); } footer p,footer div { color:var(--muted); font-size:12px; margin:0; } footer div { display:flex; gap:18px; } footer div a:hover { color:var(--text); }
@media (max-width:850px) { nav { gap:14px; margin-right:16px; }.hero { min-height:850px; }.hero-visual { bottom:-20px; right:10%; width:290px; }.section-grid,.principles { grid-template-columns:1fr; }.steps ol { grid-template-columns:repeat(2,1fr); }.steps li:nth-child(3) { border-left:0; padding-left:0; padding-top:30px; }.steps li:nth-child(4) { padding-top:30px; }.feature-grid { grid-template-columns:repeat(2,1fr); }.feature-grid article:nth-child(3n+1) { padding-left:25px; }.feature-grid article:nth-child(2n+1) { padding-left:0; }.feature-grid article:nth-child(2n) { border-right:0; }.feature-grid article:nth-child(3) { border-right:1px solid var(--line); }.feature-grid article:nth-child(n+5) { padding-top:25px; }.split-feature { grid-template-columns:minmax(220px,340px) 1fr; padding-left:11vw; padding-right:11vw; }.download dl { grid-template-columns:repeat(2,1fr); }.download .checksum { grid-column:1/-1; padding-left:0; }.download dl div:nth-child(2) { border-right:0; } }
@media (max-width:590px) { .site-header { height:64px; padding:0 20px; }.menu-button { display:block; margin-left:auto; }.header-download { display:none; } nav { background:var(--panel); border-bottom:1px solid var(--line); display:none; flex-direction:column; gap:0; left:0; margin:0; padding:12px 20px 18px; position:absolute; right:0; top:63px; } nav.open { display:flex; } nav a { border-top:1px solid var(--line); padding:15px 0; }.hero { min-height:820px; padding:70px 22px 30px; }.hero::before { height:500px; right:-250px; top:190px; width:500px; }.hero-visual { bottom:-50px; right:19%; width:245px; }.marker-one { left:-70px; }.marker-two { right:-78px; }.statement,.privacy,.principles { padding-left:22px; padding-right:22px; }.steps { padding-left:22px; padding-right:22px; }.steps ol { margin-top:45px; }.steps li { min-height:190px; padding:0 15px; }.steps h3 { font-size:20px; margin-top:25px; }.split-feature { gap:45px; grid-template-columns:1fr; padding:70px 50px; }.feature-copy { margin:0 -28px; }.features { padding-left:22px; padding-right:22px; }.feature-grid { margin-top:42px; }.feature-grid article { min-height:205px; padding:20px 13px; }.feature-grid article:nth-child(3n+1) { padding-left:13px; }.feature-grid article:nth-child(2n+1) { padding-left:0; }.feature-grid h3 { font-size:19px; margin-top:25px; }.feature-grid p { font-size:12px; }.gallery .section-heading { padding:0 22px; }.screenshots { padding-left:22px; padding-right:22px; }.download { padding-left:22px; padding-right:22px; }.download-panel { display:block; }.download-panel .button { margin:10px 0 37px; }.download dl { display:block; }.download dl div,.download dl div+div { border-bottom:1px solid var(--line); border-right:0; padding:15px 0; }.download dl div:last-child { border-bottom:0; } footer { align-items:flex-start; flex-direction:column; padding:30px 22px; } }