/* ==========================================================================
   CLAW STARS — v3  |  Professional Rebuild
   Dark cosmic base · Pink accent · Space Grotesk display · Nunito body
   ========================================================================== */

/* ---- Reset ---- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ---- Tokens ---- */
:root{
  /* palette — matched to character SVG colors */
  --pink:#D95994;           /* matches Astro Mouse primary */
  --pink-bright:#E86BA8;
  --pink-dark:#B8447A;
  --pink-glow:rgba(217,89,148,.4);
  --navy:#1A1B3A;
  --navy-mid:#252750;
  --navy-light:#32345E;
  --surface:#FEFBFD;
  --surface-warm:#FFF6FA;
  --white:#FFFFFF;
  --text:#EDEDF4;
  --text-muted:rgba(237,237,244,.55);
  --text-dark:#2B2D5E;
  --text-body:#555577;
  --teal:#4ABFBF;
  --purple:#8B7ABF;
  --orange:#F0963C;
  --blue:#29B0D6;            /* matches Star Hedgehog primary */
  --green:#6BBF5A;

  /* typography */
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,sans-serif;

  /* spacing */
  --space-xs:8px; --space-sm:16px; --space-md:24px;
  --space-lg:48px; --space-xl:80px; --space-2xl:120px;

  /* radii */
  --r:16px; --r-sm:10px; --r-pill:9999px;

  /* transitions */
  --ease:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --dur:.35s;
}

/* ---- Base ---- */
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  font-family:var(--font-body);
  font-weight:500;
  background:var(--navy);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---- Global star field on entire page ---- */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,.45),transparent),
    radial-gradient(1px 1px at 40% 70%,rgba(255,255,255,.35),transparent),
    radial-gradient(1.5px 1.5px at 65% 10%,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 80% 50%,rgba(255,255,255,.4),transparent),
    radial-gradient(1px 1px at 25% 85%,rgba(255,255,255,.3),transparent),
    radial-gradient(1.5px 1.5px at 92% 30%,rgba(255,255,255,.45),transparent),
    radial-gradient(1px 1px at 55% 45%,rgba(255,255,255,.25),transparent),
    radial-gradient(1px 1px at 5% 60%,rgba(255,255,255,.35),transparent),
    radial-gradient(1.5px 1.5px at 30% 40%,rgba(255,255,255,.5),transparent),
    radial-gradient(1.5px 1.5px at 70% 80%,rgba(255,255,255,.4),transparent),
    radial-gradient(1px 1px at 15% 65%,rgba(255,255,255,.3),transparent),
    radial-gradient(2px 2px at 85% 15%,rgba(217,89,148,.4),transparent),
    radial-gradient(2px 2px at 50% 50%,rgba(41,176,214,.35),transparent),
    radial-gradient(2px 2px at 75% 70%,rgba(139,122,191,.35),transparent);
  background-size:600px 600px;
}

/* All content sits above stars */
.site-header,.hero,.marquee,.section,.gallery-section,.site-footer,
.skip-link{position:relative;z-index:1;}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit}

.wrap{max-width:1140px;margin:0 auto;padding:0 var(--space-md)}

/* ---- Skip link ---- */
.skip-link{
  position:absolute;top:-100%;left:var(--space-sm);
  background:var(--pink);color:var(--white);
  padding:12px 24px;border-radius:var(--r-sm);
  font-weight:700;z-index:9999;transition:top .2s;
}
.skip-link:focus{top:var(--space-sm)}

/* ---- Fade-in animation ---- */
.fade-in{
  opacity:0;transform:translateY(32px);
  transition:opacity .7s var(--ease),transform .7s var(--spring);
}
.fade-in.is-visible{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .fade-in{opacity:1;transform:none;transition:none}
  .hero-mascot img,.hero-nebula,
  .hero-scroll-hint,.hero-badge__glow{animation:none!important}
}

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.top-bar{
  background:var(--pink);
  color:var(--white);
  text-align:center;
  padding:5px var(--space-md);
  font-size:.82rem;font-weight:600;
  position:relative;z-index:1001;
}
.top-bar__inner{
  display:flex;align-items:center;justify-content:center;
  gap:8px;flex-wrap:wrap;
}
.top-bar__link{
  color:var(--white);text-decoration:underline;
  text-underline-offset:2px;font-weight:700;
  transition:opacity var(--dur);
  padding:2px 8px;min-height:auto;
  display:inline-flex;align-items:center;
}
.top-bar__link:hover{opacity:.8}

/* ==========================================================================
   NAV
   ========================================================================== */
.site-header{
  position:fixed;top:38px;left:0;right:0;z-index:1000;
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),top var(--dur) var(--ease);
}
.site-header.scrolled{top:0}
.site-header.scrolled{
  top:0;
  background:rgba(26,27,58,.92);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 1px 0 rgba(255,255,255,.04);
}
.site-header.scrolled .nav-inner{height:52px}
.site-header.scrolled .logo img{height:42px}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1140px;margin:0 auto;padding:0 var(--space-md);height:72px;
  transition:height var(--dur) var(--ease);
}
.logo{display:flex;align-items:center}
.logo img{height:60px;width:auto;transition:height var(--dur) var(--ease)}
.nav-menu{display:flex;align-items:center;gap:6px;list-style:none}
.nav-menu a{
  font-family:var(--font-display);font-weight:500;font-size:.88rem;
  color:var(--text-muted);padding:8px 18px;border-radius:var(--r-pill);
  transition:color var(--dur),background var(--dur);
  letter-spacing:.01em;
}
.nav-menu a:hover,.nav-menu a:focus-visible{color:var(--white);background:rgba(255,255,255,.06)}
.nav-menu a:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.nav-cta{
  background:var(--pink)!important;color:var(--white)!important;
  font-weight:600!important;
  box-shadow:0 0 24px var(--pink-glow);
  transition:transform var(--dur) var(--spring),box-shadow var(--dur),background var(--dur)!important;
}
.nav-cta:hover{background:var(--pink-bright)!important;transform:translateY(-2px);box-shadow:0 0 32px var(--pink-glow)!important}

