/* ============================================================
   $MEOW - "MEOWHOOD" edition.
   Volt lime × black, curved section seams, heavy block type +
   marker accents. Faithful to the owner's mockup, coin-ified copy.
   ============================================================ */

:root{
  --volt:#D9F226;          
  --volt-hi:#E6FA4F;
  --blk:#000;
  --blk-2:#161613;
  --card:#F1F1EC;          
  --ink:#101010;
  --text-dark:#22231C;     
  --text-light:#E9E9DF;    
  --red:#B3261E;           
  --r-md:18px; --r-lg:26px; --r-xl:44px;
  --maxw:1200px;
  --f-heavy:"Changa One", sans-serif;
  --f-marker:"Chelsea Market", cursive;
  --f-body:"Inter", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:24px;
  zoom:1.25} 
body{
  margin:0; font-family:var(--f-body); color:var(--ink); background:var(--volt);
  line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-user-select:none; user-select:none; 
}
h1,h2,h3{margin:0; font-family:var(--f-heavy); font-weight:400; text-transform:uppercase; line-height:.95; letter-spacing:.005em}
p{margin:0 0 1rem}
a{color:inherit}
img{max-width:100%}
figure{margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.5rem)}
section{position:relative; scroll-margin-top:24px}
.marker{font-family:var(--f-marker); font-weight:400; text-transform:none; letter-spacing:.01em}

.skip{position:fixed; top:10px; left:10px; z-index:400; background:var(--blk); color:#fff;
  padding:.7rem 1.1rem; border-radius:999px; font-family:var(--f-mono); font-weight:600; font-size:.85rem;
  text-decoration:none; transform:translateY(-300%); transition:transform .2s}
.skip:focus-visible{transform:translateY(0)}
:focus-visible{outline:3px solid var(--blk); outline-offset:3px}
.on-black :focus-visible, .on-black:focus-visible{outline-color:var(--volt)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--f-heavy); font-size:.92rem; letter-spacing:.04em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; border:0; border-radius:999px;
  padding:1rem 1.9rem; min-height:52px;
  background:var(--blk); color:#fff;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(11,11,9,.28)}
.btn:active{transform:translateY(1px) scale(.98); box-shadow:none}
.btn-volt{background:var(--volt); color:var(--blk)}
.btn-volt:hover{background:var(--volt-hi); box-shadow:0 10px 24px rgba(0,0,0,.45)}
.btn-disabled, .btn-disabled:hover, .btn-disabled:active{
  background:#2E2E28; color:rgba(233,233,223,.45);
  cursor:not-allowed; transform:none; box-shadow:none}

.ca-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-mono); font-weight:600; font-size:.82rem;
  background:var(--blk); color:var(--volt);
  border:0; border-radius:999px; padding:.65rem 1.1rem; min-height:44px; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.ca-chip:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(11,11,9,.3)}
.ca-chip:active{transform:scale(.97)}
.ca-chip.copied{color:#fff}
.ca-chip.copy-fail{color:#FF8D80}
.ca-chip .ic-check{display:none}
.ca-chip.copied .ic-copy{display:none}
.ca-chip.copied .ic-check{display:inline}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{padding:1.1rem 0}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.5rem);
  display:flex; align-items:center; gap:1.2rem}
.brand{display:inline-flex; align-items:center; gap:.65rem; text-decoration:none}
.brand-badge{width:46px; height:46px; border-radius:50%; border:3px solid var(--blk);
  overflow:hidden; background:var(--volt); flex:0 0 auto}
.brand-badge img{width:100%; height:100%; object-fit:cover; display:block}
.brand-name{font-family:var(--f-heavy); font-size:1.3rem; letter-spacing:.01em; color:var(--blk); text-transform:uppercase}
.brand-name .marker{font-size:1.15em; margin-left:.06em}
.nav-links{display:flex; align-items:center; gap:2rem; margin-left:auto}
.nav-links a{font-family:var(--f-heavy); font-size:.85rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--blk); text-decoration:none; transition:opacity .15s}
.nav-links a:hover{opacity:.65}
.nav-socials{display:flex; gap:.6rem; margin-left:1.4rem}
.nav-socials .soc{width:44px; height:44px}
.soc{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:50%; background:var(--blk); color:var(--volt); text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease}
.soc:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(11,11,9,.3)}
.nav-burger{display:none; margin-left:auto; width:46px; height:46px; border:3px solid var(--blk);
  border-radius:50%; background:transparent; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px}
.nav-burger span{display:block; width:18px; height:2.5px; border-radius:2px; background:var(--blk);
  transition:transform .25s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}
.mobile-menu{display:none; padding:0 clamp(1.1rem,4vw,2.5rem) 1rem}
.mobile-menu.open{display:block}
@media (min-width:961px){ .mobile-menu,.mobile-menu.open{display:none} } 
.mobile-menu a{display:block; font-family:var(--f-heavy); font-size:1.5rem; text-transform:uppercase;
  color:var(--blk); text-decoration:none; padding:.45rem 0}
