/* ---------------------------------------------------------------
   ToonVault — hand-inked cartoon-shop aesthetic
   Palette: ink #1A1A2E, cream #FFF8E7, sunny #FFD23F, coral #FF6B6B, teal #2FB8A6
   Display face: Baloo 2 (rounded, bouncy) / Body: Poppins
----------------------------------------------------------------*/

:root{
  --ink:#1A1A2E;
  --cream:#FFF8E7;
  --sunny:#FFD23F;
  --coral:#FF6B6B;
  --teal:#2FB8A6;
  --line:3px;
}

*{box-sizing:border-box;}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Poppins', sans-serif;
  overflow-x:hidden;
}

h1,h2,h3,.display-font{
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  letter-spacing:.5px;
}

a{text-decoration:none;}

/* ---------- halftone backdrop ---------- */
.halftone-bg{
  background-image: radial-gradient(var(--ink) 1.4px, transparent 1.6px);
  background-size: 16px 16px;
  opacity:.08;
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* ---------- navbar ---------- */
.toon-nav{
  background:var(--cream);
  border-bottom:var(--line) solid var(--ink);
}
.toon-nav .brand{
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:1.6rem;
  color:var(--ink);
}
.toon-nav .brand span{color:var(--coral);}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:5rem 0 6rem;
  background:var(--ink);
  color:var(--cream);
  overflow:hidden;
  border-bottom:var(--line) solid var(--ink);
}
.hero .halftone-bg{ background-image: radial-gradient(var(--sunny) 1.6px, transparent 1.8px); opacity:.12;}
.hero-badge{
  display:inline-block;
  background:var(--coral);
  color:var(--ink);
  font-weight:700;
  padding:.35rem 1rem;
  border-radius:999px;
  border:2px solid var(--ink);
  transform:rotate(-3deg);
  font-size:.9rem;
  margin-bottom:1.25rem;
}
.hero h1{
  font-size:3.4rem;
  line-height:1.05;
  color:var(--cream);
}
.hero h1 .accent{ color:var(--sunny); }
.hero p.lead{
  color:#d8d4e8;
  max-width:560px;
}

/* ---------- comic price sticker ---------- */
.price-sticker{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:150px;height:150px;
  background:var(--sunny);
  color:var(--ink);
  border:var(--line) solid var(--ink);
  border-radius:50%;
  transform:rotate(6deg);
  box-shadow:6px 6px 0 var(--coral);
  flex:0 0 auto;
}
.price-sticker small{font-size:.75rem;font-weight:600;}
.price-sticker strong{font-family:'Baloo 2',sans-serif;font-size:1.8rem;line-height:1;}
.price-sticker .old{text-decoration:line-through;opacity:.6;font-size:.85rem;}

/* ---------- CTA button (the ONE download button) ---------- */
.btn-toon{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:1.2rem;
  background:var(--coral);
  color:var(--ink);
  border:var(--line) solid var(--ink);
  border-radius:16px;
  padding:.9rem 2.2rem;
  box-shadow:6px 6px 0 var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-toon:hover{
  color:var(--ink);
  transform:translate(-3px,-3px);
  box-shadow:9px 9px 0 var(--ink);
}
.btn-toon:active{
  transform:translate(0,0);
  box-shadow:2px 2px 0 var(--ink);
}
.btn-toon:disabled{
  opacity:.7;
  cursor:wait;
  transform:none;
  box-shadow:6px 6px 0 var(--ink);
}

/* ---------- bundle cards ---------- */
.bundle-card{
  background:#fff;
  border:var(--line) solid var(--ink);
  border-radius:18px;
  padding:1.5rem;
  height:100%;
  position:relative;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.bundle-card:hover{ transform:translateY(-8px) rotate(-1deg); }
.bundle-card .reel-icon{
  width:56px;height:56px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;
  border:2px solid var(--ink);
  margin-bottom:1rem;
}
.bundle-card:nth-child(1) .reel-icon{ background:var(--sunny); }
.bundle-card:nth-child(2) .reel-icon{ background:var(--teal); color:#fff; }
.bundle-card:nth-child(3) .reel-icon{ background:var(--coral); }
.bundle-card:nth-child(4) .reel-icon{ background:var(--sunny); }

/* ---------- section titles ---------- */
.section-eyebrow{
  font-weight:700;
  color:var(--coral);
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:.8rem;
}

/* ---------- footer CTA strip ---------- */
.cta-strip{
  background:var(--teal);
  color:var(--ink);
  border-top:var(--line) solid var(--ink);
  border-bottom:var(--line) solid var(--ink);
}

footer{
  background:var(--ink);
  color:#bdb8d1;
}

/* ---------- payment modal / status ---------- */
.status-overlay{
  position:fixed; inset:0;
  background:rgba(26,26,46,.85);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
}
.status-overlay.show{ display:flex; }
.status-box{
  background:var(--cream);
  border:var(--line) solid var(--ink);
  border-radius:20px;
  padding:2.5rem 2rem;
  max-width:380px;
  text-align:center;
  box-shadow:8px 8px 0 var(--ink);
}
.status-box .icon{ font-size:3rem; }

/* ---------- success page ---------- */
.success-page{ background:var(--cream); }
.success-card{
  background:#fff;
  border:var(--line) solid var(--ink);
  border-radius:24px;
  box-shadow:8px 8px 0 var(--teal);
  max-width:520px;
}
.success-badge{
  width:70px;height:70px;line-height:70px;
  border-radius:50%;
  background:var(--teal); color:#fff;
  font-size:2rem; margin:0 auto;
  border:2px solid var(--ink);
}

@media (max-width: 768px){
  .hero h1{ font-size:2.3rem; }
  .price-sticker{ margin-top:2rem; }
}