.nav-toggle{
  display:none;flex-direction:column;gap:5px;padding:10px;
  background:0;border:0;cursor:pointer;border-radius:var(--r-sm);
  min-width:44px;min-height:44px;
  align-items:center;justify-content:center;
}
.nav-toggle:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.nav-toggle span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:all var(--dur) var(--spring);transform-origin:center}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:140px var(--space-md) 80px;
  overflow:hidden;
}

/* --- Starfield --- */
.hero-cosmos{position:absolute;inset:0;overflow:hidden}

.stars{
  position:absolute;inset:0;
  background-repeat:repeat;
  animation:drift linear infinite;
}
.stars--sm{
  background-image:
    radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 40% 70%,rgba(255,255,255,.4),transparent),
    radial-gradient(1px 1px at 65% 10%,rgba(255,255,255,.3),transparent),
    radial-gradient(1px 1px at 80% 50%,rgba(255,255,255,.45),transparent),
    radial-gradient(1px 1px at 25% 85%,rgba(255,255,255,.35),transparent),
    radial-gradient(1px 1px at 92% 30%,rgba(255,255,255,.25),transparent),
    radial-gradient(1px 1px at 55% 45%,rgba(255,255,255,.3),transparent),
    radial-gradient(1px 1px at 5% 60%,rgba(255,255,255,.4),transparent);
  background-size:300px 300px;
  animation-duration:90s;
}
.stars--md{
  background-image:
    radial-gradient(1.5px 1.5px at 30% 40%,rgba(255,255,255,.6),transparent),
    radial-gradient(1.5px 1.5px at 70% 80%,rgba(255,255,255,.5),transparent),
    radial-gradient(1.5px 1.5px at 15% 65%,rgba(255,255,255,.45),transparent),
    radial-gradient(1.5px 1.5px at 85% 15%,rgba(255,255,255,.55),transparent);
  background-size:400px 400px;
  animation-duration:120s;
}
.stars--lg{
  background-image:
    radial-gradient(2px 2px at 50% 50%,rgba(232,91,155,.6),transparent),
    radial-gradient(2px 2px at 20% 30%,rgba(74,184,224,.5),transparent),
    radial-gradient(2.5px 2.5px at 75% 70%,rgba(139,122,191,.5),transparent);
  background-size:500px 500px;
  animation-duration:150s;
}

@keyframes drift{0%{transform:translateY(0)}100%{transform:translateY(-300px)}}

.hero-nebula{
  position:absolute;top:30%;left:50%;width:900px;height:900px;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(ellipse at 40% 50%,rgba(232,91,155,.12) 0%,transparent 60%),
    radial-gradient(ellipse at 65% 55%,rgba(74,184,224,.08) 0%,transparent 55%),
    radial-gradient(ellipse at 50% 45%,rgba(139,122,191,.1) 0%,transparent 50%);
  filter:blur(60px);
  animation:nebula-breathe 10s ease-in-out infinite alternate;
}
@keyframes nebula-breathe{0%{opacity:.6;transform:translate(-50%,-50%) scale(.95)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}

/* --- Hero layout: text left, mascot right --- */
.hero-layout{
  display:flex;align-items:center;gap:var(--space-xl);
  position:relative;z-index:2;
  max-width:1140px;width:100%;
  padding:0 var(--space-md);
}
.hero-content{flex:1;min-width:0}

.hero-badge{
  display:flex;align-items:center;justify-content:center;gap:14px;
  background:rgba(232,91,155,.10);
  border:1.5px solid rgba(232,91,155,.4);
  padding:14px 32px;border-radius:var(--r);
  font-family:var(--font-display);font-size:1rem;font-weight:600;
  color:var(--white);letter-spacing:.04em;
  margin-bottom:var(--space-md);
  backdrop-filter:blur(8px);
  position:relative;overflow:hidden;
  width:460px;max-width:100%;
}
.hero-badge strong{color:var(--pink-bright);font-weight:700}
.hero-badge__glow{
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(232,91,155,.15),transparent);
  animation:badge-shimmer 3s ease-in-out infinite;
}
@keyframes badge-shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
.pulse{
  width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px rgba(107,191,90,.6);
  animation:pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.5rem,6vw,4.5rem);
  font-weight:700;line-height:1.08;
  letter-spacing:-.03em;
  color:var(--white);
  margin-bottom:var(--space-md);
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(135deg,var(--pink) 0%,var(--purple) 50%,var(--blue) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-sub{
  font-size:clamp(1rem,2vw,1.2rem);
  color:var(--text-muted);max-width:520px;margin:0 auto var(--space-lg);
  line-height:1.7;
}

.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

.hero-social{
  display:flex;gap:12px;margin-top:var(--space-lg);
}
.hero-social a{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);
  border:1px solid rgba(255,255,255,.1);
  transition:all var(--dur) var(--spring);
}
.hero-social a:hover{
  color:var(--white);border-color:var(--pink);
  background:rgba(232,91,155,.1);
  transform:translateY(-2px);
}
.hero-social a:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

/* --- Hero mascot (big, prominent, right side) --- */
.hero-mascot{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
}
.hero-mascot img{
  width:clamp(280px,35vw,480px);height:auto;
  filter:drop-shadow(0 24px 64px rgba(41,176,214,.3));
  animation:mascot-drift 6s var(--ease) infinite;
}
@keyframes mascot-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}

.hero-scroll-hint{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  z-index:2;color:var(--text-muted);
  animation:bounce-down 2s ease-in-out infinite;
}
@keyframes bounce-down{0%,100%{transform:translateX(-50%) translateY(0);opacity:.4}50%{transform:translateX(-50%) translateY(8px);opacity:.8}}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 36px;border-radius:var(--r-pill);
  font-family:var(--font-display);font-weight:600;font-size:.92rem;
  letter-spacing:.01em;cursor:pointer;
  border:2px solid transparent;
  transition:all var(--dur) var(--spring);
}
.btn:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

.btn--accent{
  background:var(--pink);color:var(--white);border-color:var(--pink);
  box-shadow:0 0 32px var(--pink-glow),inset 0 1px 0 rgba(255,255,255,.15);
}
.btn--accent:hover{
  background:var(--pink-bright);border-color:var(--pink-bright);
  transform:translateY(-3px);
  box-shadow:0 0 48px var(--pink-glow),inset 0 1px 0 rgba(255,255,255,.2);
}

