/* =========================================================
   $TOLY - THE SOLANA BULL  ::  COMIC BOOK ENGINE
   ========================================================= */

:root{
  --ink:#04050a;
  --ink-2:#0a0c16;
  --cyan:#14f195;
  --teal:#00e5ff;
  --aqua:#22d3ee;
  --purple:#9945ff;
  --violet:#7b2ff7;
  --magenta:#c026d3;
  --paper:#f5f2e8;
  --line:#000000;
  --panel-bg:rgba(6,8,16,.72);
  --stroke:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#03040a;
  color:#e9ecf5;
  font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  overflow-x:hidden;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* ---------- FIXED IMAGE BACKGROUND STAGE ---------- */
#bgstage{position:fixed;inset:0;z-index:-3;background:#03040a;overflow:hidden}
.bg-layer{
  position:absolute;inset:-4%;
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.08);
  transition:opacity 1.1s ease, transform 9s ease-out;
  filter:saturate(1.15) contrast(1.05);
}
.bg-layer.on{opacity:.52;transform:scale(1)}
#bgstage::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(153,69,255,.28), transparent 60%),
    radial-gradient(110% 90% at 10% 100%, rgba(20,241,149,.22), transparent 60%),
    linear-gradient(180deg, rgba(3,4,10,.80), rgba(3,4,10,.90) 45%, rgba(3,4,10,.95));
}
/* halftone dots over the whole page */
#halftone{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    radial-gradient(rgba(153,69,255,.30) 1px, transparent 1.6px),
    radial-gradient(rgba(20,241,149,.20) 1px, transparent 1.6px);
  background-size:7px 7px, 7px 7px;
  background-position:0 0, 3.5px 3.5px;
  opacity:.55;mix-blend-mode:screen;
}
/* GLOBAL SHINE SWEEP */
#shine{
  position:fixed;inset:-40%;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,
      transparent 38%,
      rgba(0,229,255,.06) 46%,
      rgba(255,255,255,.16) 50%,
      rgba(153,69,255,.09) 54%,
      transparent 62%);
  animation:sweep 9s linear infinite;
  mix-blend-mode:screen;
}
@keyframes sweep{
  0%{transform:translate3d(-45%,-25%,0) rotate(2deg)}
  100%{transform:translate3d(45%,25%,0) rotate(2deg)}
}

/* ---------- TYPE ---------- */
.dsp{font-family:'Bangers',cursive;font-weight:400;letter-spacing:.03em;line-height:.94}
.lucky{font-family:'Luckiest Guy',cursive;letter-spacing:.01em}
.inked{
  -webkit-text-stroke:3px #000;paint-order:stroke fill;
  text-shadow:5px 5px 0 #000, 8px 8px 0 rgba(153,69,255,.55);
}
.grad{
  background:linear-gradient(100deg,var(--cyan),var(--teal) 35%,var(--purple) 72%,var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(20,241,149,.35)) drop-shadow(0 0 26px rgba(153,69,255,.35));
}

/* ---------- COMIC PRIMITIVES ---------- */
.panel{
  position:relative;
  background:var(--panel-bg);
  border:var(--stroke) solid var(--line);
  box-shadow:10px 10px 0 #000, 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 38px rgba(153,69,255,.18);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  overflow:hidden;
}
.panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  border:2px solid transparent;
  background:linear-gradient(130deg,rgba(20,241,149,.7),rgba(0,229,255,.25),rgba(153,69,255,.7)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;
}
.panel::after{
  content:"";position:absolute;top:-120%;left:-60%;width:55%;height:340%;z-index:4;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
  transform:rotate(18deg);pointer-events:none;
  animation:panelShine 6.5s ease-in-out infinite;
}
@keyframes panelShine{
  0%,72%{left:-60%}
  100%{left:155%}
}
.panel-pad{padding:clamp(18px,3vw,34px)}
.panel > *{position:relative;z-index:2}

