/* ============================================================
   EYELANDS — playful animated-feature treatment
   Candy twilight palette · Baloo 2 + Nunito + Fredoka
   Chunky rounded forms, glossy highlights, springy motion
   ============================================================ */

:root{
  --ink:#2A1B5E;
  --ink-2:#4A3690;
  --muted:#7C6BAE;
  --paper:#FFF8EC;
  --paper-2:#FFEFD9;
  --surface:#FFFFFF;
  --surface-2:#F4EEFF;
  --line:#E6DCFA;
  --line-2:#CFC0F0;

  --teal:#2FD39B;      --teal-deep:#12A879;
  --coral:#FF5D8F;     --coral-deep:#EE3573;
  --gold:#FFC531;      --gold-deep:#FF9A1F;
  --violet:#7B5CFA;    --violet-deep:#5B3AE0;
  --rose:#FF7BA6;

  --on-accent:#FFFFFF;
  --hill-1:#7B5CFA; --hill-2:#5B3AE0; --hill-3:#2A1B5E;

  --g-sky:linear-gradient(176deg,#8FE6FF 0%,#B9E9FF 38%,#FFD8B0 74%,#FFC0A8 100%);
  --g-gold:linear-gradient(140deg,#FFE293 0%,#FFC531 52%,#F58A0C 100%);
  --g-coral:linear-gradient(140deg,#FF8FB4 0%,#FF5D8F 52%,#E52C6B 100%);
  --g-teal:linear-gradient(140deg,#7BF0C9 0%,#2FD39B 55%,#0F9B70 100%);
  --g-violet:linear-gradient(140deg,#A48CFF 0%,#7B5CFA 55%,#5028D6 100%);

  --sh-1:0 2px 0 rgba(42,27,94,.06), 0 10px 22px rgba(42,27,94,.10);
  --sh-2:0 4px 0 rgba(42,27,94,.08), 0 22px 44px rgba(42,27,94,.18);
  --sh-3:0 6px 0 rgba(42,27,94,.10), 0 38px 70px rgba(42,27,94,.26);
  --sh-toy:inset 0 -5px 0 rgba(0,0,0,.13), inset 0 3px 0 rgba(255,255,255,.4);

  --r-s:14px; --r-m:22px; --r-l:34px; --r-xl:46px; --pill:999px;
  --wrap:1200px;
  --gut:clamp(18px,5vw,54px);
  --wave-h:clamp(46px,6.2vw,94px);

  --f-display:"Baloo 2","Trebuchet MS",sans-serif;
  --f-body:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-fun:"Fredoka","Baloo 2","Trebuchet MS",sans-serif;

  --spring:cubic-bezier(.34,1.5,.64,1);
  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F2EAFF; --ink-2:#CFC0F5; --muted:#9C8BCB;
    --paper:#170F36; --paper-2:#20164A; --surface:#241A52; --surface-2:#2E2166;
    --line:#3B2C7A; --line-2:#54409E;
    --teal:#4FE4B0; --teal-deep:#23C892;
    --coral:#FF7FA8; --coral-deep:#FF4F86;
    --gold:#FFD25C; --gold-deep:#FFAE3D;
    --violet:#A18DFF; --violet-deep:#8168FF;
    --rose:#FF9DBF;
    --on-accent:#170F36;
    --hill-1:#3E2C86; --hill-2:#2B1D63; --hill-3:#170F36;
    --g-sky:linear-gradient(176deg,#2B2C7A 0%,#3E3A96 34%,#7B4C9E 70%,#C2607F 100%);
    --sh-1:0 2px 0 rgba(0,0,0,.3), 0 10px 22px rgba(0,0,0,.34);
    --sh-2:0 4px 0 rgba(0,0,0,.34), 0 22px 44px rgba(0,0,0,.44);
    --sh-3:0 6px 0 rgba(0,0,0,.38), 0 38px 70px rgba(0,0,0,.52);
    --sh-toy:inset 0 -5px 0 rgba(0,0,0,.3), inset 0 3px 0 rgba(255,255,255,.18);
  }
}
:root[data-theme="dark"]{
  --ink:#F2EAFF; --ink-2:#CFC0F5; --muted:#9C8BCB;
  --paper:#170F36; --paper-2:#20164A; --surface:#241A52; --surface-2:#2E2166;
  --line:#3B2C7A; --line-2:#54409E;
  --teal:#4FE4B0; --teal-deep:#23C892; --coral:#FF7FA8; --coral-deep:#FF4F86;
  --gold:#FFD25C; --gold-deep:#FFAE3D; --violet:#A18DFF; --violet-deep:#8168FF; --rose:#FF9DBF;
  --on-accent:#170F36;
  --hill-1:#3E2C86; --hill-2:#2B1D63; --hill-3:#170F36;
  --g-sky:linear-gradient(176deg,#2B2C7A 0%,#3E3A96 34%,#7B4C9E 70%,#C2607F 100%);
  --sh-1:0 2px 0 rgba(0,0,0,.3), 0 10px 22px rgba(0,0,0,.34);
  --sh-2:0 4px 0 rgba(0,0,0,.34), 0 22px 44px rgba(0,0,0,.44);
  --sh-3:0 6px 0 rgba(0,0,0,.38), 0 38px 70px rgba(0,0,0,.52);
  --sh-toy:inset 0 -5px 0 rgba(0,0,0,.3), inset 0 3px 0 rgba(255,255,255,.18);
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-weight:500;
  font-size:clamp(16px,.4vw + 15.1px,17.5px);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:8px}

/* ---------------- type ---------------- */
h1,h2,h3,h4{
  font-family:var(--f-display);font-weight:800;
  line-height:.98;letter-spacing:-.018em;margin:0;text-wrap:balance;
}
.h-xl{font-size:clamp(3rem,9vw,7rem)}
.h-l{font-size:clamp(2.3rem,5.6vw,4.4rem)}
.h-m{font-size:clamp(1.7rem,3.2vw,2.8rem);line-height:1.04}
.h-s{font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.12}
p{margin:0}
.lede{font-size:clamp(1.08rem,1.3vw,1.3rem);line-height:1.55;color:var(--ink-2)}
.prose{max-width:60ch;color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:800}

.badge{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--f-body);font-weight:700;font-size:.82rem;
  letter-spacing:.01em;padding:7px 15px 8px;border-radius:var(--pill);
  background:var(--surface);color:var(--violet-deep);
  box-shadow:var(--sh-1);border:2px solid var(--line);
}
.badge.gold{background:var(--g-gold);color:#5B3200;border-color:rgba(0,0,0,.06)}
.badge.teal{background:var(--g-teal);color:#04372A;border-color:rgba(0,0,0,.06)}
.badge.violet{background:var(--g-violet);color:#fff;border-color:rgba(0,0,0,.06)}
.badge.coral{background:var(--g-coral);color:#fff;border-color:rgba(0,0,0,.06)}
.badge.teal{background:linear-gradient(140deg,#9EE8FF,#4BC9F0 55%,#2A7FD4);color:#04293D;border-color:rgba(0,0,0,.06)}

.fun{font-family:var(--f-fun);font-weight:600}
.num{font-family:var(--f-body);font-weight:700;font-variant-numeric:tabular-nums}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
section{position:relative;scroll-margin-top:86px}

/* ---------------- motion ---------------- */
.anim .rv{opacity:.001;transform:translateY(26px) scale(.965);transition:opacity .6s var(--ease),transform .72s var(--spring)}
.anim .rv.in{opacity:1;transform:none}
.anim .rv-2{transition-delay:.09s} .anim .rv-3{transition-delay:.18s} .anim .rv-4{transition-delay:.27s}
@keyframes bob{from{transform:translateY(0) rotate(var(--rot,0deg))}to{transform:translateY(-14px) rotate(var(--rot,0deg))}}
@keyframes drift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@keyframes sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes pop{0%{transform:translateY(16px) scale(.8)}68%{transform:translateY(0) scale(1.05)}100%{transform:none}}
@media (prefers-reduced-motion: reduce){
  .anim .rv{opacity:1!important;transform:none!important;transition:none!important}
  *{animation:none!important;scroll-behavior:auto!important}
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:15px 26px 17px;border-radius:var(--pill);border:0;cursor:pointer;
  font-family:var(--f-display);font-weight:750;font-size:1.02rem;letter-spacing:-.01em;
  background:var(--g-coral);color:#fff;
  box-shadow:var(--sh-toy),0 8px 0 var(--coral-deep),0 18px 30px rgba(238,53,115,.34);
  transition:transform .18s var(--spring),box-shadow .18s var(--ease),filter .2s;
  line-height:1;
}
.btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--sh-toy),0 11px 0 var(--coral-deep),0 22px 36px rgba(238,53,115,.4)}
.btn:active{transform:translateY(4px);box-shadow:var(--sh-toy),0 3px 0 var(--coral-deep),0 8px 16px rgba(238,53,115,.3)}
.btn.sm{padding:11px 19px 13px;font-size:.92rem;box-shadow:var(--sh-toy),0 5px 0 var(--coral-deep),0 10px 18px rgba(238,53,115,.3)}
.btn.sm:hover{box-shadow:var(--sh-toy),0 7px 0 var(--coral-deep),0 14px 22px rgba(238,53,115,.34)}
.btn.violet{background:var(--g-violet);box-shadow:var(--sh-toy),0 8px 0 var(--violet-deep),0 18px 30px rgba(91,58,224,.32)}
.btn.violet:hover{box-shadow:var(--sh-toy),0 11px 0 var(--violet-deep),0 22px 36px rgba(91,58,224,.4)}
.btn.violet.sm{box-shadow:var(--sh-toy),0 5px 0 var(--violet-deep),0 10px 18px rgba(91,58,224,.3)}
.btn.teal{background:var(--g-teal);color:#03362A;box-shadow:var(--sh-toy),0 8px 0 var(--teal-deep),0 18px 30px rgba(18,168,121,.3)}
.btn.cream{background:var(--surface);color:var(--violet-deep);box-shadow:var(--sh-toy),0 7px 0 var(--line-2),0 14px 26px rgba(42,27,94,.16)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}

/* ---------------- nav ---------------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;padding:10px var(--gut) 0;pointer-events:none}
.nav-in{
  max-width:var(--wrap);margin-inline:auto;pointer-events:auto;
  display:flex;align-items:center;gap:14px;
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:blur(16px) saturate(1.6);
  border:2px solid var(--line);border-radius:var(--pill);
  padding:9px 9px 9px 18px;box-shadow:var(--sh-1);
}
.brand{
  font-family:var(--f-display);font-weight:750;font-size:1.22rem;letter-spacing:-.02em;
  display:flex;align-items:center;gap:8px;flex:none;
}
.brand-mark{width:30px;height:30px;flex:none}
.nav-links{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav-links a{
  padding:9px 14px;border-radius:var(--pill);font-weight:700;font-size:.94rem;color:var(--ink-2);
  transition:background .2s,color .2s,transform .2s var(--spring);
}
.nav-links a:hover{background:var(--surface-2);color:var(--violet-deep);transform:translateY(-2px)}
@media (max-width:900px){ .nav-links a.hide-sm{display:none} }
@media (max-width:620px){
  .nav-links a{display:none}
  .nav-in{padding:8px 8px 8px 14px;gap:8px}
  .brand{font-size:1.06rem}
  .brand-mark{width:26px;height:26px}
}
.bag-btn{position:relative}
.bag-count{
  position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 5px;
  border-radius:var(--pill);background:var(--gold);color:#5B3200;
  font-family:var(--f-body);font-weight:700;font-size:.72rem;line-height:22px;text-align:center;
  border:2.5px solid var(--paper);
}

/* ============================================================
   HERO — the title card
   ============================================================ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(94svh,920px);
  display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);
  background:var(--g-sky);
  margin-top:calc(-1 * (49px + env(safe-area-inset-top,0px)));
  padding-top:calc(49px + env(safe-area-inset-top,0px));
}
/* matte-painting backdrop */
.matte{
  position:absolute;inset:-2% -2% -2%;z-index:0;will-change:transform;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,.55) 82%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,.55) 82%,transparent 100%);
}
.matte img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;backface-visibility:hidden;
  opacity:0;transition:opacity 1s var(--ease);
  filter:saturate(1.8) contrast(1.16) brightness(1.06) blur(2.5px);
  transform:scale(1.08);
}
.matte img.on{opacity:.55}
@keyframes mattedrift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.4%,-1%,0)}}
.matte::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(120,220,255,.6) 0%,rgba(185,233,255,.3) 30%,rgba(255,180,140,.44) 76%,rgba(255,140,130,.6) 100%);
  mix-blend-mode:soft-light;
}
.matte::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(112% 74% at 50% 2%,transparent 38%,rgba(42,27,94,.3) 100%);
}