.btn--ghost{
  background:transparent;color:var(--text);border-color:rgba(255,255,255,.2);
}
.btn--ghost:hover{
  border-color:var(--white);color:var(--white);transform:translateY(-3px);
}

.btn--outline-light{
  background:transparent;color:var(--text);border-color:rgba(255,255,255,.15);
}
.btn--outline-light:hover{
  border-color:var(--pink);color:var(--pink);transform:translateY(-3px);
}

.btn--glass{
  background:rgba(255,255,255,.08);color:var(--white);
  border-color:rgba(255,255,255,.15);
  backdrop-filter:blur(8px);
}
.btn--glass:hover{
  background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);
  transform:translateY(-3px);
}

.btn--full{width:100%}

/* ---- Content card: readable surface over stars ---- */
.content-card{
  background:rgba(26,27,58,.8);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r);
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
/* --- Social bar: slim strip after hero --- */
.social-bar{
  border-top:1px solid rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.04);
  padding:16px 0;
  position:relative;z-index:1;
}
.social-bar__inner{
  display:flex;align-items:center;justify-content:center;
  gap:var(--space-md);
  max-width:1140px;margin:0 auto;padding:0 var(--space-md);
}
.social-bar__label{
  font-family:var(--font-display);font-size:.82rem;font-weight:500;
  color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;
}
.social-bar__links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.social-bar__link{
  display:inline-flex;align-items:center;gap:6px;
  padding:12px 20px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.1);
  font-family:var(--font-display);font-size:.82rem;font-weight:500;
  color:var(--text-muted);
  transition:all var(--dur) var(--ease);
  min-height:44px;
}
.social-bar__link:hover{
  border-color:var(--pink);color:var(--pink);
  background:rgba(217,89,148,.06);
}
.social-bar__link:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{padding:var(--space-2xl) 0;background:transparent;color:var(--text)}
.section--tight{padding:var(--space-xl) 0}

.section-intro{text-align:center;max-width:560px;margin:0 auto var(--space-xl)}
.section-intro h2{
  font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:700;letter-spacing:-.02em;
  margin-bottom:12px;
}
.section-intro h2{color:var(--white)}
.section-intro p{font-size:1.05rem;color:var(--text-muted);line-height:1.7}

.label{
  display:inline-block;
  font-family:var(--font-display);font-weight:600;font-size:.8rem;
  text-transform:uppercase;letter-spacing:2px;
  color:var(--pink);margin-bottom:12px;
}
.label--light{color:var(--pink-bright)}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.split{display:grid;gap:var(--space-xl);align-items:center;padding:var(--space-lg)}
.split--about{grid-template-columns:1.5fr 1fr}

/* New mascot-cast composition — replaces photo stack */
.about-cast{
  position:relative;
  border-radius:var(--r);
  overflow:visible;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  padding:0;
}
.about-cast__hero{
  display:block;width:100%;height:auto;
  border-radius:var(--r);
  box-shadow:0 12px 36px rgba(0,0,0,0.4);
}
.about-cast__mascot{
  position:absolute;
  z-index:2;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,0.45));
}
.about-cast__mascot--nova{
  width:38%;
  bottom:-12%;
  right:-8%;
  transform:rotate(-8deg);
}
.about-cast__mascot--pilot{
  width:24%;
  top:-10%;
  left:-6%;
  transform:rotate(10deg);
}
@media (max-width: 760px){
  .about-cast__mascot--nova{ width:30%; bottom:-8%; right:-4%; }
  .about-cast__mascot--pilot{ width:20%; top:-6%; left:-3%; }
}

.about-photo-stack{
  position:relative;
  padding:var(--space-md);
}
.about-photo--main{
  border-radius:var(--r);
  object-fit:cover;
  width:100%;
  max-height:380px;
  box-shadow:0 16px 48px rgba(0,0,0,.4);
}
.about-photo--float{
  position:absolute;
  bottom:-20px;right:0;
  width:160px;height:auto;
  border-radius:var(--r-sm);
  object-fit:cover;
  box-shadow:0 12px 36px rgba(0,0,0,.5);
  border:3px solid var(--navy);
}

.split__text h2{
  font-family:var(--font-display);font-size:clamp(1.6rem,3.5vw,2.4rem);
  font-weight:700;letter-spacing:-.02em;
  margin-bottom:var(--space-sm);color:var(--white);
}
.split__text .lead{font-size:1.1rem;color:var(--text-muted);margin-bottom:var(--space-sm);line-height:1.75}
.split__text p{color:var(--text-muted);margin-bottom:var(--space-md);line-height:1.75}

.stats-row{
  display:flex;gap:var(--space-lg);margin-top:var(--space-lg);
  padding-top:var(--space-lg);
  border-top:1px solid rgba(255,255,255,.06);
}
.stat{text-align:center;flex:1}
.stat__number{
  display:block;font-family:var(--font-display);font-size:2.2rem;font-weight:700;
  color:var(--pink);letter-spacing:-.02em;line-height:1;margin-bottom:6px;
}
.stat__label{font-size:.8rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:1.5px}

/* ==========================================================================
   LOYALTY
   ========================================================================== */
.loyalty-card{
  display:grid;grid-template-columns:auto 1fr;gap:var(--space-xl);
  align-items:start;
  padding:var(--space-xl);
  position:relative;overflow:hidden;
}
.loyalty-card::before{
  content:'';position:absolute;top:-40%;left:-10%;width:400px;height:400px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(232,91,155,.08) 0%,transparent 70%);
  pointer-events:none;
}

.loyalty-card__badge{
  display:flex;align-items:center;justify-content:center;
}
.loyalty-card__badge img{
  width:140px;height:auto;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.3));
}
/* loyalty duck is static — no bouncing */

.loyalty-card__content{position:relative;z-index:1}
.loyalty-card__content h2{
  font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.2rem);
  font-weight:700;color:var(--white);margin-bottom:12px;letter-spacing:-.02em;
}
.loyalty-card__content > p{
  color:var(--text-muted);font-size:1.05rem;margin-bottom:var(--space-lg);
  max-width:520px;line-height:1.7;
}

.loyalty-perks{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);
  margin-bottom:var(--space-lg);
}

