/* ============ Good Boy — style.css (v7) ============
   Type: Fredoka (display) + Nunito Sans (body) only. No text shadows.
   Colour: brand blue + one accent (pink) on a sky that moves morning → golden hour → night. */
@font-face{font-family:"Fredoka";font-style:normal;font-display:swap;font-weight:300 700;src:url(../fonts/fredoka-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fredoka";font-style:normal;font-display:swap;font-weight:300 700;src:url(../fonts/fredoka-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito Sans";font-style:normal;font-display:swap;font-weight:200 1000;src:url(../fonts/nunito-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito Sans";font-style:normal;font-display:swap;font-weight:200 1000;src:url(../fonts/nunito-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF,U+20A0-20C0,U+2C60-2C7F,U+A720-A7FF}

:root{
  --blue:#3a5cb2; --blue-deep:#2b4489; --violet:#6a5ad6; --ink:#1f2b55; --ink-soft:#4a5478;
  --cream:#fff8eb; --white:#fffdfa;
  --pink:#f5b8d9; --pink-mid:#ee93bf; --pink-deep:#d4699f; --pink-text:#b8487f;
  --display:"Fredoka",system-ui,sans-serif;
  --body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --r-lg:28px; --r-md:20px;
  --sh-soft:0 1px 0 rgba(255,255,255,.9) inset,0 12px 32px -8px rgba(43,68,137,.22);
  --sh-btn:0 10px 24px -8px rgba(43,68,137,.45);
  --tap:44px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;font-family:var(--body);font-weight:600;font-size:1rem;line-height:1.55;color:var(--ink);background:#c9dcfa;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
h1,h2,h3,p,ul,ol,figure{margin:0}
[hidden]{display:none!important}
::selection{background:var(--pink);color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:12px}
.wrap{max-width:72rem;margin-inline:auto;padding-inline:1.25rem}
@media(min-width:640px){.wrap{padding-inline:2rem}}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--blue);color:#fff;padding:.75rem 1rem;border-radius:0 0 12px 0}
.skip:focus{left:0}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:none}}
@keyframes pulse{50%{transform:scale(1.07);opacity:.8}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}

/* ---------- reveal on scroll ---------- */
/* entrances are driven by GSAP; without JS everything is simply visible */
html.no-gsap .reveal{opacity:1}

/* ---------- type ---------- */
.title{font-family:var(--display);font-weight:700;line-height:.95;letter-spacing:-.02em;font-size:clamp(3.2rem,14vw,4.6rem)}
@media(min-width:900px){.title{font-size:clamp(4.4rem,7vw,6.6rem)}}
.title__line{display:block;color:var(--blue)}
.title__line--pink{color:#c9558f}
.title--sm{font-size:clamp(2.5rem,7vw,4.2rem);color:var(--blue)}
.title--sm span{color:var(--pink-deep)}
.word{display:inline-block;white-space:nowrap}
.char.jelly{animation:jelly .6s var(--spring)}
@keyframes jelly{30%{transform:scale(1.22,.78)}50%{transform:scale(.86,1.16)}70%{transform:scale(1.06,.95)}100%{transform:none}}

/* ---------- chips & buttons ---------- */
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .95rem .42rem .75rem;border-radius:999px;font-family:var(--display);font-weight:600;font-size:.9rem}
.chip svg{flex-shrink:0}
.chip--glass{background:rgba(255,255,255,.72);color:var(--blue-deep);box-shadow:var(--sh-soft);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.chip--glass svg{color:var(--pink-deep)}
.chip--night{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.chip--night svg{color:var(--pink)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:var(--tap);padding:.8rem 1.5rem;border:0;border-radius:999px;font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:.01em;text-decoration:none;transition:transform .35s var(--spring),box-shadow .3s var(--ease),background-position .5s var(--ease);background-size:200% 100%;will-change:transform}
.btn svg{flex-shrink:0;transition:transform .35s var(--spring)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:scale(.96)!important}
.btn--blue{background-image:linear-gradient(100deg,var(--blue),var(--violet),var(--blue));color:#fff;box-shadow:var(--sh-btn)}
.btn--blue:hover{background-position:100% 0}
.btn--pink{background-image:linear-gradient(100deg,#f7b1d4,#f08fc0,#f7b1d4);color:var(--ink);box-shadow:0 10px 24px -8px rgba(212,105,159,.6)}
.btn--pink:hover{background-position:100% 0}
.btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.btn--ghost:hover{box-shadow:inset 0 0 0 2px #fff}
.btn--ghost-dark{background:transparent;color:var(--blue-deep);box-shadow:inset 0 0 0 2px rgba(43,68,137,.25)}
.btn--lg{min-height:56px;padding:1rem 1.9rem;font-size:1.08rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important}
.pillbtn{min-height:40px;padding:.45rem .95rem;border:0;border-radius:999px;background:#fff;color:var(--blue-deep);font-family:var(--display);font-weight:600;font-size:.88rem;box-shadow:inset 0 0 0 1.5px rgba(43,68,137,.16);transition:transform .3s var(--spring),background .2s}
.pillbtn:hover{transform:translateY(-2px);background:#fdf0f7}
.iconbtn{width:var(--tap);height:var(--tap);border:0;border-radius:50%;background:#eef2fc;color:var(--blue-deep);display:grid;place-items:center;transition:transform .3s var(--spring),background .2s}
.iconbtn:hover{transform:rotate(90deg);background:#e2e9fa}

/* ================= SKY ================= */
.skyfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sk{position:absolute;inset:0}
.sk1{background:linear-gradient(180deg,#9dbff1 0%,#c8dcfb 50%,#fbe6f0 100%)}
.sk2{background:linear-gradient(180deg,#f2b3d0 0%,#ffcdbe 48%,#fff0e6 100%);opacity:0}
.sk3{background:radial-gradient(120% 90% at 70% 15%,#4560c0 0%,#253b85 42%,#141e50 100%);opacity:0}
.aura{position:absolute;border-radius:50%;opacity:.55;animation:auraMove var(--t,26s) ease-in-out infinite alternate;will-change:transform}
.a1{width:46vmax;height:46vmax;left:-12vmax;top:10vh;background:radial-gradient(closest-side,rgba(255,182,220,.75),transparent);--t:24s}
.a2{width:40vmax;height:40vmax;right:-10vmax;top:35vh;background:radial-gradient(closest-side,rgba(165,150,245,.55),transparent);--t:30s}
.a3{width:36vmax;height:36vmax;left:30vw;bottom:-14vmax;background:radial-gradient(closest-side,rgba(150,200,255,.6),transparent);--t:22s}
@keyframes auraMove{to{transform:translate(6vmax,-4vmax) scale(1.12)}}
.skystars{position:absolute;inset:0;opacity:0}
.skystars span{position:absolute;color:#fff;animation:twinkle var(--t,3s) ease-in-out infinite;animation-delay:var(--d,0s)}
.skyclouds{position:absolute;inset:0;transition:opacity .4s}
.cloud{position:absolute;display:block;background:#fff;border-radius:999px;box-shadow:inset -12px -12px 0 rgba(176,196,238,.32);top:0;will-change:transform}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%;box-shadow:inset -10px -8px 0 rgba(176,196,238,.28)}
.cloud::before{width:55%;height:140%;left:14%;bottom:30%}
.cloud::after{width:40%;height:110%;right:12%;bottom:35%}
.skyclouds .cloud:nth-child(1){width:14rem;height:4.4rem;left:-3rem}
.skyclouds .cloud:nth-child(2){width:9rem;height:3rem;left:72%}
.skyclouds .cloud:nth-child(3){width:17rem;height:5.2rem;left:52%}
.skyclouds .cloud:nth-child(4){width:8rem;height:2.6rem;left:14%}
.skyclouds .cloud:nth-child(5){width:11rem;height:3.6rem;left:84%}
.sparkles{position:fixed;inset:0;z-index:94;pointer-events:none;width:100%;height:100%}

/* ================= HEADER ================= */
.header{position:fixed;left:0;right:0;top:.75rem;z-index:60;padding-inline:.75rem;transition:transform .5s var(--ease)}
.header.is-hidden{transform:translateY(-150%)}
.pill{max-width:72rem;margin-inline:auto;display:flex;align-items:center;gap:.5rem;padding:.4rem .4rem .4rem 1.15rem;border-radius:999px;background:rgba(255,255,255,.66);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8),0 12px 34px -12px rgba(43,68,137,.3)}
.pill__logo{display:inline-flex;align-items:center;min-height:var(--tap)}
.pill__logo img{height:1.6rem;width:auto;transition:transform .45s var(--spring)}
.pill__logo:hover img{transform:rotate(-6deg) scale(1.06)}
@media(min-width:640px){.pill__logo img{height:1.85rem}}
.pill__links{display:none;margin-inline:auto;gap:.2rem}
@media(min-width:880px){.pill__links{display:flex}}
.pill__links a{position:relative;display:inline-flex;align-items:center;min-height:var(--tap);padding:.4rem 1.05rem;border-radius:999px;text-decoration:none;font-family:var(--display);font-weight:500;color:var(--ink);transition:background .25s,color .25s}
.pill__links a:hover{background:rgba(255,255,255,.9);color:var(--blue)}
.pill__actions{display:flex;align-items:center;gap:.4rem;margin-left:auto}
@media(min-width:880px){.pill__actions{margin-left:0}}
.jarbtn{display:inline-flex;align-items:center;gap:.5rem;min-height:var(--tap);padding:.3rem .4rem .3rem .95rem;border:0;border-radius:999px;background:linear-gradient(100deg,var(--blue),var(--violet));color:#fff;font-family:var(--display);font-weight:600;box-shadow:var(--sh-btn);transition:transform .35s var(--spring)}
.jarbtn:hover{transform:translateY(-2px)}
.jarbtn__label{display:none}
@media(min-width:480px){.jarbtn__label{display:inline}}
.jarbtn__n{min-width:30px;height:30px;padding:0 7px;border-radius:999px;background:#fff;color:var(--blue-deep);display:grid;place-items:center;font-size:.92rem;transition:background .3s}
.jarbtn.has-items .jarbtn__n{background:var(--pink)}
.jarbtn.bump{animation:jbump .55s var(--spring)}
@keyframes jbump{30%{transform:scale(1.14) rotate(-4deg)}60%{transform:scale(.96) rotate(2deg)}}
.burger{width:var(--tap);height:var(--tap);border:0;border-radius:50%;background:rgba(255,255,255,.85);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:18px;height:2.5px;border-radius:3px;background:var(--blue-deep);transition:transform .4s var(--spring)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
@media(min-width:880px){.burger{display:none}}
body.menu-open .header{z-index:80;transform:none}
.menu{position:fixed;inset:0;z-index:70;background:linear-gradient(180deg,#9dbff1,#c8dcfb 50%,#fbe6f0);display:flex;align-items:center;justify-content:center;overflow:hidden;animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0}}
.menu__links{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.menu__links a{font-family:var(--display);font-weight:700;font-size:clamp(2.3rem,10vw,3.2rem);line-height:1.2;color:var(--blue);text-decoration:none;padding:.2rem 1rem;animation:menuIn .65s var(--spring) both;animation-delay:calc(var(--i)*70ms + 60ms)}
.menu__links a:nth-child(even){color:var(--pink-deep)}
@keyframes menuIn{from{opacity:0;transform:translateY(30px) scale(.8)}}
.menu__cookie{position:absolute;width:7rem;right:-1.5rem;bottom:8%;animation:spin 18s linear infinite}

/* ================= HERO ================= */
.hero{position:relative;overflow-x:clip;min-height:100svh;display:flex;align-items:center;padding-top:5.5rem}
.hero__inner{display:grid;gap:1.5rem;align-items:center;padding-block:1.5rem 5rem;width:100%}
@media(min-width:900px){.hero__inner{grid-template-columns:1.05fr 1fr;gap:2.5rem;padding-block:2rem 6rem}}
.hero .title{margin-top:1.1rem}
.hero__lead{margin-top:1.4rem;max-width:27rem;font-size:1.12rem;color:var(--ink-soft)}
.hero__ctas{margin-top:1.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}
.perk{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:500;color:var(--blue-deep)}
.perk svg{color:var(--pink-deep)}
.hero .reveal:nth-child(1){--d:80ms}.hero .hero__lead{--d:500ms}.hero .hero__ctas{--d:620ms}
.planet{position:relative;width:min(84vw,30rem);aspect-ratio:1;margin-inline:auto;cursor:pointer}
@keyframes sunrise{from{opacity:0;transform:translateY(40%) scale(.6)}}
.rays{position:absolute;inset:-36%;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.5) 0deg 5deg,rgba(255,255,255,0) 5deg 15deg);-webkit-mask:radial-gradient(circle,#000 18%,transparent 64%);mask:radial-gradient(circle,#000 18%,transparent 64%);animation:spin 90s linear infinite}
.planet__glow{position:absolute;inset:-10%;border-radius:50%;background:radial-gradient(circle,rgba(255,226,236,.95) 0%,rgba(255,196,226,.45) 40%,transparent 68%);animation:pulse 6s ease-in-out infinite}
.planet__shadow{position:absolute;left:24%;right:24%;bottom:4%;height:10%;z-index:1;border-radius:50%;background:radial-gradient(closest-side,rgba(90,60,90,.3),transparent);animation:pulse 6s ease-in-out infinite}
.planet__body{position:absolute;inset:14%;z-index:2;border-radius:50%;animation:bob 6s ease-in-out infinite}
.planet__body img{width:100%;height:100%;object-fit:contain;animation:spin 80s linear infinite}
.planet__body::after{content:"";position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.4),transparent 42%);pointer-events:none}
.planet__body.jelly{animation:jelly .7s var(--spring)}
.orbit{position:absolute;left:-6%;right:-6%;top:38%;height:30%;border-radius:50%;border:2.5px solid rgba(255,255,255,.85);transform:rotate(-14deg);pointer-events:none}
.orbit--back{z-index:1;clip-path:inset(0 0 50% 0)}
.orbit--front{z-index:3;clip-path:inset(50% 0 0 0)}
.moons{position:absolute;inset:0;pointer-events:none}
.moon{position:absolute;left:0;top:0;width:22%;will-change:transform}
.tag{position:absolute;z-index:4;padding:.38rem .85rem;border-radius:999px;background:rgba(255,255,255,.88);box-shadow:var(--sh-soft);font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--blue-deep);white-space:nowrap;animation:bob 5s ease-in-out infinite}
.tag::before{content:"✦ ";color:var(--pink-deep)}
.tag--a{top:6%;left:2%;animation-delay:-1s}.tag--b{top:22%;right:-2%;animation-delay:-2.5s}.tag--c{bottom:8%;left:12%;animation-delay:-.5s}
.scrollhint{position:absolute;left:50%;bottom:1.4rem;width:28px;height:44px;margin-left:-14px;border-radius:20px;box-shadow:inset 0 0 0 2px rgba(43,68,137,.35);display:none}
.scrollhint span{position:absolute;left:50%;top:8px;width:5px;height:9px;margin-left:-2.5px;border-radius:4px;background:var(--pink-deep);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@media(min-width:900px) and (min-height:720px){.scrollhint{display:block}}

/* ================= SHOP ================= */
.shop{position:relative;padding-block:3rem 5rem}
.shop__head{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.steps{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.steps li{display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .85rem .3rem .3rem;border-radius:999px;background:rgba(255,255,255,.6);font-size:.88rem;color:var(--ink)}
.steps b{width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-family:var(--display);font-weight:600;font-size:.8rem}
.shop__grid{display:grid;gap:1.25rem;margin-top:2rem;align-items:start}
@media(min-width:1000px){.shop__grid{grid-template-columns:1fr 20rem;gap:2rem}}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
@media(min-width:720px){.cards{gap:1.25rem}}
.card{--tint:#ffe2b3;position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);background:rgba(255,255,255,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--sh-soft);padding:.75rem .75rem .85rem;transition:transform .5s var(--spring),box-shadow .4s var(--ease),opacity .8s var(--ease)}
@media(min-width:720px){.card{padding:1rem 1rem 1.1rem}}
.card:hover{transform:translateY(-6px)}
.card.has-qty{box-shadow:inset 0 0 0 2.5px var(--pink-mid),0 16px 34px -10px rgba(212,105,159,.45)}
.card:nth-child(2){--d:80ms}.card:nth-child(3){--d:160ms}.card:nth-child(4){--d:240ms}
.card__art{position:relative;aspect-ratio:1;display:grid;place-items:center;border-radius:calc(var(--r-lg) - 8px);background:radial-gradient(circle at 50% 55%,var(--tint),color-mix(in srgb,var(--tint) 40%,#fff) 70%);overflow:hidden}
.card__halo{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.75),transparent);animation:pulse 5s ease-in-out infinite}
.card__art img{position:relative;width:82%;transition:transform .8s var(--spring)}
.card:hover .card__art img{transform:rotate(-18deg) scale(1.06)}
.card__art img.wiggle{animation:wiggle .6s var(--spring)}
@keyframes wiggle{30%{transform:rotate(14deg) scale(1.1)}60%{transform:rotate(-8deg)}}
.mystery{position:relative;width:82%;aspect-ratio:1;display:grid;place-items:center}
.mystery img{position:absolute;inset:0;width:100%;filter:brightness(0) invert(1) opacity(.6)}
.mystery b{position:relative;font-family:var(--display);font-weight:700;font-size:clamp(3rem,10vw,4.5rem);color:var(--pink-deep);animation:sway 4s ease-in-out infinite}
@keyframes sway{25%{transform:rotate(8deg) scale(1.05)}75%{transform:rotate(-8deg)}}
.card__body{padding:.75rem .25rem .6rem;flex:1}
.card h3{font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,3.6vw,1.45rem);line-height:1.1;color:var(--blue-deep)}
.card__tag{margin-top:.2rem;font-size:.88rem;color:var(--pink-text)}
.card__desc{margin-top:.35rem;font-size:.85rem;color:var(--ink-soft);display:none}
@media(min-width:720px){.card__desc{display:block}}
.card__desc b{color:var(--blue-deep)}
/* qty control */
.qty{display:flex;align-items:center;justify-content:space-between;gap:.35rem;min-height:var(--tap);border-radius:999px}
.qty .add{width:100%;min-height:var(--tap);border:0;border-radius:999px;background:linear-gradient(100deg,var(--blue),var(--violet));color:#fff;font-family:var(--display);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;box-shadow:var(--sh-btn);transition:transform .35s var(--spring)}
.qty .add:hover{transform:translateY(-2px)}
.qty .add:active{transform:scale(.95)}
.qty .step{width:var(--tap);height:var(--tap);flex-shrink:0;border:0;border-radius:50%;background:#eef2fc;color:var(--blue-deep);font-family:var(--display);font-weight:600;font-size:1.35rem;line-height:1;display:grid;place-items:center;transition:transform .25s var(--spring),background .2s}
.qty .step:hover{background:#e0e8fb}
.qty .step:active{transform:scale(.88)}
.qty .step--plus{background:linear-gradient(100deg,var(--blue),var(--violet));color:#fff}
.qty output{flex:1;text-align:center;font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--blue-deep);font-variant-numeric:tabular-nums}
.qty output.bump{animation:pop .4s var(--spring)}
.qty.swap>*{animation:qIn .35s var(--spring)}
@keyframes qIn{from{opacity:0;transform:scale(.7)}}

/* summary / jar */
.summary{position:sticky;top:92px;display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;padding:1rem;border-radius:var(--r-lg);background:rgba(255,255,255,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--sh-soft)}
@media(min-width:1000px){.summary{grid-template-columns:1fr;padding:1.4rem;justify-items:center;text-align:center}}
@media(max-width:999px){.summary{position:relative;top:0}}
.jar{position:relative;width:6.5rem;height:8.2rem;flex-shrink:0}
@media(min-width:1000px){.jar{width:11rem;height:14rem}}
.jar.shake{animation:shake .6s var(--spring)}
@keyframes shake{20%{transform:rotate(-8deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-3deg)}}
.jar__lid{position:absolute;left:16%;right:16%;top:0;height:11%;border-radius:10px 10px 6px 6px;background:linear-gradient(100deg,#f7b1d4,#ee93bf);z-index:3}
.jar__glass{position:absolute;left:4%;right:4%;top:10%;bottom:0;border-radius:1.4rem 1.4rem 1.8rem 1.8rem;background:linear-gradient(90deg,rgba(255,255,255,.7),rgba(235,242,255,.5) 45%,rgba(255,255,255,.6));box-shadow:inset 0 0 0 3px rgba(255,255,255,.95),inset 0 -12px 24px rgba(120,150,220,.25);overflow:hidden}
.jar__cookies{position:absolute;inset:6% 6% 4%}
.jar__cookies img,.jar__cookies i{position:absolute;width:36%;aspect-ratio:1;animation:jarDrop .75s var(--spring) both}
.jar__cookies i{border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd6ea,#ee93bf);display:grid;place-items:center;color:var(--ink);font-style:normal;font-family:var(--display);font-weight:700;font-size:.9rem}
@keyframes jarDrop{from{transform:translateY(-14rem) rotate(-120deg)}}
.jar__line{position:absolute;left:0;right:0;top:10%;z-index:2;border-top:2px dashed rgba(212,105,159,.7)}
.jar__shine{position:absolute;left:12%;top:8%;bottom:14%;width:9%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.1));z-index:3}
.summary__body{min-width:0;width:100%}
.summary__count{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--ink-soft)}
.summary__count b{font-size:2rem;color:var(--blue);margin-right:.15rem;display:inline-block}
.summary__count b.bump{animation:pop .4s var(--spring)}
.meter{margin-top:.6rem;height:12px;border-radius:999px;background:#e9eefa;overflow:hidden}
.meter__fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--pink-deep));transition:width .7s var(--spring)}
.meter.is-free .meter__fill{background:linear-gradient(90deg,var(--blue),var(--violet))}
.meter__msg{margin-top:.5rem;font-size:.88rem;color:var(--ink-soft)}
.meter__msg b{color:var(--pink-text)}
.bundles{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:1rem 0}
@media(min-width:1000px){.bundles{justify-content:center}}
.bundles span{width:100%;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:999px){.summary .bundles,.summary .btn{grid-column:1/-1}.summary__body{display:contents}.summary__count,.summary .meter,.summary .meter__msg{grid-column:2}}

/* ================= FOOTER ================= */
.footer{position:relative;overflow-x:clip;color:#fff;padding:6rem 0 calc(6.5rem + env(safe-area-inset-bottom))}
@media(min-width:1000px){.footer{padding-bottom:2rem}}
.footer__main{display:grid;gap:2.5rem;align-items:center}
@media(min-width:900px){.footer__main{grid-template-columns:1.1fr 1fr;gap:3rem}}
.footer__big{margin-top:1.1rem;font-family:var(--display);font-weight:700;font-size:clamp(3rem,11vw,6rem);line-height:.92;letter-spacing:-.02em;color:#fff}
.footer__big span{color:#ffb3d8}
.footer__lead{margin-top:1.2rem;max-width:26rem;color:rgba(255,255,255,.82)}
.footer__ctas{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.8rem}
.constellation{position:relative;width:min(88vw,26rem);aspect-ratio:1;margin-inline:auto}
.const__svg{width:100%;height:100%;overflow:visible}
.const__lines line{stroke:rgba(200,215,255,.55);stroke-width:.45;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.1s var(--ease);transition-delay:var(--d)}
.constellation.is-in .const__lines line{stroke-dashoffset:0}
.const__stars circle{fill:#fff;transform-box:fill-box;transform-origin:center;animation:twinkle var(--t,3s) ease-in-out infinite;animation-delay:var(--dl,0s);transition:r .3s var(--spring)}
.const__stars circle.pink{fill:#ffc2df}.const__stars circle.blue{fill:#bcd2ff}
.const__stars circle:hover{r:2.6}
.const__cookie{position:absolute;left:var(--cx,88%);top:var(--cy,36%);width:17%;aspect-ratio:1;margin:-8.5% 0 0 -8.5%;border:0;padding:0;border-radius:50%;background:none;transition:transform .4s var(--spring)}
.const__cookie::before{content:"";position:absolute;inset:-45%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,194,223,.6),transparent);animation:pulse 3s ease-in-out infinite}
.const__cookie img{position:relative;width:100%;animation:spin 30s linear infinite}
.const__cookie:hover{transform:scale(1.12)}
.const__cookie.jelly{animation:jelly .7s var(--spring)}
.constellation figcaption{position:absolute;left:0;right:0;bottom:-.5rem;text-align:center;font-size:.82rem;color:rgba(255,255,255,.7)}
.constellation figcaption span{color:#ffc2df}
.facts{list-style:none;padding:0;margin-top:3rem;display:grid;gap:.75rem}
@media(min-width:720px){.facts{grid-template-columns:repeat(3,1fr)}}
.facts li{display:flex;align-items:center;gap:.85rem;padding:1rem 1.1rem;border-radius:var(--r-md);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14);transition:background .3s,transform .4s var(--spring)}
.facts li:hover{background:rgba(255,255,255,.14);transform:translateY(-3px)}
.facts svg{flex-shrink:0;color:#ffc2df}
.facts b{display:block;font-family:var(--display);font-weight:600}
.facts span{font-size:.88rem;color:rgba(255,255,255,.75)}
.footer__bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1.5px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.footer__bottom img{height:1.6rem;width:auto}
.footer__nav{display:flex;flex-wrap:wrap;gap:.2rem}
.footer__nav a,.footer__nav button{display:inline-flex;align-items:center;min-height:var(--tap);padding:.4rem .8rem;border:0;border-radius:999px;background:none;color:rgba(255,255,255,.85);text-decoration:none;font-family:var(--display);font-weight:500;font-size:.95rem;transition:background .25s,color .25s}
.footer__nav a:hover,.footer__nav button:hover{background:rgba(255,255,255,.1);color:#fff}
.footer__legal{width:100%;display:flex;align-items:center;gap:.3rem;font-size:.82rem;color:rgba(255,255,255,.65)}
.heart{color:#ffc2df;animation:beat 1.3s ease-in-out infinite}
@keyframes beat{15%{transform:scale(1.35)}30%{transform:scale(1)}45%{transform:scale(1.2)}}

/* ================= ORDER BAR ================= */
.orderbar{position:fixed;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));z-index:55;display:flex;align-items:center;gap:.7rem;max-width:30rem;margin-inline:auto;padding:.45rem .45rem .45rem .7rem;border-radius:999px;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9),0 18px 40px -12px rgba(43,68,137,.4);transform:translateY(170%);transition:transform .6s var(--spring)}
.orderbar.is-on{transform:none}
.orderbar__stack{display:flex;flex-shrink:0}
.orderbar__stack img,.orderbar__stack i{width:36px;height:36px;border-radius:50%;margin-left:-14px;object-fit:contain}
.orderbar__stack i{display:grid;place-items:center;background:var(--pink);font-style:normal;font-family:var(--display);font-weight:700;color:var(--ink)}
.orderbar__stack>:first-child{margin-left:0}
.orderbar__text{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1}
.orderbar__text strong{font-family:var(--display);font-weight:600;color:var(--blue-deep)}
.orderbar__text small{font-size:.76rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orderbar__btn{flex-shrink:0;padding-inline:1.2rem}
.orderbar.bump{animation:jbump .55s var(--spring)}

/* ================= SHEET ================= */
.sheet{position:fixed;inset:0;z-index:100}
.sheet__scrim{position:absolute;inset:0;background:rgba(20,30,80,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .4s var(--ease)}
.sheet.is-open .sheet__scrim{opacity:1}
.sheet__panel{position:absolute;left:0;right:0;bottom:0;max-height:90svh;overflow:auto;overscroll-behavior:contain;padding:.6rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom));border-radius:28px 28px 0 0;background:var(--white);box-shadow:0 -20px 60px -20px rgba(20,30,80,.4);transform:translateY(100%);transition:transform .55s var(--spring)}
.sheet.is-open .sheet__panel{transform:none}
@media(min-width:760px){.sheet__panel{left:auto;top:.75rem;bottom:.75rem;right:.75rem;width:27rem;max-height:none;border-radius:28px;padding:1.2rem 1.5rem 1.5rem;transform:translateX(110%)}}
.sheet__grab{width:44px;height:5px;margin:0 auto .6rem;border-radius:5px;background:#d9e0f0}
@media(min-width:760px){.sheet__grab{display:none}}
.sheet__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.sheet__head h2{font-family:var(--display);font-weight:600;font-size:1.6rem;color:var(--blue-deep)}
.lines{list-style:none;padding:0;display:flex;flex-direction:column;gap:.5rem}
.lines li{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:.75rem;padding:.45rem .5rem .45rem .45rem;border-radius:18px;background:#f4f7fe;animation:qIn .4s var(--spring) both}
.lines img,.lines .q{width:48px;height:48px;border-radius:50%;object-fit:contain}
.lines .q{display:grid;place-items:center;background:var(--pink);font-family:var(--display);font-weight:700}
.lines b{font-family:var(--display);font-weight:600;color:var(--blue-deep);line-height:1.15}
.lines .qty{gap:.2rem}
.lines .qty .step{width:38px;height:38px;font-size:1.15rem}
.lines .qty output{min-width:1.6rem;font-size:1.05rem}
.sheet__empty{padding:1.5rem 1rem;border-radius:20px;background:#f4f7fe;text-align:center;display:grid;gap:.9rem;justify-items:center;color:var(--ink-soft)}
.sheet__deliv{margin-top:1rem}
.form{display:grid;gap:.7rem;margin:1.2rem 0}
.form__hint{font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.form label{display:grid;gap:.3rem;font-family:var(--display);font-weight:500;font-size:.92rem;color:var(--blue-deep)}
.form input{min-height:48px;padding:.6rem .9rem;border:0;border-radius:14px;background:#f4f7fe;box-shadow:inset 0 0 0 1.5px #e1e7f6;font-family:var(--body);font-weight:600;color:var(--ink);transition:box-shadow .2s,background .2s}
.form input:focus{outline:none;background:#fff;box-shadow:inset 0 0 0 2px var(--blue)}
.form input::placeholder{color:#9aa3bf}
.sheet__note{margin-top:.8rem;font-size:.82rem;color:var(--ink-soft);text-align:center}
.sheet__done{text-align:center;display:grid;gap:.9rem;justify-items:center;padding-top:.5rem}
.done__badge{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--blue),var(--violet));box-shadow:0 0 0 10px rgba(106,90,214,.12);animation:pop .6s var(--spring)}
.sheet__done h3{font-family:var(--display);font-weight:600;font-size:1.7rem;color:var(--blue-deep)}
.sheet__done p{color:var(--ink-soft);max-width:22rem}
.preview{width:100%;text-align:left;font-size:.88rem;color:var(--ink-soft)}
.preview summary{cursor:pointer;min-height:var(--tap);display:flex;align-items:center;justify-content:center}
.preview__text{white-space:pre-wrap;margin:.5rem 0 0;padding:1rem;border-radius:14px;background:#f4f7fe;font-family:var(--body);font-size:.88rem;color:var(--ink)}

/* ---------- toast, rain, flyer ---------- */
.toast{position:fixed;left:50%;top:calc(5.4rem + env(safe-area-inset-top));z-index:130;translate:-50% calc(-100% - 160px);padding:.75rem 1.3rem;border-radius:999px;background:#fff;color:var(--blue-deep);font-family:var(--display);font-weight:600;box-shadow:var(--sh-soft);transition:translate .55s var(--spring);max-width:calc(100vw - 2rem);text-align:center;pointer-events:none}
.toast.is-on{translate:-50% 0}
.flyer{position:fixed;z-index:120;pointer-events:none;border-radius:50%}
.rain{position:fixed;inset:0;z-index:120;pointer-events:none;overflow:hidden}
.rain img{position:absolute;top:-90px;width:var(--s);animation:fall var(--d) cubic-bezier(.45,0,.9,1) var(--delay) forwards;will-change:transform}
@keyframes fall{to{transform:translateY(calc(100vh + 180px)) rotate(var(--rot))}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .sparkles{display:none}
}
.card.flash{box-shadow:inset 0 0 0 3px var(--pink-deep),0 0 0 8px rgba(212,105,159,.18),var(--sh-soft)}
@media(max-width:999px){.summary .jar{grid-row:span 3;align-self:center}.summary{row-gap:.35rem}}

/* ================= v8 · GSAP + Lenis + React Bits ports ================= */
.split-line{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.title .char,.title--sm .char,.footer__big .char{display:inline-block;will-change:transform}

/* story: pinned, scroll-scrubbed word reveal */
.story{position:relative}
.story__pin{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden}
.story__text{position:relative;z-index:2;max-width:62rem;font-family:var(--display);font-weight:600;font-size:clamp(2rem,5.6vw,4.4rem);line-height:1.08;letter-spacing:-.02em;color:var(--blue-deep);text-align:center}
.story__text em{font-style:normal;color:var(--pink-deep)}
.story__text .w{display:inline-block;will-change:opacity,filter,transform}
.story__orbit{position:absolute;inset:0;z-index:1;pointer-events:none}
.so{position:absolute;width:clamp(7rem,18vw,15rem);opacity:.95;will-change:transform}
.so1{left:6%;top:12%}.so2{right:7%;top:18%}.so3{left:40%;bottom:6%}
@media(max-width:640px){.so1{left:-8%;top:8%}.so2{right:-10%;top:30%}.so3{left:26%;bottom:4%}}

/* star border (React Bits StarBorder idea, CSS only): a soft light travels around the button */
.starborder{isolation:isolate;overflow:hidden}
.starborder__light{position:absolute;inset:-2px;z-index:-1;border-radius:inherit;padding:2px;background:conic-gradient(from var(--sb-a,0deg),transparent 0 70%,rgba(255,255,255,.95) 80%,transparent 90%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:sbspin 3.2s linear infinite}
@property --sb-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes sbspin{to{--sb-a:360deg}}

/* shiny text (React Bits ShinyText idea) */
.shiny{background-image:linear-gradient(110deg,rgba(255,255,255,.72) 40%,rgba(255,255,255,1) 50%,rgba(255,255,255,.72) 60%);background-size:250% 100%;animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%{background-position:120% 0}60%,100%{background-position:-20% 0}}

/* tilted card (React Bits TiltedCard + GlareHover ideas) */
.cards{perspective:1100px}
.card{transform-style:preserve-3d;will-change:transform}
.card:hover{transform:none}
.card__glare{position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),transparent 55%);mix-blend-mode:soft-light;transition:opacity .35s}
.card.is-tilting .card__glare{opacity:1}
.card__art{transform:translateZ(30px)}
.card__body,.card .qty{transform:translateZ(18px)}

/* aurora in the night footer */
.footer{isolation:isolate}
.aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-mask:linear-gradient(180deg,transparent 0%,#000 25%,#000 100%);mask:linear-gradient(180deg,transparent 0%,#000 25%,#000 100%)}
.aurora canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.skyclouds .cloud:nth-child(1){top:14%}.skyclouds .cloud:nth-child(2){top:34%}.skyclouds .cloud:nth-child(3){top:62%}.skyclouds .cloud:nth-child(4){top:82%}.skyclouds .cloud:nth-child(5){top:96%}
html.no-gsap .skyclouds .cloud{top:0}
.word,.word-mask{white-space:nowrap}
.word-mask{padding:0 .08em .1em;margin:0 -.08em -.1em}
.aurora:not(.is-live){background:radial-gradient(60% 45% at 25% 85%,rgba(167,139,250,.45),transparent 70%),radial-gradient(55% 40% at 75% 90%,rgba(240,143,192,.35),transparent 70%),radial-gradient(70% 50% at 50% 100%,rgba(91,140,255,.4),transparent 70%)}