:root {
  --ink: #07140E;
  --night: #0B1712;
  --cream: #FBF3E4;
  --signal: #00E04B;
  --lime: #C6FF1A;
  --muted: #33443A;
  --display: 'Bagel Fat One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --hand: 'Gochi Hand', 'Comic Sans MS', cursive;
  --text: Onest, 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--text); }
a { color: var(--ink); }
svg { display: block; }
.page { padding: 16px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.wrap { max-width: 1280px; margin: 0 auto; }
.display { margin: 0; font-family: var(--display); font-weight: 400; }
.hand { margin: 0; font-family: var(--hand); }
.stack { display: flex; flex-direction: column; gap: 22px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.stack-lg { display: flex; flex-direction: column; gap: clamp(32px, 5vw, 60px); }

.outlined { color: var(--cream); -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill; text-shadow: 0 .07em 0 var(--ink); }
.press { transition: transform .14s cubic-bezier(.2,.8,.3,1); cursor: pointer; }
.press:hover { transform: translateY(-3px); }
.press:active { transform: translateY(2px); }
.press:focus-visible, .navlink:focus-visible, summary:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; }
.dark .press:focus-visible { outline-color: var(--ink); }

.topnav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 4px 12px; }
.navlink { text-decoration: none; text-underline-offset: 5px; text-decoration-thickness: 3px; font-weight: 700; padding: 10px 0; }
.navlink:hover { text-decoration: underline; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; padding: 0; }
.brand img { width: 52px; height: 60px; object-fit: contain; }
.navlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; font-size: 17px; }

.panel { border: 4px solid var(--ink); border-radius: 40px; padding: clamp(28px, 5vw, 72px); overflow: hidden; }
.plain { padding: clamp(36px, 5vw, 72px) clamp(8px, 2vw, 24px); }
.hero { background: var(--signal); }
.dark { background: var(--night); color: var(--cream); }
.lime-bg { background: var(--lime); }
.lime { color: var(--lime); }