.loyalty-perk{
  display:flex;gap:14px;align-items:flex-start;
}
.loyalty-perk__icon{
  flex:0 0 auto;width:48px;height:48px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
}
.loyalty-perk strong{
  display:block;font-size:.92rem;font-weight:700;
  color:var(--white);margin-bottom:2px;
}
.loyalty-perk span{
  font-size:.88rem;color:var(--text-muted);line-height:1.5;
}

/* ==========================================================================
   NEWS
   ========================================================================== */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}

.news-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r);
  overflow:hidden;
  transition:transform var(--dur) var(--spring),border-color var(--dur);
}
.news-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.12);
}
.news-card__img{
  aspect-ratio:16/10;overflow:hidden;
}
.news-card__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease);
  filter:brightness(.8);
}
.news-card:hover .news-card__img img{
  transform:scale(1.05);filter:brightness(.9);
}
.news-card__body{padding:var(--space-md)}
.news-card__date{
  font-family:var(--font-display);font-size:.8rem;font-weight:600;
  color:var(--pink-bright);text-transform:uppercase;letter-spacing:1.5px;
  display:block;margin-bottom:8px;
}
.news-card__body h3{
  font-family:var(--font-display);font-size:1.05rem;font-weight:600;
  color:var(--white);margin-bottom:8px;line-height:1.35;
}
.news-card__body p{
  font-size:.88rem;color:var(--text-muted);line-height:1.6;
}

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}

.step-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r);
  padding:var(--space-lg) var(--space-md);
  text-align:center;
  transition:transform var(--dur) var(--spring),border-color var(--dur),background var(--dur);
  position:relative;overflow:hidden;
}
.step-card:hover{
  transform:translateY(-6px);
  border-color:rgba(232,91,155,.2);
  background:rgba(255,255,255,.05);
}
.step-card__number{
  font-family:var(--font-display);font-size:5rem;font-weight:700;
  color:rgba(255,255,255,.03);
  position:absolute;top:-10px;right:16px;line-height:1;
  pointer-events:none;
}
.step-card__icon{margin-bottom:var(--space-sm);display:flex;align-items:center;justify-content:center}
.step-card h3{
  font-family:var(--font-display);font-size:1.15rem;font-weight:600;
  margin-bottom:8px;color:var(--white);
}
.step-card p{font-size:.92rem;color:var(--text-muted);line-height:1.65}

/* ==========================================================================
   CHARACTERS
   ========================================================================== */
.char-showcase--7{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:var(--space-sm);
}

.char-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r);
  overflow:hidden;
  text-align:center;
  transition:transform var(--dur) var(--spring),border-color var(--dur),box-shadow var(--dur),background var(--dur);
  padding-bottom:18px;
}
.char-card:hover{
  border-color:rgba(255,255,255,.15);
  background:rgba(255,255,255,.07);
}

.char-card__img{
  padding:var(--space-md) var(--space-sm) var(--space-xs);
  display:flex;align-items:center;justify-content:center;
}
.char-card__img img{
  height:100px;width:auto;
  transition:transform var(--dur) var(--spring);
}
.char-card:hover .char-card__img img{transform:scale(1.08)}

.char-card h4{
  font-family:var(--font-display);font-size:.82rem;font-weight:600;
  color:var(--text);
}

/* ==========================================================================
   WINNERS / SOCIAL PROOF
   ========================================================================== */
.winners-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
.winner-card{
  position:relative;overflow:hidden;border-radius:var(--r-sm);
  aspect-ratio:1;
}
.winner-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);filter:brightness(.8);
}
.winner-card:hover img{transform:scale(1.05);filter:brightness(.95)}
.winner-card__overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:12px;
  background:linear-gradient(transparent,rgba(0,0,0,.6));
}
.winner-card__overlay span{
  font-family:var(--font-display);font-size:.8rem;font-weight:600;
  color:rgba(255,255,255,.8);
}

/* ==========================================================================
   PRICING
   ========================================================================== */
.pricing-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--space-md);max-width:920px;margin:0 auto;
  align-items:start;
  padding-top:16px;
}

.price-card{
  padding:var(--space-lg) var(--space-md);
  text-align:center;
  transition:transform var(--dur) var(--spring),border-color var(--dur),background var(--dur);
  position:relative;
  overflow:visible;
}
.price-card:hover{
  transform:translateY(-6px);border-color:rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);
}

.price-card--pop{
  border-color:var(--pink);
  background:rgba(232,91,155,.06);
  transform:scale(1.03);
}
.price-card--pop:hover{
  transform:scale(1.03) translateY(-6px);
  background:rgba(232,91,155,.1);
}

.price-card__flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--pink);color:var(--white);
  padding:5px 20px;border-radius:var(--r-pill);
  font-family:var(--font-display);font-size:.78rem;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 0 20px var(--pink-glow);
  z-index:1;
}

.price-card__head{margin-bottom:var(--space-md)}
.price-card__head h3{
  font-family:var(--font-display);font-size:1rem;font-weight:600;
  color:var(--text-muted);margin-bottom:12px;text-transform:uppercase;letter-spacing:1px;
}
.price-card__price{
  font-family:var(--font-display);font-size:3.2rem;font-weight:700;
  color:var(--white);line-height:1;letter-spacing:-.03em;
}
.price-card--pop .price-card__price{color:var(--pink-bright)}
.price-card__note{font-size:.82rem;color:var(--text-muted);margin-top:4px;display:block}

.price-card__perks{
  list-style:none;
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:var(--space-md);margin-bottom:var(--space-md);
  display:flex;flex-direction:column;gap:12px;text-align:left;
}
.price-card__perks li{
  font-size:.9rem;color:var(--text-muted);
  padding-left:24px;
  position:relative;
}
.price-card__perks li::before{
  content:'';position:absolute;left:0;top:7px;
  width:10px;height:10px;border-radius:50%;
  background:var(--teal);opacity:.7;
}
.price-card__perks li strong{color:var(--white)}

.pricing-note{
  text-align:center;margin-top:var(--space-lg);
  font-size:.88rem;color:var(--text-muted);
  font-weight:600;
}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery-section{padding-bottom:var(--space-xl);background:transparent}
.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  max-width:1140px;
  margin:0 auto;
  padding:0 var(--space-md);
}
.gallery__item{overflow:hidden;border-radius:var(--r-sm);aspect-ratio:4/3}
.gallery__item img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease),filter .6s var(--ease);
  filter:brightness(.75);
}
.gallery__item:hover img{
  transform:scale(1.04);
  filter:brightness(.95);
}

