/* ============================================================
   AY YAI YAI — $AIAIAI  | Comic / "ay yai yai" styled theme
   ============================================================ */

:root{
  --navy:        #0a1230;
  --navy-2:      #0e1a45;
  --ink:         #0b0e1a;
  --yellow:      #ffd23f;
  --orange:      #ff7a18;
  --red:         #ff3b30;
  --blue:        #2f6bff;
  --cyan:        #28e0ff;
  --cream:       #fff7e6;
  --line:        #0b0e1a;
  --radius:      18px;
  --shadow:      6px 6px 0 var(--line);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Comic Neue', system-ui, sans-serif;
  color:var(--cream);
  background:var(--navy);
  overflow-x:hidden;
  position:relative;
  line-height:1.6;
}

/* ---------- BACKGROUND ---------- */
.bg-layer{
  position:fixed; inset:0; z-index:-3;
  background:url('background.png') center top / cover no-repeat fixed;
}
.bg-layer::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,14,40,.72) 0%, rgba(8,14,40,.86) 45%, rgba(6,10,28,.95) 100%);
}
.bg-halftone{
  position:fixed; inset:0; z-index:-2; opacity:.10; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.9) 1.4px, transparent 1.6px);
  background-size:20px 20px;
}

/* ---------- SHARED ---------- */
.container{ max-width:1180px; margin:0 auto; padding:0 22px; }

.section{ padding:90px 0; position:relative; }

.section-title{
  font-family:'Bangers', cursive;
  font-size:clamp(2.4rem, 6vw, 4.2rem);
  text-align:center;
  letter-spacing:2px;
  margin-bottom:48px;
  line-height:1;
}
.section-title span{
  display:inline-block;
  color:var(--yellow);
  padding:.1em .5em;
  -webkit-text-stroke:2px var(--line);
  text-shadow:4px 4px 0 var(--red), 8px 8px 0 rgba(0,0,0,.35);
  transform:rotate(-2deg);
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:'Luckiest Guy', cursive;
  letter-spacing:.5px;
  font-size:1.05rem;
  padding:.7em 1.4em;
  border:3px solid var(--line);
  border-radius:50px;
  text-decoration:none;
  color:var(--ink);
  box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease;
  cursor:pointer;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:9px 9px 0 var(--line); }
.btn:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--line); }
.btn-pump{ background:linear-gradient(180deg,var(--yellow),var(--orange)); color:var(--ink); }
.btn-ghost{ background:var(--cream); color:var(--ink); }
.btn-lg{ font-size:1.3rem; padding:.85em 1.8em; }

/* ============== NAVBAR ============== */
.navbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:22px;
  padding:12px 26px;
  background:rgba(8,14,40,.82);
  backdrop-filter:blur(8px);
  border-bottom:4px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img{ width:48px; height:48px; border-radius:10px; border:3px solid var(--line); box-shadow:3px 3px 0 var(--line); }
.brand span{
  font-family:'Bangers', cursive; font-size:1.6rem; letter-spacing:1.5px;
  color:var(--yellow); -webkit-text-stroke:1.4px var(--line);
}
.nav-links{ margin-left:auto; display:flex; gap:26px; }
.nav-links a{
  font-family:'Luckiest Guy', cursive; letter-spacing:.5px;
  color:var(--cream); text-decoration:none; font-size:1.02rem;
  transition:color .15s, transform .15s;
}
.nav-links a:hover{ color:var(--yellow); transform:translateY(-2px); }
.nav-socials{ display:flex; gap:14px; font-size:1.45rem; }
.nav-socials a{ color:var(--cream); transition:color .15s, transform .15s; }
.nav-socials a:hover{ color:var(--cyan); transform:translateY(-2px) scale(1.1); }
.burger{ display:none; background:none; border:none; color:var(--cream); font-size:2rem; cursor:pointer; }

