@font-face{font-family:"Fredoka";src:url(/fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:"Quicksand";src:url(/fonts/quicksand.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Pacifico";src:url(/fonts/pacifico.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Pixelify Sans";src:url(/fonts/pixelify.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{
  --bg:#fff0f8;        /* pink page */
  --dot:#fbcfe6;       /* polka dots */
  --pink:#ffe4f2; --lav:#f0e6ff;
  --holo:linear-gradient(120deg,#ffc4e4 0%,#e3ccff 30%,#c9e4ff 55%,#cff7e8 75%,#ffd0ea 100%);
  --holo-soft:linear-gradient(120deg,#ffe0f1 0%,#efe4ff 32%,#e2f0ff 58%,#e3fbf2 78%,#ffe3f2 100%);
  --jelly:linear-gradient(180deg,#ffb3da 0%,#ff86c2 52%,#f56fb3 100%); /* ink text >=6.2:1 */
  --rose:#b8287f; --violet:#8a45d8;
  --ink:#2b1238; --body:#3d2a4a; --muted:#6a5577;
  --r:28px; --shadow:0 14px 30px -18px rgba(214,48,154,.45);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--body);font:500 1.0625rem/1.6 "Quicksand",system-ui,-apple-system,"Segoe UI",sans-serif;
  background-color:var(--bg);background-image:radial-gradient(var(--dot) 1.3px,transparent 1.6px);background-size:20px 20px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:"Fredoka","Quicksand",system-ui,sans-serif;color:var(--ink);line-height:1.1;margin:0}
a{color:var(--rose)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:12px;z-index:50}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:10px}
svg.spark,svg.heart,svg.bfly{display:block;width:100%;height:100%;fill:currentColor}
.bfly__body{fill:var(--ink)}

/* glossy script word */
.script{font-family:"Pacifico",cursive;font-weight:400;color:#d4309a;
  background:linear-gradient(180deg,#ec3f9e 0%,#d4309a 47%,#b23fd0 53%,#8a45d8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 5px 6px rgba(178,63,208,.3));
  padding:0 .1em .14em .04em}

/* top bar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:rgba(255,240,248,.85);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:2px solid #fff;box-shadow:0 2px 0 #fbd3e8}
.brand{display:flex;align-items:center;gap:8px;font:600 1.15rem "Fredoka",sans-serif;color:var(--ink);text-decoration:none}
.brand img{border-radius:10px}
.topbar__link{position:relative;isolation:isolate;font-weight:700;font-size:.95rem;color:var(--ink);text-decoration:none;padding:8px 16px;border-radius:999px;background:var(--holo);border:2px solid #fff;box-shadow:0 6px 14px -8px rgba(138,69,216,.6)}
.topbar__link::before{content:"";position:absolute;z-index:-1;left:14%;right:14%;top:2px;height:40%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0))}

/* jelly buttons */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:700;border-radius:999px;color:var(--ink);border:2px solid rgba(255,255,255,.9);transition:transform .15s ease,filter .15s ease}
.btn::before{content:"";position:absolute;z-index:-1;left:10%;right:10%;top:3px;height:42%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.08));pointer-events:none}
.btn::after{content:"";position:absolute;z-index:-1;right:12%;bottom:6px;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.7)}
.btn:hover{transform:translateY(-1px) scale(1.015);filter:saturate(1.15)}
.btn--main{background:var(--holo);padding:17px 32px;font-size:1.1rem;box-shadow:0 14px 26px -12px rgba(138,69,216,.6),inset 0 -5px 10px rgba(138,69,216,.18),inset 0 3px 6px rgba(255,255,255,.7)}
.btn--card{background:var(--jelly);padding:11px 22px;font-size:.95rem;margin-top:12px;box-shadow:0 10px 18px -10px rgba(245,80,165,.85),inset 0 -4px 8px rgba(190,40,130,.22),inset 0 3px 6px rgba(255,255,255,.6)}

/* hero */
.hero{position:relative;overflow:hidden;text-align:center;padding:50px 20px 42px;background:var(--holo-soft);border-bottom:2px solid #fff}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.9) 1.3px,transparent 1.6px);background-size:20px 20px;pointer-events:none}
.orb{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 10%,rgba(255,255,255,0) 32%),var(--holo);border:2px solid rgba(255,255,255,.8);box-shadow:inset -8px -10px 18px rgba(138,69,216,.18)}
.orb--1{width:120px;height:120px;top:40px;left:-46px}
.orb--2{width:84px;height:84px;top:190px;right:-30px}
.orb--3{width:40px;height:40px;bottom:60px;left:22px}
.deco{position:absolute;inset:0;pointer-events:none}
.d{position:absolute;display:block}
.d1{width:22px;height:22px;top:20px;right:20%;color:#ff7dbd}
.d2{width:15px;height:14px;top:78px;left:30%;color:#b48cff}
.d3{width:30px;height:26px;top:96px;right:7%;color:#ff9ccb;transform:rotate(14deg)}
.d4{width:14px;height:14px;top:44%;left:5%;color:#8ec5ff}
.d5{width:13px;height:12px;top:52%;right:6%;color:#ff7dbd}
.d6{width:26px;height:23px;bottom:24%;right:12%;color:#c9a7ff;transform:rotate(-12deg)}
.d7{width:16px;height:16px;bottom:5%;left:12%;color:#ff7dbd}
.d8{width:12px;height:11px;bottom:8%;right:30%;color:#8ec5ff}
.d9{width:24px;height:21px;top:26px;left:12%;color:#8ec5ff;transform:rotate(-16deg)}
.hero>*:not(.orb):not(.deco){position:relative}
.eyebrow{display:inline-block;margin:0 0 14px;padding:7px 16px;border-radius:999px;background:#fff;color:var(--rose);font-weight:700;font-size:.88rem;letter-spacing:.02em;box-shadow:var(--shadow);border:2px solid #ffd3e8}
.hero__title{position:relative;display:inline-block;padding:24px 8px 4px}
.hero h1{font-size:clamp(3rem,14.5vw,5.4rem);font-weight:700;letter-spacing:-.005em;line-height:1;
  background:linear-gradient(180deg,#5b2f78 0%,#2b1238 46%,#7d4aa3 52%,#2b1238 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 #fff) drop-shadow(0 4px 0 #ffc4e4)}
.hero h1 .script{display:block;font-size:.95em;line-height:1.35;margin-top:-.02em;filter:none}
.sticker{position:absolute;top:0;right:-10px;margin:0;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;font:600 .8rem/1 "Pixelify Sans",monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);background:var(--holo);border:2px solid #fff;border-radius:10px;transform:rotate(9deg);box-shadow:3px 3px 0 #f9a8d4}
.sticker svg{width:11px;height:11px;color:#d4309a}
.hero__line{max-width:30ch;margin:10px auto 26px;font-size:1.15rem;color:var(--body)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:28px auto 0;max-width:560px}
.chip{display:inline-flex;gap:6px;align-items:center;padding:8px 14px;border-radius:999px;background:#fff;border:2px solid #fff;box-shadow:0 0 0 1.5px #f6c4de,0 6px 14px -10px rgba(214,48,154,.6);color:var(--ink);font-weight:700;font-size:.9rem;text-decoration:none}
.chip:hover{box-shadow:0 0 0 2px #d4309a}

/* marquee */
.marquee{position:relative;display:flex;align-items:center;background:var(--holo);border-top:2px solid #fff;border-bottom:2px solid #fff;box-shadow:0 2px 0 #fbd3e8}
.marquee__viewport{flex:1;overflow:hidden;padding:9px 0}
.marquee__track{display:flex;width:max-content;animation:marq 36s linear infinite}
.marquee__set{display:flex;align-items:center;gap:14px;padding-right:14px;font:600 .95rem/1 "Pixelify Sans",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.marquee__set svg{width:12px;height:12px;color:#d4309a}
.marquee.is-paused .marquee__track{animation-play-state:paused}
.marquee__toggle{flex:none;margin:0 8px;padding:5px 10px;border-radius:999px;border:2px solid #fff;background:rgba(255,255,255,.75);color:var(--ink);font:600 .75rem/1 "Pixelify Sans",monospace;text-transform:uppercase;letter-spacing:.05em;cursor:pointer}
.marquee__toggle:hover{background:#fff}
@keyframes marq{to{transform:translateX(-50%)}}

/* products */
.faves{padding:46px 16px 28px;max-width:1080px;margin:0 auto}
.faves>h2,.tips>h2{font-size:clamp(2.2rem,9.5vw,3.1rem);text-align:center;font-weight:700}
.faves>h2 .script,.tips>h2 .script{font-size:.95em}
.lede{text-align:center;color:var(--muted);margin:10px auto 8px;max-width:34ch;font-weight:600}
.group{position:relative;margin-top:36px;padding:24px 14px 16px;border-radius:36px;background:var(--pink);scroll-margin-top:70px;border:2px solid #fff;box-shadow:0 0 0 1.5px #f8c9e1,var(--shadow)}
.group:nth-of-type(even){background:var(--lav);box-shadow:0 0 0 1.5px #ddccff,var(--shadow)}
.group__head{display:flex;align-items:center;gap:14px;margin:0 4px 16px}
.group__emoji{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;font-size:1.65rem;border:3px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--holo) border-box;box-shadow:var(--shadow)}
.group__head h3{font-size:1.55rem;font-weight:600}
.group__head p{margin:2px 0 0;color:var(--muted);font-size:.98rem}
.group__spark{position:absolute;top:-14px;right:22px;display:flex;gap:5px;align-items:flex-start}
.group__spark .spark{width:16px;height:16px;color:#ff7dbd;margin-top:4px}
.group__spark .bfly{width:28px;height:24px;color:#c9a7ff}
.group__spark .heart{width:11px;height:10px;margin-top:12px;color:#8ec5ff}
.group:nth-of-type(even) .group__spark .bfly{color:#ff9ccb}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.card{display:flex;gap:14px;align-items:flex-start;border:2px solid transparent;border-radius:var(--r);padding:15px;background:linear-gradient(#fff,#fff) padding-box,var(--holo) border-box;box-shadow:var(--shadow)}
.card__tile{position:relative;flex:none;width:76px;height:76px;border-radius:24px;display:grid;place-items:center;font-size:2.1rem;border:2px solid #fff;box-shadow:inset 0 -6px 12px rgba(138,69,216,.12)}
.card__tile::after{content:"";position:absolute;left:10px;top:6px;width:34px;height:14px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));transform:rotate(-14deg)}
.tile--caffeine{background:linear-gradient(135deg,#ffe0ee,#ffd2c4 60%,#ffe9f4)}
.tile--collagen{background:linear-gradient(135deg,#ffc9e6,#e7d3ff)}
.tile--hydrating{background:linear-gradient(135deg,#cfe8ff,#e6d8ff 60%,#d6f7ee)}
.tile--brightening{background:linear-gradient(135deg,#fff0c4,#ffd3ea)}
.tile--cooling{background:linear-gradient(135deg,#d1f6ec,#cfe2ff)}
.tile--fun{background:var(--holo)}
.card__body{min-width:0}
.card__name{font-size:1.12rem;font-weight:600;line-height:1.22}
.card__note{margin:6px 0 0;color:var(--body);font-size:.98rem;line-height:1.45}
.card__pack{display:inline-block;margin:8px 0 0;padding:3px 11px;border-radius:999px;background:#efe3ff;color:#5b2a9e;font-size:.82rem;font-weight:700}
.faves__more{text-align:center;margin:36px 0 0}

/* tips (subtle checker) */
.tips{padding:46px 16px 60px;background-color:#fff4fa;background-image:conic-gradient(#ffe6f3 25%,transparent 0 50%,#ffe6f3 0 75%,transparent 0);background-size:36px 36px;border-top:2px solid #fff}
.tiplist{list-style:none;margin:22px auto 0;padding:0;display:grid;gap:12px;max-width:760px}
.tip{display:flex;gap:14px;align-items:flex-start;border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--holo) border-box;border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.tip__emoji{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--pink);font-size:1.4rem;border:2px solid #fff;box-shadow:0 0 0 1.5px #f8c9e1}
.tip:nth-child(even) .tip__emoji{background:var(--lav);box-shadow:0 0 0 1.5px #ddccff}
.tip h3{font-size:1.15rem;font-weight:600}
.tip p{margin:4px 0 0;color:var(--muted);font-size:.98rem}

/* footer */
.footer{position:relative;background:var(--ink);color:#e8dbff;text-align:center;padding:40px 20px 40px;border-radius:36px 36px 0 0;margin-top:-28px}
.footer::before{content:"";position:absolute;left:32%;right:32%;top:14px;height:5px;border-radius:999px;background:var(--holo)}
.footer p{margin:8px 0}
.footer__brand{display:flex;justify-content:center;align-items:center;gap:10px;font:600 1.4rem "Fredoka",sans-serif;color:#fff}
.footer__brand img{border-radius:10px}
.footer__brand .script{background:linear-gradient(180deg,#ffc4e4 0%,#ffb3da 47%,#d9c2ff 53%,#c9e4ff 100%);-webkit-background-clip:text;background-clip:text;filter:none;font-size:1.05em}
.footer__hearts{display:flex;justify-content:center;align-items:center;gap:8px}
.footer__hearts .heart{width:12px;height:11px;color:#ffc2e0}
.footer__hearts .spark{width:14px;height:14px;color:#c9e4ff}
.footer__hearts .bfly{width:22px;height:19px;color:#d9c2ff}
.footer__hearts .bfly__body{fill:#ffc2e0}
.footer a{color:#ffc2e0;font-weight:700}
.footer__disc{font-size:.92rem;color:#e8dbff}
.footer__copy{font-size:.88rem;color:#d9c8f5}

@media (min-width:720px){
  .cards{grid-template-columns:1fr 1fr}
  .group{padding:28px 22px 22px}
  .tiplist{grid-template-columns:1fr 1fr}
  .hero{padding:84px 24px 60px}
  .orb--1{left:6%;width:160px;height:160px}.orb--2{right:7%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.btn{transition:none}.btn:hover{transform:none}
  .marquee__track{animation:none}.marquee__toggle{display:none}
}