.mm-socials{display:flex; gap:.6rem; margin-top:.6rem}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:clamp(1.2rem,3vw,2.5rem) 0 0; overflow:visible}
.hero-grid{position:relative; display:grid; grid-template-columns:1.05fr .95fr 1.05fr; gap:clamp(1rem,2.5vw,2rem)}
.hero-title{position:relative; z-index:1}
.hero-title .l1{font-size:clamp(4rem,14vw,12.5rem); color:var(--blk); display:block;
  line-height:.92; white-space:nowrap; width:max-content}
.hero-title .l2{font-family:var(--f-marker); font-size:clamp(3rem,10.5vw,9.5rem); line-height:.95;
  display:block; margin-top:.15rem; color:var(--blk); white-space:nowrap; width:max-content}
.hero-pitch{padding-top:clamp(.4rem,1.5vw,1.2rem)}
.hero-pitch h2{font-size:clamp(1.5rem,2.6vw,2.2rem); color:var(--blk); margin-bottom:1rem}
.hero-pitch p{color:var(--text-dark); font-weight:500; font-size:.98rem; max-width:38ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin-top:1.4rem}
.hero-mascot{position:absolute; z-index:3; left:50%; bottom:clamp(-13rem,-15vw,-8rem);
  transform:translateX(-46%); width:clamp(320px,40vw,540px)}
.hero-mascot img{width:100%; display:block}
.hero-title{grid-column:1}
.hero-pitch{grid-column:3; position:relative; z-index:4} 
.mascot-ph{
  width:min(100%,340px); aspect-ratio:3/4; border:3px dashed rgba(11,11,9,.45); border-radius:var(--r-lg);
  background:rgba(255,255,255,.35); display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:.5rem; padding:1.4rem; color:var(--blk);
}
.mascot-ph .ph-title{font-family:var(--f-heavy); font-size:.9rem; text-transform:uppercase}
.mascot-ph .ph-sub{font-family:var(--f-mono); font-size:.75rem; opacity:.75; max-width:24ch}

.seam{display:block; width:100%; height:clamp(60px,9vw,130px); margin-bottom:-1px} 
.seam path{fill:var(--blk)}
.seam.flip{margin:0 0 -1px}
.seam.flip path{fill:var(--volt)}

/* ============================================================
   THUMB STRIP 
   ============================================================ */
.band{background:var(--blk); color:var(--text-light);
  display:flow-root; overflow-x:clip} 
.thumbs{display:flex; justify-content:space-between;
  margin-top:clamp(-4.5rem,-6vw,-3rem);
  padding:0 0 clamp(2rem,4vw,3rem); position:relative; z-index:2}
.t-group{display:flex; gap:clamp(.9rem,2.5vw,1.8rem)}
.thumb{
  width:clamp(96px,12vw,150px); aspect-ratio:3/4; border-radius:var(--r-md);
  border:2.5px solid #2A2A24; overflow:hidden; background:#1C1C17; position:relative;
  transition:transform .18s ease, border-color .18s ease;
}
.thumb:hover{transform:translateY(-6px); border-color:var(--volt)}
.t-group:first-child .thumb:nth-child(1){rotate:-8deg; translate:0 8px}
.t-group:first-child .thumb:nth-child(2){rotate:5deg; translate:0 -6px}
.t-group:last-child .thumb:nth-child(1){rotate:-5deg; translate:0 4px}
.t-group:last-child .thumb:nth-child(2){rotate:7deg; translate:0 -4px}
.thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .45s ease}
.thumb img.swapping{opacity:0} 
.thumb .t-ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em; color:#8F8F82; text-align:center; padding:.5rem}

.about-video, .about-scrim, .about-blackout{position:absolute; top:0; height:100%; left:50%; width:100vw;
  transform:translateX(-50%); z-index:0; pointer-events:none}