/* ============== HERO ============== */
.hero{ padding:70px 22px 60px; }
.hero-inner{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:center;
}
.pow-badge{
  display:inline-block;
  font-family:'Luckiest Guy', cursive; letter-spacing:1px;
  background:var(--red); color:#fff;
  padding:.4em 1em; border:3px solid var(--line); border-radius:40px;
  box-shadow:4px 4px 0 var(--line);
  transform:rotate(-2deg); margin-bottom:22px;
}
.hero-title{
  font-family:'Bangers', cursive;
  font-size:clamp(3.6rem, 9vw, 7rem);
  line-height:.95; letter-spacing:2px;
  color:var(--yellow);
  -webkit-text-stroke:3px var(--line);
  text-shadow:6px 6px 0 var(--red), 12px 12px 0 rgba(0,0,0,.4);
  margin-bottom:14px;
}
.hero-tagline{
  font-family:'Luckiest Guy', cursive; font-size:clamp(1.2rem,2.6vw,1.7rem);
  color:var(--cyan); letter-spacing:.5px; margin-bottom:14px;
}
.hero-sub{ font-size:1.12rem; max-width:38ch; margin-bottom:28px; color:#e9eefc; }
.hero-btns{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:26px; }
.hero-socials{ display:flex; gap:18px; font-size:1.7rem; }
.hero-socials a{
  color:var(--cream);
  width:54px; height:54px; display:grid; place-items:center;
  border:3px solid var(--line); border-radius:14px;
  background:rgba(255,255,255,.06);
  box-shadow:4px 4px 0 var(--line);
  transition:transform .14s, color .14s, background .14s;
}
.hero-socials a:hover{ transform:translate(-2px,-2px); color:var(--ink); background:var(--yellow); }

.hero-art{ position:relative; display:grid; place-items:center; }
.hero-art-frame{
  border:5px solid var(--line); border-radius:24px; overflow:hidden;
  box-shadow:12px 12px 0 var(--line);
  background:var(--navy-2);
  transform:rotate(2deg);
  max-width:460px;
}
.hero-art-frame img{ display:block; width:100%; }
.note{
  position:absolute; font-size:3rem; color:var(--yellow);
  -webkit-text-stroke:2px var(--line);
  animation:float 3.4s ease-in-out infinite;
}
.note-1{ top:-6%; left:2%; }
.note-2{ top:20%; right:-4%; animation-delay:.7s; font-size:3.8rem; color:var(--cyan); }
.note-3{ bottom:4%; left:-4%; animation-delay:1.3s; color:var(--orange); }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(-6deg);} 50%{ transform:translateY(-16px) rotate(8deg);} }

/* ============== MARQUEE ============== */
.marquee{
  background:var(--yellow);
  border-top:4px solid var(--line); border-bottom:4px solid var(--line);
  overflow:hidden; white-space:nowrap; padding:10px 0;
  transform:rotate(-1deg) scale(1.02);
}
.marquee-track{ display:inline-flex; animation:scroll 26s linear infinite; }
.marquee-track span{
  font-family:'Bangers', cursive; font-size:1.5rem; letter-spacing:2px;
  color:var(--ink); padding-right:1rem;
}
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============== ABOUT ============== */
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:46px; align-items:center; }
.comic-frame{
  border:5px solid var(--line); border-radius:22px; overflow:hidden;
  box-shadow:10px 10px 0 var(--line); background:var(--navy-2);
  transform:rotate(-2deg);
}
.comic-frame img{ display:block; width:100%; }
.speech-bubble{
  position:relative; background:var(--cream); color:var(--ink);
  border:4px solid var(--line); border-radius:20px;
  padding:22px 24px; box-shadow:6px 6px 0 var(--line); margin-bottom:24px;
}
.speech-bubble p+p{ margin-top:10px; }
.speech-bubble::after{
  content:""; position:absolute; left:46px; bottom:-22px;
  border:14px solid transparent; border-top-color:var(--cream);
  filter:drop-shadow(0 4px 0 var(--line));
}
.about-body{ font-size:1.12rem; margin-bottom:26px; }
.about-stats{ display:flex; gap:18px; flex-wrap:wrap; }
.stat{
  flex:1; min-width:90px; text-align:center;
  background:rgba(255,255,255,.07);
  border:3px solid var(--line); border-radius:16px;
  padding:16px 10px; box-shadow:5px 5px 0 var(--line);
}
.stat-num{ display:block; font-family:'Bangers', cursive; font-size:2rem; color:var(--yellow); -webkit-text-stroke:1px var(--line); }
.stat-label{ font-family:'Luckiest Guy', cursive; font-size:.95rem; color:var(--cyan); }

