/* ==========================================================================
   MEME-BRUTALIST TEMPLATE  —  reusable "GeoCities / degen coin" design system
   --------------------------------------------------------------------------
   Everything visual is driven by the tokens in :root below.
   Reskin the whole site by editing those variables — no other CSS required.
   ========================================================================== */

:root {
  /* ---- Core palette (change these to retheme) ---------------------------- */
  /* $S&P500 "Shit & Piss 500" theme: lime meme background, poop brown, piss yellow */
  --bg:            #b5e300;   /* lime page background     */
  --fg:            #3e2412;   /* dark brown body text     */
  --card:          #3e2412;   /* dark brown panels        */
  --border:        #2b1608;   /* cartoon-outline borders  */
  --primary:       #7b4a21;   /* poop brown action color  */
  --primary-fg:    #ffe14d;   /* text on primary          */
  --secondary:     #ffd928;   /* piss yellow accent       */
  --secondary-fg:  #3e2412;
  --accent:        #ffe14d;   /* yellow highlight         */
  --muted:         #c9b98a;
  --white:         #fff6dc;   /* cream "white" for panels */
  --black:         #2b1608;   /* outline dark brown       */

  /* ---- Typography -------------------------------------------------------- */
  --font-body:    "Comic Neue", cursive, sans-serif;
  --font-mono:    "VT323", monospace;
  --font-pixel:   "Press Start 2P", monospace;   /* headings / logos       */
  --font-spooky:  "Creepster", cursive;          /* scary accents          */

  /* ---- Effects ----------------------------------------------------------- */
  --shadow-hard:  6px 6px 0 rgba(0, 0, 0, .6);   /* offset "sticker" shadow */
  --shadow-hard-lg: 10px 10px 0 rgba(0, 0, 0, .5);
  --glow:         0 0 20px rgba(255, 217, 40, .75);  /* golden piss glow    */
  --radius:       0;                             /* brutalist = no rounding */
}

/* ---- Reset --------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  overflow-x: hidden;
  /* subtle retro scanline texture over the whole page */
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, .06) 0px,
      rgba(0, 0, 0, .06) 1px,
      transparent 1px,
      transparent 3px);
}

/* ---- Reusable helpers ---------------------------------------------------- */
.wrap { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: 1rem; }

.panel {
  background: var(--card);
  border: 4px solid var(--border);
  box-shadow: var(--shadow-hard);
  padding: 1.5rem;
}

.pixel { font-family: var(--font-pixel); line-height: 1.4; }
.mono  { font-family: var(--font-mono); font-size: 1.4rem; }

/* Chunky sticker button */
.btn {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: .8rem;
  padding: .9rem 1.4rem;
  background: var(--primary);
  color: var(--primary-fg);
  border: 4px solid var(--black);
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  text-transform: uppercase;
  transition: transform .1s ease, box-shadow .1s ease;
}
.btn:hover  { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(0,0,0,.6); }
.btn:active { transform: translate(4px, 4px);  box-shadow: 2px 2px 0 rgba(0,0,0,.6); }

.btn--secondary { background: var(--secondary); color: var(--secondary-fg); }
.btn--accent    { background: var(--accent);    color: var(--black); }

/* Section title band */
.section-title {
  font-family: var(--font-pixel);
  font-size: clamp(1rem, 3.5vw, 1.9rem);
  color: var(--fg);
  text-align: center;
  text-shadow: 3px 3px 0 var(--accent);
  margin-bottom: 1.5rem;
}

section { padding-block: 3.5rem; }

/* ==========================================================================
   NAVBAR ("NAVIGATOR")
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--black);
  border-bottom: 4px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 1rem;
  flex-wrap: wrap;
}
.nav__brand {
  font-family: var(--font-pixel);
  font-size: .75rem;
  color: var(--secondary);
  text-shadow: 2px 2px 0 var(--primary);
}
.nav__links { display: flex; gap: .4rem; flex-wrap: wrap; }
.nav__links a {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  padding: .15rem .55rem;
  border: 2px solid var(--secondary);
  color: var(--secondary);
}
.nav__links a:hover { background: var(--secondary); color: var(--black); }

/* ==========================================================================
   MARQUEE ("LATEST NEWS")
   ========================================================================== */
