/* =========================================================
   CASHCAT — comic / 3D-perspective stylesheet
   ========================================================= */

:root{
  --ink:#0a0d0b;
  --paper:#f4ead2;
  --green:#18e06a;
  --green-d:#0b6b36;
  --green-deep:#04150c;
  --gold:#f6c445;
  --gold-d:#a97612;
  --red:#ff4d3d;
  --line:4px;
  --r:18px;
  --shadow-hard: 10px 10px 0 var(--ink);
  --shadow-soft: 6px 6px 0 var(--ink);
  --font-t:"Luckiest Guy", "Bangers", system-ui, sans-serif;
  --font-a:"Bangers", system-ui, sans-serif;
  --font-b:"Space Grotesk", system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0;
  font-family:var(--font-b);
  color:var(--paper);
  background:#04100a;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{text-decoration:none; color:inherit}

/* ---------- fixed background ---------- */
.bg-plate{
  position:fixed; inset:0; z-index:-3;
  background:url("background.png") center/cover no-repeat fixed;
  filter:saturate(.9) brightness(.42) contrast(1.05);
  transform:scale(1.06);
}
.bg-tone{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px);
  background-size:7px 7px;
  opacity:.28;
  mix-blend-mode:overlay;
}
.bg-vignette{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(24,224,106,.16), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(246,196,69,.12), transparent 60%),
    linear-gradient(180deg, rgba(3,12,7,.72), rgba(3,12,7,.86));
}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:18px;
  padding:12px 26px;
  background:rgba(4,17,10,.86);
  backdrop-filter:blur(10px);
  border-bottom:var(--line) solid var(--ink);
  box-shadow:0 6px 0 rgba(0,0,0,.45);
}
.brand{display:flex; align-items:center; gap:11px}
.brand-badge{
  width:46px;height:46px;border-radius:50%;
  border:var(--line) solid var(--ink);
  overflow:hidden; background:var(--gold);
  box-shadow:3px 3px 0 var(--ink);
  flex:none;
}
.brand-badge img{width:100%;height:100%;object-fit:cover}
.brand-txt{
  font-family:var(--font-t); font-size:1.6rem; letter-spacing:.5px;
  color:var(--paper);
  text-shadow:2px 2px 0 var(--ink), 4px 4px 0 var(--green-d);
}
.brand-txt em{color:var(--gold); font-style:normal}

.navlinks{display:flex; gap:6px; margin-left:auto}
.navlinks a{
  font-family:var(--font-a); font-size:1.16rem; letter-spacing:1px;
  padding:7px 15px; border-radius:999px;
  border:3px solid transparent;
  transition:.18s;
}
.navlinks a:hover, .navlinks a.on{
  border-color:var(--ink); background:var(--green);
  color:var(--ink); box-shadow:3px 3px 0 var(--ink);
  transform:translate(-1px,-1px);
}
.topbar-right{display:flex; align-items:center; gap:9px; margin-left:auto}
.navlinks + .topbar-right{margin-left:0}

.ico-btn{
  width:42px;height:42px;display:grid;place-items:center;
  border:3px solid var(--ink); border-radius:12px;
  background:var(--paper); color:var(--ink); font-size:1.05rem;
  box-shadow:3px 3px 0 var(--ink); transition:.15s;
}
.ico-btn:hover{background:var(--gold); transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink)}

.btn-pop{
  font-family:var(--font-a); letter-spacing:1.2px; font-size:1.1rem;
  padding:10px 20px; border-radius:12px;
  background:linear-gradient(180deg,var(--green),var(--green-d));
  color:#03210f; border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  display:inline-flex; align-items:center; gap:8px;
  transition:.15s;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.btn-pop:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink)}
.btn-pop:active{transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink)}
.btn-pop.big{font-size:1.35rem; padding:14px 26px}
.btn-pop.tiny{font-size:.95rem; padding:8px 14px; box-shadow:4px 4px 0 var(--ink)}

.btn-ghost{
  font-family:var(--font-a); letter-spacing:1.2px; font-size:1.1rem;
  padding:10px 20px; border-radius:12px;
  background:var(--paper); color:var(--ink);
  border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink);
  display:inline-flex; align-items:center; gap:8px; transition:.15s;
}
.btn-ghost:hover{background:var(--gold); transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink)}
.btn-ghost.big{font-size:1.35rem; padding:14px 26px}
.btn-ghost.tiny{font-size:.95rem; padding:8px 14px; box-shadow:4px 4px 0 var(--ink)}

