:root{
  --bg:#0a0a0d; --bg2:#0e0e12; --card:#131318; --card2:#17171e; --line:rgba(255,255,255,.08);
  --text:#ececf1; --muted:#8b8c98; --muted2:#a9aab6;
  --amber:#e6b877; --amber2:#f0c88a; --sol1:#9945ff; --sol2:#14f195;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{ font-family:'Inter',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); line-height:1.6;
  background-image:radial-gradient(900px 500px at 50% -10%, rgba(153,69,255,.10), transparent 60%), radial-gradient(700px 500px at 90% 20%, rgba(20,241,149,.06), transparent 55%); background-attachment:fixed; }
.grain{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.wrap{ position:relative; z-index:1; max-width:680px; margin:0 auto; padding:32px 18px 60px; }
.hidden{ display:none !important; }

/* hero */
.hero{ text-align:center; padding:36px 8px 26px; }
.pill{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.3px; color:var(--muted2); border:1px solid var(--line);
  background:rgba(255,255,255,.03); padding:6px 14px; border-radius:30px; margin-bottom:22px; }
.hero h1{ font-family:'Space Grotesk'; font-weight:700; font-size:clamp(30px,6.5vw,46px); letter-spacing:-1px; line-height:1.1; }
.hero h1 .cup{ display:inline-block; animation:steam 3.5s ease-in-out infinite; }
@keyframes steam{ 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-4px) rotate(-6deg) } }
.sub{ color:var(--muted2); font-size:clamp(15px,2.6vw,18px); max-width:440px; margin:14px auto 0; }
.counter{ display:inline-flex; align-items:center; gap:20px; margin-top:26px; padding:14px 24px; border:1px solid var(--line); border-radius:18px; background:var(--card); backdrop-filter:blur(10px); }
.cstat b{ display:block; font-family:'Space Grotesk'; font-size:22px; font-weight:700; }
.cstat span{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.cdiv{ width:1px; height:30px; background:var(--line); }

/* cards */
.card{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:24px; margin-top:18px; box-shadow:0 12px 40px -20px #000; }
.card-h{ font-family:'Space Grotesk'; font-weight:600; font-size:17px; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.card-h.center{ justify-content:center; }
.card-h .opt{ font-size:11px; font-weight:500; color:var(--muted); border:1px solid var(--line); padding:2px 8px; border-radius:20px; margin-left:auto; }

/* amounts */
.amounts{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media(max-width:520px){ .amounts{ grid-template-columns:1fr 1fr; } }
.amt{ background:var(--card2); border:1px solid var(--line); border-radius:16px; padding:16px 10px; cursor:pointer; text-align:center; color:var(--text); font-family:inherit; transition:.16s; }
.amt:hover{ border-color:rgba(230,184,119,.5); transform:translateY(-2px); }
.amt.on{ border-color:var(--amber); background:linear-gradient(180deg,rgba(230,184,119,.14),transparent); box-shadow:0 0 0 1px var(--amber) inset; }
.amt b{ display:block; font-family:'Space Grotesk'; font-size:22px; font-weight:700; }
.amt span{ font-size:11px; color:var(--muted2); font-weight:600; } .amt small{ display:block; font-size:10.5px; color:var(--muted); margin-top:4px; }
.custom-row{ display:none; align-items:center; gap:10px; margin-top:12px; }
.custom-row.on{ display:flex; }
.custom-row input{ flex:1; background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; color:var(--text); font-family:inherit; font-size:16px; }
.custom-row input:focus{ outline:none; border-color:var(--amber); }
.custom-row span{ color:var(--muted); font-weight:600; }

/* pay */
.pay-card{ animation:reveal .4s ease; }
@keyframes reveal{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
.card-h #paySol{ color:var(--amber); }
.pay-note{ color:var(--muted2); font-size:13.5px; margin-bottom:18px; }
.pay-grid{ display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start; }
@media(max-width:520px){ .pay-grid{ grid-template-columns:1fr; justify-items:center; text-align:center; } }
.qr-box{ text-align:center; }
#qr{ width:150px; height:150px; background:#fff; border-radius:14px; padding:10px; display:flex; align-items:center; justify-content:center; }
#qr img, #qr canvas{ border-radius:6px; }
.qr-cap{ font-size:11px; color:var(--muted); margin-top:8px; text-transform:uppercase; letter-spacing:.5px; }
.addr-label{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.addr{ font-family:'SF Mono',ui-monospace,monospace; font-size:13px; word-break:break-all; background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:12px; color:var(--amber2); }
.copy-btn{ margin-top:10px; width:100%; background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:11px; color:var(--text); font-family:inherit; font-weight:600; font-size:14px; cursor:pointer; transition:.15s; }
.copy-btn:hover{ border-color:var(--amber); } .copy-btn.done{ border-color:var(--sol2); color:var(--sol2); }
.steps{ margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.step{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--muted2); }
.step i{ flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:var(--card2); border:1px solid var(--line); display:grid; place-items:center; font-style:normal; font-size:12px; font-weight:700; color:var(--amber); }
.step b{ color:var(--text); }

/* form */
.form{ display:flex; flex-direction:column; gap:10px; }
.frow{ display:flex; gap:10px; } @media(max-width:520px){ .frow{ flex-direction:column; } }
.form input{ flex:1; background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; color:var(--text); font-family:inherit; font-size:15px; width:100%; }
.form input:focus{ outline:none; border-color:var(--amber); }
.famt{ display:flex; align-items:center; gap:8px; background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:0 14px; flex:0 0 140px; }
.famt input{ background:none; border:none; padding:12px 0; } .famt span{ color:var(--muted); font-weight:600; }
.send-btn{ flex:1; border:none; border-radius:12px; padding:13px 20px; cursor:pointer; font-family:inherit; font-weight:700; font-size:15px; color:#0a0a0d;
  background:linear-gradient(135deg,var(--amber),var(--amber2)); transition:.15s; }
.send-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); } .send-btn:active{ transform:scale(.98); } .send-btn:disabled{ opacity:.6; cursor:not-allowed; }

/* wall */
.wall{ display:flex; flex-direction:column; gap:10px; }
.wall-empty{ color:var(--muted); text-align:center; padding:20px; font-size:14px; }
.supporter{ display:flex; align-items:flex-start; gap:12px; padding:13px 14px; background:var(--card2); border:1px solid var(--line); border-radius:14px; }
.sav{ flex:0 0 38px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-family:'Space Grotesk';
  background:linear-gradient(135deg,rgba(153,69,255,.3),rgba(20,241,149,.25)); color:#fff; }
.sbody{ flex:1; min-width:0; }
.sname{ font-weight:600; font-size:14.5px; } .sname a{ color:var(--sol2); text-decoration:none; font-size:12.5px; font-weight:500; margin-left:6px; }
.smsg{ font-size:13px; color:var(--muted2); margin-top:2px; word-break:break-word; }
.samt{ flex:0 0 auto; font-family:'Space Grotesk'; font-weight:700; color:var(--amber); font-size:14px; white-space:nowrap; }
.sago{ font-size:11px; color:var(--muted); }

/* supports section */
.supports{ margin-top:26px; }
.sgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:520px){ .sgrid{ grid-template-columns:1fr; } }
.scard{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; transition:.16s; }
.scard:hover{ border-color:rgba(255,255,255,.16); transform:translateY(-2px); }
.sic{ font-size:26px; margin-bottom:8px; } .scard b{ font-size:15px; } .scard p{ font-size:13px; color:var(--muted); margin-top:4px; }

.foot{ text-align:center; color:var(--muted); font-size:13px; margin-top:36px; }
.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#1a1a22; border:1px solid var(--line); color:var(--text);
  border-radius:12px; padding:11px 18px; font-weight:600; font-size:14px; z-index:50; opacity:0; transition:opacity .25s; box-shadow:0 10px 40px -10px #000; }
.toast.show{ opacity:1; }