.marquee {
  background: var(--primary);
  color: var(--primary-fg);
  border-block: 4px solid var(--accent);
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-pixel);
  font-size: .8rem;
  padding-block: .6rem;
}
.marquee__track {
  display: inline-block;
  padding-left: 100%;
  animation: scroll-left 18s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes scroll-left { to { transform: translateX(-100%); } }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { text-align: center; padding-block: 3rem 2rem; }
.hero__logo-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 1.5rem;
  animation: wobble 4s ease-in-out infinite;
}
.hero__logo {
  width: min(320px, 70vw);
  border: 5px solid var(--border);
  box-shadow: var(--glow), var(--shadow-hard-lg);
}
/* Robin Hood cap perched on the pile */
.hero__cap {
  position: absolute;
  top: 24%;
  left: 20%;
  width: 27%;
  transform: rotate(-14deg);
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .35));
  pointer-events: none;
}
@keyframes wobble {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
.hero__title {
  font-family: var(--font-pixel);
  font-size: clamp(1.4rem, 6vw, 3.2rem);
  color: var(--fg);
  text-shadow: 5px 5px 0 var(--accent);
  margin-bottom: 1rem;
}
.hero__ticker {
  font-family: var(--font-spooky);
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  color: var(--primary);
  letter-spacing: .05em;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 0 var(--accent);
}
.hero__tagline {
  font-family: var(--font-mono);
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  color: var(--fg);
  max-width: 640px;
  margin: 0 auto 2rem;
}
.hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* "LIVE ON ROBINHOOD CHAIN" sticker badge */
.chain-badge {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: .7rem;
  background: var(--secondary);
  color: var(--secondary-fg);
  border: 3px solid var(--black);
  box-shadow: var(--shadow-hard);
  padding: .6rem 1rem;
  margin-bottom: 1.5rem;
  transform: rotate(-2deg);
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { transform: rotate(-2deg) scale(1); }
  50%      { transform: rotate(-2deg) scale(1.06); }
}

/* ==========================================================================
   TWO-COLUMN "TRUTH" / STORY SECTION
   ========================================================================== */
.truth { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.truth img { border: 4px solid var(--secondary); box-shadow: var(--shadow-hard); }
.truth__body p { font-family: var(--font-mono); font-size: 1.4rem; color: var(--white); margin-bottom: 1rem; }
.truth__body b { color: var(--accent); }

/* ==========================================================================
   "THE APP" — fake Robinhood-style phone mockup
   ========================================================================== */
.app-grid { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; }
.app-grid__copy p { font-family: var(--font-mono); font-size: 1.4rem; color: var(--white); margin-bottom: 1rem; }
.app-grid__copy b { color: var(--accent); }

.phone {
  width: min(300px, 85vw);
  margin-inline: auto;
  background: #1a0f06;
  border: 5px solid var(--black);
  border-radius: 28px;
  box-shadow: var(--shadow-hard-lg);
  padding: 1rem;
  position: relative;
  overflow: hidden;
}
.phone__notch {
  width: 42%; height: 14px;
  background: var(--black);
  border-radius: 0 0 10px 10px;
  margin: -1rem auto .8rem;
}
.phone__status {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 1rem; color: var(--muted);
}
.phone__ticker { font-family: var(--font-pixel); font-size: .7rem; color: var(--white); margin-top: .8rem; }
.phone__price  { font-family: var(--font-pixel); font-size: 1.4rem; color: var(--bg); margin-top: .5rem; }
.phone__change { font-family: var(--font-mono); font-size: 1.1rem; color: var(--bg); }
.phone__chart  { margin: .6rem 0; }
.phone__periods {
  display: flex; gap: .7rem; justify-content: space-between;
  font-family: var(--font-mono); font-size: .95rem; color: var(--muted);
}
.phone__periods .active { color: var(--bg); border-bottom: 2px solid var(--bg); }
.phone__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .9rem; }
.phone__buy, .phone__sell {
  font-family: var(--font-pixel);
  font-size: .65rem;
  padding: .8rem .4rem;
  border: 3px solid var(--black);
  text-align: center;
}
.phone__buy {
  background: var(--bg);
  color: var(--black);
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .6);
}
.phone__buy:active { transform: translate(2px, 2px); box-shadow: none; }
.phone__sell {
  background: #3a3a3a;
  color: #7a7a7a;
  border-color: #2a2a2a;
  cursor: not-allowed;
  text-decoration: line-through;
}
.phone__msg {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--accent);
  text-align: center;
  min-height: 3.2em;
  margin-top: .7rem;
}
.confetti {
  position: absolute;
  top: -12%;
  font-size: 1.3rem;
  pointer-events: none;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { top: 110%; transform: rotate(340deg); }
}