/* sun + clouds + sparkle layer */
.sky-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.sunball{
  position:absolute;top:8%;right:11%;width:clamp(96px,15vw,190px);aspect-ratio:1;
  border-radius:50%;background:var(--g-sun);
  box-shadow:0 0 0 clamp(14px,2.4vw,30px) rgba(255,212,94,.22),
             0 0 0 clamp(30px,5vw,64px) rgba(255,212,94,.12),
             0 0 90px 30px rgba(255,180,60,.5);
}
.anim .sunwrap{animation:bob 9s ease-in-out infinite alternate}
.cloud{position:absolute;opacity:.96;filter:drop-shadow(0 10px 18px rgba(42,27,94,.14))}
.cloud.c1{top:12%;left:4%;width:clamp(120px,20vw,260px)}
.cloud.c2{top:26%;left:58%;width:clamp(90px,14vw,190px)}
.cloud.c3{top:2%;left:6%;width:clamp(70px,11vw,150px);opacity:.7}
.anim .cloud.c1{animation:drift 26s ease-in-out infinite alternate}
.anim .cloud.c2{animation:drift 34s ease-in-out infinite alternate-reverse}
.anim .cloud.c3{animation:drift 44s ease-in-out infinite alternate}
.spark{position:absolute;width:14px;height:14px;color:#FFFCEA;filter:drop-shadow(0 0 7px rgba(255,238,170,.95))}
.anim .spark{animation:twinkle 4.2s ease-in-out infinite;will-change:opacity,transform}

/* hills */
.hills{position:absolute;left:0;right:0;bottom:-2px;z-index:2;pointer-events:none}
.hills svg{display:block;width:104%;margin-left:-2%;height:auto}

.hero-eyebrow{
  font-family:var(--f-body);font-weight:800;
  font-size:clamp(.86rem,1.3vw,1.1rem);letter-spacing:.2em;text-transform:uppercase;
  color:#FFFFFF;margin-bottom:clamp(14px,2.2vh,22px);
  text-shadow:0 1px 2px rgba(16,8,38,1),0 2px 6px rgba(16,8,38,.95),0 6px 24px rgba(16,8,38,.85);
}
.hero-copy::before{
  content:"";position:absolute;inset:-14% -6% -18%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 58% at 50% 46%,rgba(20,10,44,.6) 0%,rgba(20,10,44,.36) 52%,rgba(20,10,44,0) 76%);
}
.hero-copy{position:relative;z-index:4;min-width:0;text-align:center;padding:clamp(26px,5.6vh,62px) var(--gut) 0;will-change:transform,opacity}
.hero-kicker{
  display:inline-flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:clamp(14px,2.4vh,24px);
}
.title{
  font-family:var(--f-display);font-weight:750;
  font-size:clamp(3.4rem,14vw,10rem);line-height:.82;letter-spacing:-.04em;
  color:#FFFDF6;
  -webkit-text-stroke:2px #5B3AE0;
  paint-order:stroke fill;
  text-shadow:
    0 6px 0 #5B3AE0, 0 11px 0 rgba(42,27,94,.55),
    0 26px 46px rgba(42,27,94,.45);
  margin:0;
}
.title .l{display:inline-block;transform-origin:50% 90%}
.anim .title .l{animation:pop .7s var(--spring)}
.subtitle{
  font-family:var(--f-body);font-weight:600;
  font-size:clamp(1.15rem,3.4vw,2.2rem);color:#FFF3D4;
  text-shadow:0 3px 0 rgba(91,58,224,.6),0 10px 24px rgba(42,27,94,.4);
  margin-top:.28em;letter-spacing:.005em;
}
.hero-sub{
  margin:clamp(18px,3vh,26px) auto 0;max-width:42ch;color:#fff;font-weight:700;
  font-size:clamp(1.06rem,1.35vw,1.28rem);line-height:1.5;
  text-shadow:0 2px 5px rgba(20,10,44,.95),0 8px 26px rgba(20,10,44,.75)
}
.hero-sub2{
  margin:14px auto 0;max-width:40ch;color:#FFE08A;font-weight:600;
  font-family:var(--f-fun);font-size:clamp(1.04rem,1.35vw,1.26rem);
  text-shadow:0 2px 5px rgba(20,10,44,.95),0 8px 26px rgba(20,10,44,.75)
}

