/* ============ StacheCat — style.css ============ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Space+Grotesk:wght@400;500;700&display=swap');

:root{
  --cream: #f3e7d3;
  --cream-2: #eaddc4;
  --brown-dark: #4a2f22;
  --brown: #7a4a30;
  --brown-mid: #a9713f;
  --tan: #c99a5b;
  --orange: #ff8a3d;
  --orange-2: #ffb347;
  --pink: #ff6f91;
  --green: #2ecc71;
  --ink: #2c1c12;
  --card: #fffaf0;
  --shadow: rgba(74,47,34,0.25);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

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

h1,h2,h3, .logo, .bubble, .btn, .stat-num{
  font-family:'Baloo 2', cursive;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

::selection{ background:var(--orange); color:#fff; }

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 22px;
  border-radius:999px;
  font-weight:700;
  font-size:1rem;
  text-decoration:none;
  border:3px solid var(--brown-dark);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:4px 4px 0 var(--brown-dark);
  white-space:nowrap;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--brown-dark); }
.btn:active{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--brown-dark); }
.btn-orange{ background:var(--orange); color:#fff; }
.btn-cream{ background:var(--cream); color:var(--brown-dark); }
.btn-pink{ background:var(--pink); color:#fff; }
.btn-outline{ background:transparent; color:var(--brown-dark); }
.btn-sm{ padding:8px 14px; font-size:.85rem; border-width:2px; box-shadow:3px 3px 0 var(--brown-dark); }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(243,231,211,0.92);
  backdrop-filter:blur(6px);
  border-bottom:3px solid var(--brown-dark);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px;
  max-width:1180px; margin:0 auto;
  gap:12px;
  flex-wrap:wrap;
  row-gap:8px;
}
.logo{
  display:flex; align-items:center; gap:8px;
  font-size:1.4rem; font-weight:800; color:var(--brown-dark);
}
.logo .paw{ font-size:1.3rem; }
.nav-links{
  display:flex; gap:18px; align-items:center;
  font-weight:700; font-size:.95rem;
}
.nav-links a{ text-decoration:none; color:var(--brown-dark); opacity:.85; }
.nav-links a:hover{ opacity:1; text-decoration:underline wavy var(--orange); }
.nav-cta{ display:flex; gap:10px; }
.burger{ display:none; }

/* ---------- Marquee ---------- */
.marquee{
  background:var(--brown-dark);
  color:var(--cream);
  overflow:hidden;
  white-space:nowrap;
  border-bottom:3px solid var(--ink);
}
.marquee-track{
  display:inline-block;
  padding:8px 0;
  animation:scrollLeft 22s linear infinite;
  font-weight:700; letter-spacing:.5px;
  font-family:'Baloo 2',cursive;
}
.marquee-track span{ margin:0 22px; }
@keyframes scrollLeft{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- Hero / Room ---------- */
.room{
  position:relative;
  min-height:92vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:60px 20px 40px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 0%, #fff8ea 0%, var(--cream) 55%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  border-bottom:4px solid var(--brown-dark);
}

/* soft carpet texture */
.room::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(122,74,48,0.06) 1px, transparent 1px);
  background-size:14px 14px;
  opacity:.7;
  pointer-events:none;
}

/* floor / wall split for a sense of depth, like a real room corner */
.room-floor{
  position:absolute; left:0; right:0; bottom:0; height:44%;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,252,244,0.5) 0%, rgba(255,252,244,0) 65%),
    linear-gradient(180deg, var(--cream-2) 0%, #e3d0ab 100%);
  border-top:3px solid rgba(122,74,48,0.14);
  box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
  z-index:0;
}
.room-floor::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(122,74,48,0.07) 1px, transparent 1px);
  background-size:10px 10px;
  opacity:.8;
}

/* ---------- Cat trees (left/right, framing the scene) ---------- */
.cat-tree{
  position:absolute; bottom:0; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  filter:drop-shadow(2px 6px 4px rgba(74,47,34,0.2));
}
.cat-tree-left{ left:1%; }
.cat-tree-right{ right:1%; }
.cat-tree.short{ transform:scale(0.86); transform-origin:bottom center; }