/* ==========================================================================
   HOW TO BUY  (numbered steps)
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.step__num {
  font-family: var(--font-pixel);
  font-size: 1.6rem;
  color: var(--primary);
  background: var(--accent);
  width: 3rem; height: 3rem;
  display: grid; place-content: center;
  border: 4px solid var(--black);
  margin-bottom: 1rem;
}
.step h3 { font-family: var(--font-pixel); font-size: .85rem; color: var(--secondary); margin-bottom: .75rem; }
.step p  { font-family: var(--font-mono); font-size: 1.3rem; color: var(--white); }
.step p a { color: var(--accent); text-decoration: underline; }

/* ==========================================================================
   TOKENOMICS  (stat cards)
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.stat { text-align: center; }
.stat__value { font-family: var(--font-pixel); font-size: 1.3rem; color: var(--accent); margin-bottom: .75rem; }
.stat__label { font-family: var(--font-mono); font-size: 1.3rem; color: var(--white); }
.contract {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--accent);
  word-break: break-all;
  background: var(--black);
  border: 2px dashed var(--secondary);
  padding: .75rem 1rem;
  text-align: center;
}
.contract small { display: block; color: var(--white); opacity: .85; margin-top: .4rem; word-break: normal; }

/* ==========================================================================
   ROADMAP  (phase timeline)
   ========================================================================== */
.roadmap { display: grid; gap: 1.5rem; }
.phase { border-left: 8px solid var(--primary); }
.phase h3 { font-family: var(--font-pixel); font-size: 1rem; color: var(--accent); margin-bottom: .75rem; }
.phase p  { font-family: var(--font-mono); font-size: 1.4rem; color: var(--white); }

/* ==========================================================================
   GUESTBOOK / VISITOR COUNTER
   ========================================================================== */
.guestbook { text-align: center; }
.counter {
  display: inline-flex;
  gap: .25rem;
  margin-top: 1rem;
  font-family: var(--font-pixel);
  font-size: 1.6rem;
}
.counter span {
  background: var(--black);
  color: var(--accent);
  border: 3px solid var(--accent);
  padding: .4rem .55rem;
  box-shadow: var(--glow);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: var(--black);
  border-top: 4px solid var(--border);
  text-align: center;
  padding: 2rem 1rem;
}
.footer .socials { display: flex; gap: 1rem; justify-content: center; margin-bottom: 1rem; flex-wrap: wrap; }
.footer small { font-family: var(--font-mono); font-size: 1.2rem; color: var(--muted); }

/* ==========================================================================
   "ACCEPT THE TRUTH" MODAL (retro system dialog)
   ========================================================================== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, .8);
  display: grid; place-content: center;
  padding: 1rem;
}
.modal-overlay[hidden] { display: none; }
.modal {
  max-width: 460px;
  background: var(--card);
  border: 4px solid var(--border);
  box-shadow: var(--shadow-hard-lg);
}
.modal__bar {
  background: var(--secondary);
  color: var(--black);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  padding: .4rem .75rem;
  display: flex; justify-content: space-between; align-items: center;
}
.modal__body { padding: 1.5rem; text-align: center; }
.modal__body p { font-family: var(--font-mono); font-size: 1.4rem; color: var(--white); margin-bottom: 1.5rem; }
.modal__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 760px) {
  .truth, .steps, .stats, .app-grid { grid-template-columns: 1fr; }
  .nav { justify-content: center; }
}