:root{
  --bg:#D9D9D9;
  --ink:#202221;
  --ink-2:#3a3c3b;
  --plate:#CACACA;
  --accent:#22F08A;
  --accent-ink:#0f8f52;
  --radius:14px;
  --max:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.25;
  -webkit-font-smoothing:antialiased;overflow-x:hidden
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}

/* nav */
.nav{position:sticky;top:12px;z-index:10;margin:12px 16px 0}
.nav-in{position:relative;max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  border:1.5px solid var(--ink);border-radius:12px;padding:12px 18px;background:var(--bg)}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.14em;font-size:26px}
.brand img.mark{width:34px;height:34px;border-radius:8px}
.brand img.word{height:24px}
.burger{width:30px;height:20px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;background:none;border:0}
.burger span{display:block;height:3px;background:var(--ink);border-radius:2px}
.menu{display:none;position:absolute;right:-1.5px;top:calc(100% + 8px);min-width:200px;background:var(--bg);border:1.5px solid var(--ink);border-radius:12px;padding:12px 18px;flex-direction:column;gap:10px;font-weight:600}
.menu.open{display:flex}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:24px;padding:40px 0 20px;min-height:min(calc(100vh - 90px),760px)}
.hero h1{font-size:clamp(46px,7vw,84px);font-weight:700;line-height:1.02;letter-spacing:-.01em}
.hero .sub{margin-top:26px;font-size:clamp(17px,1.7vw,22px);letter-spacing:.06em;text-transform:uppercase;max-width:22ch;font-weight:400}
.pill{display:inline-block;margin-top:28px;background:var(--accent);color:var(--ink);padding:10px 18px;border-radius:8px;border:1.5px solid var(--ink);font-weight:500;font-size:17px}
.ca{display:inline-flex;align-items:center;gap:10px;margin-top:16px;border:1.5px solid var(--ink);border-radius:8px;padding:6px 8px 6px 8px;font-size:15px;background:var(--bg)}
.ca img{width:22px;height:22px;border-radius:5px}
.ca b{letter-spacing:.1em;font-weight:700}
.ca code{font-family:inherit;color:var(--ink-2)}
.ca .copy{cursor:pointer;opacity:.7}
.ca .buy{background:var(--ink);color:var(--bg);padding:6px 16px;border-radius:6px;font-weight:600;font-size:14px}
.hero-art{width:100%;max-width:606px;height:auto;justify-self:end;min-width:0}
#hero-art svg{width:100%;height:auto;display:block}
h1,h2,h3,p{overflow-wrap:anywhere}

/* motion, slight */
@media (prefers-reduced-motion:no-preference){
  .hero-art .card{animation:rise 5s ease-in-out infinite;transform-origin:303px 260px}
  .hero-art .coin{animation:bob 4s ease-in-out infinite}
  .hero-art .c2{animation-delay:-1.3s}
  .hero-art .c3{animation-delay:-2.6s;animation-duration:5s}
  .hero-art .eye circle:nth-child(2),.hero-art .eye circle:nth-child(3){animation:look 6s ease-in-out infinite}
  .hero-art .check{stroke-dasharray:60;stroke-dashoffset:60;animation:draw 5s ease-in-out infinite}
  .hero-art .button{animation:press 5s ease-in-out infinite;transform-origin:100px 540px}
}
@keyframes rise{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes look{0%,40%,100%{transform:translateX(0)}50%,90%{transform:translateX(5px)}}
@keyframes draw{0%,20%{stroke-dashoffset:60}45%,100%{stroke-dashoffset:0}}
@keyframes press{0%,8%,100%{transform:translateY(0)}12%,18%{transform:translateY(5px)}}

/* section 2 */
.solved{display:grid;grid-template-columns:1.1fr .8fr 1fr;gap:24px;align-items:center;padding:60px 0}
.solved h2{font-size:clamp(34px,4.6vw,56px);font-weight:700;line-height:1.05}
.solved .kicker{margin-top:14px;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(16px,1.6vw,22px);max-width:26ch}
.redact{justify-self:center;width:100%;max-width:200px}
.solved .right{text-align:right;font-size:clamp(20px,2.3vw,30px);line-height:1.35}
.solved .right b{display:block;font-size:clamp(26px,3vw,38px);font-weight:700;margin:12px 0;line-height:1.1}

/* dark band */
.dark{background:var(--ink);color:var(--bg);padding:70px 0 60px}
.dark h2{font-size:clamp(38px,6vw,78px);font-weight:700;line-height:1.05}
.dark h2 .go{color:var(--accent)}
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:30px}
.card{background:var(--bg);color:var(--ink);border-radius:6px;padding:22px 16px 24px;min-height:300px;display:flex;flex-direction:column;justify-content:flex-start}
.card svg{width:96px;height:96px;align-self:center;margin:6px 0 18px}
.card h3{font-size:22px;font-weight:600;line-height:1.15}
.card p{margin-top:8px;font-size:14px;color:var(--ink-2)}

/* two clicks */
.two{padding:70px 0 40px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.two h2{font-size:clamp(36px,5vw,64px);font-weight:700;line-height:1.05}
.two p{font-size:clamp(20px,2.2vw,30px);margin-top:14px}
.steps{border:1.5px solid var(--ink);border-radius:var(--radius);padding:22px;background:var(--plate)}
.step{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--ink)}
.step:last-child{border-bottom:0}
.step .n{flex:0 0 40px;height:40px;border-radius:8px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-weight:700}
.step .n.go{background:var(--accent);color:var(--ink)}
.step p{font-size:17px;margin:0}
.step small{display:block;color:var(--ink-2);margin-top:2px}

/* use cases */
.uses{padding:40px 0 60px}
.uses h2{font-size:clamp(22px,2.6vw,32px);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.uses ul{list-style:none;margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.uses li{border:1.5px solid var(--ink);border-radius:10px;padding:16px 18px;font-size:18px;background:var(--bg)}
.uses li b{display:block;font-weight:600;margin-bottom:4px}

/* manifesto */
.manifesto{padding:60px 0 70px;text-align:center}
.manifesto h2{font-size:clamp(30px,4.4vw,56px);font-weight:700;line-height:1.08;max-width:18ch;margin:0 auto}
.manifesto p{max-width:64ch;margin:24px auto 0;font-size:18px;line-height:1.5}
.manifesto .cta{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{border:1.5px solid var(--ink);border-radius:8px;padding:12px 22px;font-weight:600;background:var(--bg)}
.btn.go{background:var(--accent)}

/* footer */
footer{border-top:1.5px solid var(--ink);padding:24px 0 40px;font-size:13px;color:var(--ink-2)}
footer .row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer .links{display:flex;gap:18px;font-weight:600;color:var(--ink)}
footer .disc{margin-top:16px;max-width:90ch;line-height:1.5}

/* mobile */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:24px}
  .hero-art{justify-self:center;max-width:420px}
  .solved{grid-template-columns:1fr;text-align:left}
  .solved .right{text-align:left}
  .redact{justify-self:start;max-width:160px}
  .cards{grid-template-columns:1fr 1fr}
  .card{min-height:0}
  .two{grid-template-columns:1fr}
  .uses ul{grid-template-columns:1fr}
}
@media (max-width:420px){
  .cards{grid-template-columns:1fr}
  .brand{font-size:20px}
  .ca{font-size:13px;flex-wrap:wrap}
}