/* floating gel trio */
.cast{
  position:relative;z-index:4;min-width:0;display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(16px,4.5vw,66px);padding:clamp(40px,6.5vh,78px) var(--gut) clamp(16px,3vh,34px);
}
.gel{
  position:relative;flex:none;width:clamp(104px,15.5vw,186px);
  display:grid;justify-items:center;gap:0;
  appearance:none;background:none;border:0;padding:0;cursor:pointer;color:inherit;
  transition:transform .3s var(--spring);
}
.gel:hover,.gel:focus-visible{transform:translateY(-8px) scale(1.04)}
.gel-name{
  display:block;margin-top:6px;font-family:var(--f-fun);font-weight:600;font-size:.8rem;
  color:#fff;text-shadow:0 2px 10px rgba(42,27,94,.8);opacity:.9;
}
.gel .gel-in{width:100%;filter:drop-shadow(0 22px 26px rgba(42,27,94,.34))}
.gel svg{width:100%;height:auto}
.gel .gel-sh{
  display:block;width:62%;height:10px;border-radius:50%;margin-top:4px;
  background:radial-gradient(ellipse,rgba(42,27,94,.4),transparent 70%);
}
.gel .gel-tag{
  position:relative;display:inline-block;margin-top:14px;
  font-family:var(--f-body);font-weight:700;font-size:.76rem;color:#fff;
  background:rgba(42,27,94,.52);border:2px solid rgba(255,255,255,.4);
  padding:3px 11px 4px;border-radius:var(--pill);white-space:nowrap;backdrop-filter:blur(6px);
}
.gel.g0 .gel-in{transform:rotate(-11deg)}
.gel.g1{z-index:3}
.gel.g2 .gel-in{transform:rotate(10deg)}
.anim .gel.g0 .gel-in{animation:bob 6.4s ease-in-out infinite alternate}
.anim .gel.g1 .gel-in{animation:bob 5s ease-in-out infinite alternate;animation-delay:-1.2s}
.anim .gel.g2 .gel-in{animation:bob 7.4s ease-in-out infinite alternate;animation-delay:-2.6s}

@media (max-width:520px){ .gel{width:clamp(96px,28vw,150px)} .gel .gel-tag{font-size:.7rem;padding:2px 9px 3px} }