/* ==========================================================================
   PLAY STRIP (vertical video grid — "In Action")
   ========================================================================== */
.play-strip-section{padding-top:var(--space-xl)}
.play-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  max-width:1140px;
  margin:0 auto;
  padding:0 var(--space-md);
}
.play-strip__item{
  position:relative;
  aspect-ratio:9/16;
  border-radius:var(--r-md);
  overflow:hidden;
  background:#0a0a14;
  box-shadow:
    0 10px 30px -10px rgba(0,0,0,.5),
    0 4px 12px -4px rgba(217,89,148,.25),
    inset 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.play-strip__item:hover{
  transform:translateY(-3px);
  box-shadow:
    0 16px 40px -12px rgba(0,0,0,.6),
    0 6px 16px -4px rgba(217,89,148,.4),
    inset 0 0 0 1px rgba(232,107,168,.18);
}
.play-strip__item video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.play-strip__item--feature{
  /* center clip is the focal — slight bottom-edge accent */
}
.play-strip__item--feature::after{
  content:'';
  position:absolute;inset:auto 0 0 0;height:36%;
  background:linear-gradient(180deg,transparent,rgba(11,12,33,.55));
  pointer-events:none;
}

@media (max-width:900px){
  .play-strip{grid-template-columns:1fr 1fr;gap:10px}
  .play-strip__item:nth-child(3){display:none}
}
@media (max-width:560px){
  .play-strip{grid-template-columns:1fr;max-width:340px}
  .play-strip__item:nth-child(3){display:block}
}

/* ==========================================================================
   CTA BANNER (PARTIES)
   ========================================================================== */
.cta-banner{
  display:grid;grid-template-columns:1.3fr 1fr;align-items:center;
  gap:var(--space-lg);
  padding:var(--space-xl);
  position:relative;overflow:hidden;
}
.cta-banner::before{
  content:'';position:absolute;top:-40%;right:-10%;width:500px;height:500px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(232,91,155,.1) 0%,transparent 70%);
  pointer-events:none;
}

.cta-banner__text{position:relative;z-index:1}
.cta-banner__text h2{
  font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);
  font-weight:700;color:var(--white);margin-bottom:12px;letter-spacing:-.02em;
}
.cta-banner__text p{
  color:rgba(255,255,255,.6);font-size:1rem;margin-bottom:var(--space-md);
  max-width:440px;line-height:1.7;
}

.cta-banner__art{
  display:flex;align-items:flex-end;justify-content:center;
  gap:0;position:relative;z-index:1;min-height:160px;
}
.cta-banner__char{
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.25));
  opacity:.85;
}
.cta-banner__char--center{
  opacity:1;z-index:1;
  margin:0 -16px;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.3));
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{padding:var(--space-md) var(--space-lg);max-width:800px;margin:0 auto}

.faq-item{
  border-bottom:1px solid rgba(255,255,255,.06);
}
.faq-item:last-child{border-bottom:none}

.faq-item summary{
  padding:var(--space-md) 0;
  font-family:var(--font-display);font-size:1.05rem;font-weight:600;
  color:var(--white);cursor:pointer;
  list-style:none;
  display:flex;justify-content:space-between;align-items:center;
  transition:color var(--dur);
}
.faq-item summary:hover{color:var(--pink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';font-size:1.4rem;color:var(--text-muted);
  transition:transform var(--dur);flex-shrink:0;margin-left:var(--space-md);
}
.faq-item[open] summary::after{transform:rotate(45deg);color:var(--pink)}
.faq-item[open] summary{color:var(--pink)}

.faq-item p{
  padding:0 0 var(--space-md);
  color:var(--text-muted);font-size:.95rem;line-height:1.7;
  max-width:640px;
}

/* ==========================================================================
   VISIT / LOCATION
   ========================================================================== */
.visit-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--space-lg);align-items:start}

.visit-details{display:flex;flex-direction:column;gap:var(--space-lg);padding:var(--space-lg)}

.visit-block h4{
  font-family:var(--font-display);font-size:.82rem;font-weight:600;
  text-transform:uppercase;letter-spacing:2px;
  color:var(--pink-bright);margin-bottom:8px;
}
.visit-block p{font-size:.95rem;color:var(--text-muted);line-height:1.75}

/* Phone link inside Visit card — prominent, tappable, brand-tinted */
.visit-phone{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:1.15rem;
  color:var(--text);letter-spacing:.5px;
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color var(--dur),border-color var(--dur);
}
.visit-phone::before{
  content:'';width:18px;height:18px;flex:none;
  background-color:var(--pink-bright);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") center/contain no-repeat;
}
.visit-phone:hover,.visit-phone:focus-visible{color:var(--pink-bright);border-bottom-color:var(--pink-bright);outline:none}

.visit-email{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;
  color:var(--text);letter-spacing:.5px;
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color var(--dur),border-color var(--dur);
  word-break:break-all;
}
.visit-email::before{
  content:'';width:18px;height:18px;flex:none;
  background-color:var(--pink-bright);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7l9 6 9-6'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7l9 6 9-6'/></svg>") center/contain no-repeat;
}
.visit-email:hover,.visit-email:focus-visible{color:var(--pink-bright);border-bottom-color:var(--pink-bright);outline:none}

/* Phone in footer bottom row */
.footer-phone{
  color:inherit;font-weight:600;
  border-bottom:1px solid transparent;
  transition:color var(--dur),border-color var(--dur);
}
.footer-phone:hover,.footer-phone:focus-visible{color:var(--pink-bright);border-bottom-color:var(--pink-bright);outline:none}

.hours-list{display:flex;flex-direction:column;gap:8px}
.hours-list div{display:flex;justify-content:space-between;max-width:260px}
.hours-list dt{font-weight:600;color:var(--text);font-size:.92rem}
.hours-list dd{color:var(--text-muted);font-size:.92rem}

.social-row{display:flex;gap:10px;margin-top:4px;flex-wrap:wrap}
.social-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:12px 18px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.1);
  font-family:var(--font-display);font-size:.8rem;font-weight:500;
  color:var(--text-muted);
  transition:all var(--dur) var(--ease);
  min-height:44px;
}
.social-pill svg{opacity:.7}
.social-pill:hover{border-color:var(--pink);color:var(--pink);background:rgba(232,91,155,.06)}
.social-pill:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

