:root{
  --bg:#0b0b10; --surface:#14141b; --surface2:#1b1b25;
  --text:#eceaf2; --text-dim:rgba(236,234,242,.64); --hair:rgba(255,255,255,.09);
  --brand:#00b878; --brand-ink:#08110c; --glow:#00b878;
  --display:"Unbounded",system-ui,sans-serif; --sans:"Sora",-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--sans);color:var(--text);line-height:1.65;min-height:100vh;
  background-color:var(--bg);
  background-image:
    radial-gradient(1000px 560px at 75% -12%,color-mix(in srgb,var(--brand) 17%,transparent),transparent 65%),
    radial-gradient(760px 520px at -12% 38%,color-mix(in srgb,var(--brand) 9%,transparent),transparent 70%),
    radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:auto,auto,30px 30px;
  background-attachment:fixed;
}
body.home{
  background-image:
    radial-gradient(900px 520px at 78% -10%,rgba(0,82,255,.17),transparent 65%),
    radial-gradient(800px 560px at -8% 22%,rgba(0,184,120,.14),transparent 68%),
    radial-gradient(700px 520px at 55% 115%,rgba(113,50,245,.13),transparent 70%),
    radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:auto,auto,auto,30px 30px;
}
::selection{background:var(--brand);color:var(--brand-ink)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
/* header */
header{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;background:rgba(11,11,16,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
}
.wordmark{
  font-family:var(--display);font-weight:700;font-size:.92rem;letter-spacing:.02em;
  color:#fff;text-decoration:none;display:flex;align-items:center;gap:.6em;
}
.wordmark .coin{
  width:.95em;height:.95em;border-radius:50%;flex:none;
  background:conic-gradient(from 20deg,#0052ff,#00c805,#00e5a0,#7132f5,#0052ff);
  box-shadow:0 0 14px rgba(0,229,160,.55);
}
header nav a{
  font:600 .78rem var(--sans);color:var(--text-dim);text-decoration:none;
  border:1px solid var(--hair);border-radius:999px;padding:7px 15px;
  transition:color .15s ease,border-color .15s ease;
}
header nav a:hover{color:#fff;border-color:var(--brand)}
main{max-width:880px;margin:0 auto;padding:46px 22px 84px}
/* type */
h1{
  font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,3.4vw,2.1rem);
  line-height:1.22;letter-spacing:-.01em;color:#fff;margin-bottom:.7rem;
}
h2{
  font-family:var(--display);font-weight:500;font-size:1rem;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;margin:2.9rem 0 1rem;
}
h2::before{
  content:"";display:inline-block;width:10px;height:10px;border-radius:3px;
  background:var(--brand);margin-right:.65em;box-shadow:0 0 14px var(--glow);
  transform:translateY(-1px);
}
.kicker{
  font:700 .72rem var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--brand) 62%,#fff);margin-bottom:.8rem;
}
p.tagline{color:var(--text-dim);font-size:1.05rem;max-width:58ch}
/* scrolling bonus ticker tape (grafted from the terminal variant) */
.tape{
  width:100vw;margin:-46px calc(50% - 50vw) 34px;overflow:hidden;
  background:rgba(6,6,10,.78);border-bottom:1px solid var(--hair);
  font:600 .74rem var(--mono);
}
.tape-track{display:inline-flex;white-space:nowrap;padding:10px 0;animation:tape 46s linear infinite;will-change:transform}
.ti{margin:0 .2rem;color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase}
.ti b{color:#fff;font-weight:700;margin-right:.6em}
.ti em{font-style:normal;font-weight:700;color:color-mix(in srgb,var(--b,#00e5a0) 65%,#fff)}
.ti::after{content:"·";margin:0 1.2rem;color:rgba(255,255,255,.28)}
@keyframes tape{to{transform:translateX(-50%)}}
/* full-bleed brand-field band on detail pages (grafted from the appdock variant) */
.phero{
  width:100vw;margin:-46px calc(50% - 50vw) 0;padding:54px 22px 48px;
  background:var(--tile-grad,var(--surface));color:var(--tile-ink,var(--text));
  position:relative;overflow:hidden;border-bottom:1px solid var(--hair);
}
.phero>*{position:relative;z-index:1}
.pin{max-width:836px;margin:0 auto}
.phero .kicker{color:var(--tile-ink,var(--text));opacity:.72}
.phero h1{color:var(--tile-ink,#fff)}
.phero .tagline{color:var(--tile-sub,var(--text-dim))}
/* painted ticket (detail hero) */
.ticket{
  margin:1.9rem 0 0;position:relative;overflow:hidden;border-radius:22px;padding:26px 28px;
  background:var(--tile-grad,var(--surface));color:var(--tile-ink,var(--text));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 26px 80px -26px color-mix(in srgb,var(--glow) 50%,transparent),inset 0 1px 0 rgba(255,255,255,.08);
}
.ticket>*{position:relative;z-index:1}
.phero .ticket{
  background:color-mix(in srgb,var(--tile-ink,#fff) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--tile-ink,#fff) 24%,transparent);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 48px -20px rgba(0,0,0,.45),inset 0 1px 0 color-mix(in srgb,var(--tile-ink,#fff) 14%,transparent);
}
.ticket .no{
  position:absolute;top:16px;right:18px;font:700 .62rem var(--mono);
  letter-spacing:.22em;color:var(--tile-sub,var(--text-dim));
}
.tick-head{display:flex;align-items:flex-start;gap:16px;margin:4px 0 20px}
.tbv{
  font-family:var(--display);font-weight:900;font-size:clamp(1.4rem,4vw,2.1rem);
  line-height:1.08;letter-spacing:-.01em;color:var(--tile-ink,var(--text));margin-bottom:.35rem;
}
.ticket .headline{font:600 .98rem/1.45 var(--sans);max-width:44ch;color:var(--tile-sub,var(--text-dim))}
/* app-icon squircle chip with drawn SVG brand marks (grafted from the appdock variant) */
.chip{
  width:54px;height:54px;flex:none;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:var(--chip-bg,var(--brand));color:var(--chip-ink,var(--brand-ink));
  font:700 1.6rem/1 var(--sans);position:relative;overflow:hidden;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1);
}
.chip::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.22),rgba(255,255,255,0) 46%);
}
.chip svg{width:62%;height:62%;display:block;position:relative;z-index:1}
.chip .lm{
  font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1;
  position:relative;z-index:1;
}
.mkglow{filter:drop-shadow(0 0 7px rgba(151,252,228,.85)) drop-shadow(0 0 20px rgba(151,252,228,.4))}
/* code + copy */
.coderow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 1.25rem}
.code{
  font:700 1.3rem var(--mono);letter-spacing:.08em;color:var(--tile-ink,var(--text));
  background:color-mix(in srgb,var(--tile-ink,#fff) 9%,transparent);
  border:1.5px dashed color-mix(in srgb,var(--tile-ink,#fff) 42%,transparent);
  border-radius:12px;padding:9px 16px;
}
.copy{
  cursor:pointer;font:700 .78rem var(--sans);letter-spacing:.06em;color:var(--tile-ink,var(--text));
  background:color-mix(in srgb,var(--tile-ink,#fff) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--tile-ink,#fff) 34%,transparent);
  border-radius:10px;padding:10px 15px;
  transition:transform .12s ease,background .12s ease;
}
.copy:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--tile-ink,#fff) 22%,transparent)}
.copy.done{background:var(--tile-ink,#fff);color:var(--tile-solid,var(--bg));border-color:var(--tile-ink,#fff)}
/* glowing CTA */
.btn{
  display:inline-block;background:var(--cta-bg,var(--brand));color:var(--cta-ink,var(--brand-ink));
  text-decoration:none;font:800 1rem var(--sans);padding:14px 26px;border-radius:14px;
  box-shadow:0 14px 44px -10px color-mix(in srgb,var(--glow) 62%,transparent);
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 22px 56px -10px color-mix(in srgb,var(--glow) 80%,transparent)}
.btn:active{transform:translateY(0)}
/* lists & tables — legible core */
ol,ul{padding-left:1.4rem}
ol li{margin:.6rem 0;padding-left:.35rem}
ol li::marker{font:700 1rem var(--mono);color:color-mix(in srgb,var(--brand) 70%,#fff)}
table{
  width:100%;border-collapse:collapse;background:var(--surface);
  border:1px solid var(--hair);border-radius:14px;overflow:hidden;
}
td{padding:12px 16px;border-top:1px solid var(--hair);vertical-align:top;color:var(--text)}
tr:first-child td{border-top:0}
td:first-child{
  font:700 .7rem var(--mono);letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;width:32%;color:var(--text-dim);padding-top:16px;
}
/* faq */
.faq{
  border-left:3px solid var(--brand);padding:.95rem 1.15rem;margin:1rem 0;
  background:var(--surface);border-radius:0 12px 12px 0;
}
.faq strong{display:block;font:700 1rem var(--sans);color:#fff;margin-bottom:.3rem}
.faq p{color:var(--text-dim)}
/* index hero */
.hero{padding:30px 0 10px}
.hero h1{
  font-size:clamp(2rem,6.4vw,3.5rem);font-weight:900;line-height:1.08;max-width:15ch;
  background:linear-gradient(100deg,#fff 0%,#8be9c8 30%,#7aa8ff 55%,#c9b2ff 75%,#fff 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 9s linear infinite;
}
.hero h1 em{font-style:normal}
.trust{display:flex;flex-wrap:wrap;gap:8px 24px;margin:1.5rem 0 .4rem;font-size:.85rem;font-weight:600;color:var(--text-dim)}
.trust span::before{content:"✓ ";color:#2ee6a6;font-weight:800}
/* brand-painted card grid — bonus_value is the money hero */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:2.2rem}
.card{
  position:relative;overflow:hidden;display:block;border-radius:22px;padding:22px 20px 20px;
  text-decoration:none;background:var(--tile-grad);color:var(--tile-ink);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 16px 44px -24px rgba(0,0,0,.9);
  transition:transform .18s cubic-bezier(.2,.7,.3,1.2),box-shadow .18s ease;
  animation:rise .55s cubic-bezier(.2,.7,.3,1) backwards;
}
.card>*{position:relative;z-index:1}
.card:hover,.card:focus-visible{
  transform:perspective(900px) rotateX(3deg) rotateY(-2deg) translateY(-7px);
  box-shadow:0 32px 74px -22px color-mix(in srgb,var(--glow) 62%,transparent),
             0 0 0 1px color-mix(in srgb,var(--glow) 55%,transparent);
}
.card .chip{width:56px;height:56px;margin-bottom:16px}
.wm{font-family:var(--sans);font-weight:800;font-size:1.28rem;letter-spacing:-.02em;line-height:1.15;color:var(--wm-color,var(--tile-ink))}
.card .kick{font:700 .64rem var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--tile-sub);margin:.25rem 0 .9rem}
.card .bv{
  display:block;font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,2.4vw,2.05rem);
  letter-spacing:-.02em;line-height:1.08;color:var(--tile-ink);
}
.card .bs{display:block;font:600 .78rem/1.45 var(--sans);color:var(--tile-sub);margin-top:.4rem;min-height:2.3em}
.card .go{
  display:inline-block;margin-top:1rem;font:800 .74rem var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--wm-color,var(--tile-ink));
  border-bottom:2px solid currentColor;padding-bottom:2px;
}
/* per-brand wordmark typography (approximations, no logo images) */
.wm-coinbase{text-transform:lowercase;font-weight:700;letter-spacing:-.035em}
.wm-robinhood{font-weight:600;letter-spacing:.01em}
.wm-kraken{text-transform:lowercase;font-weight:800;letter-spacing:-.02em}
.wm-kalshi{font-weight:700;letter-spacing:.02em}
.wm-hyperliquid{font-weight:600;letter-spacing:.05em;font-size:1.1rem}
.wm-weex{font-weight:800;letter-spacing:.16em;display:inline-block;transform:skewX(-6deg)}
.wm-lighter{font-weight:300;letter-spacing:.34em;text-transform:uppercase;font-size:1rem}
.wm-uphold{font-weight:700;letter-spacing:-.01em}
.wm-kcex{font-weight:800;letter-spacing:.2em}
/* per-brand atmosphere decorations (pure CSS, painted behind content) */
.deco-coinbase::after{
  content:"";position:absolute;right:-36px;bottom:-36px;width:132px;height:132px;border-radius:50%;
  border:16px solid rgba(255,255,255,.13);pointer-events:none;
}
.deco-kraken::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 85% 115%,rgba(8,2,30,.6),transparent 55%);
}
.deco-kraken::after{
  content:"";position:absolute;left:-18%;top:-38%;width:70%;height:80%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.16),transparent);
}
.deco-weex::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 26px,rgba(0,229,160,.08) 26px 28px);
}
.deco-kalshi::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,184,120,.13),transparent 50%);
}
.deco-kalshi::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(28deg,transparent 46%,rgba(0,184,120,.4) 47%,rgba(0,184,120,.4) 47.7%,transparent 49%);
}
.deco-hyperliquid::after{
  content:"";position:absolute;left:-20%;right:-20%;bottom:-50%;height:75%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(151,252,228,.24),transparent 60%);
}
.deco-robinhood::after{
  content:"";position:absolute;right:-25%;bottom:-55%;width:70%;height:75%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,200,5,.2),transparent);
}
.card.deco-lighter::after{
  content:"zk";position:absolute;top:16px;right:16px;font:500 .6rem var(--mono);
  letter-spacing:.24em;color:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.24);
  border-radius:999px;padding:3px 8px 3px 10px;
}
.deco-uphold::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 100% 0%,rgba(73,204,104,.18),transparent 55%);
}
.deco-kcex::after{
  content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;
  border:2px solid rgba(0,201,167,.3);pointer-events:none;
}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sheen{to{background-position:300% 0}}
/* more-codes strip */
.others{display:flex;flex-wrap:wrap;gap:10px;margin-top:.6rem}
.others a{
  font:600 .8rem var(--sans);color:var(--text);text-decoration:none;padding:8px 15px;
  border:1px solid var(--hair);border-radius:999px;background:var(--surface);
  transition:transform .12s ease,background .12s ease,color .12s ease,border-color .12s ease;
}
.others a:hover{transform:translateY(-2px);background:var(--o,var(--brand));color:var(--o-ink,var(--brand-ink));border-color:transparent}
footer{max-width:880px;margin:0 auto;padding:30px 22px 58px;color:var(--text-dim);font-size:.78rem;border-top:1px solid var(--hair)}
@media (max-width:380px){
  main{padding:34px 14px 64px}
  .tape{margin-top:-34px}
  .phero{margin-top:-34px;padding:44px 14px 40px}
  .grid{grid-template-columns:1fr}
  .ticket{padding:20px 16px}
  .tick-head{gap:12px}
  .chip{width:48px;height:48px;border-radius:13px;font-size:1.4rem}
  .code{font-size:1.05rem}
  .card{padding:18px 16px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}