/* chooser */
.chooser{position:relative;z-index:5;min-width:0;padding:clamp(8px,1.4vh,16px) var(--gut) clamp(16px,2.6vh,28px)}
.chooser-head{
  max-width:var(--wrap);margin:0 auto 8px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  justify-content:center;
}
.chooser-head .now{
  font-family:var(--f-body);font-weight:700;color:#fff;
  background:rgba(42,27,94,.4);border:2px solid rgba(255,255,255,.4);
  padding:6px 14px 7px;border-radius:var(--pill);font-size:.86rem;
}
.rail{
  max-width:var(--wrap);margin-inline:auto;display:flex;gap:10px;
  overflow-x:auto;padding:6px 2px 10px;scrollbar-width:none;scroll-snap-type:x mandatory;
}
.rail::-webkit-scrollbar{display:none}
.chip{
  flex:none;scroll-snap-align:center;cursor:pointer;width:clamp(104px,13vw,138px);
  border:3px solid rgba(255,255,255,.55);border-radius:var(--r-m);
  background:rgba(255,255,255,.22);padding:6px;
  transition:transform .24s var(--spring),border-color .22s,box-shadow .22s;
  box-shadow:0 6px 0 rgba(42,27,94,.16);
}
.chip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:13px}
.chip b{display:block;font-family:var(--f-display);font-weight:750;font-size:.9rem;color:#fff;margin-top:5px;text-shadow:0 1px 6px rgba(42,27,94,.5)}
.chip:hover{transform:translateY(-6px) rotate(-1.5deg);border-color:#fff}
.chip[aria-pressed="true"]{
  border-color:var(--gold);background:rgba(255,197,49,.34);
  box-shadow:0 6px 0 var(--gold-deep),0 14px 24px rgba(255,154,31,.34);
}

/* ============================================================
   WAVE DIVIDERS + SCENES
   ============================================================ */
.wave{display:block;width:100%;height:auto;position:relative;z-index:3}
.scene{position:relative;padding-block:clamp(74px,10vh,128px)}
.scene.cream{background:var(--paper)}
.scene.cream::before{content:"";position:absolute;inset:0;background:radial-gradient(100% 62% at 18% 0%,color-mix(in srgb,var(--violet) 12%,transparent),transparent 70%);pointer-events:none}
.scene.lav{background:var(--paper-2)}
.scene.lav::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 60% at 84% 8%,color-mix(in srgb,var(--gold) 14%,transparent),transparent 68%);pointer-events:none}
.scene.night{background:var(--hill-3);color:#FFF8EC}
.scene.night .prose,.scene.night .lede{color:rgba(255,248,236,.84)}
.scene.night .prose strong{color:#fff}
.scene.night h2,.scene.night h3{color:#fff}
.deco{position:absolute;pointer-events:none;z-index:0;opacity:.9}
.deco.cloudy{width:clamp(80px,12vw,170px)}
.anim .deco.cloudy{animation:drift 30s ease-in-out infinite alternate}

.head{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);margin-bottom:clamp(26px,4vh,46px);position:relative;z-index:2}
.head.mid{text-align:center}
.head.mid .prose{margin-inline:auto}
.head .badge{margin-bottom:16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:center;position:relative;z-index:2}
@media (max-width:920px){ .two{grid-template-columns:1fr;gap:32px} }

/* claim word row */
.claims{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.claims span{
  font-family:var(--f-display);font-weight:750;font-size:clamp(1rem,1.7vw,1.32rem);
  padding:9px 18px 11px;border-radius:var(--pill);color:#fff;line-height:1;
  transform:rotate(var(--r,0deg));box-shadow:var(--sh-toy),0 5px 0 rgba(0,0,0,.16);
}
.claims span:nth-child(1){background:var(--g-teal);color:#03362A;--r:-2deg}
.claims span:nth-child(2){background:linear-gradient(140deg,#9EE8FF,#4BC9F0 60%,#2A7FD4);color:#04293D;--r:1.5deg}
.claims span:nth-child(3){background:var(--g-coral);--r:-1deg}
.claims span:nth-child(4){background:var(--g-gold);color:#5B3200;--r:2deg}
.claims span:nth-child(5){background:var(--g-violet);--r:-1.5deg}

/* ============================================================
   CARDS
   ============================================================ */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:2;
}
.card{
  background:var(--surface);border:3px solid var(--line);border-radius:var(--r-l);
  padding:22px;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 7px 0 var(--line),0 18px 34px rgba(42,27,94,.12);
  transition:transform .26s var(--spring),box-shadow .26s;
}
.card:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 11px 0 var(--line),0 26px 46px rgba(42,27,94,.18)}
.card .chip-i{
  width:54px;height:54px;border-radius:19px;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:750;font-size:1.12rem;color:#fff;
  box-shadow:var(--sh-toy),0 5px 0 rgba(0,0,0,.16);
}
.card h3{font-size:1.24rem}
.card p{font-size:.94rem;color:var(--ink-2);line-height:1.55}
.card .foot{
  margin-top:auto;padding-top:12px;border-top:2.5px dashed var(--line);
  font-family:var(--f-body);font-weight:600;font-size:.78rem;color:var(--muted);
}
.i-mint{background:var(--g-teal);color:#03362A!important}
.i-candy{background:var(--g-coral)}
.i-sun{background:var(--g-gold);color:#5B3200!important}
.i-grape{background:var(--g-violet)}
.i-sky{background:linear-gradient(140deg,#9EE8FF,#4BC9F0 60%,#2A7FD4);color:#04293D!important}
.card.dark{background:var(--ink);border-color:#3B2C7A;box-shadow:0 7px 0 #3B2C7A,0 18px 34px rgba(42,27,94,.3)}
.card.dark h3{color:#fff}
.card.dark p{color:rgba(255,248,236,.8)}
.card.dark .foot{color:rgba(255,248,236,.55);border-color:rgba(255,248,236,.25)}

/* picture frames */
.frame{
  position:relative;border-radius:var(--r-xl);overflow:hidden;margin:0;
  border:5px solid var(--surface);
  box-shadow:0 8px 0 var(--line),0 26px 50px rgba(42,27,94,.24);
  background:var(--surface-2);
}
.frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;filter:saturate(1.3) contrast(1.04);transition:transform .6s var(--ease)}
.frame:hover img{transform:scale(1.05)}
.frame.tall img{aspect-ratio:3/4}
.frame figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:30px 18px 14px;color:#fff;
  background:linear-gradient(to top,rgba(42,27,94,.86),transparent);
  font-family:var(--f-body);font-weight:600;font-size:.85rem;
}
.big-num{
  font-family:var(--f-display);font-weight:750;
  font-size:clamp(3.2rem,9vw,5.6rem);line-height:.84;letter-spacing:-.04em;
}

/* ============================================================
   ANATOMY (scroll-scrubbed)
   ============================================================ */
.scrub-track{height:300svh;position:relative}
.scrub-pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);
  align-content:center;
  padding:clamp(88px,13vh,132px) 0 clamp(64px,10vh,104px);
}
.scrub-glow{
  position:absolute;top:50%;left:66%;transform:translate(-50%,-50%);
  width:min(80vw,640px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(123,92,250,.5),rgba(47,211,155,.14) 46%,transparent 68%);
  filter:blur(10px);
}
.scrub-label{
  position:relative;z-index:3;justify-self:center;margin:0 0 clamp(20px,3.6vh,44px);
  font-family:var(--f-body);font-weight:700;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:#2A1B5E;background:var(--g-gold);padding:7px 16px 8px;border-radius:var(--pill);
  box-shadow:var(--sh-toy),0 4px 0 var(--gold-deep);
}
.scrub-inner{
  position:relative;z-index:2;align-self:center;
  max-width:var(--wrap);width:100%;margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(20px,4vw,60px);align-items:center;
}
.scrub-copy{position:relative;min-width:0}
.scrub-heads{position:relative;min-height:2.3em}
.scrub-heads h3{
  position:absolute;left:0;right:0;top:0;color:#fff;
  font-size:clamp(1.6rem,3.6vw,2.9rem);line-height:1.02;letter-spacing:-.028em;
  opacity:0;transform:translateY(16px);
  transition:opacity .45s var(--ease),transform .6s var(--spring);
  text-shadow:0 4px 0 rgba(91,58,224,.45),0 16px 36px rgba(0,0,0,.45);
}
.scrub-heads h3.on{opacity:1;transform:none;position:relative}
.scrub-cap{position:relative;min-height:7.4em;margin-top:18px}
.scrub-cap article{
  position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(16px);
  transition:opacity .45s var(--ease),transform .55s var(--spring);pointer-events:none;
}
.scrub-cap article.on{opacity:1;transform:none;position:relative;pointer-events:auto}
.scrub-cap p{
  color:rgba(255,248,236,.88);font-weight:600;max-width:44ch;
  font-size:clamp(.96rem,1.15vw,1.1rem);line-height:1.55;
}
.scrub-stage{position:relative;display:grid;justify-items:center;gap:14px;min-width:0}
.scrub-art{position:relative;width:min(84%,400px);will-change:transform;transition:opacity .3s var(--ease)}
.scrub-art svg{width:100%;height:auto;filter:drop-shadow(0 26px 40px rgba(0,0,0,.45))}
.scrub-art .layer{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.scrub-art .layer.on{opacity:1;position:relative}
.scrub-tag{
  position:relative;z-index:3;white-space:nowrap;
  font-family:var(--f-display);font-weight:800;font-size:.9rem;color:#2A1B5E;
  background:#FFF8EC;padding:6px 16px 7px;border-radius:var(--pill);
  box-shadow:0 4px 0 rgba(0,0,0,.2);
}
.scrub-dots{position:absolute;top:50%;right:clamp(12px,2.4vw,28px);transform:translateY(-50%);display:grid;gap:12px;z-index:3}
.scrub-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,248,236,.3);transition:all .3s var(--spring)}
.scrub-dots i.on{background:var(--gold);transform:scale(1.7);box-shadow:0 0 16px var(--gold)}
@media (max-width:900px){
  .scrub-track{height:290svh}
  .scrub-dots{display:none}
  .scrub-inner{grid-template-columns:1fr;gap:clamp(16px,3vh,30px)}
  .scrub-stage{order:-1}
  .scrub-art{width:min(70%,260px)}
  .scrub-heads{min-height:2.6em}
  .scrub-cap{min-height:9.5em;margin-top:12px}
  .scrub-glow{left:50%}
}

/* ============================================================
   STUDIO
   ============================================================ */
.studio-grid{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(310px,.98fr);
  gap:clamp(20px,3vw,40px);max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  align-items:start;position:relative;z-index:2;
}
@media (max-width:1000px){ .studio-grid{grid-template-columns:1fr} }

.stage{
  position:sticky;top:86px;border-radius:var(--r-xl);overflow:hidden;
  border:5px solid var(--surface);background:var(--ink);
  box-shadow:0 9px 0 var(--line),0 30px 56px rgba(42,27,94,.28);
}
@media (max-width:1000px){ .stage{position:static} }
.stage-scene{position:relative;aspect-ratio:4/3.2;display:grid;place-items:center;overflow:hidden}
.stage-scene img.bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.5) contrast(1.04) blur(1px) brightness(.95);transform:scale(1.05);
}
.stage-scene .vig{
  position:absolute;inset:0;
  background:radial-gradient(85% 60% at 50% 42%,transparent 26%,rgba(42,27,94,.66) 100%);
}
.stage-hills{position:absolute;left:0;right:0;bottom:0;width:100%}
.stage-face{position:relative;z-index:3;width:86%;margin-bottom:6%}
.stage-pair{display:flex;gap:clamp(14px,5%,42px);align-items:center;justify-content:center}
.stage-pair .pw{width:42%;filter:drop-shadow(0 16px 22px rgba(0,0,0,.5))}
.stage-pair svg{width:100%;height:auto}
.anim .stage-pair .pw:first-child{animation:bob 5.6s ease-in-out infinite alternate}
.anim .stage-pair .pw:last-child{animation:bob 6.8s ease-in-out infinite alternate;animation-delay:-1.6s}
.stage-face svg{width:100%;height:auto;filter:drop-shadow(0 16px 24px rgba(0,0,0,.45))}
.anim .stage-face{animation:bob 5.4s ease-in-out infinite alternate}
.stage-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 16px;background:var(--surface);border-top:3px solid var(--line);
}
.stage-bar .nm{font-family:var(--f-display);font-weight:750;font-size:1.18rem;line-height:1.1}
.stage-bar .mt{font-family:var(--f-body);font-weight:600;font-size:.78rem;color:var(--muted)}
.stage-bar .spacer{margin-left:auto}
.dice{
  border:3px solid var(--line);background:var(--surface-2);border-radius:var(--pill);
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;color:var(--violet-deep);
  box-shadow:0 4px 0 var(--line);transition:transform .22s var(--spring),box-shadow .2s;
}
.dice:hover{transform:translateY(-3px) rotate(-18deg);box-shadow:0 7px 0 var(--line)}
.dice:active{transform:translateY(2px);box-shadow:0 2px 0 var(--line)}

.panel{display:grid;gap:14px}
.tabs{display:flex;gap:5px;background:var(--surface);border:3px solid var(--line);border-radius:var(--pill);padding:6px;box-shadow:0 5px 0 var(--line)}
.tabs button{
  flex:1;padding:11px 6px 12px;border:0;background:transparent;border-radius:var(--pill);cursor:pointer;
  font-family:var(--f-display);font-weight:750;font-size:.95rem;color:var(--muted);line-height:1;
  transition:background .2s,color .2s,transform .2s var(--spring);white-space:nowrap;
}
.tabs button[aria-selected="true"]{background:var(--g-violet);color:#fff;box-shadow:var(--sh-toy),0 3px 0 var(--violet-deep)}
.tabs button:hover:not([aria-selected="true"]){color:var(--violet-deep);transform:translateY(-2px)}

.tray{
  background:var(--surface);border:3px solid var(--line);border-radius:var(--r-l);padding:16px;
  box-shadow:0 7px 0 var(--line),0 16px 30px rgba(42,27,94,.1);
}
.tray-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px;flex-wrap:wrap}
.tray-head h3{font-size:1.1rem}
.tray-head .count{font-family:var(--f-body);font-weight:600;font-size:.76rem;color:var(--muted)}
.opts{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:9px;
  max-height:300px;overflow-y:auto;padding:3px 4px 3px 3px;
}
.opts::-webkit-scrollbar{width:9px}
.opts::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px}
.opt{
  cursor:pointer;border:3px solid var(--line);border-radius:18px;overflow:hidden;
  background:var(--paper-2);padding:0;text-align:left;
  transition:transform .2s var(--spring),border-color .2s,box-shadow .2s;
}
.opt:hover{transform:translateY(-4px) rotate(-1.5deg);border-color:var(--line-2);box-shadow:0 6px 0 var(--line)}
.opt .art{width:100%;aspect-ratio:1;display:block;object-fit:cover;background:var(--surface-2)}
.opt .art svg{width:100%;height:100%;display:block}
.opt span{display:block;padding:5px 7px 7px;font-family:var(--f-display);font-weight:750;font-size:.76rem;line-height:1.15}
.opt[aria-pressed="true"]{border-color:var(--coral);box-shadow:0 6px 0 var(--coral-deep)}
.opt[aria-pressed="true"] span{background:var(--g-coral);color:#fff}

.upload{
  border:4px dashed var(--line-2);border-radius:var(--r-l);padding:26px 18px;text-align:center;
  display:grid;gap:11px;place-items:center;background:var(--paper-2);
}
.upload p{font-size:.9rem;color:var(--ink-2);max-width:36ch}
.upload input{display:none}
.note{
  display:flex;gap:10px;padding:14px;border-radius:var(--r-m);
  background:var(--paper-2);border:3px solid var(--gold);
  font-size:.86rem;line-height:1.45;color:var(--ink-2);
}
.note svg{flex:none;margin-top:2px;color:var(--gold-deep)}
.note b{color:var(--ink)}

/* packs */
.packs{display:grid;gap:11px}
.pack{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:15px;border:3px solid var(--line);border-radius:var(--r-l);
  background:var(--paper-2);cursor:pointer;text-align:left;
  box-shadow:0 5px 0 var(--line);
  transition:transform .22s var(--spring),box-shadow .22s,border-color .22s;
}
.pack:hover{transform:translateY(-4px);box-shadow:0 9px 0 var(--line)}
.pack[aria-pressed="true"]{border-color:var(--teal);box-shadow:0 7px 0 var(--teal-deep);background:color-mix(in srgb,var(--teal) 14%,var(--surface))}
.pack .qty{
  font-family:var(--f-display);font-weight:750;font-size:2.5rem;line-height:.82;
  color:var(--teal-deep);font-variant-numeric:tabular-nums;
}
.pack b{display:block;font-family:var(--f-display);font-weight:750;font-size:1.1rem;line-height:1.15}
.pack small{display:block;font-family:var(--f-body);font-weight:600;font-size:.76rem;color:var(--muted)}
.pack .price{text-align:right}
.pack .price b{font-size:1.3rem}

.toggle{display:flex;gap:5px;padding:6px;background:var(--paper-2);border:3px solid var(--line);border-radius:var(--pill);margin-top:12px}
.toggle button{
  flex:1;border:0;background:transparent;border-radius:var(--pill);cursor:pointer;padding:11px 8px;
  font-family:var(--f-display);font-weight:750;font-size:.95rem;color:var(--muted);line-height:1.15;
  transition:background .2s,color .2s,box-shadow .2s,transform .2s var(--spring);
}
.toggle button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 3px 0 var(--line-2)}
.toggle button:hover:not([aria-pressed="true"]){transform:translateY(-2px);color:var(--ink)}
.toggle button em{display:block;font-style:normal;font-family:var(--f-body);font-weight:700;font-size:.7rem;color:var(--coral-deep);margin-top:3px}

.total{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:16px}
.total .amt{font-family:var(--f-display);font-weight:750;font-size:clamp(2.2rem,5.4vw,3rem);line-height:.86;font-variant-numeric:tabular-nums}
.total .per{font-family:var(--f-body);font-weight:600;font-size:.78rem;color:var(--muted);text-align:right;line-height:1.45}

/* ============================================================
   FOR TEAMS
   ============================================================ */
.logo-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:14px;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:2;
}
.logo-card{
  border:3px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--surface);
  box-shadow:0 6px 0 var(--line);
  transition:transform .26s var(--spring),box-shadow .26s;
}
.logo-card:hover{transform:translateY(-7px) rotate(1deg);box-shadow:0 11px 0 var(--line),0 22px 38px rgba(42,27,94,.16)}
.logo-card .art{aspect-ratio:4/3;display:grid;place-items:center;padding:14px;background:var(--paper-2)}
.logo-card .cap{padding:11px 13px 14px;border-top:3px solid var(--line)}
.logo-card .cap b{display:block;font-family:var(--f-display);font-weight:750;font-size:.95rem}
.logo-card .cap small{font-family:var(--f-body);font-weight:600;font-size:.72rem;color:var(--muted)}