.visit-map{
  border-radius:var(--r);
  border:1px solid rgba(255,255,255,.06);
  aspect-ratio:4/3;
  position:relative;
  overflow:hidden;
  background:#0F1228;
}
.visit-map iframe{width:100%;height:100%;border:0}
.visit-map .map-svg{
  width:100%;height:100%;display:block;
}
.visit-map .map-link{
  position:absolute;bottom:14px;right:14px;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;
  background:rgba(15,18,40,0.85);
  backdrop-filter:blur(8px);
  border:1px solid rgba(217,89,148,0.4);
  border-radius:999px;
  color:var(--white);
  font-family:var(--font-display);
  font-size:0.78rem;font-weight:600;
  letter-spacing:0.05em;
  text-decoration:none;
  transition:background 0.2s, border-color 0.2s, transform 0.2s var(--spring);
}
.visit-map .map-link:hover{
  background:var(--pink);
  border-color:var(--pink);
  transform:translateY(-1px);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  background:transparent;
  border-top:1px solid rgba(255,255,255,.06);
  padding:var(--space-xl) 0 var(--space-md);
}

.footer-top{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:var(--space-xl);
  margin-bottom:var(--space-xl);
}

.footer-brand{display:flex;flex-direction:column;align-items:center}
.footer-brand img{height:80px;width:auto;margin-bottom:16px;opacity:.8}
.footer-tagline{
  font-size:1rem;font-weight:600;
  color:rgba(255,255,255,.5);
  max-width:360px;line-height:1.6;
}
.footer-social{
  display:flex;gap:12px;margin-top:var(--space-sm);justify-content:center;
}
.footer-social a{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);border:1px solid rgba(255,255,255,.1);
  transition:all var(--dur) var(--spring);
}
.footer-social a:hover{
  color:var(--white);border-color:var(--pink);
  background:rgba(217,89,148,.1);
}

.footer-links{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl);
  width:100%;max-width:640px;text-align:center;
}

.footer-col h5{
  font-family:var(--font-display);font-size:.8rem;font-weight:600;
  text-transform:uppercase;letter-spacing:2px;
  color:rgba(255,255,255,.3);margin-bottom:16px;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0}
.footer-col a{
  font-size:.88rem;color:var(--text-muted);transition:color var(--dur);
  padding:4px 0;min-height:44px;
  display:inline-flex;align-items:center;
}
.footer-col a:hover{color:var(--white)}
.footer-col a:focus-visible{outline:1px solid var(--pink);outline-offset:2px;border-radius:2px}

.footer-hours li{display:flex;justify-content:space-between;gap:24px;font-size:.88rem;color:var(--text-muted)}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.04);
  padding-top:var(--space-md);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  font-size:.82rem;color:rgba(255,255,255,.2);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- Tablet / small laptop (max 900px) --- */
@media(max-width:900px){
  html{scroll-padding-top:80px}
  .section{padding:var(--space-xl) 0}

  .nav-toggle{display:flex}
  .nav-menu{
    position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(26,27,58,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    flex-direction:column;align-items:center;justify-content:center;gap:12px;
    opacity:0;pointer-events:none;
    transition:opacity var(--dur) var(--ease);
  }
  .nav-menu.open{opacity:1;pointer-events:auto}
  .nav-menu a{font-size:1.2rem;padding:14px 28px;min-height:44px;display:inline-flex;align-items:center}

  .hero{padding-top:120px}
  .hero-layout{flex-direction:column;text-align:center;gap:var(--space-lg)}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .hero-mascot img{width:clamp(200px,45vw,300px)}

  .split--about{grid-template-columns:1fr}
  .split__text{text-align:center}
  .about-photo--float{width:120px;right:0;bottom:-10px}
  .stats-row{justify-content:center}
  .loyalty-card{grid-template-columns:1fr;text-align:center;padding:var(--space-lg)}
  .loyalty-card__badge img{width:100px}
  .loyalty-perks{grid-template-columns:1fr}
  .loyalty-perk{text-align:left}
  .winners-grid{grid-template-columns:repeat(2,1fr)}
  .news-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .gallery{grid-template-columns:1fr;gap:8px;padding:0 var(--space-md)}
  .gallery__item{aspect-ratio:16/9}
  .faq-list{padding:var(--space-md)}
  .split{padding:var(--space-md)}

  .steps-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}

  .char-showcase--7{grid-template-columns:repeat(4,1fr);gap:12px}

  .pricing-grid{grid-template-columns:1fr;max-width:380px;margin:0 auto}
  .price-card--pop{transform:none}
  .price-card--pop:hover{transform:translateY(-6px)}

  .cta-banner{grid-template-columns:1fr;text-align:center;padding:var(--space-lg)}
  .cta-banner__text{display:flex;flex-direction:column;align-items:center}
  .cta-banner__art{min-height:140px}
  .cta-float--1{left:10%}.cta-float--3{right:10%}

  .visit-grid{grid-template-columns:1fr}
  .visit-map{aspect-ratio:4/3;min-height:280px}

  .footer-links{gap:var(--space-lg)}
  .footer-bottom{justify-content:center;text-align:center}

  /* Ensure hero badge doesn't overflow on tablet */
  .hero-badge{padding:14px 28px;font-size:1rem}
}

/* --- Large phones / small tablets (max 640px) --- */
@media(max-width:640px){
  .hero-badge{padding:12px 20px;font-size:.9rem;gap:10px}
  .hero-mascot img{width:clamp(180px,50vw,260px)}

  /* Gallery: wider aspect ratio so images aren't too tall */
  .gallery__item{aspect-ratio:16/9}

  /* Characters: 3 columns for more breathing room */
  .char-showcase--7{grid-template-columns:repeat(3,1fr);gap:10px}
  .char-card__img img{height:80px}

  /* Visit map: taller for usability */
  .visit-map{aspect-ratio:1/1;min-height:300px}

  /* Footer: 3-col to single column for clean stacking */
  .footer-links{grid-template-columns:1fr;gap:var(--space-lg);text-align:center}
  .footer-col ul{align-items:center}
  .footer-hours li{justify-content:center}

  /* Social bar: stack label above links */
  .social-bar__inner{flex-direction:column;gap:8px}

  /* News cards: full width */
  .news-grid{max-width:100%}

  /* CTA banner characters: smaller */
  .cta-banner__char{width:80px;height:80px}
  .cta-banner__char--center{width:120px;height:120px}
  .cta-banner__art{min-height:120px}

  /* Loyalty perks: ensure they stack cleanly */
  .loyalty-card{padding:var(--space-md)}

  /* FAQ: ensure summary has enough padding for touch */
  .faq-item summary{padding:var(--space-md) 0;min-height:48px;gap:var(--space-sm)}
}

