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

:root {
  --ink:#111111;
  --paper:#f5f3ee;
  --muted:#6f706c;
  --line:#d8d5cd;
  --acid:#d7ff45;
  --red:#ff4b36;
  --blue:#4466ff;
  --dark:#151515;
  --mono:'DM Mono',monospace;
  --sans:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
.disclaimer{height:29px;background:var(--acid);display:flex;align-items:center;justify-content:center;font:500 10px var(--mono);letter-spacing:.12em;border-bottom:1px solid #b8cf36}
.nav{height:76px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(245,243,238,.94);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.06em}
.brand-mark{display:grid;grid-template-columns:repeat(2,9px);gap:2px;transform:skewY(-4deg)}
.brand-mark i{width:9px;height:9px;background:var(--ink);display:block}
.nav nav{display:flex;align-items:center;gap:30px;font:500 12px var(--mono)}
.nav nav a:hover{text-decoration:underline}
.nav-btn{border:1px solid var(--ink);background:transparent;padding:10px 15px;cursor:pointer}
.nav-btn:hover{background:var(--ink);color:white}
.menu{display:none;background:none;border:0;font-size:24px}
.hero{min-height:650px;padding:9vw 7vw 7vw;display:grid;grid-template-columns:1.08fr .92fr;gap:7vw;align-items:center;max-width:1500px;margin:auto}
.eyebrow,.section-kicker{font:500 11px var(--mono);letter-spacing:.15em}
.pulse{display:inline-block;width:8px;height:8px;background:var(--red);border-radius:50%;margin-right:7px;animation:pulse 1.3s infinite}
h1{font-size:clamp(52px,7.2vw,108px);line-height:.9;letter-spacing:-.075em;margin:20px 0 27px;max-width:820px}
h1 em{font-style:normal;color:var(--red)}
h1 strong{font-weight:800}
.lede{font-size:18px;line-height:1.6;color:#4e4f4c;max-width:660px}
.hero-actions{display:flex;gap:12px;margin-top:32px}
.button{display:inline-flex;align-items:center;gap:22px;padding:15px 19px;border:1px solid var(--ink);font-weight:700;font-size:13px;cursor:pointer;transition:.2s}
.button.primary{background:var(--ink);color:#fff}
.button.primary:hover{transform:translateY(-2px);box-shadow:5px 5px 0 var(--acid)}
.button.ghost{background:transparent}
.button.ghost:hover{background:white}
.tiny-note{font:10px var(--mono);color:#777;margin-top:16px}
.terminal-card{background:#101010;color:#e8e8e8;border-radius:12px;box-shadow:18px 20px 0 #ddd9d0;transform:rotate(1.2deg);overflow:hidden}
.terminal-top{height:43px;background:#1b1b1b;border-bottom:1px solid #303030;display:flex;align-items:center;padding:0 15px;gap:13px;font:10px var(--mono);color:#aaa}
.dots{display:flex;gap:5px}.dots b{width:8px;height:8px;border-radius:50%;background:#555}
.terminal-live{margin-left:auto;color:var(--acid)}
.terminal-body{padding:27px 23px 35px;min-height:330px;font:12px/2 var(--mono)}
.green{color:#a5e86c}.muted{color:#777}.error{color:#ff6556;margin-top:9px}.success{color:var(--acid)}
.bar{height:6px;background:#2b2b2b;margin:8px 0;width:100%}.bar span{display:block;width:99%;height:100%;background:var(--acid)}
.cursor{animation:blink 1s infinite;color:var(--acid)}
.ticker{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);overflow:hidden;white-space:nowrap;display:flex;font:10px var(--mono);text-transform:uppercase}
.ticker div{padding:13px 28px;border-right:1px solid var(--ink)}
.ticker strong{font-weight:500}
.section{padding:110px 7vw;max-width:1500px;margin:auto}
.section-heading h2{font-size:clamp(40px,5vw,72px);line-height:.95;letter-spacing:-.065em;margin:18px 0 55px}
.roast-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.roast-card{min-height:390px;border:1px solid var(--line);padding:27px;display:flex;flex-direction:column;transition:.25s;background:#f8f6f1}
.roast-card:hover{transform:translateY(-7px);box-shadow:9px 9px 0 #ddd9d0}
.roast-card.featured{background:var(--acid);border-color:var(--ink)}
.card-number{font:11px var(--mono);margin-bottom:70px}.tag{font:10px var(--mono);letter-spacing:.12em;margin-bottom:12px}
.roast-card h3{font-size:27px;line-height:1.05;letter-spacing:-.045em;margin:0 0 15px}.roast-card p{color:#555;line-height:1.55;font-size:14px}
.text-btn{margin-top:auto;background:none;border:0;padding:18px 0 0;text-align:left;font:500 11px var(--mono);cursor:pointer}
.text-btn:hover{text-decoration:underline}
.dark{max-width:none;background:var(--dark);color:white;padding-left:7vw;padding-right:7vw}
.light{color:white}.light .section-kicker{color:#aaa}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #3a3a3a}
.feature{padding:35px 25px 40px 0;border-right:1px solid #3a3a3a;min-height:230px}.feature:not(:first-child){padding-left:25px}
.icon{font-size:27px;color:var(--acid);font-family:var(--mono)}
.feature h3{font-size:22px;letter-spacing:-.04em;margin:45px 0 8px}.feature p{color:#999;line-height:1.5;font-size:13px}
.manifesto{padding:130px 7vw;text-align:center;max-width:1050px;margin:auto}
.quote-mark{font-size:80px;line-height:.5}
blockquote{font-size:clamp(35px,5vw,68px);line-height:1.05;letter-spacing:-.065em;margin:30px auto}
blockquote span{text-decoration:underline;text-decoration-thickness:5px;text-decoration-color:var(--acid);text-underline-offset:8px}
.manifesto p{font:11px var(--mono);color:#777;margin-bottom:35px}
.status{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 7vw;display:flex;justify-content:space-between;font:10px var(--mono);gap:20px}
.status>div:first-child{display:flex;gap:12px;align-items:center}.status-dot{width:7px;height:7px;background:#4ecb72;border-radius:50%;display:inline-block}.status span:last-child{color:#888}.counter{color:#777}
footer{background:#111;color:white;padding:65px 7vw 35px;display:grid;grid-template-columns:1fr auto;gap:25px}
.footer-brand{font-size:28px;font-weight:800;letter-spacing:-.07em}.footer-links{display:flex;gap:25px;font:11px var(--mono)}.footer-links a:hover{text-decoration:underline}
footer p{grid-column:1/-1;color:#777;font:10px/1.7 var(--mono);max-width:700px;margin:0}
.toast{position:fixed;bottom:25px;right:25px;background:var(--ink);color:#fff;padding:15px 18px;max-width:360px;font:11px/1.5 var(--mono);transform:translateY(130px);opacity:0;transition:.3s;z-index:50;border-left:4px solid var(--acid)}
.toast.show{transform:none;opacity:1}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;place-items:center;z-index:60;padding:20px}
.modal.open{display:grid}.modal-box{position:relative;background:var(--paper);max-width:450px;padding:42px;text-align:center;border:1px solid var(--ink);box-shadow:10px 10px 0 var(--acid)}
.modal-close{position:absolute;right:13px;top:9px;background:none;border:0;font-size:27px;cursor:pointer}.modal-icon{font-size:35px}.modal-box h3{font-size:28px;letter-spacing:-.05em}.modal-box p{line-height:1.6;color:#555;margin-bottom:25px}
@keyframes pulse{50%{opacity:.25;transform:scale(.7)}}@keyframes blink{50%{opacity:0}}
@media(max-width:850px){
 .nav{height:66px}.nav nav{display:none}.menu{display:block}.hero{grid-template-columns:1fr;padding:75px 7vw}.terminal-card{transform:none}.roast-grid,.feature-grid{grid-template-columns:1fr}.feature{border-right:0;border-bottom:1px solid #3a3a3a}.feature:not(:first-child){padding-left:0}.feature-grid{border-bottom:1px solid #3a3a3a}
 .status{display:block}.counter{margin-top:12px}.ticker div{padding:12px 18px}
 footer{grid-template-columns:1fr}.footer-links{grid-row:2}.footer-brand{grid-row:1}
}
@media(max-width:500px){h1{font-size:51px}.hero{padding-top:60px}.hero-actions{flex-direction:column}.button{justify-content:center}.section,.dark,.manifesto{padding-top:80px;padding-bottom:80px}.roast-card{min-height:340px}}