.about-video{object-fit:contain; display:block; background:#000} 
.about-scrim{background:linear-gradient(90deg, rgba(11,11,9,.45) 0%, rgba(11,11,9,.34) 30%, rgba(11,11,9,.8) 58%, rgba(11,11,9,.92) 100%)}
.about-blackout{background:#000; opacity:0; transition:opacity .5s ease}
.about-blackout.on{opacity:1}

/* ============================================================
   ABOUT
   ============================================================ */
.about{padding:clamp(2rem,5vw,4rem) 0 clamp(3.5rem,7vw,5.5rem); position:relative}
.about-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(1.6rem,4vw,3.5rem); align-items:center; position:relative; z-index:1}
.about-art{position:relative; z-index:3}
.about-art img{width:min(120%,588px); max-width:none; display:block;
  margin-left:clamp(-5rem,-5vw,0px); 
  margin-bottom:clamp(-6rem,-8vw,-3rem)} 
.about-art .mascot-ph{border-color:rgba(233,233,223,.35); background:rgba(255,255,255,.05); color:var(--text-light)}
.about-copy h2{color:var(--volt); font-size:clamp(2.2rem,5vw,3.8rem);
  text-shadow:0 1px 2px #000, 0 2px 18px rgba(0,0,0,.75)} 
.about-copy h2 .marker{display:block; font-size:1.02em; margin-top:.15rem; color:var(--volt)}
.about-copy p{color:#fff; font-weight:600; font-size:.98rem; max-width:52ch; margin-top:1.2rem;
  text-shadow:0 1px 6px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9)} 

/* ============================================================
   HOW TO BUY
   ============================================================ */
.buy{padding:clamp(3.5rem,7vw,5.5rem) 0 clamp(3rem,6vw,5rem)}
.buy-head{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:end; margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.buy-head h2{font-size:clamp(2.2rem,5vw,3.6rem); color:var(--blk); max-width:12ch}
.buy-head p{color:var(--text-dark); font-weight:500; font-size:.98rem; max-width:46ch; margin:0}
.step-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.2vw,1.6rem)}
.step{
  background:var(--card); border:3px solid var(--blk); border-radius:var(--r-lg);
  padding:1.3rem 1.2rem 1.4rem; display:flex; flex-direction:column; gap:.5rem;
  transition:transform .18s ease, box-shadow .18s ease;
}
.step:hover{transform:translateY(-5px); box-shadow:0 14px 28px rgba(11,11,9,.18)}
.step-num{font-family:var(--f-marker); font-size:1.4rem; color:var(--blk)}
.step h3{font-size:1rem; color:var(--blk); line-height:1.15}
.step p{margin:0; font-size:.86rem; color:#3E4038; font-weight:500}
.step .btn{margin-top:auto; align-self:flex-start; padding:.72rem 1.25rem; min-height:44px; font-size:.8rem}
.btn-bankr{width:20px; height:auto; display:block; border-radius:4px}

/* ============================================================
   COMMUNITY
   ============================================================ */
.community{padding:clamp(1rem,3vw,2rem) 0 clamp(3.5rem,7vw,5.5rem); position:relative; z-index:20;}
.community-panel{
  position:relative; overflow:visible; background:var(--blk); color:var(--text-light);
  border-radius:var(--r-xl);
  padding:clamp(2.2rem,5vw,4rem) clamp(1.4rem,4vw,3.5rem);
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,4vw,3rem); align-items:center;
}
.community-panel h2{color:var(--volt); font-size:clamp(2.2rem,5vw,3.8rem)}
.community-panel h2 .marker{display:block; font-size:1.02em; margin-top:.15rem}
.community-panel .c-sub{color:var(--text-light); font-weight:500; max-width:42ch; margin-top:1rem}
.community-cta{display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.6rem}
.community-art{position:static; min-height:300px}
.community-art img{position:absolute; bottom:0; right:clamp(.5rem,3vw,2.5rem);
  width:min(50%,538px); display:block; margin:0; z-index:10;}
.community-art .mascot-ph{border-color:rgba(233,233,223,.35); background:rgba(255,255,255,.05);
  color:var(--text-light); margin:0 auto}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{padding:2.2rem 0 2.8rem; border-top:3px solid var(--blk)}
.footer-top{display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; margin-bottom:1.2rem}
.footer-ca{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap}
.footer-ca .label{font-family:var(--f-heavy); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em}
.footer-ca .addr{font-family:var(--f-mono); font-weight:600; font-size:.8rem; word-break:break-all; color:var(--text-dark)}
.disclaimer{font-size:.78rem; color:#3E4038; max-width:78ch; line-height:1.6; margin:0; font-weight:500}

.bankr-credit{display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  font-family:var(--f-heavy); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  color:#3E4038; transition:opacity .15s ease; -webkit-tap-highlight-color:transparent}
.bankr-credit:hover{opacity:.68}
.bankr-credit img{width:22px; height:auto; display:block}
.footer-bankr{margin-bottom:1.1rem}

/* ============================================================
   SCROLL-REVEAL
   ============================================================ */
.js .reveal{opacity:0; translate:0 16px; transition:opacity .5s ease, translate .5s cubic-bezier(.2,.8,.25,1)}
.js .reveal.in{opacity:1; translate:0 0}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .nav-links,.nav-socials{display:none}
  .nav-burger{display:inline-flex}
  .hero-grid{grid-template-columns:1fr}
  .hero-title{grid-column:auto}
  .hero-pitch{grid-column:auto}
  .hero-mascot{position:static; transform:none; width:min(72%,340px); margin:0 auto -4rem}
  .about-grid{grid-template-columns:1fr}
  .about-art img{width:min(100%,420px); max-width:100%; margin:0 auto} 
  .buy-head{grid-template-columns:1fr}
  .step-grid{grid-template-columns:repeat(2,1fr)}
  .community-panel{grid-template-columns:1fr}
  .community-art{min-height:0}
  .community-art img{position:static; width:min(70%,340px); margin:0 auto}
  .thumbs{flex-wrap:wrap; justify-content:center; margin-top:clamp(-3rem,-5vw,-1.5rem)}
}
@media (max-width:640px){
  .hero-mascot{margin:0 auto -3.5rem}
  .step-grid{grid-template-columns:1fr}
  .thumbs{gap:.7rem}
  .thumb{width:clamp(86px,26vw,120px)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .js .reveal,.js .reveal.in{opacity:1 !important; translate:none !important}
}