/* --- Small phones (max 480px) --- */
@media(max-width:480px){
  .hero h1{font-size:2.2rem}
  .hero-actions{flex-direction:column;align-items:center}
  .hero-actions .btn{width:100%;max-width:300px}
  .hero-badge{
    padding:10px 16px;font-size:.85rem;gap:8px;
    flex-wrap:wrap;justify-content:center;
  }

  .stats-row{flex-direction:column;gap:var(--space-md);align-items:center}

  .char-showcase--7{grid-template-columns:repeat(3,1fr);gap:8px}
  .char-card__img{padding:var(--space-sm)}
  .char-card__img img{height:64px}
  .char-card h4{font-size:.82rem}

  .social-bar__label{font-size:.8rem}

  /* Winners: keep 2-col but add gap so squares aren't cramped */
  .winners-grid{gap:6px}

  /* Visit map: square is great on phones */
  .visit-map{aspect-ratio:1/1;min-height:260px}

  /* Pricing: slightly more compact */
  .pricing-grid{max-width:100%}

  /* Footer: ensure proper single-column stacking */
  .footer-links{grid-template-columns:1fr}
  .footer-col a{min-height:40px}

  /* Reduce section padding on small screens */
  .section{padding:var(--space-lg) 0}
  .section--tight{padding:var(--space-md) 0}

  /* Tighten hero for short screens */
  .hero{padding-top:110px;padding-bottom:var(--space-lg)}
  .hero-mascot img{width:clamp(160px,45vw,220px)}

  /* FAQ: tighter list padding */
  .faq-list{padding:var(--space-sm)}

  /* CTA banner: compact */
  .cta-banner{padding:var(--space-md)}
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.9);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease);
  cursor:zoom-out;
  padding:var(--space-md);
}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox img{
  max-width:90vw;max-height:90vh;
  border-radius:var(--r-sm);
  box-shadow:0 8px 40px rgba(0,0,0,.5);
  object-fit:contain;
}

/* ==========================================================================
   STAR REWARDS LADDER  (deck-aligned content)
   ========================================================================== */
.accent-pink { color: var(--pink); }

.star-ladder {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--space-md);
  align-items: end;
  margin-bottom: var(--space-lg);
}

.star-step {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  align-self: end;
  min-height: 320px;
}
.star-step--mid { min-height: 360px; }
.star-step--top {
  min-height: 400px;
  background: linear-gradient(180deg, rgba(217,89,148,0.08) 0%, rgba(217,89,148,0.02) 100%);
  border-color: rgba(217,89,148,0.3);
  box-shadow: 0 0 48px rgba(217,89,148,0.15);
}

.star-step__icons {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.star-icon {
  width: 26px;
  height: 26px;
  background: #F0C14B;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 8px rgba(240,193,75,0.5));
}
.star-step--top .star-icon { width: 30px; height: 30px; }

.star-step__count {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--pink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.star-step__count span {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 8px;
}
.star-step--top .star-step__count { font-size: clamp(2.6rem, 4.5vw, 3.4rem); }

/* Solid prize box with Nova mascot inside — matches deck pattern */
.star-step__prize {
  margin: 0 auto;
  background:
    radial-gradient(circle at 50% 55%, rgba(74,191,224,0.14) 0%, rgba(74,191,224,0.04) 60%, transparent 100%);
  border: 1px solid rgba(237,237,244,0.10);
  border-radius: var(--r);
  display: grid;
  place-items: center;
  overflow: visible;
}
.star-step__prize--reg   { width: 130px; height: 130px; }
.star-step__prize--large { width: 170px; height: 170px; }
.star-step__prize--jumbo {
  width: 210px; height: 210px;
  background: radial-gradient(circle at 50% 55%, rgba(217,89,148,0.16) 0%, rgba(217,89,148,0.04) 60%, transparent 100%);
  border-color: rgba(217,89,148,0.22);
}
.star-step__mascot {
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.4)) drop-shadow(0 0 10px rgba(74,191,224,0.22));
}
.star-step__prize--reg   .star-step__mascot { width: 92px; }
.star-step__prize--large .star-step__mascot { width: 130px; }
.star-step__prize--jumbo .star-step__mascot {
  width: 175px;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.45)) drop-shadow(0 0 14px rgba(217,89,148,0.3));
}

.star-step__label {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.02em;
}

.star-arrow {
  align-self: center;
  font-size: 1.6rem;
  color: var(--pink);
  opacity: 0.6;
  padding-bottom: 60px;
}

.loyalty-foot {
  text-align: center;
  font-size: 1rem;
  color: var(--text-muted);
  margin-top: var(--space-md);
}
.loyalty-foot strong { color: var(--pink); font-weight: 700; }
.loyalty-foot .arr { color: var(--pink); }

@media (max-width: 760px) {
  .star-ladder {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    align-items: stretch;
  }
  .star-step,
  .star-step--mid,
  .star-step--top { min-height: auto; }
  .star-arrow {
    transform: rotate(90deg);
    padding-bottom: 0;
    justify-self: center;
  }
}

/* ==========================================================================
   TRADE UP
   ========================================================================== */