.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 32px clamp(24px, 4vw, 64px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.hero-copy h1 { font-size: clamp(3.1rem, 7.4vw, 7rem); line-height: .98; letter-spacing: -.01em; display: flex; flex-direction: column; gap: .12em; }
.tag { background: var(--ink); color: var(--cream); border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.lead { margin: 0; max-width: 34em; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.45; font-weight: 500; text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.cta { display: inline-flex; align-items: center; min-height: 60px; padding: 14px 30px; background: var(--ink); color: var(--lime); border-radius: 999px; font-weight: 700; font-size: 19px; text-decoration: none; }
.note { font-size: 25px; line-height: 1.1; rotate: -2deg; }

.hero-art { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1; margin: 0 auto; }
.frog { position: absolute; left: 12%; top: 5%; width: 76%; height: 90%; object-fit: contain; rotate: -3deg; }
.coin { position: absolute; }
.coin-a { left: -2%; top: 8%; width: 22%; rotate: -14deg; }
.coin-b { right: -1%; bottom: 7%; width: 19%; rotate: 12deg; }
.bubble { position: absolute; right: -1%; top: 7%; background: var(--cream); border: 4px solid var(--ink); border-radius: 22px; padding: 10px 16px; rotate: 5deg; font-size: clamp(20px, 2.1vw, 28px); line-height: 1; white-space: nowrap; }

.center-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.h2 { font-size: clamp(2.5rem, 5.4vw, 5rem); line-height: 1; }
.h2-big { font-size: clamp(3rem, 7vw, 6.4rem); line-height: .98; }
.sub { font-size: 27px; color: var(--muted); }
.narrow { max-width: 15em; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.step { border: 4px solid var(--ink); border-radius: 36px; padding: 40px 28px 32px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.step h3 { font-size: clamp(2.8rem, 4.4vw, 4rem); line-height: 1; }
.step .hand { margin-top: -12px; font-size: 25px; }
.step svg { width: 100%; max-width: 310px; }
.step .body { margin: 0; font-size: 17px; line-height: 1.5; text-wrap: pretty; flex-grow: 1; }
.step-light { background: #fff; }
.step-light .hand { color: var(--muted); }
.step-dark { background: var(--night); color: var(--cream); }
.step-dark .hand { color: #C9D3CB; }
.step-signal { background: var(--signal); }
.pill { background: var(--ink); color: var(--cream); border-radius: 999px; padding: 8px 20px; font-weight: 700; font-size: 15px; letter-spacing: .06em; }
.pill-green { background: var(--signal); color: var(--ink); }

.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 36px clamp(28px, 5vw, 80px); align-items: center; }
.demo-card { background: var(--cream); color: var(--ink); border: 4px solid var(--ink); border-radius: 32px; padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; gap: 22px; box-shadow: 0 10px 0 var(--signal); }
.demo-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.demo-head h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.08; }
.demo-head p { margin: 0; font-size: 16px; font-weight: 500; }
.balance { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; font-weight: 700; border-block: 4px solid var(--ink); padding: 10px 0; }
.balance strong { font-family: var(--display); font-weight: 400; font-size: 30px; }
.signers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.5vw, 16px); max-width: 360px; width: 100%; margin: 0 auto; }
.signer { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; text-align: center; }
.signer svg { width: 100%; }
.demo-state { display: flex; flex-direction: column; gap: 14px; }
.demo-state p { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 700; text-wrap: pretty; }
.demo-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { min-height: 54px; padding: 12px 26px; border: 4px solid var(--ink); border-radius: 999px; font: 700 18px var(--text); }
.btn-solid { background: var(--ink); color: var(--lime); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-small { align-self: flex-start; min-height: 48px; padding: 8px 22px; font-size: 16px; }
.result { display: flex; align-items: center; gap: 16px; }
.result img { width: 84px; height: 96px; object-fit: contain; flex: none; }
.hop { animation: hop .55s cubic-bezier(.2,.8,.3,1) both; }
.pop { animation: pop .5s cubic-bezier(.2,1.4,.4,1) both; }

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 36px clamp(24px, 3vw, 48px); }
.pillar { display: flex; flex-direction: column; gap: 14px; }
.pillar svg { width: 150px; }
.pillar h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.05; }
.pillar p { margin: 0; font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.status { margin: 0; background: var(--cream); border: 4px solid var(--ink); border-radius: 24px; padding: 18px 22px; font-size: 18px; line-height: 1.45; text-wrap: pretty; }

.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 28px clamp(28px, 5vw, 80px); align-items: start; }
.faq { display: flex; flex-direction: column; border-top: 4px solid var(--ink); min-width: 0; }
.faq details { border-bottom: 4px solid var(--ink); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 2px; font-weight: 700; font-size: 20px; list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.faq p { margin: 0; padding: 0 2px 22px; font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.plus { width: 24px; height: 24px; flex: none; transition: transform .2s ease; }
details[open] .plus { transform: rotate(45deg); }

.closing { padding: clamp(36px, 6vw, 88px) clamp(20px, 5vw, 72px); }
.closing-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.letters { display: flex; justify-content: center; align-items: flex-end; gap: clamp(0px, .6vw, 10px); margin-top: 14px; font-size: clamp(5rem, 21vw, 19rem); line-height: .9; }
.l1 { rotate: -8deg; } .l2 { rotate: 5deg; translate: 0 -.06em; } .l3 { rotate: -4deg; } .l4 { rotate: 7deg; translate: 0 -.08em; } .l5 { rotate: -6deg; }

.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding: 10px 14px 16px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.foot p { margin: 0; max-width: 48em; text-wrap: pretty; }

.bob { animation: bob 4.5s ease-in-out infinite; }
.bob-slow { animation: bob 6.5s ease-in-out infinite; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes hop { 0% { transform: translateY(0); } 45% { transform: translateY(-22px) rotate(-8deg); } 100% { transform: translateY(0); } }
@keyframes pop { 0% { transform: scale(.4) rotate(-14deg); opacity: 0; } 100% { transform: scale(1) rotate(-4deg); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bob, .bob-slow, .hop, .pop { animation: none; }
  .press, .plus { transition: none; }
}