.burger{display:none; width:42px;height:42px; border:3px solid var(--ink); border-radius:12px;
  background:var(--gold); color:var(--ink); font-size:1.25rem; box-shadow:3px 3px 0 var(--ink); cursor:pointer}

/* ---------- ticker ---------- */
.ticker{
  position:relative; z-index:40;
  background:var(--gold); color:var(--ink);
  border-bottom:var(--line) solid var(--ink);
  overflow:hidden; padding:7px 0;
  transform:rotate(-.5deg) scaleX(1.03);
}
.ticker-run{
  display:flex; gap:22px; white-space:nowrap; width:max-content;
  font-family:var(--font-a); font-size:1.15rem; letter-spacing:2px;
  animation:run 26s linear infinite;
}
.ticker-run b{color:var(--green-d)}
@keyframes run{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- layout ---------- */
.stage{width:min(1200px, 92vw); margin:0 auto}
.sec{padding:110px 0; position:relative}
.sec-hero{padding-top:70px}

.sec-title{
  font-family:var(--font-t); font-size:clamp(2.4rem,6vw,4.4rem);
  text-align:center; margin:0 0 12px; line-height:1;
}
.sec-title span{
  display:inline-block; padding:10px 30px;
  background:var(--green); color:var(--ink);
  border:var(--line) solid var(--ink); border-radius:16px;
  box-shadow:9px 9px 0 var(--ink);
  transform:rotate(-2deg);
}
.sec-title.alt span{background:var(--gold); transform:rotate(2deg)}
.sec-sub{text-align:center; opacity:.85; max-width:640px; margin:26px auto 0; font-size:1.05rem}

/* reveal + 3D perspective */
.reveal{opacity:0; transform:translateY(46px)}
.reveal.in{opacity:1; transform:none; transition:opacity .7s ease, transform .8s cubic-bezier(.2,.9,.25,1)}

.tilt-l, .tilt-r{transition:transform .55s cubic-bezier(.2,.9,.25,1)}
@media (min-width:900px){
  .hero-grid, .about-grid, .buy-wrap, .steps, .social-grid, .about-copy{perspective:1400px}
  .tilt-l{transform:rotateY(9deg) rotateX(3deg)}
  .tilt-r{transform:rotateY(-9deg) rotateX(3deg)}
  .tilt-l:hover, .tilt-r:hover{transform:rotateY(0) rotateX(0) translateZ(30px)}
}

/* ---------- comic panel frame ---------- */
.panel-frame{
  position:relative;
  border:var(--line) solid var(--ink);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--ink);
  box-shadow:14px 14px 0 var(--ink), 0 0 0 3px var(--gold) inset;
}
.panel-frame img{width:100%; height:100%; object-fit:cover; filter:saturate(1.1) contrast(1.06)}
.panel-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(0,0,0,.4) 1px, transparent 1.3px);
  background-size:5px 5px; opacity:.3; mix-blend-mode:multiply;
}
.corner-tag{
  position:absolute; left:0; bottom:0; z-index:3;
  font-family:var(--font-a); letter-spacing:2px; font-size:.9rem;
  background:var(--gold); color:var(--ink);
  padding:5px 14px; border:3px solid var(--ink); border-left:0; border-bottom:0;
  border-radius:0 12px 0 0;
}
.pow{
  position:absolute; z-index:3; top:16px; right:12px;
  font-family:var(--font-t); font-size:1.5rem; color:var(--ink);
  background:var(--gold); padding:12px 20px;
  border:var(--line) solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  transform:rotate(8deg);
  clip-path:polygon(6% 0,94% 6%,100% 46%,92% 100%,10% 94%,0 50%);
}
.pow.small{font-size:1.15rem; padding:10px 16px}

/* ---------- HERO ---------- */
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-a); letter-spacing:2px; font-size:1rem;
  background:var(--red); color:#fff; padding:6px 16px;
  border:3px solid var(--ink); border-radius:999px;
  box-shadow:4px 4px 0 var(--ink); transform:rotate(-2deg);
}
.bigtitle{margin:20px 0 6px; line-height:.82; font-family:var(--font-t)}
.bigtitle .line{
  display:block; font-size:clamp(3.6rem, 10vw, 7.6rem);
  color:var(--paper);
  text-shadow:
    4px 4px 0 var(--ink), 8px 8px 0 var(--green-d), 12px 12px 0 var(--ink);
  letter-spacing:2px;
}
.bigtitle .line-b{color:var(--gold); margin-left:.35em}