.tree-platform-top{
  position:relative;
  width:92px; height:32px;
  background:linear-gradient(180deg,#caa06a,#a97c46);
  border-radius:50%;
  box-shadow:0 6px 10px rgba(74,47,34,0.25), inset 0 -4px 6px rgba(74,47,34,0.2);
}
.tree-platform-top::after{
  content:"";
  position:absolute; left:50%; top:-9px; transform:translateX(-50%);
  width:74px; height:18px;
  background:#ecd0a3;
  border-radius:50%;
}
.tree-toy{
  position:absolute; top:30px; left:50%; width:2px; height:34px;
  background:#8a5a34;
  transform-origin:top center;
  animation:toySwing 2.6s ease-in-out infinite;
}
.tree-toy::after{
  content:"";
  position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
  width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff9d5c, #e0672c);
  box-shadow:0 3px 4px rgba(0,0,0,.2);
}
@keyframes toySwing{
  0%,100%{ transform:rotate(-8deg); }
  50%{ transform:rotate(8deg); }
}
.tree-post{
  width:28px; height:190px;
  background:repeating-linear-gradient(180deg, #c9a06c 0 5px, #b98f57 5px 10px);
  border-radius:10px;
  box-shadow:inset -4px 0 6px rgba(74,47,34,0.25);
  margin-top:-10px;
}
.tree-base{
  width:64px; height:24px;
  background:linear-gradient(180deg,#d8ad72,#b98f57);
  border-radius:50%;
  margin-top:-8px;
  box-shadow:0 4px 6px rgba(74,47,34,0.2);
}

/* window glow at top */
.window{
  position:absolute;
  top:0; left:50%; transform:translateX(-50%);
  width:220px; height:110px;
  background:linear-gradient(180deg,#fff7e6,#ffe9c2);
  border:8px solid var(--brown-mid);
  border-top:none;
  border-radius:0 0 20px 20px;
  box-shadow:0 14px 26px rgba(74,47,34,0.15);
  opacity:.95;
}
.window::before{
  content:"";
  position:absolute; left:-8px; right:-8px; top:-4px; height:4px;
  background:var(--brown-mid);
  border-radius:4px;
}
.window::after{
  content:"";
  position:absolute; left:50%; top:0; bottom:0;
  width:8px; background:var(--brown-mid); transform:translateX(-50%);
}

.hero-title{
  position:relative;
  z-index:5;
  text-align:center;
  margin:0 0 6px;
}
.hero-title .ticker{
  display:inline-block;
  background:var(--ink);
  color:var(--orange-2);
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  padding:5px 14px;
  border-radius:999px;
  font-size:.85rem;
  letter-spacing:1px;
  margin-bottom:14px;
}
.hero-title h1{
  font-size:clamp(2.6rem, 9vw, 5.4rem);
  margin:0;
  color:var(--brown-dark);
  -webkit-text-stroke:3px var(--ink);
  letter-spacing:1px;
  text-shadow:6px 6px 0 var(--orange), 6px 6px 0 3px var(--ink);
  line-height:1;
}
.hero-sub{
  position:relative; z-index:5;
  text-align:center;
  font-size:clamp(1rem,2.4vw,1.25rem);
  max-width:560px;
  margin:18px auto 26px;
  color:var(--brown-dark);
  font-weight:500;
}
.hero-sub b{ color:var(--orange); }

.hero-ctas{
  position:relative; z-index:5;
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
  margin-bottom:20px;
}

/* ---------- Stage: the walking slippers ---------- */
.stage{
  position:relative;
  width:min(640px, 92vw);
  height:340px;
  margin:10px auto 0;
  z-index:3;
}

.floor-shadow{
  position:absolute;
  left:50%; bottom:18px; transform:translateX(-50%);
  width:82%; height:34px;
  background:radial-gradient(ellipse, rgba(74,47,34,0.35) 0%, rgba(74,47,34,0) 72%);
  filter:blur(2px);
  animation:shadowPulse 1.1s ease-in-out infinite;
}

/* the plush bed the slippers stand in, like the concept art */
.cat-bed{
  position:absolute;
  left:50%; bottom:2px; transform:translateX(-50%);
  width:min(380px, 84%); height:180px;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 38%, #6b4428 0%, #6b4428 52%, #5a381f 68%, #5a381f 100%);
  box-shadow:
    0 0 0 16px #dcbb8c,
    0 0 0 20px #c9a274,
    0 16px 26px rgba(74,47,34,0.35);
  z-index:0;
}
@keyframes shadowPulse{
  0%,100%{ transform:translateX(-50%) scaleX(1); opacity:.9; }
  50%{ transform:translateX(-50%) scaleX(0.9); opacity:.6; }
}

.slippers{
  position:absolute;
  left:50%; bottom:26px; transform:translateX(-50%);
  display:flex;
  align-items:flex-end;
}

.slipper{
  position:relative;
  width:168px;
  height:auto;
  filter:drop-shadow(0 10px 8px rgba(74,47,34,0.28));
  transform-origin:70% 100%;
}
.slipper img{ width:100%; height:auto; pointer-events:none; user-select:none; }

.slipper-left{ margin-right:-26px; z-index:2; animation:stepLeft 1.1s ease-in-out infinite; }
.slipper-right{ margin-left:-26px; z-index:1; animation:stepRight 1.1s ease-in-out infinite; animation-delay:.55s; }

@keyframes stepLeft{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  25%{ transform: translateY(-26px) rotate(-10deg); }
  50%{ transform: translateY(0) rotate(3deg); }
}
@keyframes stepRight{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  25%{ transform: translateY(-26px) rotate(10deg); }
  50%{ transform: translateY(0) rotate(-3deg); }
}

.slippers.meow-bounce .slipper-left,
.slippers.meow-bounce .slipper-right{
  animation-play-state:running;
}

/* speech bubble */
.meow-bubble{
  position:absolute;
  top:-6px; left:50%;
  transform:translate(-50%,-10px) scale(.6);
  background:#fff;
  border:3px solid var(--ink);
  color:var(--ink);
  font-family:'Baloo 2',cursive;
  font-weight:800;
  font-size:1.15rem;
  padding:8px 16px;
  border-radius:16px;
  opacity:0;
  pointer-events:none;
  z-index:6;
  white-space:nowrap;
  transition:opacity .18s ease, transform .18s ease;
}
.meow-bubble::after{
  content:"";
  position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
  border-width:10px 8px 0 8px;
  border-style:solid;
  border-color:#fff transparent transparent transparent;
  filter:drop-shadow(0 2px 0 var(--ink));
}
.meow-bubble.show{
  opacity:1;
  transform:translate(-50%,-38px) scale(1);
}

/* Scattered toys / clutter around the room */
.clutter{ position:absolute; z-index:2; pointer-events:none; user-select:none; filter:drop-shadow(0 4px 3px rgba(0,0,0,0.15)); }
.clutter.spin{ animation:spin 6s linear infinite; }
.clutter.wob{ animation:wobble 3.4s ease-in-out infinite; }
@keyframes spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes wobble{ 0%,100%{ transform:rotate(-6deg);} 50%{ transform:rotate(6deg);} }

.box{
  position:absolute;
  background:#d8a86a;
  border:3px solid var(--brown-dark);
  border-radius:4px;
  box-shadow:inset 0 0 0 3px #f0c88a;
  font-family:'Baloo 2',cursive; font-weight:800; color:var(--brown-dark);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:.72rem; line-height:1.1;
}

/* ---------- Puddle (the joke decor) ---------- */
.puddle-wrap{
  position:absolute; z-index:1;
  bottom:8px;
}
.puddle{
  width:120px; height:56px;
  background:radial-gradient(ellipse at 40% 35%, #fff6b0 0%, #f4d949 45%, #cdae1f 80%, rgba(205,174,31,0) 100%);
  border-radius:50%;
  opacity:.85;
  animation:jiggle 3.2s ease-in-out infinite;
  box-shadow:0 0 0 2px rgba(180,150,20,0.25) inset;
}
.puddle.poop{
  background:none;
}
@keyframes jiggle{
  0%,100%{ transform:scale(1,1); }
  50%{ transform:scale(1.04,0.94); }
}
.puddle-label{
  position:absolute;
  top:-26px; left:50%; transform:translateX(-50%) rotate(-4deg);
  background:#fff; border:2px solid var(--ink); border-radius:8px;
  padding:2px 8px; font-size:.68rem; font-weight:700;
  font-family:'Baloo 2',cursive; white-space:nowrap;
}
.stink{
  position:absolute; font-size:1.1rem;
  animation:stinkUp 2.6s ease-in infinite;
  opacity:0;
}
@keyframes stinkUp{
  0%{ opacity:0; transform:translateY(0) translateX(0) rotate(0deg); }
  15%{ opacity:.8; }
  100%{ opacity:0; transform:translateY(-46px) translateX(6px) rotate(20deg); }
}

/* ---------- Section shared ---------- */
section{ position:relative; padding:80px 0; }
.section-head{ text-align:center; margin-bottom:44px; }
.eyebrow{
  display:inline-block;
  font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:#fff; background:var(--brown); padding:5px 14px; border-radius:999px;
  font-size:.75rem; margin-bottom:12px;
}
.section-head h2{
  font-size:clamp(2rem,5vw,3rem);
  color:var(--brown-dark);
  margin:0;
}
.section-head p{ max-width:560px; margin:14px auto 0; color:#5a4433; }

/* ---------- About / lore ---------- */
.about{ background:var(--card); border-top:4px solid var(--brown-dark); border-bottom:4px solid var(--brown-dark); }
.about-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;
}
.lore-card{
  background:var(--cream);
  border:3px solid var(--ink);
  border-radius:20px;
  padding:26px 28px;
  box-shadow:6px 6px 0 var(--ink);
}
.lore-card h3{ margin-top:0; color:var(--brown-dark); font-size:1.3rem; }
.lore-card p{ line-height:1.65; color:#4a3826; }
.lore-log{
  margin-top:16px;
  border-top:2px dashed var(--brown-mid);
  padding-top:14px;
  font-size:.9rem;
}
.lore-log div{ margin-bottom:8px; }
.lore-log b{ color:var(--orange); }

.polaroid-stack{ position:relative; height:380px; }
.polaroid{
  position:absolute;
  width:230px;
  background:#fff;
  padding:10px 10px 34px;
  border-radius:6px;
  box-shadow:0 14px 24px rgba(0,0,0,0.22);
  border:1px solid #e5d9c2;
}
.polaroid img{ border-radius:2px; }
.polaroid figcaption{
  text-align:center; margin-top:8px; font-family:'Baloo 2',cursive; font-weight:700; color:var(--brown-dark); font-size:.85rem;
}
.p1{ top:0; left:8%; transform:rotate(-8deg); z-index:2; }
.p2{ top:60px; right:2%; transform:rotate(7deg); z-index:1; }

/* ---------- CA / tokenomics ---------- */
.ca-section{ background:var(--brown-dark); color:var(--cream); }
.ca-section .eyebrow{ background:var(--orange); color:var(--ink); }
.ca-section .section-head h2{ color:#fff; }
.ca-section .section-head p{ color:#e6d6bf; }

.ca-box{
  max-width:640px; margin:0 auto 40px;
  background:rgba(255,255,255,0.06);
  border:2px dashed var(--orange-2);
  border-radius:16px;
  padding:18px 22px;
  display:flex; align-items:center; gap:14px; justify-content:space-between;
  flex-wrap:wrap;
}
.ca-box code{
  font-family:monospace; font-size:.95rem; color:var(--orange-2);
  overflow-wrap:anywhere;
}
.ca-note{ text-align:center; font-size:.82rem; color:#c7b494; margin-top:-24px; margin-bottom:40px;}

.tok-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.tok-card{
  background:rgba(255,255,255,0.07);
  border:2px solid rgba(255,255,255,0.15);
  border-radius:14px;
  padding:22px 16px;
  text-align:center;
}
.stat-num{ font-size:1.6rem; color:var(--orange-2); }
.tok-card p{ margin:6px 0 0; font-size:.85rem; color:#e6d6bf; }

/* ---------- How to buy ---------- */
.steps{ background:var(--cream); }
.steps-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.step-card{
  background:var(--card);
  border:3px solid var(--ink);
  border-radius:18px;
  padding:26px 22px;
  box-shadow:6px 6px 0 var(--ink);
  position:relative;
}
.step-num{
  position:absolute; top:-18px; left:-14px;
  background:var(--orange); color:#fff; font-family:'Baloo 2',cursive; font-weight:800;
  width:40px; height:40px; border-radius:50%; border:3px solid var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.step-card h3{ margin-top:6px; color:var(--brown-dark); }
.step-card p{ color:#5a4433; line-height:1.5; font-size:.92rem; }

/* ---------- FAQ ---------- */
.faq{ background:var(--card); border-top:4px solid var(--brown-dark); }
.faq-item{
  max-width:760px; margin:0 auto 14px;
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:14px;
  overflow:hidden;
}
.faq-item summary{
  cursor:pointer; list-style:none;
  padding:16px 20px; font-weight:700; font-family:'Baloo 2',cursive; color:var(--brown-dark);
  display:flex; justify-content:space-between; align-items:center;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.4rem; color:var(--orange); }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ padding:0 20px 18px; margin:0; color:#5a4433; line-height:1.55; }

/* ---------- Footer ---------- */
footer{
  background:var(--ink);
  color:#e6d6bf;
  padding:46px 0 26px;
  text-align:center;
}
footer .logo{ color:#fff; justify-content:center; margin-bottom:14px; }
.footer-links{ display:flex; gap:20px; justify-content:center; margin:18px 0; flex-wrap:wrap; }
.footer-links a{ text-decoration:none; color:#e6d6bf; font-weight:700; }
.footer-links a:hover{ color:var(--orange-2); }
.disclaimer{ max-width:640px; margin:20px auto 0; font-size:.76rem; color:#9c8a72; line-height:1.5; }
.copyright{ font-size:.78rem; color:#8a7660; margin-top:22px; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px;
  font-weight:700; font-family:'Baloo 2',cursive; opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; z-index:99;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .nav-links{ display:none; }
  .about-grid{ grid-template-columns:1fr; }
  .polaroid-stack{ height:320px; margin-top:20px; }
  .tok-grid{ grid-template-columns:repeat(2,1fr); }
  .steps-grid{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .cat-tree{ display:none; }
}
@media (max-width:520px){
  .stage{ height:270px; }
  .slipper{ width:118px; }
  .box{ display:none; }
  .cat-bed{ width:88%; height:150px; }
}