:root { --ink:#17201d; --paper:#f4f0e5; --panel:#fffdf6; --accent:#e84f2f; --mint:#bed8cb; --line:#26342f; --muted:#63706a; --shadow:8px 8px 0 var(--line); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; }
a { color:inherit; }
.topbar { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; padding:18px clamp(20px,5vw,72px); border-bottom:2px solid var(--line); background:rgba(244,240,229,.94); backdrop-filter:blur(12px); }
.brand { font-weight:900; letter-spacing:.08em; text-decoration:none; font-size:1.1rem; }.brand span { color:var(--accent); }
nav { display:flex; gap:24px; } nav a { font-weight:700; font-size:.9rem; text-decoration-thickness:2px; text-underline-offset:4px; }
main { overflow:hidden; }.hero,.explainer,.capabilities,.builder,.roadmap { padding:clamp(64px,9vw,120px) clamp(20px,8vw,128px); }
.hero { min-height:78vh; display:grid; align-content:center; background:radial-gradient(circle at 80% 30%,var(--mint) 0 16%,transparent 16.2%),linear-gradient(115deg,transparent 0 62%,rgba(232,79,47,.12) 62%); border-bottom:2px solid var(--line); }
.eyebrow { margin:0 0 16px; color:var(--accent); font-size:.78rem; font-weight:900; letter-spacing:.17em; text-transform:uppercase; }
h1 { max-width:980px; margin:0; font-family:Georgia,serif; font-size:clamp(3.4rem,8vw,7.8rem); line-height:.88; letter-spacing:-.055em; }
.lede { max-width:720px; margin:32px 0; font-size:clamp(1.1rem,2vw,1.4rem); line-height:1.55; }.hero-actions { display:flex; flex-wrap:wrap; gap:14px; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:44px; padding:10px 18px; border:2px solid var(--line); color:var(--ink); background:var(--panel); box-shadow:3px 3px 0 var(--line); font:inherit; font-weight:850; text-decoration:none; cursor:pointer; }.button:hover { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--line); }.button.primary { color:white; background:var(--accent); }.button.small { min-height:36px; padding:6px 10px; box-shadow:none; font-size:.78rem; }
.proof { display:flex; flex-wrap:wrap; gap:28px; padding:0; margin:48px 0 0; list-style:none; font-size:.82rem; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }.proof li::before { content:"●"; color:var(--accent); margin-right:8px; }
.explainer { display:grid; grid-template-columns:1fr 1.5fr; gap:clamp(40px,8vw,120px); color:white; background:var(--ink); }.explainer h2,.builder h2,.roadmap h2 { margin:0; font:700 clamp(2.4rem,5vw,4.8rem)/1 Georgia,serif; letter-spacing:-.035em; }.explainer ol { margin:0; padding:0; counter-reset:step; list-style:none; }.explainer li { display:grid; grid-template-columns:120px 1fr; gap:20px; padding:22px 0; border-top:1px solid #73817b; }.explainer li strong { color:var(--mint); }.explainer li span { line-height:1.55; }
.capabilities { border-bottom:2px solid var(--line); background:var(--panel); }.capabilities h2,.builder h2,.roadmap h2 { margin:0; font:700 clamp(2.4rem,5vw,4.8rem)/1 Georgia,serif; letter-spacing:-.035em; }.capability-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:2px solid var(--line); border-left:2px solid var(--line); }.capability-grid article { min-height:210px; padding:24px; border-right:2px solid var(--line); border-bottom:2px solid var(--line); }.capability-grid article span { color:var(--accent); font-weight:900; }.capability-grid h3 { margin:24px 0 10px; font:700 1.35rem Georgia,serif; }.capability-grid p { margin:0; color:var(--muted); line-height:1.55; }
.builder { background:var(--mint); }.section-heading { max-width:750px; margin-bottom:40px; }.section-heading>p:last-child { color:#40504a; font-size:1.1rem; }
form,.plan-panel { border:2px solid var(--line); background:var(--panel); box-shadow:var(--shadow); }form { padding:clamp(20px,4vw,44px); }.form-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }.form-grid.compact { grid-template-columns:repeat(6,1fr); }.wide { grid-column:span 2; }
label,.transport { display:grid; gap:7px; font-size:.78rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }label small,.transport small { color:var(--muted); font-weight:600; }input,select { width:100%; min-height:44px; padding:9px 11px; border:1.5px solid var(--line); border-radius:0; color:var(--ink); background:white; font:500 .95rem/1.2 inherit; }input:focus,select:focus,button:focus-visible,a:focus-visible { outline:3px solid #2266aa; outline-offset:3px; }.transport { align-content:center; padding:10px 14px; border-left:4px solid var(--accent); background:#f2eee2; }.transport strong { font-size:.9rem; letter-spacing:0; text-transform:none; }
fieldset { margin:30px 0 0; padding:24px; border:1.5px solid var(--line); }legend { padding:0 8px; font:700 1.2rem Georgia,serif; }fieldset .button { margin-top:20px; }
.plan-panel { display:grid; grid-template-columns:.75fr 1.25fr; margin-top:32px; }.plan-panel>div { min-width:0; padding:24px; }.plan-panel>div+div { border-left:2px solid var(--line); }.panel-title { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:40px; }.panel-title h3 { margin:0; }.panel-title span { color:var(--muted); font-size:.8rem; }.panel-title span[data-kind="error"] { color:#a12511; }
.operations { padding:0; list-style:none; }.operations li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-top:1px solid #bbc0b9; }.operations span { display:grid; }.operations small { color:var(--muted); }.operations button { border:0; color:#a12511; background:none; cursor:pointer; text-decoration:underline; }pre { min-height:260px; margin:16px 0 0; padding:18px; overflow:auto; color:#d8f6e7; background:#101714; font:500 .82rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; }
.roadmap { display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(40px,8vw,120px); border-top:2px solid var(--line); }.roadmap>div:first-child p:last-child { max-width:500px; line-height:1.6; }.roadmap-grid { display:grid; grid-template-columns:1fr 1fr; border-top:2px solid var(--line); border-left:2px solid var(--line); }.roadmap article { min-height:220px; padding:24px; border-right:2px solid var(--line); border-bottom:2px solid var(--line); }.roadmap article span { color:var(--accent); font-weight:900; }.roadmap h3 { margin:28px 0 10px; font:700 1.4rem Georgia,serif; }.roadmap article p { color:var(--muted); line-height:1.55; }
footer { display:flex; justify-content:space-between; gap:20px; padding:30px clamp(20px,8vw,128px); color:white; background:var(--ink); font-size:.85rem; }
@media (max-width:900px) { .explainer,.roadmap { grid-template-columns:1fr; }.form-grid,.form-grid.compact { grid-template-columns:1fr 1fr; }.plan-panel { grid-template-columns:1fr; }.plan-panel>div+div { border-left:0; border-top:2px solid var(--line); } }
@media (max-width:600px) { nav a:not(:last-child) { display:none; }.hero { min-height:auto; }.form-grid,.form-grid.compact,.capability-grid,.roadmap-grid { grid-template-columns:1fr; }.wide { grid-column:auto; }.explainer li { grid-template-columns:80px 1fr; }footer { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.button:hover { transform:none; } }