.bubble{
  position:relative; margin:26px 0 26px;
  background:var(--paper); color:var(--ink);
  border:var(--line) solid var(--ink); border-radius:22px;
  padding:18px 22px; font-size:1.06rem; line-height:1.5;
  box-shadow:8px 8px 0 var(--ink); max-width:560px;
}
.bubble b{color:var(--green-d)}
.bubble::after{
  content:""; position:absolute; left:44px; bottom:-22px;
  border:12px solid transparent; border-top:22px solid var(--paper);
  filter:drop-shadow(0 4px 0 var(--ink));
}
.cta-row{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:26px}

.ca-box{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:rgba(4,20,11,.85); border:3px dashed var(--green);
  border-radius:14px; padding:10px 14px; max-width:560px;
}
.ca-label{font-family:var(--font-a); letter-spacing:2px; color:var(--gold); font-size:.95rem}
#ca-text{font-family:ui-monospace,Consolas,monospace; font-size:.9rem; color:var(--paper); word-break:break-all; flex:1 1 220px}
.ca-copy{
  border:3px solid var(--ink); background:var(--gold); color:var(--ink);
  width:36px;height:34px; border-radius:9px; cursor:pointer; box-shadow:3px 3px 0 var(--ink);
}
.ca-copy:hover{background:var(--green)}

.hero-art{position:relative}
.hero-art .panel-frame{aspect-ratio:1/1}
.coin-badge{
  position:absolute; left:-34px; bottom:-30px; z-index:4;
  width:120px;height:120px;border-radius:50%; overflow:hidden;
  border:var(--line) solid var(--ink);
  box-shadow:8px 8px 0 var(--ink), 0 0 0 6px var(--gold);
  animation:bob 4s ease-in-out infinite;
}
.coin-badge img{width:100%;height:100%;object-fit:cover}
@keyframes bob{50%{transform:translateY(-14px) rotate(-6deg)}}

.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:80px;
}
.stat{
  background:var(--paper); color:var(--ink);
  border:var(--line) solid var(--ink); border-radius:14px;
  padding:16px; text-align:center; box-shadow:7px 7px 0 var(--ink);
  transform:rotate(-1.2deg); transition:.2s;
}
.stat:nth-child(even){transform:rotate(1.2deg); background:var(--gold)}
.stat:hover{transform:rotate(0) translateY(-6px)}
.stat b{display:block; font-family:var(--font-t); font-size:2rem; line-height:1}
.stat span{font-family:var(--font-a); letter-spacing:2px; font-size:1rem; opacity:.75}

/* ---------- ABOUT ---------- */
.about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; margin-top:64px}
.about-art .panel-frame{aspect-ratio:1/1}
.cell{
  background:var(--paper); color:var(--ink);
  border:var(--line) solid var(--ink); border-radius:var(--r);
  padding:26px 28px; box-shadow:12px 12px 0 var(--ink);
}
.cell h3{font-family:var(--font-t); font-size:1.9rem; margin:0 0 12px; display:flex; align-items:center; gap:10px}
.cell h3 i{color:var(--green-d)}
.cell p{margin:0; line-height:1.65; font-size:1.03rem}
.mini-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px}
.mini{
  background:var(--green-deep); border:3px solid var(--ink); border-radius:14px;
  padding:16px; box-shadow:6px 6px 0 var(--ink); text-align:center;
  outline:2px solid var(--green); outline-offset:-8px;
}
.mini i{font-size:1.5rem; color:var(--gold); display:block; margin-bottom:6px}
.mini b{display:block; font-family:var(--font-a); letter-spacing:1.5px; font-size:1.15rem; color:var(--green)}
.mini span{font-size:.86rem; opacity:.8}

