:root{--purple:#711cda;--purple-dark:#321052;--yellow:#f5f52b}
.topline{background:#f5f52b;color:#321052;font-weight:800}
.topline__inner{justify-content:center}.header{background:#fff9ef}
.hero{--flavor-color:#f5f52b;color:#fff9ef;background:radial-gradient(ellipse at 85% 55%,#6520a4,transparent 60%),#321052}
.hero__grid{padding-block:55px 60px;gap:40px}
.hero h1{font-size:clamp(46px,5.9vw,82px);letter-spacing:0;line-height:1.08;font-weight:800}
.hero h1 em{color:#f5f52b}
.hero .eyebrow{color:#f5f52b;font-size:10px;letter-spacing:1.5px}
.hero__lead{color:#fff9ef;max-width:490px;font-size:20px}
.hero__lead+.hero__lead{color:#d8c5eb;font-size:15px}
.hero .button{background:#f5f52b;border-color:#f5f52b;color:#321052;box-shadow:5px 5px 0 #170629;border-radius:12px}
.hero .button--ghost{background:transparent;border-color:#c9a4eb;color:white;box-shadow:none}
.hero__facts{gap:30px;margin-top:30px}.hero__facts strong{color:#f5f52b}.hero__facts span{color:#e4d4f3}
.hero__blob{display:none}.hero__visual{height:570px}
.splash--yellow{background:var(--flavor-color);inset:35px -10px 100px 0;border-radius:50%;transition:background .3s}
.splash--blue{background:#f54483;width:140px;height:140px;bottom:115px;right:-15px;border-radius:50% 0 50% 50%}
.hero-pack{bottom:78px}
.hero-pack--back,.hero-pack--side{bottom:90px;height:50%}
.hero-pack--main{width:46%;left:27%}
.hero-sticker{top:6px;right:-5px;width:142px}
.hero-sticker__face{background:#711cda;border:2px solid #ac6ef2;box-shadow:6px 8px 0 #210738}
.flavor-picker{position:absolute;bottom:-5px;left:0;right:0;z-index:8;text-align:center}
.flavor-picker__label{display:block;margin-bottom:12px;color:#fff9ef;font-size:15px;font-weight:800}
.flavor-picker button{background:transparent;color:#fff9ef;border:1px solid #b18cd2;border-radius:30px;padding:10px 15px;margin:3px;font-size:13px;font-weight:700;cursor:pointer}
.flavor-picker button[aria-pressed="true"]{background:#f5f52b;border-color:#f5f52b;color:#321052}
button:focus-visible,a:focus-visible{outline:3px solid #f54483;outline-offset:4px}
.audience{background:#080808;color:#fff;border:0;overflow:hidden}
.audience__row{font-weight:900}
.audience .audience__row span{font-size:clamp(18px,1.7vw,24px);font-weight:950;letter-spacing:.7px;color:#f5f52b;text-transform:uppercase;text-shadow:0 0 16px #f5f52b26}
.audience .audience__row span::before{color:#ff58af;margin-right:24px}
.audience__track{display:flex;width:max-content;animation:audience-scroll 32s linear infinite}
.audience__track .audience__row{width:max-content;min-width:100vw;max-width:none;flex:0 0 auto;justify-content:space-around;gap:64px;padding:22px 32px;margin:0;overflow:visible;box-sizing:border-box}
@keyframes audience-scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .audience__track{animation:none;width:100%}
  .audience__track .audience__row{min-width:0;width:100%;flex-wrap:wrap;gap:16px 28px}
  .audience__track .audience__row[aria-hidden]{display:none}
}
.origin{background:#fff9ef}.catalog{background:#f0e6fa}
.format-intro{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px 0}
.format-intro a{position:relative;min-height:245px;overflow:hidden;border-radius:22px;padding:24px;background:#ffaa24;color:#321052;text-decoration:none;border:2px solid #321052}
.format-intro a:nth-child(2){background:#d6ef58}.format-intro a:nth-child(3){background:#69d5f3}
.format-intro span{display:block;position:relative;z-index:2;font-size:10px;font-weight:900;letter-spacing:.7px}
.format-intro strong{display:block;position:relative;z-index:2;font-size:clamp(24px,2.7vw,36px);letter-spacing:-1px}
.format-intro img{position:absolute;height:218px;width:auto;right:18px;bottom:-18px;rotate:14deg;transition:bottom .25s;filter:drop-shadow(8px 10px 8px #17062980)}
.format-intro a:hover img{bottom:-4px}
.format-intro a[data-format="rolls"]{background:#6218ad;color:#fff9ef}
.product-card{border:1px solid #32105233;box-shadow:0 6px 0 #32105212}
.product-facts summary{font-weight:800}
@media(max-width:800px){
.hero__grid{grid-template-columns:1fr;gap:20px;padding-top:36px}.hero__copy{max-width:620px}
.hero__visual{max-width:530px;width:100%;margin:0 auto;height:540px}
.format-intro{grid-template-columns:1fr}
}
@media(max-width:480px){
.hero h1{font-size:49px;letter-spacing:0}.hero__lead{font-size:17px}.hero__lead+.hero__lead{font-size:14px}
.hero__visual{height:450px}.hero-sticker{width:112px;right:0}.hero-sticker b{font-size:27px}
.flavor-picker button{padding:9px 12px}.hero .eyebrow{line-height:1.6}.hero__facts{gap:24px}
}
@media(prefers-reduced-motion:reduce){.splash--yellow,.format-intro img{transition:none}}

/* Show the product showcase first in the stacked hero. */
@media (max-width: 1050px) {
  .hero__visual { order: -1; }
  .hero__grid { padding-top: 20px; }
  .hero__visual[data-reveal] { opacity: 1; transform: none; }
}

/* Balanced mobile hero typography and equal-width key facts. */
@media (max-width: 1050px) {
  .hero__copy { width: 100%; margin-inline: auto; text-align: center; }
  .hero h1 { max-width: 100%; margin-inline: auto; text-align: center; text-wrap: balance; }
  .hero__lead { margin-inline: auto; text-wrap: pretty; }
  .hero__actions { justify-content: center; }
  .hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; text-align: center; }
  .hero__facts li { align-content: start; justify-items: center; gap: 8px; min-width: 0; }
  .hero__facts strong { font-size: clamp(16px, 4.1vw, 25px); line-height: 1.2; white-space: nowrap; }
  .hero__facts span { max-width: 100%; text-wrap: balance; }
}

/* Keep the complete pack inside the rounded format cards. */
.format-intro img { height:207px; right:30px; bottom:24px; rotate:8deg; }
.format-intro a:hover img { bottom:28px; }
/* Reserve real layout space below the longer strings heading. */
.format-intro a[data-format="strings"] img {
  position:relative;
  display:block;
  right:auto;
  bottom:auto;
  margin:20px 8px 0 auto;
}
.format-intro a[data-format="strings"]:hover img { bottom:auto; }
@media(max-width:800px) {
  .format-intro a { min-height:280px; }
  .format-intro img { height:207px; right:28px; bottom:24px; }
}