:root{
  --soil:#0F1F1A; --soil-2:#16302A; --paper:#F1EFE6; --mute:#9DB0A6; --wheat:#E3B34A; --line:rgba(241,239,230,.16);
  --max:1120px; --pad:clamp(20px,5vw,56px);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--soil);color:var(--paper);font:400 1.0625rem/1.65 "IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Bricolage Grotesque",sans-serif;line-height:1.02;letter-spacing:-.02em}
a{color:inherit}
:focus-visible{outline:3px solid var(--wheat);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

header{position:sticky;top:0;z-index:10;background:rgba(15,31,26,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:800 1.2rem "Bricolage Grotesque";letter-spacing:-.01em}
.brand svg{width:30px;height:30px}
nav{display:flex;gap:28px}
nav a{text-decoration:none;color:var(--mute);font-weight:500;font-size:.95rem}
nav a:hover{color:var(--paper)}

.hero{position:relative;overflow:hidden;padding:clamp(56px,10vw,128px) 0 clamp(64px,9vw,112px)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(3rem,8.2vw,7rem);font-weight:800}
.hero p.lead{margin-top:28px;max-width:34em;color:var(--mute);font-size:1.2rem}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.btn{display:inline-block;padding:14px 26px;font-weight:500;text-decoration:none;border:2px solid var(--paper)}
.btn.primary{background:var(--wheat);border-color:var(--wheat);color:var(--soil)}
.btn:hover{background:var(--paper);color:var(--soil);border-color:var(--paper)}

.plot{width:100%;height:auto;display:block}
.plot .frame{stroke:var(--paper);stroke-width:7;fill:none}
.plot .grid line{stroke:var(--line);stroke-width:1}
.plot .pass{stroke:var(--wheat);stroke-width:3;fill:none;stroke-dasharray:1;stroke-dashoffset:1;animation:fly 5s .4s cubic-bezier(.5,0,.3,1) forwards}
@keyframes fly{to{stroke-dashoffset:0}}
.plot .core{fill:var(--wheat)}

section{padding:clamp(64px,9vw,120px) 0;border-top:1px solid var(--line)}
section h2{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:800;max-width:14em}
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,88px);margin-top:44px}
.about p{color:var(--mute);max-width:34em}
.about p + p{margin-top:1em}
.facts{list-style:none;padding:0;display:grid;gap:0}
.facts li{padding:20px 0;border-top:1px solid var(--line)}
.facts li:last-child{border-bottom:1px solid var(--line)}
.facts b{display:block;font:600 1.35rem "Bricolage Grotesque";margin-bottom:2px}
.facts span{color:var(--mute)}

.products{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line)}
.product{padding:clamp(24px,4vw,44px);background:var(--soil-2)}
.product + .product{background:transparent;border-left:1px solid var(--line)}
.product h3{font-size:2.4rem;font-weight:800}
.product p{margin:14px 0 22px;color:var(--mute);max-width:28em}
.product ul{padding-left:1.1em;margin-bottom:28px;color:var(--paper)}
.product li{margin-bottom:6px}
.product li::marker{color:var(--wheat)}
.link{font-weight:500;text-decoration:underline;text-decoration-color:var(--wheat);text-underline-offset:6px;text-decoration-thickness:2px}

.flow{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px);list-style:none;padding:0}
.flow li{border-top:3px solid var(--wheat);padding-top:16px}
.flow b{font:800 1.5rem "Bricolage Grotesque"}
.flow span{display:block;color:var(--mute);margin-top:6px}

.founder{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,88px);margin-top:44px}
.founder p{color:var(--mute);max-width:34em}

.contact{background:var(--paper);color:var(--soil)}
.contact h2{max-width:11em}
.contact p{margin-top:20px;max-width:32em;color:#3b4a43}
.channels{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}
.contact .btn{border-color:var(--soil);color:var(--soil)}
.contact .btn.primary{background:var(--soil);color:var(--paper)}
.contact .btn:hover{background:var(--wheat);border-color:var(--wheat);color:var(--soil)}

footer{padding:36px 0;color:var(--mute);font-size:.9rem;background:var(--soil)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (max-width:820px){
  .hero .wrap,.about,.founder,.products,.flow{grid-template-columns:1fr}
  .product + .product{border-left:0;border-top:1px solid var(--line)}
  .plot{max-width:360px}
  nav{gap:18px}
}
@media (max-width:480px){nav a:nth-child(n+3){display:none}}
@media (prefers-reduced-motion:reduce){.plot .pass{animation:none;stroke-dashoffset:0}html{scroll-behavior:auto}}