/* ============== HOW TO BUY ============== */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.step-card{
  position:relative;
  background:rgba(255,255,255,.06);
  border:4px solid var(--line); border-radius:var(--radius);
  padding:34px 20px 24px; text-align:center;
  box-shadow:7px 7px 0 var(--line);
  transition:transform .15s;
}
.step-card:hover{ transform:translateY(-6px) rotate(-1deg); }
.step-num{
  position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  width:46px; height:46px; display:grid; place-items:center;
  background:var(--red); color:#fff;
  font-family:'Bangers', cursive; font-size:1.6rem;
  border:3px solid var(--line); border-radius:50%;
  box-shadow:3px 3px 0 var(--line);
}
.step-icon{ font-size:2.6rem; color:var(--yellow); display:block; margin:6px 0 12px; }
.step-card h3{ font-family:'Luckiest Guy', cursive; letter-spacing:.5px; margin-bottom:8px; color:var(--cyan); }
.step-card p{ font-size:.98rem; color:#e9eefc; }
.howtobuy-cta, .chart .howtobuy-cta{ text-align:center; margin-top:42px; }

/* ============== CHART ============== */
.chart-intro{ text-align:center; font-size:1.15rem; margin-bottom:28px; color:#e9eefc; }
.chart-embed{
  border:5px solid var(--line); border-radius:22px; overflow:hidden;
  box-shadow:10px 10px 0 var(--line); background:var(--ink);
  height:620px;
}
.chart-embed iframe{ width:100%; height:100%; border:0; display:block; }

/* ============== JOIN US ============== */
.joinus-banner{
  border:5px solid var(--line); border-radius:22px; overflow:hidden;
  box-shadow:12px 12px 0 var(--line); margin-bottom:32px;
}
.joinus-banner img{ display:block; width:100%; }
.joinus-text{ text-align:center; font-size:1.2rem; max-width:60ch; margin:0 auto 36px; color:#eef2ff; }
.join-socials{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.join-card{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:28px 16px; text-decoration:none;
  background:rgba(255,255,255,.06); color:var(--cream);
  border:4px solid var(--line); border-radius:var(--radius);
  box-shadow:7px 7px 0 var(--line);
  transition:transform .15s, background .15s, color .15s;
}
.join-card i{ font-size:2.6rem; }
.join-card span{ font-family:'Luckiest Guy', cursive; letter-spacing:.5px; }
.join-card:hover{ transform:translate(-3px,-3px); background:var(--yellow); color:var(--ink); box-shadow:10px 10px 0 var(--line); }

/* ============== FOOTER ============== */
.footer{
  text-align:center; padding:60px 22px 40px;
  border-top:4px solid var(--line);
  background:rgba(6,10,28,.7);
}
.footer-logo{ width:84px; height:84px; border-radius:16px; border:3px solid var(--line); box-shadow:4px 4px 0 var(--line); margin-bottom:14px; }
.footer-title{ font-family:'Bangers', cursive; font-size:2rem; letter-spacing:2px; color:var(--yellow); -webkit-text-stroke:1.4px var(--line); }
.footer-tag{ color:var(--cyan); font-family:'Luckiest Guy', cursive; margin-bottom:20px; }
.footer-socials{ display:flex; justify-content:center; gap:18px; font-size:1.8rem; margin-bottom:24px; }
.footer-socials a{ color:var(--cream); transition:color .15s, transform .15s; }
.footer-socials a:hover{ color:var(--yellow); transform:translateY(-3px) scale(1.12); }
.footer-disclaimer{ font-size:.85rem; max-width:60ch; margin:0 auto; color:#9aa6c9; }

/* ============== RESPONSIVE ============== */
@media (max-width:980px){
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-text{ order:2; }
  .hero-art{ order:1; }
  .hero-btns, .hero-socials{ justify-content:center; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .about-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .join-socials{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  .nav-links{ display:none; }
  .nav-links.open{
    display:flex; flex-direction:column; gap:14px;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(8,14,40,.97); padding:20px; border-bottom:4px solid var(--line);
  }
  .nav-socials{ margin-left:auto; }
  .burger{ display:block; }
}
@media (max-width:520px){
  .steps, .join-socials{ grid-template-columns:1fr; }
  .chart-embed{ height:520px; }
}