.tier-scroll{overflow-x:auto;max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut) 8px;position:relative;z-index:2}
table.tiers{border-collapse:separate;border-spacing:0 8px;width:100%;min-width:680px;font-size:.9rem}
table.tiers th{
  text-align:left;padding:8px 14px;font-family:var(--f-body);font-weight:700;font-size:.74rem;
  color:var(--muted);white-space:nowrap;
}
table.tiers td{background:var(--surface);padding:14px;vertical-align:middle;border-block:3px solid var(--line)}
table.tiers td:first-child{border-left:3px solid var(--line);border-radius:var(--r-m) 0 0 var(--r-m)}
table.tiers td:last-child{border-right:3px solid var(--line);border-radius:0 var(--r-m) var(--r-m) 0}
table.tiers td b{font-family:var(--f-display);font-weight:750;font-size:1rem}
table.tiers td.q{font-family:var(--f-body);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
table.tiers td.u{font-family:var(--f-display);font-weight:750;font-size:1.2rem;white-space:nowrap;color:var(--violet-deep)}
table.tiers tr.star td{background:color-mix(in srgb,var(--gold) 16%,var(--surface));border-color:var(--gold)}
table.tiers tr.star td.u{color:var(--gold-deep)}

.form{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  background:var(--surface);border:4px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(20px,3vw,34px);box-shadow:0 9px 0 var(--line),0 24px 44px rgba(42,27,94,.14);
  position:relative;z-index:2;
}
.form .full{grid-column:1/-1}
@media (max-width:660px){ .form{grid-template-columns:1fr} }
.field{display:grid;gap:6px}
.field label{font-family:var(--f-body);font-weight:700;font-size:.78rem;color:var(--ink-2)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.96rem;font-weight:600;color:var(--ink);
  padding:12px 14px;border:3px solid var(--line);border-radius:var(--r-s);
  background:var(--paper-2);width:100%;font-family:var(--f-body);
}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--violet)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:840px;margin-inline:auto;padding-inline:var(--gut);display:grid;gap:11px;position:relative;z-index:2}
details{
  background:var(--surface);border:3px solid var(--line);border-radius:var(--r-l);
  box-shadow:0 6px 0 var(--line);overflow:hidden;
}
summary{
  cursor:pointer;list-style:none;padding:17px 52px 18px 20px;position:relative;
  font-family:var(--f-display);font-weight:750;font-size:clamp(1.04rem,1.6vw,1.22rem);line-height:1.25;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;background:var(--g-violet);color:#fff;
  font-family:var(--f-display);font-weight:750;font-size:1.1rem;line-height:27px;text-align:center;
  transition:transform .3s var(--spring);
}
details[open] summary::after{transform:translateY(-50%) rotate(135deg)}
details .body{padding:0 20px 18px;color:var(--ink-2);font-size:.95rem;line-height:1.62}
details .body p + p{margin-top:.75em}