/* ---------- HOW TO BUY ---------- */
.buy-wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start; margin-top:64px}
.buy-art{position:sticky; top:120px}
.buy-art .panel-frame{aspect-ratio:1/1}
.steps{list-style:none; margin:0; padding:0; display:grid; gap:22px}
.step{
  position:relative;
  background:var(--paper); color:var(--ink);
  border:var(--line) solid var(--ink); border-radius:var(--r);
  padding:22px 26px 22px 74px;
  box-shadow:10px 10px 0 var(--ink);
}
.step .num{
  position:absolute; left:-26px; top:22px;
  width:58px;height:58px; display:grid;place-items:center;
  font-family:var(--font-t); font-size:1.8rem;
  background:var(--green); color:var(--ink);
  border:var(--line) solid var(--ink); border-radius:50%;
  box-shadow:5px 5px 0 var(--ink);
}
.step:nth-child(even) .num{background:var(--gold)}
.step h4{font-family:var(--font-t); font-size:1.5rem; margin:0 0 8px; letter-spacing:.5px}
.step p{margin:0 0 12px; line-height:1.6; font-size:1rem}
.step a{margin-top:4px}

/* ---------- CHART ---------- */
.screen-wrap{position:relative; margin-top:56px; perspective:1600px}
.screen{
  border:var(--line) solid var(--ink); border-radius:20px; overflow:hidden;
  background:#061a10; box-shadow:16px 16px 0 var(--ink), 0 0 0 4px var(--green) inset;
  transform:rotateX(7deg); transform-origin:top center;
  transition:transform .6s cubic-bezier(.2,.9,.25,1);
}
.screen:hover{transform:rotateX(0)}
.screen-bar{
  display:flex; align-items:center; gap:14px;
  padding:10px 16px; background:var(--gold); color:var(--ink);
  border-bottom:var(--line) solid var(--ink);
}
.dots{display:flex; gap:6px}
.dots i{width:13px;height:13px;border-radius:50%;background:var(--ink);display:block}
.dots i:nth-child(2){background:#fff}
.dots i:nth-child(3){background:var(--green-d)}
.screen-name{display:flex; align-items:center; gap:9px; font-family:var(--font-a); letter-spacing:2px; font-size:1.1rem}
.screen-name img{width:26px;height:26px;border-radius:50%;border:2px solid var(--ink)}
.screen-link{
  margin-left:auto; font-family:var(--font-a); letter-spacing:1.5px;
  background:var(--ink); color:var(--gold); padding:5px 14px; border-radius:8px; font-size:.95rem;
}
.screen-link:hover{background:var(--green-d); color:#fff}
.screen-body{height:min(72vh,620px); background:#0a0f0c; position:relative}
.screen-body iframe{width:100%;height:100%;border:0;display:block}
.chart-fallback{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px; text-align:center; padding:24px;
}
.chart-fallback img{width:86px;height:86px;border-radius:50%;border:var(--line) solid var(--ink); box-shadow:0 0 0 5px var(--gold)}
.chart-fallback b{font-family:var(--font-t); font-size:1.7rem; color:var(--green)}
.chart-fallback span{opacity:.72; max-width:380px}
.screen-shadow{
  position:absolute; left:6%; right:6%; bottom:-26px; height:40px;
  background:radial-gradient(closest-side, rgba(24,224,106,.35), transparent);
  filter:blur(4px);
}

/* ---------- BUZZ / X EMBED ---------- */
.buzz-grid{
  display:grid; grid-template-columns:1fr .95fr; gap:52px;
  align-items:start; margin-top:56px; perspective:1400px;
}
.embed-frame{
  position:relative;
  border:var(--line) solid var(--ink); border-radius:var(--r);
  background:linear-gradient(180deg,#0b1c12,#04120a);
  box-shadow:14px 14px 0 var(--ink), 0 0 0 3px var(--green) inset;
  padding:26px 20px 44px;
  min-height:320px;
  transform:rotate(-1.2deg);
  transition:transform .5s cubic-bezier(.2,.9,.25,1);
}
.embed-frame:hover{transform:rotate(0)}
.embed-frame::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:14px;
  background-image:radial-gradient(rgba(24,224,106,.16) 1px, transparent 1.4px);
  background-size:6px 6px; opacity:.5;
}
.embed-frame .twitter-tweet{margin:0 auto !important; position:relative; z-index:2}
.embed-frame iframe{max-width:100% !important}
.embed-frame .corner-tag{background:var(--green)}

.buzz-side{display:grid; gap:20px}
.buzz-side .cell h3 i{color:var(--red)}
.buzz-mini{grid-template-columns:repeat(2,1fr)}

/* ---------- JOIN US ---------- */
.banner-frame{
  margin-top:56px;
  border:var(--line) solid var(--ink); border-radius:var(--r);
  overflow:hidden; box-shadow:14px 14px 0 var(--ink), 0 0 0 4px var(--gold) inset;
  transform:rotate(-1deg); transition:transform .5s;
}
.banner-frame:hover{transform:rotate(0) scale(1.01)}
.banner-frame img{width:100%}

.social-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:46px}
.social{
  background:var(--paper); color:var(--ink);
  border:var(--line) solid var(--ink); border-radius:16px;
  padding:24px 18px; text-align:center;
  box-shadow:9px 9px 0 var(--ink);
  transition:.2s; display:block;
}
.social i, .social .svgico{font-size:2.2rem; display:block; margin:0 auto 10px}
.social .svgico{width:38px;height:38px; fill:currentColor}
.social b{display:block; font-family:var(--font-t); font-size:1.3rem}
.social span{font-size:.9rem; opacity:.7}
.social:hover{transform:translate(-4px,-6px); box-shadow:14px 14px 0 var(--ink)}
.social.x:hover{background:#111; color:var(--paper)}
.social.tg:hover{background:#2aabee; color:#fff}
.social.pf:hover{background:var(--green); color:var(--ink)}
.social.dx:hover{background:var(--gold); color:var(--ink)}
.join-cta{text-align:center; margin-top:46px}

/* ---------- FOOTER ---------- */
.foot{
  border-top:var(--line) solid var(--ink);
  background:rgba(3,13,8,.9); padding:52px 0 40px; margin-top:40px;
}
.foot-in{display:grid; justify-items:center; gap:18px; text-align:center}
.foot-brand{display:flex; align-items:center; gap:12px}
.foot-brand img{width:54px;height:54px;border-radius:50%;border:3px solid var(--ink); box-shadow:0 0 0 4px var(--gold)}
.foot-brand b{font-family:var(--font-t); font-size:1.4rem; display:block; text-align:left}
.foot-brand span{font-size:.85rem; opacity:.7}
.disclaimer{max-width:720px; font-size:.86rem; opacity:.6; line-height:1.6; margin:0}
.foot-links{display:flex; gap:12px}
.foot-links a{
  width:44px;height:44px;display:grid;place-items:center;
  border:3px solid var(--ink); border-radius:12px; background:var(--paper); color:var(--ink);
  box-shadow:3px 3px 0 var(--ink); transition:.15s;
}
.foot-links a:hover{background:var(--green); transform:translateY(-3px)}
.foot small{opacity:.5}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:34px; transform:translate(-50%,140%);
  background:var(--green); color:var(--ink);
  font-family:var(--font-a); letter-spacing:2px; font-size:1.15rem;
  padding:12px 26px; border:var(--line) solid var(--ink); border-radius:12px;
  box-shadow:6px 6px 0 var(--ink); z-index:99; transition:transform .35s cubic-bezier(.2,1.4,.4,1);
}
.toast.show{transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hero-grid,.about-grid,.buy-wrap,.buzz-grid{grid-template-columns:1fr; gap:44px}
  .buy-art{position:static}
  .social-grid{grid-template-columns:repeat(2,1fr)}
  .coin-badge{width:92px;height:92px;left:-14px;bottom:-20px}
}
@media (max-width:820px){
  .navlinks{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:4px; padding:16px 22px;
    background:rgba(4,17,10,.97); border-bottom:var(--line) solid var(--ink);
    display:none;
  }
  .navlinks.open{display:flex}
  .burger{display:grid; place-items:center}
  .topbar-right .btn-pop{display:none}
  .topbar{gap:10px}
  .sec{padding:78px 0}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .mini-row{grid-template-columns:1fr}
  .step{padding-left:26px; padding-top:44px}
  .step .num{left:16px; top:-26px; width:50px;height:50px; font-size:1.5rem}
  .panel-frame{box-shadow:9px 9px 0 var(--ink), 0 0 0 3px var(--gold) inset}
  .bg-plate{background-attachment:scroll}
}
@media (max-width:520px){
  .social-grid{grid-template-columns:1fr}
  .sec-title span{box-shadow:6px 6px 0 var(--ink)}
  .stage{width:94vw}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
  .tilt-l,.tilt-r,.screen{transform:none !important}
}