:root{--r1:#ff7a5c; --r2:#e8432f; --ink:#2b0d08; --soft:#6b4038; --blush:#fff0eb; --gold:#ffd84d; --line:#f6d9cf; --green:#17a35a; --greenbg:#e5f8ec}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; color:var(--ink); font-family:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; font-size:18px; line-height:1.55;
  background:radial-gradient(circle at 15% 8%, rgba(255,255,255,.28), transparent 40%), radial-gradient(circle at 85% 30%, rgba(255,255,255,.16), transparent 35%), linear-gradient(180deg, var(--r1) 0%, var(--r2) 100%);
  background-attachment:fixed; overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:8px}
h1,h2,h3,.wm{font-family:"Fredoka", "Nunito", sans-serif}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
.mono{font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace}

nav{position:sticky; top:0; z-index:10; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); background:rgba(240,90,62,.6); border-bottom:1px solid rgba(255,255,255,.3)}
.nav-in{display:flex; align-items:center; gap:18px; height:72px}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#fff}
.brand svg{width:40px; height:40px}
.brand .wm{font-weight:700; font-size:26px; letter-spacing:-.01em}
.links{display:flex; gap:4px; margin-left:auto}
.links a{color:#fff; text-decoration:none; font-weight:700; font-size:15px; padding:8px 12px; border-radius:999px; white-space:nowrap}
.links a:hover{background:rgba(255,255,255,.2)}
.tick{background:var(--ink); color:var(--gold); font-family:"Fredoka"; font-weight:700; font-size:16px; padding:8px 14px; border-radius:999px; text-decoration:none; transition:transform .15s; white-space:nowrap}
a.tick:hover{transform:translateY(-2px)}
.ca{display:inline-flex; align-items:center; gap:7px; background:rgba(43,13,8,.42); color:#fff; border:1px solid rgba(255,255,255,.35); font-family:ui-monospace, Menlo, Consolas, monospace; font-size:11px; padding:7px 12px; border-radius:999px; cursor:pointer; transition:background .15s, color .15s}
.ca:hover{background:rgba(43,13,8,.72)}
.ca svg{width:12px; height:12px; opacity:.85; flex:none}
.ca.copied{background:var(--gold); color:var(--ink); border-color:transparent}
.ca[disabled]{cursor:default; opacity:.85}
.ca-short{display:none}
@media (max-width:1400px){ .ca-full{display:none} .ca-short{display:inline} }

.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding:56px 0 70px}
.hero-mark{width:120px; height:120px; margin:0 0 14px -6px}
.hero-mark svg{width:100%; height:100%; animation:sway 6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.hero h1{color:#fff; font-size:clamp(42px, 5.2vw, 66px); line-height:1; margin:0 0 16px; letter-spacing:-.02em}
.hero h1 span{color:var(--gold)}
.hero p{color:#fff4f0; font-size:21px; max-width:36ch; margin:0 0 24px}

.check{display:flex; gap:10px; background:#fff; border-radius:20px; padding:8px; box-shadow:0 8px 0 rgba(43,13,8,.25); max-width:560px}
.check input{flex:1; min-width:0; border:0; outline:0; font:600 16px/1 ui-monospace, Menlo, Consolas, monospace; color:var(--ink); padding:12px 12px; background:transparent}
.check input::placeholder{color:#b9918a; font-family:"Nunito", sans-serif; font-weight:700}
.check button{flex:none}
.under{color:#ffe6df; font-size:14.5px; font-weight:700; margin:14px 0 0; display:flex; gap:16px; flex-wrap:wrap}
.under a{color:#fff}
.check.locked{opacity:.92}
.check.locked input{cursor:not-allowed}
.check.locked button{background:#7a4a42; cursor:not-allowed; transform:none}
.gate{display:flex; align-items:center; gap:10px; color:#fff; background:rgba(43,13,8,.42); border:1px solid rgba(255,255,255,.3); border-radius:14px; padding:10px 14px; font-weight:800; font-size:15.5px; margin:14px 0 0; max-width:560px}
.gate[hidden]{display:none}
.gate .lock{flex:none; width:30px; height:30px; border-radius:10px; background:var(--gold); color:var(--ink); display:grid; place-items:center}
.gate .lock svg{width:16px; height:16px}
.gate b{font-family:ui-monospace, Menlo, Consolas, monospace; color:var(--gold); margin-left:8px; font-weight:600}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:800; font-size:16px; text-decoration:none; padding:14px 22px; border-radius:16px; transition:transform .15s, box-shadow .15s, opacity .15s; cursor:pointer; border:0; font-family:inherit}
.btn.primary{background:#fff; color:var(--ink); box-shadow:0 8px 0 rgba(43,13,8,.25)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.ghost{color:#fff; border:2px solid rgba(255,255,255,.7); background:transparent}
.btn.ghost:hover{background:rgba(255,255,255,.15)}
.btn.dark{background:var(--ink); color:#fff}
.btn.dark:hover{transform:translateY(-2px)}
.btn.line{border:2px solid var(--ink); color:var(--ink); background:transparent}
.btn[disabled]{opacity:.55; cursor:wait; transform:none}

.phone-stage{position:relative; height:540px}
.phone{position:absolute; left:50%; top:0; transform:translateX(-50%) rotate(4deg); width:280px; height:540px; background:var(--ink); border-radius:42px; padding:12px; box-shadow:0 30px 60px rgba(0,0,0,.25)}
.screen{width:100%; height:100%; background:#fff; border-radius:32px; overflow:hidden; padding:20px 16px; display:flex; flex-direction:column; gap:10px}
.scr-top{display:flex; align-items:center; gap:10px}
.scr-top .av{width:40px; height:40px; border-radius:50%; background:var(--gold); display:grid; place-items:center; font-family:"Fredoka"; font-weight:700}
.scr-top b{font-family:"Fredoka"; font-size:18px; display:block; line-height:1.1}
.scr-top small{color:var(--soft); font-size:12px; font-weight:700}
.you{background:var(--blush); border-radius:16px; padding:10px 12px}
.you small{display:block; font-size:11px; font-weight:800; color:var(--soft); text-transform:uppercase; letter-spacing:.05em}
.you b{font-family:"Fredoka"; font-size:28px; color:var(--r2); line-height:1.1}
.mini{display:flex; flex-direction:column; gap:7px}
.mini div{display:flex; justify-content:space-between; align-items:center; gap:8px; background:#f7f4f3; border-radius:12px; padding:8px 10px; font-size:12.5px; font-weight:800}
.mini span{color:var(--soft); font-weight:700; font-size:11.5px}
.mini em{font-style:normal; color:var(--green); font-family:"Fredoka"; font-size:15px}
.scr-foot{margin-top:auto; text-align:center; background:var(--ink); color:#fff; border-radius:14px; padding:11px 0; font-weight:800; font-size:14px}
.scr-tag{align-self:flex-start; font-size:10.5px; font-weight:800; color:var(--soft); background:#f1ecea; border-radius:999px; padding:3px 8px; text-transform:uppercase; letter-spacing:.06em}
.chip{position:absolute; display:flex; align-items:center; gap:8px; background:#fff; border-radius:16px; padding:8px 14px 8px 8px; font-weight:800; font-size:14px; box-shadow:0 10px 24px rgba(0,0,0,.12); animation:bob 4s ease-in-out infinite}
.chip i{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-style:normal; font-family:"Fredoka"; font-size:16px}
.c1{left:0; top:80px} .c1 i{background:var(--greenbg); color:var(--green)}
.c2{right:-6px; top:220px; animation-delay:-1.3s} .c2 i{background:var(--gold)}
.c3{left:10px; bottom:70px; animation-delay:-2.6s} .c3 i{background:var(--blush); color:var(--r2)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

section.sec{padding:22px 0 30px; scroll-margin-top:72px}
.panel{background:#fff; border-radius:32px; padding:44px 46px; box-shadow:0 20px 50px rgba(90,20,8,.2)}
.eyebrow{display:inline-block; background:var(--blush); color:var(--r2); font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; border-radius:999px; margin-bottom:12px}
h2{font-size:clamp(32px, 4.2vw, 50px); line-height:1.05; margin:0 0 12px; letter-spacing:-.01em}
.intro{font-size:19.5px; color:var(--soft); max-width:62ch; margin:0 0 24px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.card{background:var(--blush); border-radius:22px; padding:22px}
.card h3{font-size:22px; margin:0 0 6px}
.card p{margin:0; color:var(--soft); font-size:16.5px}
.card .ico{width:52px; height:52px; border-radius:16px; background:#fff; display:grid; place-items:center; margin-bottom:12px; box-shadow:0 5px 0 var(--line)}
.card .ico svg{width:26px; height:26px}
.badge{display:inline-block; font-size:12px; font-weight:800; padding:3px 9px; border-radius:999px; margin-bottom:8px}
.b-green{background:var(--greenbg); color:var(--green)}
.b-red{background:#ffe1d9; color:#c2412d}
.b-gold{background:#fff3c2; color:#8a6400}
.b-ink{background:var(--ink); color:#fff}

.steps{display:flex; flex-direction:column; gap:26px}
.step{display:grid; grid-template-columns:70px 1fr; gap:20px}
.num{width:60px; height:60px; border-radius:20px; background:var(--r2); color:#fff; font-family:"Fredoka"; font-weight:700; font-size:28px; display:grid; place-items:center}
.step h3{font-size:25px; margin:6px 0 4px}
.step p{margin:0; color:var(--soft)}
.note{display:flex; gap:14px; align-items:center; background:#fff6cc; border-radius:20px; padding:16px 20px; margin-top:22px; font-weight:700}
.note .bang{flex:none; width:40px; height:40px; border-radius:50%; background:var(--gold); display:grid; place-items:center; font-family:"Fredoka"; font-size:22px}

.checks{display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin:0; padding:0; list-style:none}
.checks li{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; background:var(--blush); border-radius:16px; font-weight:700; font-size:16.5px}
.checks li::before{content:""; flex:none; width:22px; height:22px; border-radius:50%; background:var(--r2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat; margin-top:2px}

.limits{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.limits div{background:var(--blush); border-radius:18px; padding:16px}
.limits b{display:block; font-family:"Fredoka"; font-size:30px; color:var(--r2); line-height:1.1}
.limits span{font-size:15px; color:var(--soft); font-weight:700}

.gloss{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px}
.term{background:var(--blush); border-radius:18px; padding:14px 16px}
.term b{font-family:"Fredoka"; font-size:20px; display:block; color:var(--r2)}
.term span{font-size:15px; color:var(--soft); font-weight:600}

.token{display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center}
.token-cards{display:flex; flex-direction:column; gap:12px}
.token-card{display:flex; align-items:center; gap:14px; background:var(--blush); border-radius:20px; padding:16px 18px}
.token-card .k{flex:none; width:46px; height:46px; border-radius:14px; background:var(--gold); display:grid; place-items:center; font-family:"Fredoka"; font-weight:700; font-size:20px}
.token-card p{margin:0; font-weight:700}
.big-ca{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; background:var(--ink); color:#fff; border:0; border-radius:18px; padding:16px 18px; cursor:pointer; font:600 14px/1.3 ui-monospace, Menlo, Consolas, monospace; text-align:left; word-break:break-all}
.big-ca small{display:block; font-family:"Nunito"; font-weight:800; font-size:12px; color:var(--gold); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px}
.big-ca.copied{background:var(--gold); color:var(--ink)}
.big-ca.copied small{color:var(--ink)}
.big-ca[disabled]{cursor:default}

footer{padding:30px 0 60px; color:#ffeee9; font-size:14.5px}
.foot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center}
footer p{max-width:72ch; margin:14px 0 0; opacity:.92}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none} .chip, .hero-mark svg{animation:none} }

@media (max-width:980px){
  .hero, .token{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .gloss, .limits{grid-template-columns:1fr 1fr}
  .links{display:none}
  .ca{margin-left:auto}
  .phone-stage{max-width:420px; width:100%; margin:0 auto}
}
@media (max-width:640px){
  body{font-size:17px}
  .panel{padding:30px 20px; border-radius:26px}
  .checks, .grid2{grid-template-columns:1fr}
  .step{grid-template-columns:1fr; gap:10px}
  .check{flex-direction:column}
  .check button{width:100%}
  .phone-stage{height:520px}
}