/* ============================================================
   BAG
   ============================================================ */
.scrim{position:fixed;inset:0;z-index:90;background:rgba(42,27,94,.62);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:100;width:min(410px,100%);
  background:var(--paper);border-left:4px solid var(--line);
  transform:translateX(102%);transition:transform .44s var(--spring);
  display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:3px solid var(--line)}
.drawer-head h2{font-size:1.3rem;margin-right:auto}
.x{
  border:3px solid var(--line);background:var(--surface);border-radius:var(--pill);
  width:40px;height:40px;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 0 var(--line);
  transition:transform .2s var(--spring);
}
.x:hover{transform:translateY(-2px) rotate(90deg)}
.drawer-body{flex:1;overflow-y:auto;padding:16px 20px;display:grid;gap:12px;align-content:start}
.line{
  display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;
  padding:12px;border:3px solid var(--line);border-radius:var(--r-m);background:var(--surface);
}
.line .thumb{width:62px;height:44px;display:grid;place-items:center}
.line .thumb svg{width:100%;height:auto}
.line b{display:block;font-family:var(--f-display);font-weight:750;font-size:.98rem}
.line small{font-family:var(--f-body);font-weight:600;font-size:.74rem;color:var(--muted);display:block}
.line .rm{border:0;background:transparent;color:var(--muted);cursor:pointer;font-family:var(--f-fun);font-size:.74rem;text-decoration:underline;padding:2px 0}
.line .rm:hover{color:var(--coral-deep)}
.drawer-foot{padding:16px 20px;border-top:3px solid var(--line);display:grid;gap:12px}
.empty{color:var(--muted);text-align:center;padding:34px 10px;font-weight:600}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink);color:var(--on-dark);padding-block:clamp(44px,7vh,80px) 28px;position:relative;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:2}
@media (max-width:780px){ .foot-grid{grid-template-columns:1fr;gap:26px} }
footer h4{font-family:var(--f-body);font-weight:700;font-size:.82rem;color:rgba(255,248,236,.55);margin-bottom:12px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.95rem;font-weight:600}
footer ul a{color:rgba(255,248,236,.84)}
footer ul a:hover{color:var(--gold)}
.foot-note{
  max-width:var(--wrap);margin:clamp(32px,5vh,52px) auto 0;padding-inline:var(--gut);
  border-top:2px solid rgba(255,248,236,.16);padding-top:20px;position:relative;z-index:2;
  font-size:.79rem;color:rgba(255,248,236,.56);line-height:1.6;display:grid;gap:9px;
}
.foot-note strong{color:rgba(255,248,236,.86)}
.foot-brand{
  font-family:var(--f-display);font-weight:750;font-size:clamp(3.6rem,14vw,10rem);
  line-height:.78;letter-spacing:-.05em;color:rgba(255,248,236,.09);
  margin:26px auto 0;padding-inline:var(--gut);max-width:var(--wrap);position:relative;z-index:2;
}

.toast{
  position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,150%);z-index:120;
  background:var(--g-violet);color:#fff;padding:14px 24px;border-radius:var(--pill);
  font-family:var(--f-display);font-weight:750;font-size:.97rem;
  box-shadow:var(--sh-toy),0 7px 0 var(--violet-deep),0 20px 34px rgba(42,27,94,.34);
  transition:transform .4s var(--spring);max-width:calc(100vw - 32px);text-align:center;
}
.toast.on{transform:translate(-50%,0)}

/* ============================================================
   MARQUEE — scroll-reactive ticker
   ============================================================ */
.marq{
  background:var(--ink);color:var(--paper);overflow:hidden;
  padding:14px 0;border-block:4px solid var(--violet);position:relative;z-index:5;
}
.marq-in{display:flex;gap:0;white-space:nowrap;will-change:transform}
.marq-in span{
  font-family:var(--f-display);font-weight:750;font-size:clamp(1.1rem,2.2vw,1.7rem);
  letter-spacing:-.01em;padding-inline:.5em;display:inline-flex;align-items:center;gap:.5em;
}
.marq-in span i{color:var(--gold);font-style:normal;font-size:.8em}
.marq-in span:nth-child(3n+2){color:var(--coral)}
.marq-in span:nth-child(3n+3){color:var(--teal)}

/* ============================================================
   STATS
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(18px,3vw,36px);position:relative;z-index:2}
.stat{display:grid;gap:8px}
.stat .fun{font-size:.87rem;color:var(--ink-2);line-height:1.45;max-width:26ch;font-weight:500}

/* ============================================================
   CATEGORIES — pinned, scroll-driven: city / country / team
   ============================================================ */
.cats{position:relative;background:var(--hill-3)}
.cats-track{height:340svh;position:relative}
.cats-pin{
  position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;
  display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);
  align-content:center;
  padding:clamp(88px,13vh,132px) 0 clamp(64px,10vh,104px);
}