/* torn / snipped panel variants */
.torn-r{clip-path:polygon(0 0,100% 0,98.5% 22%,100% 40%,97.5% 63%,100% 82%,98% 100%,0 100%)}
.torn-l{clip-path:polygon(2% 0,100% 0,100% 100%,1.5% 100%,0 78%,2.5% 58%,0 34%,2% 16%)}
.snip{clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px))}

/* caption box - classic comic narration */
.caption{
  display:inline-block;
  background:linear-gradient(180deg,var(--cyan),#0bd587);
  color:#04120b;border:4px solid #000;
  box-shadow:6px 6px 0 #000;
  padding:.3rem 1rem;
  font-family:'Bangers',cursive;letter-spacing:.09em;font-size:1.05rem;
  transform:rotate(-1.4deg);
}
.caption.purp{background:linear-gradient(180deg,#b06bff,var(--purple));color:#fff}
.caption.paper{background:var(--paper);color:#0a0c16}

/* speech bubble */
.bubble{
  position:relative;background:var(--paper);color:#0a0c16;
  border:4px solid #000;border-radius:22px;
  padding:1rem 1.15rem;box-shadow:8px 8px 0 #000;
  font-weight:600;
}
.bubble::after{
  content:"";position:absolute;left:34px;bottom:-24px;
  border:12px solid transparent;border-top-color:#000;
}
.bubble::before{
  content:"";position:absolute;left:38px;bottom:-15px;z-index:1;
  border:9px solid transparent;border-top-color:var(--paper);
}

/* sound-effect burst word */
.sfx{
  font-family:'Luckiest Guy',cursive;
  color:#fff;-webkit-text-stroke:4px #000;paint-order:stroke fill;
  text-shadow:0 0 22px rgba(20,241,149,.8),6px 6px 0 var(--purple);
  display:inline-block;
}

/* starburst */
.burst{
  position:absolute;inset:-14%;z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,
    rgba(153,69,255,.30) 0deg 7deg, transparent 7deg 15deg);
  border-radius:50%;
  animation:spin 34s linear infinite;
}
.burst.c{
  background:repeating-conic-gradient(from 6deg,
    rgba(20,241,149,.26) 0deg 6deg, transparent 6deg 14deg);
  animation-duration:46s;animation-direction:reverse;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* speed lines */
.speed{
  position:absolute;inset:0;pointer-events:none;opacity:.35;z-index:1;
  background:repeating-linear-gradient(115deg,
    transparent 0 10px, rgba(255,255,255,.09) 10px 11px);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 70%);
  mask-image:linear-gradient(90deg,#000,transparent 70%);
}

/* ---------- 3D PERSPECTIVE ---------- */
.stage{perspective:1500px;perspective-origin:50% 45%}
.tilt{transition:transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s ease;will-change:transform}
.tilt-l{transform:rotateY(9deg) rotateX(3deg) rotateZ(-1deg)}
.tilt-r{transform:rotateY(-9deg) rotateX(3deg) rotateZ(1deg)}
.tilt-f{transform:rotateX(6deg)}
.tilt:hover{
  transform:rotateY(0) rotateX(0) rotateZ(0) translateZ(28px) scale(1.015);
  box-shadow:16px 16px 0 #000,0 0 60px rgba(20,241,149,.28);
}

/* ---------- BUTTONS ---------- */
.cbtn{
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.5rem;border:4px solid #000;
  font-family:'Bangers',cursive;letter-spacing:.07em;font-size:1.15rem;
  color:#04120b;background:linear-gradient(180deg,var(--cyan),#0bc47f);
  box-shadow:7px 7px 0 #000;
  transition:transform .16s ease,box-shadow .16s ease,filter .2s ease;
  overflow:hidden;cursor:pointer;line-height:1.25;
}
.cbtn > *{position:relative;z-index:2}
.cbtn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 #000;filter:brightness(1.08)}
.cbtn:active{transform:translate(7px,7px);box-shadow:0 0 0 #000}
.cbtn::after{
  content:"";position:absolute;top:-60%;left:-40%;width:38%;height:250%;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(20deg);animation:panelShine 4.2s ease-in-out infinite;
}
.cbtn.purp{background:linear-gradient(180deg,#b271ff,var(--purple));color:#fff}
.cbtn.dark{background:linear-gradient(180deg,#1b2030,#0a0d18);color:#fff}
.cbtn.ghost{background:rgba(255,255,255,.04);color:#fff;border-color:#fff;box-shadow:7px 7px 0 rgba(153,69,255,.9)}
.cbtn.sm{padding:.5rem 1rem;font-size:.95rem;box-shadow:5px 5px 0 #000}

/* ---------- NAV ---------- */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .35s ease,box-shadow .35s ease,padding .35s ease;
  padding:.9rem 0;
}
#nav.stuck{
  background:rgba(4,5,10,.86);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 4px 0 #000,0 10px 30px rgba(0,0,0,.6);
}
.nav-in{
  max-width:1240px;margin:0 auto;padding:0 1.2rem;
  display:flex;align-items:center;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.7rem}
.brand img{
  width:52px;height:52px;border-radius:50%;
  border:3px solid #000;box-shadow:4px 4px 0 #000,0 0 22px rgba(20,241,149,.45);
}
.brand b{font-family:'Bangers',cursive;font-size:1.5rem;letter-spacing:.06em}
.nav-links{display:flex;gap:.35rem;margin-left:auto;align-items:center}
.nav-links a.nl{
  font-family:'Bangers',cursive;letter-spacing:.09em;font-size:1.05rem;
  padding:.4rem .8rem;border:3px solid transparent;transition:.2s;color:#cfd6e6;
}
.nav-links a.nl:hover{color:#fff;border-color:#000;background:rgba(153,69,255,.35);box-shadow:4px 4px 0 #000}
.burger{
  display:none;margin-left:auto;background:transparent;border:3px solid #000;
  color:#fff;padding:.4rem .65rem;font-size:1.3rem;box-shadow:4px 4px 0 #000;cursor:pointer;
  background:rgba(153,69,255,.35);
}

/* ---------- LAYOUT ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 1.2rem;position:relative}
section{position:relative;padding:clamp(70px,9vw,130px) 0}
.page-tab{
  position:absolute;top:26px;right:0;
  font-family:'Bangers',cursive;letter-spacing:.2em;font-size:.95rem;
  background:#000;color:var(--cyan);border:3px solid var(--cyan);
  padding:.25rem .8rem;transform:rotate(1.5deg);z-index:5;
}
.sec-head{display:flex;flex-direction:column;gap:.9rem;margin-bottom:2.4rem}
.sec-title{font-size:clamp(2.4rem,6.2vw,4.6rem);margin:0}
.lead{font-size:1.06rem;color:#c3cbdd;max-width:62ch}

/* gutter divider - comic page break */
.gutter{
  height:22px;position:relative;
  background:repeating-linear-gradient(90deg,#000 0 34px,transparent 34px 46px);
  opacity:.85;
}

/* ---------- HERO ---------- */
#hero{padding-top:clamp(130px,17vw,180px);min-height:100vh;display:flex;align-items:center}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,54px);align-items:center}
.hero-title{font-size:clamp(4rem,15vw,11rem);margin:.2rem 0 0}
.hero-sub{font-size:clamp(1.6rem,4.6vw,3.1rem);margin:.1rem 0 1rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem}
.hero-art{position:relative;display:grid;place-items:center;min-height:340px}
.hero-art .ring{
  position:relative;width:min(88%,400px);aspect-ratio:1;border-radius:50%;
  border:6px solid #000;overflow:hidden;
  box-shadow:14px 14px 0 #000,0 0 70px rgba(153,69,255,.55);
  animation:bob 6s ease-in-out infinite;
}
.hero-art .ring img{width:100%;height:100%;object-fit:cover}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-16px) rotate(1deg)}}
.sfx-float{position:absolute;font-size:clamp(1.4rem,3.4vw,2.4rem);z-index:6}
.sfx-1{top:2%;right:2%;transform:rotate(11deg);animation:pop 3.4s ease-in-out infinite}
.sfx-2{bottom:6%;left:-2%;transform:rotate(-9deg);animation:pop 4.2s ease-in-out infinite .6s}
@keyframes pop{0%,100%{transform:scale(1) rotate(-8deg)}50%{transform:scale(1.12) rotate(4deg)}}

/* CA strip */
.ca-strip{
  margin-top:1.8rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  background:rgba(0,0,0,.65);border:4px solid #000;box-shadow:7px 7px 0 rgba(153,69,255,.85);
  padding:.6rem .8rem;
}
.ca-strip .lbl{font-family:'Bangers',cursive;letter-spacing:.12em;color:var(--cyan);font-size:1rem}
.ca-strip code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem;
  color:#e6ecff;word-break:break-all;flex:1;min-width:180px;
}

/* stat chips */
.chips{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}
.chip{
  border:3px solid #000;background:rgba(255,255,255,.06);
  box-shadow:5px 5px 0 #000;padding:.35rem .8rem;
  font-family:'Bangers',cursive;letter-spacing:.08em;font-size:.95rem;color:#dfe6f7;
}
.chip i{color:var(--cyan);margin-right:.35rem}

/* ---------- MARQUEE ---------- */
.marquee{
  position:relative;overflow:hidden;
  border-top:4px solid #000;border-bottom:4px solid #000;
  background:linear-gradient(90deg,var(--purple),var(--violet),var(--teal),var(--cyan),var(--purple));
  background-size:300% 100%;animation:hue 14s linear infinite;
  transform:rotate(-1.15deg) scale(1.04);
  box-shadow:0 10px 0 rgba(0,0,0,.55);
}
.marquee.rev{transform:rotate(1.15deg) scale(1.04)}
@keyframes hue{to{background-position:300% 0}}
.mq-track{display:flex;gap:2.2rem;padding:.55rem 0;width:max-content;animation:slide 26s linear infinite}
.marquee.rev .mq-track{animation-direction:reverse}
.mq-track span{
  font-family:'Bangers',cursive;letter-spacing:.14em;font-size:1.35rem;
  color:#04070f;white-space:nowrap;text-shadow:1px 1px 0 rgba(255,255,255,.35);
}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- ABOUT ---------- */
.strip{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(18px,2.6vw,30px)}
.strip-2{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(18px,2.6vw,30px);margin-top:clamp(18px,2.6vw,30px)}
.art-panel{position:relative;min-height:280px;overflow:hidden}
.art-panel img{width:100%;height:100%;min-height:280px;object-fit:cover;filter:contrast(1.08) saturate(1.15)}
.art-panel .tag{
  position:absolute;left:14px;bottom:14px;z-index:6;
}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px);margin-top:clamp(26px,4vw,46px)}
.pcard{position:relative;padding:1.5rem 1.35rem}
.pcard .num{
  position:absolute;top:-18px;left:-14px;z-index:6;
  font-family:'Luckiest Guy',cursive;font-size:2.6rem;color:var(--cyan);
  -webkit-text-stroke:4px #000;paint-order:stroke fill;
}
.pcard h3{font-family:'Bangers',cursive;font-size:1.9rem;letter-spacing:.05em;margin:.2rem 0 .5rem}
.pcard p{color:#c3cbdd;margin:0;font-size:.98rem}
.pcard i.ic{font-size:1.9rem;color:var(--purple);filter:drop-shadow(0 0 10px rgba(153,69,255,.8))}

/* ---------- HOW TO BUY ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,26px)}
.step{position:relative;padding:1.6rem 1.25rem 1.4rem;min-height:270px}
.step .stepno{
  position:absolute;top:-22px;right:-10px;z-index:6;
  width:62px;height:62px;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(180deg,var(--purple),var(--violet));
  border:4px solid #000;box-shadow:5px 5px 0 #000;
  font-family:'Luckiest Guy',cursive;font-size:1.6rem;color:#fff;
}
.step h4{font-family:'Bangers',cursive;font-size:1.55rem;letter-spacing:.05em;margin:.6rem 0 .5rem;color:#fff}
.step p{color:#bcc5da;font-size:.95rem;margin:0 0 1rem}
.step .sic{font-size:2rem;color:var(--cyan);filter:drop-shadow(0 0 12px rgba(20,241,149,.7))}

/* ---------- CHART ---------- */
.tv{position:relative;padding:14px}
.tv-bar{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.5rem .7rem;border:3px solid #000;background:#05070f;margin-bottom:12px;
}
.dots{display:flex;gap:6px}
.dots i{width:12px;height:12px;border-radius:50%;border:2px solid #000;display:block}
.tv-frame{
  position:relative;border:4px solid #000;background:#05070f;overflow:hidden;
  height:clamp(420px,62vh,660px);
}
.tv-frame iframe{width:100%;height:100%;border:0;display:block}
.chart-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.4rem;justify-content:center}

/* ---------- JOIN US ---------- */
.banner-panel{position:relative;padding:0;overflow:hidden}
.banner-panel img{width:100%;display:block}
.join-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px);margin-top:clamp(24px,4vw,44px);align-items:start}
.joinlist{list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
.joinlist li{display:flex;gap:.8rem;align-items:flex-start;color:#c9d1e3}
.joinlist i{color:var(--cyan);font-size:1.15rem;margin-top:.2rem}
.join-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.4rem}

/* ---------- FOOTER ---------- */
footer{position:relative;padding:clamp(50px,7vw,90px) 0 2.4rem;border-top:4px solid #000}
.foot-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.disc{
  font-size:.82rem;color:#8e98ae;border:3px dashed rgba(255,255,255,.18);
  padding:1rem;margin-top:2rem;background:rgba(0,0,0,.4);
}
.foot-social{display:flex;gap:.7rem;flex-wrap:wrap}
.sq{
  width:52px;height:52px;display:grid;place-items:center;
  border:4px solid #000;background:rgba(255,255,255,.07);box-shadow:5px 5px 0 #000;
  color:#fff;font-size:1.3rem;transition:.18s;
}
.sq:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 #000;background:var(--purple)}

/* ---------- REVEAL ---------- */
.rv{opacity:0;transform:translateY(38px) rotateX(9deg);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- TOAST ---------- */
#toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,140%);
  z-index:200;background:var(--paper);color:#0a0c16;
  border:4px solid #000;box-shadow:7px 7px 0 #000;
  padding:.6rem 1.1rem;font-family:'Bangers',cursive;letter-spacing:.08em;font-size:1.1rem;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
#toast.show{transform:translate(-50%,0)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .principles{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-art{order:-1;min-height:auto}
  .strip,.strip-2{grid-template-columns:1fr}
  .join-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .tilt-l,.tilt-r,.tilt-f{transform:none}
}
@media (max-width:760px){
  .nav-links{
    position:fixed;top:76px;right:12px;left:12px;
    flex-direction:column;align-items:stretch;gap:.4rem;
    background:rgba(4,5,10,.97);border:4px solid #000;box-shadow:8px 8px 0 #000;
    padding:.8rem;display:none;
  }
  .nav-links.open{display:flex}
  .nav-links .cbtn{justify-content:center}
  .burger{display:block}
  .steps{grid-template-columns:1fr}
  .brand b{font-size:1.25rem}
  .brand img{width:44px;height:44px}
  .ca-strip code{font-size:.76rem}
  .panel{box-shadow:7px 7px 0 #000}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}