.trade-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.trade-card {
  padding: var(--space-lg);
}
.trade-eq {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  margin-bottom: var(--space-md);
}
/* Match deck exactly: stack fills its column, no max-width cap */
.trade-stack {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  justify-self: stretch;
  width: 100%;
}
.trade-dot {
  aspect-ratio: 1;
  background: linear-gradient(135deg, rgba(244,184,208,0.4), rgba(169,228,242,0.25));
  border-radius: 999px;
  border: 2px solid rgba(237,237,244,0.2);
}
.trade-equals {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--pink);
  letter-spacing: -0.02em;
}
.trade-result {
  aspect-ratio: 1;
  width: 100%;
  justify-self: stretch;
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(217,89,148,0.20), rgba(217,89,148,0.05));
  border: 2px solid var(--pink);
  display: grid;
  place-items: center;
  box-shadow: 0 0 32px rgba(217,89,148,0.25);
}
.trade-result--jumbo {
  background: linear-gradient(135deg, rgba(229,192,79,0.22), rgba(217,89,148,0.12));
  border-color: #E5C04F;
  border-width: 3px;
  box-shadow: 0 0 40px rgba(229,192,79,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}
.trade-mascot {
  width: 70%;
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.35)) drop-shadow(0 0 12px rgba(217,89,148,0.3));
}
.trade-mascot--jumbo {
  width: 85%;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.4)) drop-shadow(0 0 14px rgba(229,192,79,0.35));
}
.trade-caption {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.01em;
}
.trade-caption strong { color: var(--white); font-weight: 700; }

.bank-note {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  background: rgba(74,191,224,0.08);
  border: 1px solid rgba(74,191,224,0.25);
  border-radius: var(--r);
  margin-bottom: var(--space-md);
}
.bank-note__icon {
  color: #4ABFE0;
  flex-shrink: 0;
}
.bank-note__text {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.45;
}
.bank-note__text strong { color: #4ABFE0; font-weight: 700; }

@media (max-width: 760px) {
  .trade-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MEET THE CAST — replaces the old "Choose Your Plushie" winners grid
   ========================================================================== */
.cast-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-md);
  align-items: end;
}
.cast-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: var(--space-md) 8px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r);
  transition: transform 0.3s var(--spring), background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cast-card:hover {
  transform: translateY(-6px) rotate(-2deg);
  background: rgba(217,89,148,0.06);
  border-color: rgba(217,89,148,0.25);
}
.cast-card img {
  width: 75%;
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.35));
}
.cast-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--white);
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .cast-grid { grid-template-columns: repeat(4, 1fr); }
  .cast-card:nth-child(n+5) { grid-column: span 1; }
}
@media (max-width: 540px) {
  .cast-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   PARTIES — fix mascot art (was rendering invisible SVGs)
   ========================================================================== */
.cta-banner__char {
  width: 130px;
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.4));
}
.cta-banner__char--center {
  width: 170px;
  z-index: 2;
  transform: rotate(-4deg);
}
.cta-banner__char--a {
  transform: rotate(-12deg) translateY(8px);
}
.cta-banner__char--b {
  transform: rotate(10deg) translateY(8px);
}

/* ==========================================================================
   FOOTER INSTAGRAM HANDLE
   ========================================================================== */
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-social__handle {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ==========================================================================
   PRICING REASSURANCE HINT — small inline mention in hero
   ========================================================================== */
.hero-tokens-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-md);
  padding: 6px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-tokens-hint strong { color: var(--pink); font-weight: 700; }

/* ==========================================================================
   SOCIAL BAR INSTAGRAM HANDLE INLINE
   ========================================================================== */
.social-bar__handle {
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 4px;
}

/* ==========================================================================
   VISIT SIGN — wayfinding-sign style address treatment
   ========================================================================== */
.visit-sign {
  text-align: center;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: var(--space-lg);
}
.visit-sign__open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  background: rgba(217,89,148,0.12);
  border: 1.5px solid rgba(217,89,148,0.4);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-md);
}
.visit-sign__open strong {
  color: var(--pink-bright);
  font-weight: 700;
}
.visit-sign__pulse {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #6BBF5A;
  box-shadow: 0 0 12px rgba(107,191,90,0.7);
  position: relative;
}
.visit-sign__pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(107,191,90,0.4);
  animation: visit-pulse 2s ease-out infinite;
}
@keyframes visit-pulse {
  0%   { opacity: 0.6; transform: scale(0.7); }
  70%  { opacity: 0; transform: scale(2.2); }
  100% { opacity: 0; transform: scale(2.2); }
}
@media (prefers-reduced-motion: reduce) {
  .visit-sign__pulse::after { animation: none; }
}

.visit-sign__logo {
  display: block;
  width: 75%;
  max-width: 320px;
  margin: 0 auto var(--space-md);
  filter: drop-shadow(0 8px 24px rgba(217,89,148,0.35));
}

.visit-sign__rule {
  width: 70%;
  max-width: 280px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pink), transparent);
  margin: 0 auto var(--space-md);
}

.visit-sign__address {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 12px;
}
.visit-sign__address .dot {
  color: var(--pink);
  margin: 0 6px;
  font-size: 0.85em;
}

.visit-sign__sub {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.visit-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding: 0 var(--space-md) var(--space-md);
}

@media (max-width: 760px) {
  .visit-sign__logo { width: 80%; }
  .visit-sign__address { font-size: 1.05rem; letter-spacing: 0.02em; }
}

/* ==========================================================================
   HERO SIGN — wayfinding-style address treatment in the hero
   ========================================================================== */
.hero-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 32px 16px;
  margin: 0 0 var(--space-lg);
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: var(--r);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  width: 460px;
  max-width: 100%;
}
.hero-sign__sub {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.hero-sign__open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px;
  background: rgba(217,89,148,0.14);
  border: 1.5px solid rgba(217,89,148,0.45);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.06em;
}
.hero-sign__open strong {
  color: var(--pink-bright);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hero-sign__pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #6BBF5A;
  box-shadow: 0 0 10px rgba(107,191,90,0.7);
  position: relative;
}
.hero-sign__pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(107,191,90,0.45);
  animation: visit-pulse 2s ease-out infinite;
}
.hero-sign__rule {
  width: 100%;
  max-width: 240px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--pink), transparent);
}
.hero-sign__address {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}
.hero-sign__address .dot {
  color: var(--pink);
  margin: 0 8px;
  font-size: 0.85em;
}

@media (max-width: 540px) {
  .hero-sign { padding: 14px 22px; }
  .hero-sign__address {
    font-size: 0.95rem;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
  }
}

/* Hero sign — divider between street and mall in subtitle */
.hero-sign__divider {
  color: var(--pink);
  margin: 0 6px;
  font-size: 0.85em;
}