.cats-bg{position:absolute;inset:0;z-index:0}
.cbg{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
.cbg.on{opacity:1}
.cbg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.55) contrast(1.08) brightness(.86);transform:scale(1.08)}

.cbg.kitbg span{
  position:absolute;inset:-10% -30%;
  background:repeating-linear-gradient(97deg,#D50032 0 7%,#F7F7F7 7% 14%);
}

@keyframes kitdrift{from{transform:translateX(0)}to{transform:translateX(14%)}}
.cbg.kitbg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 30% 30%,rgba(255,255,255,.35),transparent 70%);
}
.cats-veil{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(78% 78% at 14% 46%,rgba(23,15,54,.95) 0%,rgba(23,15,54,.72) 42%,transparent 76%),
    linear-gradient(to top,rgba(23,15,54,.88) 0%,rgba(23,15,54,.2) 46%,rgba(23,15,54,.5) 100%);
}

.cats-inner{
  position:relative;z-index:3;align-self:center;width:100%;
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut);
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  align-items:center;gap:clamp(20px,4vw,60px);
}
.cats-copy{position:relative}
.cats-copy article{
  position:absolute;left:0;right:0;top:50%;
  transform:translateY(-38%) scale(.96);opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease),transform .7s var(--spring);
}
.cats-copy article.on{transform:translateY(-50%);opacity:1;pointer-events:auto}
.cats-kicker{
  font-family:var(--f-body);font-weight:700;font-size:.76rem;letter-spacing:.18em;
  margin-bottom:12px;text-transform:uppercase;color:rgba(255,248,236,.62);
}
.cats-eg{
  font-family:var(--f-fun);font-weight:600;font-size:clamp(1.1rem,1.8vw,1.5rem);
  margin-top:14px;color:var(--gold);text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.cats-label{
  position:relative;z-index:5;justify-self:center;white-space:nowrap;
  margin:0 0 clamp(20px,3.6vh,44px);
  font-family:var(--f-body);font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,248,236,.9);background:rgba(23,15,54,.72);
  border:2px solid rgba(255,255,255,.28);padding:7px 15px 8px;border-radius:var(--pill);
  margin:0;
}

.cats-copy article:nth-child(1) .cats-eg{color:#5FE8DA}
.cats-copy article:nth-child(2) .cats-eg{color:#FFD25C}
.cats-copy article:nth-child(3) .cats-eg{color:#FF9DBF}
.cats-hint{transition:opacity .5s var(--ease)}
.cats-h{
  font-family:var(--f-display);font-weight:800;color:#fff;
  font-size:clamp(2.9rem,7.6vw,6rem);line-height:.9;letter-spacing:-.032em;
  text-shadow:0 4px 0 rgba(91,58,224,.5),0 18px 40px rgba(0,0,0,.5);
}
.cats-p{
  margin-top:14px;max-width:38ch;color:rgba(255,248,236,.86);
  font-weight:600;font-size:clamp(.98rem,1.2vw,1.12rem);line-height:1.5;
}
.cats-btn{margin-top:24px}

.cats-stage{position:relative;display:grid;place-items:center;height:100%}
.cats-glow{
  position:absolute;width:min(78vw,600px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(123,92,250,.6),rgba(47,211,155,.2) 46%,transparent 68%);
  filter:blur(14px);
}
.cats-patch{position:relative;width:min(78%,430px);will-change:transform}
.cats-patch svg{width:100%;height:auto;filter:drop-shadow(0 28px 40px rgba(0,0,0,.55))}
.cats-patch .layer{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease)}
.cats-patch .layer.on{opacity:1;position:relative}

.cats-nav{
  position:absolute;z-index:4;left:50%;transform:translateX(-50%);bottom:clamp(20px,4vh,44px);
  display:flex;gap:8px;list-style:none;margin:0;padding:0;
}
.cats-nav button{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  border:2px solid rgba(255,255,255,.3);background:rgba(23,15,54,.44);
  color:rgba(255,248,236,.86);
  padding:8px 15px 9px;border-radius:var(--pill);
  font-family:var(--f-display);font-weight:800;font-size:.88rem;line-height:1;
  transition:transform .22s var(--spring),border-color .22s,background .22s,color .22s;
}
.cats-nav button span{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);
  transition:background .3s,transform .3s var(--spring);
}
.cats-nav button:hover{transform:translateY(-3px);color:#fff;border-color:rgba(255,255,255,.65)}
.cats-nav button[aria-current="true"]{background:var(--g-gold);color:#2A1B5E;border-color:transparent}
.cats-nav button[aria-current="true"] span{background:#2A1B5E;transform:scale(1.4)}

.cats-hint{
  position:absolute;z-index:4;right:var(--gut);bottom:clamp(22px,4vh,46px);
  font-family:var(--f-fun);font-weight:600;font-size:.82rem;color:rgba(255,248,236,.6);
  display:flex;align-items:center;gap:8px;
}
.anim .cats-hint svg{animation:nudgeY 1.3s var(--ease) infinite alternate}
@keyframes nudgeY{from{transform:translateY(0)}to{transform:translateY(6px)}}

@media (max-width:900px){
  .cats-track{height:320svh}
  .cats-inner{grid-template-columns:1fr;align-content:center;gap:14px;padding-top:12vh}
  .cats-copy{min-height:44vh}
  .cats-copy article{top:0;transform:translateY(8%) scale(.96)}
  .cats-copy article.on{transform:translateY(0)}
  .cats-stage{height:auto}
  .cats-patch{width:min(74%,320px)}
  .cats-nav{bottom:18px}
  .cats-hint{display:none}
}

/* curved scene dividers: zero-height, wave overlaps the section above */
.divider{position:relative;z-index:6;height:0;line-height:0;pointer-events:none}
.divider svg{
  display:block;width:101%;margin-left:-.5%;
  height:var(--wave-h);position:relative;top:calc(-1 * var(--wave-h) + 1px);
}
.divider.flip svg{transform:scaleX(-1)}

/* ============================================================
   POSTCARDS
   ============================================================ */
.postcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;position:relative;z-index:2}
.postcards .frame:nth-child(odd){transform:rotate(-1.4deg)}
.postcards .frame:nth-child(even){transform:rotate(1.4deg)}
.anim .postcards .frame.rv.in:nth-child(odd){transform:rotate(-1.4deg)}
.anim .postcards .frame.rv.in:nth-child(even){transform:rotate(1.4deg)}
.postcards .frame{transition:transform .3s var(--spring),box-shadow .3s}
.postcards .frame:hover{transform:rotate(0) translateY(-7px) scale(1.02)!important;box-shadow:0 12px 0 var(--line),0 32px 56px rgba(42,27,94,.26)}

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.progress{
  position:fixed;top:0;left:0;height:5px;width:0;z-index:200;
  background:var(--g-coral);border-bottom-right-radius:5px;
  box-shadow:0 0 14px rgba(255,93,143,.6);transition:width .08s linear;
}

/* ============================================================
   HERO CTAS
   ============================================================ */
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:clamp(26px,4vh,40px)}

/* ============================================================
   HORIZONTAL SCROLL GALLERY
   ============================================================ */
.hs-track{height:330svh;position:relative}
.hs-pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:clamp(16px,3vh,32px);overflow:hidden;z-index:2}
.hs-head{padding-inline:var(--gut);max-width:var(--wrap);margin-inline:auto;width:100%}
.hs-row{display:flex;gap:clamp(14px,2vw,26px);padding-inline:var(--gut);will-change:transform;width:max-content;backface-visibility:hidden}
.hs-card{
  appearance:none;padding:0;border:0;font:inherit;color:inherit;cursor:pointer;text-align:left;display:block;
  flex:none;width:clamp(210px,27vw,330px);
  border-radius:var(--r-xl);overflow:hidden;position:relative;
  border:5px solid var(--surface);box-shadow:0 8px 0 var(--line),0 24px 44px rgba(42,27,94,.22);
  transition:transform .3s var(--spring);
}
.hs-card:hover,.hs-card:focus-visible{transform:translateY(-8px) scale(1.02)}
.hs-card:active{transform:translateY(-2px)}
.hs-card .ph{position:relative;aspect-ratio:3/4;overflow:hidden}
.hs-card .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(1.4) contrast(1.05);transition:transform .7s var(--ease)}
.hs-card:hover .ph img{transform:scale(1.06)}
.hs-card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(42,27,94,.9),rgba(42,27,94,.05) 52%)}
.hs-card .gelover{position:absolute;left:17%;top:33%;width:66%;--rot:-6deg;transform:rotate(-6deg);z-index:3;filter:drop-shadow(0 14px 20px rgba(0,0,0,.5))}
.anim .hs-card .gelover{animation:bob 6s ease-in-out infinite alternate}
.hs-card .cap{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:18px 118px 18px 18px;display:block}
.hs-card .cap b{display:block;font-family:var(--f-display);font-weight:800;font-size:1.3rem;color:#fff;line-height:1.05}
.hs-card .cap small{font-family:var(--f-fun);font-weight:500;font-size:.78rem;color:rgba(255,248,236,.78)}
.hs-hint{
  padding-inline:var(--gut);max-width:var(--wrap);margin-inline:auto;width:100%;
  font-family:var(--f-fun);font-weight:600;font-size:.82rem;color:var(--muted);
}
@media (max-width:700px){ .hs-track{height:300svh} }

/* word-by-word headline reveal */
.anim .w{display:inline-block;opacity:.001;transform:translateY(24px) rotate(2deg);transition:opacity .5s var(--ease),transform .62s var(--spring)}
.anim .in .w,.anim .w.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){ .anim .w{opacity:1!important;transform:none!important} }

/* moment cards: category CTA + team-colour background */
.moment .mcta{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-family:var(--f-display);font-weight:800;font-size:.92rem;color:#2A1B5E;
  background:var(--g-gold);padding:9px 16px 10px;border-radius:var(--pill);
  box-shadow:var(--sh-toy),0 4px 0 var(--gold-deep);
  transition:transform .22s var(--spring),box-shadow .22s;
}
.moment:hover .mcta{transform:translateY(-3px);box-shadow:var(--sh-toy),0 7px 0 var(--gold-deep)}
.moment:hover .mcta svg{animation:nudge .7s var(--ease) infinite alternate}
@keyframes nudge{from{transform:translateX(0)}to{transform:translateX(5px)}}
.kit-ph{position:relative;background:#D50032;overflow:hidden}
.kit-bg{
  position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,#D50032 0 11%,#F7F7F7 11% 22%);
}
.kit-ph::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(70% 50% at 50% 34%,rgba(255,255,255,.34),transparent 70%);
}

/* button life: a slow gloss sweep, and a nudge on the hero CTA */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:38%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translate3d(-180%,0,0) skewX(-18deg);
}
.anim .btn::after{animation:sweep 4.6s var(--ease) infinite}
.anim .btn.cream::after{animation-delay:.9s}
@keyframes sweep{0%{transform:translate3d(-180%,0,0) skewX(-18deg)}38%,100%{transform:translate3d(340%,0,0) skewX(-18deg)}}
.hero-cta .btn:first-child{animation:pulse 3.4s var(--ease) infinite}
@keyframes pulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.hero-cta .btn:first-child:hover{animation:none}
@media (prefers-reduced-motion: reduce){ .btn::after{display:none} .hero-cta .btn:first-child{animation:none} }

/* chips + options: livelier hover */
.chip:focus-visible{transform:translateY(-6px)}
.opt:active{transform:translateY(1px)}
.tabs button:active{transform:translateY(2px)}

/* ============================================================
   NEW: plain facts row, paired frames, rail swatches, flag search
   ============================================================ */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(14px,2.4vw,26px);position:relative;z-index:2}
.fact{
  background:var(--surface);border:3px solid var(--line);border-radius:var(--r-l);
  padding:18px 18px 20px;box-shadow:0 6px 0 var(--line);
  transition:transform .26s var(--spring),box-shadow .26s;
}
.fact:hover{transform:translateY(-5px);box-shadow:0 10px 0 var(--line)}
.fact-k{font-family:var(--f-fun);font-weight:500;font-size:.78rem;color:var(--muted)}
.fact-v{font-family:var(--f-display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.3rem);line-height:1.02;letter-spacing:-.03em;margin:2px 0 8px}
.fact:nth-child(1) .fact-v{color:var(--violet-deep)}
.fact:nth-child(2) .fact-v{color:var(--coral-deep)}
.fact:nth-child(3) .fact-v{color:var(--teal-deep)}
.fact:nth-child(4) .fact-v{color:var(--gold-deep)}
.fact-n{font-size:.86rem;color:var(--ink-2);line-height:1.45;font-weight:600}

.pair-frames{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pair-frames .frame img{aspect-ratio:3/4}
@media (max-width:520px){ .pair-frames{grid-template-columns:1fr} .pair-frames .frame img{aspect-ratio:16/10} }

.chip.chip-art{background:rgba(255,255,255,.28)}
.chip .swatch{display:block;width:100%;aspect-ratio:4/3;border-radius:13px;overflow:hidden;background:#fff}
.chip .swatch svg{width:100%;height:100%;display:block}

.tray-search{margin-bottom:12px}
.tray-search input{
  width:100%;font:inherit;font-weight:600;font-size:.92rem;color:var(--ink);
  padding:11px 14px;border:3px solid var(--line);border-radius:var(--pill);
  background:var(--paper-2);font-family:var(--f-body);
}
.tray-search input:focus{outline:0;border-color:var(--violet)}
.opts{max-height:326px}

.card-sub{
  font-family:var(--f-fun);font-weight:500;font-size:.82rem;color:var(--violet-deep);
  margin-top:-4px;
}
.card.dark .card-sub{color:var(--gold)}

.hs-go{
  position:absolute;right:14px;bottom:16px;z-index:5;
  font-family:var(--f-display);font-weight:800;font-size:.82rem;color:#2A1B5E;
  background:var(--g-gold);padding:7px 14px 8px;border-radius:var(--pill);
  box-shadow:var(--sh-toy),0 3px 0 var(--gold-deep);
  opacity:0;transform:translateY(6px);transition:opacity .24s var(--ease),transform .28s var(--spring);
}
.hs-card:hover .hs-go,.hs-card:focus-visible .hs-go{opacity:1;transform:none}
@media (hover:none){ .hs-go{opacity:1;transform:none} }

/* ============================================================
   WAVE CLEARANCE
   A divider's crest hangs up over the section above it, so any
   section that precedes one reserves that height at the bottom.
   ============================================================ */
.pre-wave{padding-bottom:calc(clamp(74px,10vh,128px) + var(--wave-h))}
.facts-scene{padding-block:clamp(44px,7vh,76px)}
.facts-scene.pre-wave{padding-bottom:calc(clamp(44px,7vh,76px) + var(--wave-h))}

/* the pinned sections keep their controls above the crest */
.cats-pin{padding-bottom:calc(clamp(64px,10vh,104px) + var(--wave-h))}
.cats-nav{bottom:calc(clamp(20px,4vh,44px) + var(--wave-h))}
.cats-hint{bottom:calc(clamp(22px,4vh,46px) + var(--wave-h))}
.scrub-pin{padding-bottom:calc(clamp(64px,10vh,104px) + var(--wave-h))}
.hs-pin{padding-bottom:var(--wave-h)}
@media (max-width:900px){
  .cats-nav{bottom:calc(18px + var(--wave-h))}
}