/* Tall Order: Scoop Stack — landing page
   "the page is the tower" */

@property --bob { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --cream: #fdf3e7;
  --cream2: #f7e4cf;
  --paper: #fffaf3;
  --ink: #3b2620;
  --ink2: #2a1a15;
  --ink-soft: rgba(59, 38, 32, .72);
  --accent: #c2455f;
  --accent2: #9e3049;
  --accent-light: #ff9fb3;
  --straw: #f5a6b8;
  --mint: #9fe0c0;
  --choc: #8b5a43;
  --van: #f7e9c3;
  --blue: #a9c9f5;
  --cone: #e0a96a;
  --cone-d: #b9824a;
  --gold: #f2c14e;

  --gut: clamp(16px, 4vw, 48px);
  --max: 1180px;
  --pad-x: max(var(--gut), calc((100% - var(--max)) / 2));
  --sec-y: clamp(84px, 11vw, 150px);

  --f-d: 'Fredoka', ui-rounded, system-ui, sans-serif;
  --f-b: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --shadow: 0 22px 44px -22px rgba(59, 38, 32, .38);

  --drip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V34Q1160 62 1120 34Q1090 66 1060 34Q1030 50 1000 34C972 34 962 48 962 63A12 12 0 0 1 938 63C938 48 928 34 900 34C875 34 868 48 868 62A13 13 0 0 1 842 62C842 48 835 34 810 34C785 34 774 59 774 97A9 9 0 0 1 756 97C756 59 745 34 720 34Q685 50 650 34Q600 50 550 34C530 34 526 49 526 67A11 11 0 0 1 504 67C504 49 500 34 480 34C455 34 448 49 448 64A13 13 0 0 1 422 64C422 49 415 34 390 34Q350 54 310 34Q280 56 250 34C228 34 219 62 219 106A9 9 0 0 1 201 106C201 62 192 34 170 34C142 34 132 51 132 71A12 12 0 0 1 108 71C108 51 98 34 70 34Q35 60 0 34Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-b);
  font-size: clamp(1rem, .95rem + .22vw, 1.125rem);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-d); margin: 0; }
p { margin: 0; }
::selection { background: var(--straw); color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 10px; }

/* ---------- global overlays ---------- */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .15 0 0 0 0 .12 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#fx { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
#fx canvas { width: 100%; height: 100%; display: block; }

/* ---------- reveal ---------- */
@media (scripting: enabled) {
  [data-reveal]:not(.in) { opacity: 0; }
  [data-split]:not(.split) { opacity: 0; }
}
[data-reveal].in { animation: reveal 1s var(--ease-out) var(--d, 0s) both; }
@keyframes reveal {
  from { opacity: 0; translate: 0 34px; filter: blur(4px); }
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 1rem/1 var(--f-d); letter-spacing: .01em;
  color: #fff; background: var(--accent); border: 0; border-radius: 999px;
  padding: 13px 22px; text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 0 var(--accent2), 0 12px 24px -10px rgba(194, 69, 95, .7);
  transition: transform .25s var(--spring), box-shadow .25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--accent2), 0 16px 28px -10px rgba(194, 69, 95, .75); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent2), 0 6px 14px -8px rgba(194, 69, 95, .6); }
.btn-small { padding: 10px 16px; font-size: .95rem; }
.btn-big { padding: 16px 32px; font-size: 1.25rem; }

/* store buttons */
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.stores.center { justify-content: center; }
.store {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 22px 10px 16px; min-height: 56px;
  background: #0f0b0a; color: #fff; border-radius: 999px; text-decoration: none;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .16);
  transition: transform .4s var(--spring), box-shadow .4s;
}
.store svg { width: 26px; height: 26px; flex: none; }
.store span { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
.store small { font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .82; }
.store b { font: 600 1.2rem/1.1 var(--f-d); letter-spacing: .005em; }
.store::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 0 35%, rgba(255, 255, 255, .38) 50%, transparent 65% 100%) -160% 0 / 60% 100% no-repeat;
  transition: background-position .8s var(--ease-out);
}
.store:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 20px 34px -14px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .22); }
.store:hover::after { background-position: 260% 0; }
.store:active { transform: translateY(0) scale(.98); }
.hero .store.play::before {
  content: ''; position: absolute; inset: -5px; border-radius: inherit; z-index: -1;
  border: 2px solid var(--accent); opacity: 0; pointer-events: none;
  animation: ring 2.8s var(--ease-out) 2.2s infinite;
}
@keyframes ring { 0% { opacity: .9; scale: .94; } 70%, 100% { opacity: 0; scale: 1.14; } }
.store.mini { min-height: 0; padding: 9px 14px; font: 600 .82rem/1 var(--f-d); }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px var(--gut);
  transition: transform .5s var(--ease-out), background-color .35s, box-shadow .35s, padding .35s, backdrop-filter .35s;
}
.nav.scrolled {
  background: rgba(253, 243, 231, .8);
  -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px);
  box-shadow: 0 8px 28px -16px rgba(59, 38, 32, .45);
  padding-block: 9px;
}
.nav.hide { transform: translateY(-115%); }
.brand { display: flex; align-items: center; gap: 10px; font: 700 1.28rem/1 var(--f-d); text-decoration: none; color: var(--ink); }
.brand img { border-radius: 11px; box-shadow: 0 4px 10px -4px rgba(59, 38, 32, .5); transition: rotate .5s var(--spring); }
.brand:hover img { rotate: -12deg; }
.nav-links { display: none; }
.nav-links a { position: relative; font: 500 1.02rem/1 var(--f-d); text-decoration: none; padding: 8px 0; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2.5px; border-radius: 2px;
  background: var(--accent); scale: 0 1; transform-origin: right; transition: scale .35s var(--ease-out);
}
.nav-links a:hover::after { scale: 1 1; transform-origin: left; }
.nav-end { display: flex; align-items: center; gap: 10px; }
.lang {
  font: 700 .85rem/1 var(--f-d); letter-spacing: .04em;
  width: 44px; height: 38px; border-radius: 12px; cursor: pointer;
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
  transition: background .2s, color .2s, transform .3s var(--spring);
}
.lang:hover { background: var(--ink); color: var(--cream); transform: rotate(-6deg); }
@media (min-width: 920px) { .nav-links { display: flex; gap: 30px; } }
@media (max-width: 380px) { .brand span { display: none; } }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: clip;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: 1fr; align-items: center; gap: 44px;
  padding: 108px var(--pad-x) 90px;
  background:
    radial-gradient(ellipse 60% 50% at 78% 40%, rgba(245, 166, 184, .32), transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 85%, rgba(159, 224, 192, .28), transparent 70%),
    var(--cream);
}
.sky-scoops { position: absolute; inset: 0; z-index: 0; pointer-events: none; container-type: size; }
.ss {
  position: absolute; top: 0; width: var(--s);
  translate: calc(var(--mx, 0) * var(--z) * 1px) calc(var(--my, 0) * var(--z) * 1px);
  transition: translate 1s var(--ease-out);
}
.ss-i { opacity: var(--o); animation: skyfall var(--dur) linear var(--del) infinite; will-change: transform; }
.ss-i.blur { filter: blur(2.5px); }
.ss svg { display: block; width: 100%; height: auto; }
@keyframes skyfall {
  from { transform: translateY(-160px) rotate(0deg); }
  to { transform: translateY(calc(100cqh + 40px)) rotate(var(--rot)); }
}

.hero-copy { position: relative; z-index: 2; text-align: center; }
.hero-copy .stores { justify-content: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 .86rem/1.2 var(--f-d); letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255, 250, 243, .9); border: 1.5px solid rgba(59, 38, 32, .12);
  padding: 8px 14px 8px 12px; border-radius: 999px;
  box-shadow: 0 6px 18px -12px rgba(59, 38, 32, .4);
  animation: rise .9s var(--ease-out) .1s both;
}
.eyebrow .dot { width: 9px; height: 9px; border-radius: 50%; background: #39c07f; box-shadow: 0 0 0 0 rgba(57, 192, 127, .6); animation: blip 2s infinite; }
@keyframes blip { 0% { box-shadow: 0 0 0 0 rgba(57, 192, 127, .55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(57, 192, 127, 0); } }
@keyframes rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }

.headline {
  font: 700 clamp(3.25rem, 14.5vw, 7.2rem)/.94 var(--f-d);
  letter-spacing: -.025em; margin: 22px 0 .5em;
}
.headline .line { display: block; }
.headline .line.accent { color: var(--accent); position: relative; width: fit-content; margin-inline: auto; }
.headline .w { display: inline-block; white-space: nowrap; }
.headline .ch {
  display: inline-block; transform-origin: 50% 100%;
  animation: drop 1s cubic-bezier(.25, .9, .35, 1) both;
  animation-delay: calc(var(--i) * 52ms + .25s);
}
@keyframes drop {
  0% { opacity: 0; transform: translateY(-1.6em) rotate(var(--r, -10deg)); }
  38% { opacity: 1; transform: translateY(0) scale(1.14, .78); }
  56% { transform: translateY(-.16em) scale(.95, 1.07); }
  74% { transform: translateY(0) scale(1.04, .96); }
  88% { transform: translateY(-.03em) scale(1); }
  100% { opacity: 1; transform: none; }
}
.squiggle {
  position: absolute; left: -2%; width: 104%; bottom: -.2em; height: .3em; overflow: visible; pointer-events: none;
}
.squiggle path {
  fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .85;
  animation: draw 1s var(--ease-out) forwards; animation-delay: var(--sd, 1.6s);
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.lede { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: var(--ink-soft); max-width: 34ch; margin-inline: auto; }
.hero .lede { animation: rise .9s var(--ease-out) 1.1s both; }
.hero .fine { animation: rise .9s var(--ease-out) 1.4s both; }
.fine { margin-top: 18px; font: 500 .92rem/1.4 var(--f-d); color: var(--ink-soft); letter-spacing: .02em; }

.hero-phone {
  position: relative; z-index: 2; justify-self: center;
  perspective: 1200px;
  animation: phoneIn 1.3s var(--ease-out) .35s both;
}
@keyframes phoneIn { from { opacity: 0; transform: translateY(120px) rotate(10deg) scale(.9); } to { opacity: 1; transform: none; } }
.phone {
  position: relative; width: 262px; aspect-ratio: 9 / 19.5;
  border-radius: 46px; padding: 9px;
  background: linear-gradient(150deg, #5a4741, #150e0c 35%, #261b18 70%, #4a3934);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .14),
    inset 0 0 0 4px #0b0807,
    0 50px 90px -40px rgba(59, 38, 32, .75),
    0 20px 40px -20px rgba(59, 38, 32, .5);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--bob));
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-out);
  animation: float 5s ease-in-out infinite;
}
@keyframes float { 0%, 100% { --bob: 0px; } 50% { --bob: -14px; } }
.phone::before {
  content: ''; position: absolute; z-index: 5; top: 19px; left: 50%; translate: -50% 0;
  width: 78px; height: 23px; border-radius: 20px; background: #050303; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.phone::after {
  content: ''; position: absolute; right: -3px; top: 130px; width: 4px; height: 64px; border-radius: 0 3px 3px 0;
  background: #2a1e1b;
}
.hero-phone.playing .phone { animation-play-state: paused; --rx: 0deg !important; --ry: 0deg !important; }
#demo {
  position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px);
  border-radius: 37px; display: block; touch-action: none; background: var(--cream);
  cursor: grab;
}
.hero-phone.playing #demo { cursor: none; }
.phone-shadow {
  position: absolute; left: 12%; right: 12%; bottom: -34px; height: 26px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(59, 38, 32, .35), transparent);
  animation: shadow 5s ease-in-out infinite; z-index: -1;
}
@keyframes shadow { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .86; opacity: .7; } }

.demo-ui {
  position: absolute; inset: 9px; z-index: 3; border-radius: 37px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 28px 20px; text-align: center;
  background: linear-gradient(180deg, rgba(253, 243, 231, .92) 30%, rgba(253, 243, 231, .5) 62%, rgba(253, 243, 231, 0) 80%);
  transition: opacity .4s, transform .5s var(--spring), visibility .4s;
}
.demo-ui.hidden { opacity: 0; visibility: hidden; transform: scale(1.08); }
#demoStart { justify-content: flex-start; padding-top: 22%; }
#demoOver { background: rgba(253, 243, 231, .93); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.demo-badge {
  font: 700 .7rem/1 var(--f-d); letter-spacing: .14em; color: var(--accent);
  background: rgba(194, 69, 95, .12); padding: 7px 11px; border-radius: 999px;
}
.demo-title { font: 700 2.7rem/1 var(--f-d); letter-spacing: -.02em; }
.demo-sub { font: 600 1rem/1.3 var(--f-d); color: var(--ink-soft); margin-bottom: 8px; }
.demo-ui .btn-big { animation: wiggle 2.6s ease-in-out 2.4s infinite; }
@keyframes wiggle { 0%, 80%, 100% { rotate: 0deg; } 84% { rotate: -5deg; } 88% { rotate: 5deg; } 92% { rotate: -3deg; } 96% { rotate: 2deg; } }
.demo-score { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.demo-score span { font: 700 5rem/1 var(--f-d); color: var(--accent); letter-spacing: -.03em; }
.demo-score small { font: 600 1rem/1 var(--f-d); text-transform: uppercase; letter-spacing: .12em; margin-top: 4px; }
.demo-tease { font: 600 1rem/1.35 var(--f-d); max-width: 22ch; margin: 6px 0 4px; }
.demo-stores { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.again {
  margin-top: 6px; border: 0; background: none; cursor: pointer; color: var(--accent);
  font: 600 1.05rem/1 var(--f-d); padding: 10px 14px; border-radius: 12px;
}
.again:hover { background: rgba(194, 69, 95, .1); }

.sticker {
  position: absolute; z-index: 6; pointer-events: none;
  font: 700 1rem/1 var(--f-d); white-space: nowrap;
  padding: 10px 14px; border-radius: 16px;
  background: var(--straw); color: var(--ink);
  border: 2.5px solid var(--ink); box-shadow: 4px 5px 0 var(--ink);
  animation: stickerIn .8s var(--spring) both, bob 3.4s ease-in-out infinite;
}
.hero-phone.playing .sticker { animation: none; opacity: 0; }

.sticker.s1 { top: 13%; left: -16%; rotate: -10deg; animation-delay: 1.5s, 2.3s; }
.sticker.s2 { bottom: 20%; right: -15%; rotate: 8deg; background: var(--mint); animation-delay: 1.8s, 0s; }
@keyframes stickerIn { from { scale: 0; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.scroll-hint {
  display: none; position: absolute; z-index: 3; left: 50%; bottom: 26px; translate: -50% 0;
  width: 26px; height: 42px; border: 2.5px solid var(--ink); border-radius: 15px; opacity: .55;
  transition: opacity .3s;
}
.scroll-hint:hover { opacity: 1; }
.scroll-hint span { position: absolute; left: 50%; top: 8px; width: 5px; height: 8px; margin-left: -2.5px; border-radius: 3px; background: var(--ink); animation: wheel 1.8s var(--ease-out) infinite; }
@keyframes wheel { 0% { opacity: 0; translate: 0 -2px; } 25% { opacity: 1; } 70% { opacity: 0; translate: 0 14px; } 100% { opacity: 0; } }

@media (min-width: 960px) {
  .hero { grid-template-columns: 1.12fr .88fr; gap: 30px; padding-top: 110px; }
  .hero-copy { text-align: left; }
  .hero-copy .stores { justify-content: flex-start; }
  .headline { font-size: clamp(4.6rem, 7.6vw, 7.4rem); }
  .headline .line.accent { margin-inline: 0; }
  .lede { margin-inline: 0; }
  .phone { width: 300px; }
  .scroll-hint { display: block; }
}
@media (max-width: 400px) {
  .eyebrow { font-size: .72rem; letter-spacing: .03em; padding: 7px 12px 7px 10px; }
  .sticker { font-size: .86rem; padding: 8px 11px; }
  .sticker.s1 { left: -12%; }
  .sticker.s2 { right: -11%; }
}

/* ---------- marquee ---------- */
.marquee {
  position: relative; z-index: 5; overflow: hidden;
  margin: -24px -6vw 0; padding: 16px 0;
  background: var(--accent); color: var(--cream);
  rotate: -2deg;
  box-shadow: 0 18px 30px -18px rgba(158, 48, 73, .7);
}
.marquee::before, .marquee::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, .2); }
.marquee::before { top: 6px; } .marquee::after { bottom: 6px; }
.marquee-track { display: flex; width: max-content; animation: mq 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.mq-set { display: flex; align-items: center; gap: 24px; padding-right: 24px; }
.mq-set span { font: 600 clamp(1.3rem, 1rem + 1.3vw, 2.1rem)/1 var(--f-d); white-space: nowrap; letter-spacing: .01em; }
.mq-set svg { width: 34px; height: auto; flex: none; rotate: -10deg; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .15)); }
.mq-set svg:nth-of-type(2n) { rotate: 12deg; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- section basics ---------- */
.kicker { font: 600 .9rem/1.2 var(--f-d); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.kicker.light { color: var(--accent-light); }
.h2 { font: 700 clamp(2.3rem, 1.4rem + 4.2vw, 4.4rem)/1.02 var(--f-d); letter-spacing: -.02em; }
.h2 em, .final-title em { font-style: normal; color: var(--accent); position: relative; white-space: nowrap; }
.h2.light { color: var(--cream); }
.h2 + .lede { margin-top: 24px; }
.h2.light em { color: var(--accent-light); }
.lede.light { color: rgba(253, 243, 231, .78); }

/* ---------- how ---------- */
.how { padding: calc(var(--sec-y) + 10px) var(--pad-x) var(--sec-y); }
.cards { display: grid; gap: 20px; margin-top: 52px; }
@media (min-width: 780px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.card {
  position: relative; background: var(--paper); border-radius: 30px; padding: 16px 16px 28px;
  border: 1.5px solid rgba(59, 38, 32, .08);
  box-shadow: 0 1px 0 rgba(59, 38, 32, .05), var(--shadow);
  transition: transform .6s var(--spring), box-shadow .4s;
}
.card:hover { transform: translateY(-10px) rotate(-1.2deg); box-shadow: 0 34px 60px -28px rgba(59, 38, 32, .45); }
.card:nth-child(2):hover { transform: translateY(-10px) rotate(1.2deg); }
.card .num { display: block; margin: 20px 8px 4px; font: 700 .95rem/1 var(--f-d); color: var(--accent); letter-spacing: .08em; }
.card h3 { margin: 0 8px 8px; font-size: 1.55rem; font-weight: 600; line-height: 1.15; }
.card p { margin: 0 8px; color: var(--ink-soft); }
.card-art {
  position: relative; height: 170px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(245, 166, 184, .45), transparent 70%), #fdeee4;
}
.art-triple { background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(159, 224, 192, .55), transparent 70%), #eef8f1; }
.art-lean { background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(169, 201, 245, .55), transparent 70%), #eef3fc; }
.card-art::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: rgba(185, 130, 74, .18); }

/* mini scoops (pure CSS) */
.mini-scoop {
  --c: var(--straw); --sk: #e88aa2; --dc: #9c3550;
  position: relative; width: 50px; height: 42px;
  border-radius: 50% 50% 44% 44% / 66% 66% 34% 34%;
  background: radial-gradient(ellipse 26% 18% at 33% 30%, rgba(255, 255, 255, .55), transparent 75%), var(--c);
}
.mini-scoop::after {
  content: ''; position: absolute; left: -4px; right: -4px; bottom: -7px; height: 16px; border-radius: 8px 8px 0 0;
  background:
    radial-gradient(ellipse 50% 100% at 50% 0, var(--sk) 96%, transparent 100%) 0 100% / 20% 56% repeat-x,
    linear-gradient(var(--sk), var(--sk)) 0 0 / 100% 46% no-repeat;
}
.mini-scoop::before { content: ''; position: absolute; inset: 22% 14% 30%; }
.f-straw::before {
  background:
    radial-gradient(1.6px 2.6px at 18% 40%, var(--dc) 90%, transparent),
    radial-gradient(1.6px 2.6px at 44% 15%, var(--dc) 90%, transparent),
    radial-gradient(1.6px 2.6px at 70% 45%, var(--dc) 90%, transparent),
    radial-gradient(1.6px 2.6px at 38% 70%, var(--dc) 90%, transparent),
    radial-gradient(1.6px 2.6px at 86% 18%, var(--dc) 90%, transparent);
}
.f-mint { --c: var(--mint); --sk: #7fcca6; --dc: #3b2620; }
.f-mint::before {
  background:
    linear-gradient(var(--dc), var(--dc)) 16% 40% / 4px 4px no-repeat,
    linear-gradient(var(--dc), var(--dc)) 50% 10% / 4px 3px no-repeat,
    linear-gradient(var(--dc), var(--dc)) 78% 52% / 3px 4px no-repeat,
    linear-gradient(var(--dc), var(--dc)) 40% 82% / 4px 4px no-repeat;
}
.f-choc { --c: var(--choc); --sk: #74462f; }
.f-choc::before { inset: 18% 20% 46%; border-bottom: 2.6px solid #e8c3a8; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.f-van { --c: var(--van); --sk: #e8d39d; }
.f-van::before { background: radial-gradient(circle, #c9a46a 0 1.6px, transparent 2.2px 3.6px, #c9a46a 4px 5.6px, transparent 6.2px) 50% 50% / 16px 16px no-repeat; }
.f-blue { --c: var(--blue); --sk: #87ade6; --dc: #4f73b8; }
.f-blue::before {
  background:
    radial-gradient(circle 2.6px at 18% 40%, var(--dc) 90%, transparent),
    radial-gradient(circle 2.6px at 50% 12%, var(--dc) 90%, transparent),
    radial-gradient(circle 2.6px at 80% 46%, var(--dc) 90%, transparent),
    radial-gradient(circle 2.6px at 46% 76%, var(--dc) 90%, transparent);
}
.mini-cone, .big-cone {
  position: relative; width: 44px; height: 58px;
  background:
    repeating-linear-gradient(58deg, transparent 0 6px, var(--cone-d) 6px 7.6px),
    repeating-linear-gradient(-58deg, transparent 0 6px, var(--cone-d) 6px 7.6px),
    linear-gradient(90deg, #e9b77c, var(--cone) 40%, #d39a5a);
  clip-path: polygon(0 0, 100% 0, 57% 100%, 43% 100%);
}

.art-drag .mini-scoop, .art-drag .mini-cone { position: absolute; left: 50%; }
.art-drag .mini-cone { bottom: 14px; margin-left: -22px; animation: slide 2.8s var(--ease-out) infinite; }
.art-drag .mini-scoop { bottom: 64px; margin-left: -25px; z-index: 1; animation: dropIn 2.8s infinite; }
@keyframes slide {
  0% { transform: translateX(-70px); opacity: 0; }
  8% { opacity: 1; }
  48%, 100% { transform: translateX(0); }
  88% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes dropIn {
  0%, 12% { transform: translateY(-140px); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  16% { opacity: 1; }
  48% { transform: translateY(0) scale(1); }
  54% { transform: translateY(2px) scale(1.18, .8); }
  62% { transform: translateY(-6px) scale(.95, 1.06); }
  70% { transform: translateY(0) scale(1); }
  88% { opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}
.art-triple .trip { position: absolute; left: 50%; bottom: 22px; margin-left: -25px; display: flex; flex-direction: column; }
.art-triple .mini-scoop { margin-top: -14px; }
.art-triple .a { z-index: 3; animation: tripA 3s infinite; }
.art-triple .b { z-index: 2; animation: tripB 3s infinite; }
.art-triple .c { z-index: 1; animation: tripC 3s infinite; }
@keyframes tripA { 0%, 24% { transform: translateY(-120px); opacity: 0; } 26% { opacity: 1; } 34% { transform: translateY(0); } 44% { transform: translateY(0); } 52% { transform: translateY(26px) scale(.6); opacity: 0; } 100% { opacity: 0; } }
@keyframes tripB { 0%, 12% { transform: translateY(-120px); opacity: 0; } 14% { opacity: 1; } 22% { transform: translateY(0); } 44% { transform: none; } 52% { transform: scale(1.5); } 58% { transform: scale(1.3); } 86% { transform: scale(1.3); opacity: 1; } 96%, 100% { transform: scale(1.3); opacity: 0; } }
@keyframes tripC { 0% { transform: translateY(-120px); opacity: 0; } 2% { opacity: 1; } 10% { transform: translateY(0); } 44% { transform: translateY(0); } 52% { transform: translateY(-26px) scale(.6); opacity: 0; } 100% { opacity: 0; } }
.art-triple .pop {
  position: absolute; left: 50%; top: 22px; translate: -50% 0;
  font: 700 1.9rem/1 var(--f-d); color: var(--accent); letter-spacing: .02em;
  text-shadow: 3px 3px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;
  animation: popT 3s infinite;
}
@keyframes popT { 0%, 46% { transform: scale(0) rotate(-20deg); opacity: 0; } 54% { transform: scale(1.3) rotate(-8deg); opacity: 1; } 62% { transform: scale(1) rotate(-6deg); } 84% { opacity: 1; transform: scale(1) rotate(-6deg); } 94%, 100% { opacity: 0; transform: scale(1.1) rotate(-6deg) translateY(-10px); } }
.art-triple::before {
  content: ''; position: absolute; left: 50%; bottom: 46px; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%;
  background: radial-gradient(circle, transparent 45%, rgba(159, 224, 192, .9) 47% 52%, transparent 54%);
  animation: ringT 3s infinite;
}
@keyframes ringT { 0%, 46% { transform: scale(.2); opacity: 0; } 50% { opacity: 1; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.art-lean .lean-tower {
  position: absolute; left: 50%; bottom: 14px; margin-left: -21px;
  display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%;
  animation: lean 3.6s ease-in-out infinite;
}
.art-lean .mini-scoop { width: 42px; height: 34px; margin-bottom: -13px; animation: wob 1.8s ease-in-out infinite alternate; }
.art-lean .mini-scoop:nth-child(1) { z-index: 4; --w: 7px; }
.art-lean .mini-scoop:nth-child(2) { z-index: 3; --w: 4px; animation-delay: -.3s; }
.art-lean .mini-scoop:nth-child(3) { z-index: 2; --w: 2px; animation-delay: -.6s; }
.art-lean .mini-scoop:nth-child(4) { z-index: 1; --w: 1px; animation-delay: -.9s; }
.art-lean .mini-cone { width: 38px; height: 50px; }
@keyframes lean { 0%, 100% { rotate: -4deg; } 35% { rotate: 9deg; } 50% { rotate: 6deg; } 75% { rotate: -8deg; } }
@keyframes wob { from { translate: calc(var(--w) * -1) 0; } to { translate: var(--w) 0; } }

/* ---------- climb ---------- */
.climb { position: relative; height: 640vh; }
.climb-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  color: var(--ink); --sw: 64px;
  transition: color .6s;
}
.climb-stage.dark { color: var(--cream); }
.climb-sky { position: absolute; inset: 0; background: linear-gradient(to top, #f9e3c9, #fdf3e7); }
.stars { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.stars i { position: absolute; left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%; background: transparent; }
.stars i:nth-child(2) { animation: twinkle 3.2s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: 1; } to { opacity: .25; } }
.climb-deco { position: absolute; inset: 0; pointer-events: none; }
.prop { position: absolute; will-change: transform; }
.prop svg { display: block; width: 100%; height: auto; }
.prop.counter { left: -2%; right: -2%; bottom: 0; height: 12vh; background: linear-gradient(#e2bb92, #d6a979); border-top: 6px solid #c99567; }
.prop.city { left: 0; right: 0; bottom: 0; height: 46vh; }
.prop.city svg { height: 100%; width: 100%; }
.prop.bird svg { animation: flap .42s ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-.55); } }
.prop.cloud { opacity: .95; }
.prop.jet .trail {
  position: absolute; right: 88%; top: 46%; width: 60vw; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85));
}
.prop.sat svg { animation: spin 14s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.prop.moon { border-radius: 50%; box-shadow: 0 0 80px 20px rgba(255, 246, 214, .22); }
.prop.shoot {
  width: 160px; height: 2px; border-radius: 2px; rotate: -24deg;
  background: linear-gradient(90deg, transparent, #fff);
  animation: shootFade 3.4s ease-in infinite;
}
@keyframes shootFade { 0%, 60% { opacity: 0; clip-path: inset(0 100% 0 0); } 70% { opacity: 1; clip-path: inset(0 0 0 0); } 85%, 100% { opacity: 0; clip-path: inset(0 0 0 100%); } }

.climb-hud {
  position: absolute; z-index: 4; top: clamp(78px, 11vh, 120px); left: var(--gut);
  display: grid; gap: 6px; pointer-events: none;
}
.alt { display: flex; align-items: baseline; gap: 6px; }
.alt b { font: 700 clamp(2.6rem, 1.4rem + 5vw, 5.4rem)/.9 var(--f-d); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.alt small { font: 600 clamp(1.1rem, .9rem + 1vw, 1.7rem)/1 var(--f-d); opacity: .7; }
.zone-name {
  position: relative; overflow: hidden; height: 1.5em;
  font: 600 clamp(1rem, .9rem + .6vw, 1.4rem)/1.5 var(--f-d); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); transition: color .6s;
}
.zone-name span { display: block; }
.zone-name span.in { animation: zoneIn .6s var(--spring) both; }
@keyframes zoneIn { from { translate: 0 110%; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.dark .zone-name { color: var(--accent-light); }
.scoops-n { font: 500 1.05rem/1 var(--f-d); opacity: .8; }
.scoops-n b { font-weight: 700; font-variant-numeric: tabular-nums; }

.climb-tower {
  position: absolute; z-index: 2; left: 50%; bottom: 26vh;
  width: var(--sw); height: 1px;
  transform-origin: 50% 100%; transform: translate(-50%, 0);
  transition: transform .7s var(--ease-out);
}
.big-cone {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  width: calc(var(--sw) * .9); height: calc(var(--sw) * 1.3);
  background:
    repeating-linear-gradient(58deg, transparent 0 9px, var(--cone-d) 9px 11.5px),
    repeating-linear-gradient(-58deg, transparent 0 9px, var(--cone-d) 9px 11.5px),
    linear-gradient(90deg, #e9b77c, var(--cone) 40%, #d39a5a);
}
.ctower {
  position: absolute; left: 0; right: 0; bottom: calc(var(--sw) * 1.06); height: 1px;
  transform-origin: 50% 100%;
  animation: sway 3.4s ease-in-out infinite alternate;
}
@keyframes sway { from { rotate: calc(var(--amp, 0) * -1deg); } to { rotate: calc(var(--amp, 0) * 1deg); } }
.cs {
  position: absolute; left: 50%; bottom: calc(var(--i) * var(--sw) * .64);
  width: calc(var(--sw) * 1.08);
  translate: calc(-50% + var(--j) * 1px) -90px; scale: .3; opacity: 0;
  transition: translate .55s var(--spring), scale .55s var(--spring), opacity .18s;
}
.cs.on { translate: calc(-50% + var(--j) * 1px) 0; scale: 1; opacity: 1; }
.cs svg { display: block; width: 100%; height: auto; }

.climb-cards {
  position: absolute; z-index: 5; left: var(--gut); right: var(--gut); bottom: 30px;
  display: grid; align-items: end;
}
.ccard {
  grid-area: 1 / 1; position: relative;
  background: rgba(255, 250, 243, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1.5px solid rgba(59, 38, 32, .08);
  border-radius: 24px; padding: 18px 20px 20px;
  box-shadow: 0 30px 60px -30px rgba(20, 16, 40, .5);
  opacity: 0; translate: 0 70px; rotate: 2deg; pointer-events: none;
  transition: opacity .5s, translate .7s var(--ease-out), rotate .7s var(--ease-out), background .6s, color .6s;
}
.ccard.on { opacity: 1; translate: 0 0; rotate: 0deg; pointer-events: auto; }
.ccard.past { opacity: 0; translate: 0 -40px; rotate: -2deg; }
.ccard .cz { display: block; font: 600 .78rem/1 var(--f-d); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.ccard h3 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); line-height: 1.12; margin-bottom: 6px; }
.ccard p { font-size: .98rem; opacity: .8; }
.ccard .stores { margin-top: 14px; gap: 8px; }
.ccard .store { min-height: 46px; padding: 7px 16px 7px 12px; }
.ccard .store svg { width: 20px; height: 20px; }
.ccard .store b { font-size: 1rem; }
.dark .ccard { background: rgba(18, 20, 44, .62); border-color: rgba(255, 255, 255, .14); color: var(--cream); }
.dark .ccard .cz { color: var(--accent-light); }
.climb-progress { position: absolute; z-index: 5; left: var(--gut); right: var(--gut); bottom: 12px; height: 4px; border-radius: 4px; background: rgba(59, 38, 32, .12); overflow: hidden; }
.dark .climb-progress { background: rgba(255, 255, 255, .14); }
.climb-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--straw), var(--accent)); transform-origin: 0 50%; transform: scaleX(0); }

@media (min-width: 960px) {
  .climb-stage { --sw: 92px; }
  .climb-tower { left: 44%; bottom: 9vh; }
  .climb-cards { left: auto; right: var(--gut); top: 50%; bottom: auto; translate: 0 -50%; width: min(410px, 32vw); align-items: center; }
  .ccard { padding: 28px 28px 30px; border-radius: 30px; translate: 90px 0; rotate: 4deg; }
  .ccard.past { translate: -50px 0; rotate: -3deg; }
  .ccard p { font-size: 1.06rem; }
  .climb-progress { right: auto; bottom: 40px; width: 26vw; }
}

/* ---------- daily ---------- */
.daily {
  position: relative; z-index: 3;
  display: grid; gap: 50px; align-items: center;
  padding: var(--sec-y) var(--pad-x) calc(var(--sec-y) + 10px);
  background: linear-gradient(#07070f, #1a1220 120px, var(--ink) 420px);
  color: var(--cream);
}
.daily::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent),
    radial-gradient(1.2px 1.2px at 32% 64%, #fff 50%, transparent),
    radial-gradient(1.8px 1.8px at 58% 12%, #fff 50%, transparent),
    radial-gradient(1.2px 1.2px at 74% 44%, #fff 50%, transparent),
    radial-gradient(1.5px 1.5px at 88% 80%, #fff 50%, transparent),
    radial-gradient(1.2px 1.2px at 22% 88%, #fff 50%, transparent),
    radial-gradient(1.6px 1.6px at 46% 34%, #fff 50%, transparent),
    radial-gradient(1.2px 1.2px at 94% 22%, #fff 50%, transparent);
  animation: twinkle 4s ease-in-out infinite alternate;
}
.daily::after {
  content: ''; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 96px; z-index: 2; pointer-events: none;
  background: var(--ink);
  -webkit-mask: var(--drip) 0 0 / 1200px 100% repeat-x; mask: var(--drip) 0 0 / 1200px 100% repeat-x;
}
.daily > * { position: relative; }
.countdown { margin-top: 32px; }
.countdown small { display: block; font: 600 .85rem/1 var(--f-d); letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-bottom: 12px; }
.cd { display: flex; align-items: center; gap: 6px; font: 700 clamp(2.4rem, 1.6rem + 3vw, 4.2rem)/1 var(--f-d); perspective: 400px; }
.cd span {
  display: inline-block; min-width: 1.45em; text-align: center; padding: .14em .16em; border-radius: .26em;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13) 50%, rgba(255, 255, 255, .07) 50%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 20px -12px rgba(0, 0, 0, .8);
  font-variant-numeric: tabular-nums; transform-origin: 50% 50%;
}
.cd span.flip { animation: flip .5s var(--ease-out); }
@keyframes flip { from { transform: rotateX(-80deg); opacity: .3; } to { transform: none; opacity: 1; } }
.cd i { font-style: normal; opacity: .55; animation: colon 1s steps(1) infinite; }
@keyframes colon { 50% { opacity: .15; } }
.board {
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 30px; padding: 20px 16px 16px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
}
.board-head { display: flex; justify-content: space-between; align-items: center; padding: 0 6px; font: 600 1.15rem/1 var(--f-d); }
.live { display: inline-flex; align-items: center; gap: 7px; font: 700 .75rem/1 var(--f-d); letter-spacing: .14em; color: #ff8096; }
.live i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #ff4d6a; }
.live i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #ff4d6a; animation: livePulse 1.6s ease-out infinite; }
@keyframes livePulse { from { transform: scale(1); opacity: .8; } to { transform: scale(3); opacity: 0; } }
.rows { list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 6px; }
.rows li {
  position: relative; display: grid; grid-template-columns: 26px 34px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 16px; background: rgba(255, 255, 255, .05);
}
.rows li.bump { animation: flash 1.4s var(--ease-out); }
@keyframes flash { 0% { background: rgba(242, 193, 78, .45); } 100% { background: rgba(255, 255, 255, .05); } }
.rk { font: 700 1rem/1 var(--f-d); text-align: center; opacity: .75; }
.rows li:nth-child(1) .rk { color: var(--gold); opacity: 1; }
.rows li:nth-child(2) .rk { color: #d9dde6; opacity: 1; }
.rows li:nth-child(3) .rk { color: #e3a26f; opacity: 1; }
.av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 .95rem/1 var(--f-d); color: var(--ink); background: var(--c); }
.nm { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc { font: 600 1.05rem/1 var(--f-d); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc small { font-size: .72rem; opacity: .6; margin-left: 3px; }
.plus {
  position: absolute; right: 12px; top: -8px; font: 700 .8rem/1 var(--f-d); color: var(--ink);
  background: var(--gold); padding: 4px 8px; border-radius: 999px; pointer-events: none;
  animation: plus 1.4s var(--ease-out) forwards;
}
@keyframes plus { 0% { opacity: 0; translate: 0 8px; scale: .6; } 20% { opacity: 1; translate: 0 0; scale: 1.05; } 75% { opacity: 1; } 100% { opacity: 0; translate: 0 -16px; } }
.board-you {
  display: grid; grid-template-columns: 26px 1fr; gap: 2px 10px; align-items: center;
  padding: 12px; border-radius: 16px; border: 1.5px dashed rgba(255, 255, 255, .25);
}
.board-you span { grid-row: span 2; font: 700 1rem/1 var(--f-d); opacity: .7; text-align: center; }
.board-you b { font-family: var(--f-d); font-weight: 600; }
.board-you em { font-style: normal; font-size: .9rem; opacity: .65; }
@media (min-width: 960px) { .daily { grid-template-columns: 1.05fr .95fr; gap: 70px; } .board { padding: 24px 22px 20px; } }

/* ---------- gallery ---------- */
.gallery { position: relative; overflow: clip; padding: calc(var(--sec-y) + 60px) 0 calc(var(--sec-y) - 30px); }
.gallery > .kicker, .gallery > .h2 { padding-inline: var(--pad-x); }
.shots {
  display: flex; gap: clamp(20px, 3vw, 40px);
  overflow-x: auto; overscroll-behavior-x: contain;
  padding: 44px var(--pad-x) 30px;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad-x);
  scrollbar-width: none; cursor: grab;
}
.shots::-webkit-scrollbar { display: none; }
.shots.drag, .shots.drift { scroll-snap-type: none; }
.shots.drag { cursor: grabbing; }
.shot {
  flex: 0 0 auto; width: clamp(196px, 21vw, 262px); margin: 0;
  scroll-snap-align: center; rotate: -3deg;
  transition: rotate .6s var(--spring), scale .6s var(--spring), translate .6s var(--spring);
}
.shot:nth-child(even) { rotate: 2.5deg; translate: 0 22px; }
.shot:hover { rotate: 0deg; scale: 1.05; }
.shot img {
  display: block; width: 100%; height: auto; border-radius: 32px;
  border: 8px solid #1a1210; background: #1a1210;
  box-shadow: 0 36px 50px -28px rgba(59, 38, 32, .6), 0 0 0 1.5px rgba(255, 255, 255, .1) inset;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.shot figcaption { margin-top: 16px; text-align: center; font: 600 1.02rem/1.3 var(--f-d); padding: 0 6px; }

/* ---------- perks ---------- */
.perks { display: grid; gap: 16px; padding: 30px var(--pad-x) var(--sec-y); }
.perk {
  position: relative; background: var(--paper); border-radius: 28px; padding: 26px 24px 28px;
  border: 1.5px solid rgba(59, 38, 32, .08); box-shadow: 0 1px 0 rgba(59, 38, 32, .05);
  transition: transform .6s var(--spring), box-shadow .4s;
}
.perk:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.perk:nth-child(1) { background: linear-gradient(160deg, #eef4fd, var(--paper) 60%); }
.perk:nth-child(2) { background: linear-gradient(160deg, #fdeef2, var(--paper) 60%); }
.perk:nth-child(3) { background: linear-gradient(160deg, #eaf8f0, var(--paper) 60%); }
.perk:nth-child(4) { background: linear-gradient(160deg, #fcf5e2, var(--paper) 60%); }
.perk-ico {
  display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 18px;
  font-size: 1.8rem; background: #fff; box-shadow: 0 8px 20px -12px rgba(59, 38, 32, .45); margin-bottom: 18px;
  transition: rotate .5s var(--spring), scale .5s var(--spring);
}
.perk:hover .perk-ico { rotate: -10deg; scale: 1.1; }
.perk h3 { font-size: 1.45rem; font-weight: 600; margin-bottom: 6px; }
.perk p { color: var(--ink-soft); }
.perk.deluxe {
  color: var(--cream); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px;
  border: 3px solid transparent;
  background:
    radial-gradient(ellipse 80% 60% at 80% 0%, rgba(242, 193, 78, .22), transparent 70%) padding-box,
    linear-gradient(var(--ink2), var(--ink2)) padding-box,
    conic-gradient(from var(--ang), #f2c14e, #fff3c4, #b97c16, #ffe08a, #8a5a12, #f2c14e) border-box;
  animation: spinAng 5s linear infinite;
}
@keyframes spinAng { to { --ang: 360deg; } }
.perk.deluxe .perk-ico { background: rgba(242, 193, 78, .16); box-shadow: inset 0 0 0 1.5px rgba(242, 193, 78, .5); }
.perk.deluxe h3 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 700;
  background: linear-gradient(100deg, #f2c14e 20%, #fff6d5 40%, #f2c14e 60%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 3.4s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.perk.deluxe p { color: rgba(253, 243, 231, .78); max-width: 40ch; }
.perk.deluxe::after {
  content: ''; position: absolute; right: 26px; top: 26px; width: 66px; height: 88px; rotate: 16deg;
  background:
    repeating-linear-gradient(58deg, transparent 0 8px, rgba(110, 70, 8, .55) 8px 10px),
    repeating-linear-gradient(-58deg, transparent 0 8px, rgba(110, 70, 8, .55) 8px 10px),
    linear-gradient(100deg, #fff0a8, #e9b23a 45%, #b47a14);
  clip-path: polygon(0 0, 100% 0, 57% 100%, 43% 100%);
  animation: bob 4s ease-in-out infinite;
}
@media (min-width: 640px) { .perks { grid-template-columns: repeat(2, 1fr); } .perk.deluxe { grid-column: 1 / -1; min-height: 240px; } }
@media (min-width: 1000px) {
  .perks { grid-template-columns: repeat(3, 1fr); }
  .perk.deluxe { grid-column: 3; grid-row: 1 / span 2; min-height: 0; }
  .perk.deluxe::after { width: 92px; height: 124px; right: 34px; top: 34px; }
}

/* ---------- faq ---------- */
.faq { padding: 0 var(--gut) var(--sec-y); max-width: 900px; margin: 0 auto; }
.qs { display: grid; gap: 12px; margin-top: 36px; }
.qs details {
  background: var(--paper); border-radius: 22px; border: 1.5px solid rgba(59, 38, 32, .08);
  transition: box-shadow .4s, border-color .4s;
}
.qs details[open] { box-shadow: var(--shadow); border-color: rgba(194, 69, 95, .25); }
.qs summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 20px 70px 20px 24px; font: 600 1.18rem/1.3 var(--f-d);
}
.qs summary::-webkit-details-marker { display: none; }
.qs summary::before, .qs summary::after {
  content: ''; position: absolute; right: 20px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%;
}
.qs summary::before {
  background: linear-gradient(#fff, #fff) center / 14px 2.6px no-repeat, var(--accent);
  transition: scale .4s var(--spring), background-color .3s;
}
.qs summary::after {
  background: linear-gradient(#fff, #fff) center / 2.6px 14px no-repeat;
  transition: rotate .45s var(--spring);
}
.qs summary:hover::before { scale: 1.1; }
.qs details[open] > summary::after { rotate: 90deg; }
.qs details[open] > summary::before { background-color: var(--ink); }
.qs .ans { overflow: hidden; }
.qs .ans p { padding: 0 24px 22px; color: var(--ink-soft); }
.qs .ans a { color: var(--accent); font-weight: 800; }

/* ---------- final ---------- */
.final {
  position: relative; overflow: clip; text-align: center;
  padding: calc(var(--sec-y) + 10px) var(--gut) calc(var(--sec-y) + 40px);
  background:
    radial-gradient(ellipse 70% 55% at 50% 52%, rgba(194, 69, 95, .17), transparent 70%),
    radial-gradient(ellipse 50% 40% at 15% 20%, rgba(169, 201, 245, .3), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 30%, rgba(159, 224, 192, .3), transparent 70%),
    var(--cream);
}
.final > *:not(.final-scoops) { position: relative; z-index: 1; }
.final-scoops { position: absolute; inset: 0; pointer-events: none; container-type: size; }
.fs { position: absolute; top: 0; width: var(--s); }
.fs > div { opacity: var(--o); animation: skyfall var(--dur) linear var(--del) infinite; }
.fs svg { display: block; width: 100%; height: auto; }
.final-icon { display: block; margin: 0 auto; width: 124px; height: 124px; border-radius: 30px; box-shadow: 0 24px 40px -18px rgba(59, 38, 32, .55); }
.final-icon.in { animation: reveal 1s var(--ease-out) both, hop 2.6s ease-in-out 1.2s infinite; }
@keyframes hop {
  0%, 60%, 100% { transform: translateY(0) scale(1); }
  66% { transform: translateY(0) scale(1.12, .86); }
  76% { transform: translateY(-34px) scale(.94, 1.08) rotate(-6deg); }
  86% { transform: translateY(0) scale(1.1, .9); }
  93% { transform: translateY(-6px) scale(1); }
}
.final-title { font: 700 clamp(3.4rem, 1.6rem + 9vw, 9rem)/.9 var(--f-d); letter-spacing: -.035em; margin: 34px 0 22px; }
.final-title em { color: var(--accent); }
.lede.center { margin-inline: auto; text-align: center; max-width: 40ch; }
.final .stores { margin-top: 36px; gap: 14px; }
@media (min-width: 600px) {
  .final .store { padding: 14px 30px 14px 22px; min-height: 68px; }
  .final .store svg { width: 32px; height: 32px; }
  .final .store b { font-size: 1.45rem; }
}

/* ---------- footer ---------- */
.foot {
  position: relative; background: var(--ink); color: rgba(253, 243, 231, .78);
  display: grid; justify-items: center; gap: 16px; text-align: center;
  padding: 120px var(--gut) 44px; font-size: .95rem;
}
.foot::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 86px; pointer-events: none;
  background: var(--cream);
  -webkit-mask: var(--drip) 300px 0 / 1200px 100% repeat-x; mask: var(--drip) 300px 0 / 1200px 100% repeat-x;
}
.foot-brand { display: flex; align-items: center; gap: 10px; font: 600 1.15rem/1 var(--f-d); color: var(--cream); }
.foot-brand img { border-radius: 8px; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.foot a { color: var(--cream); text-decoration: none; font-weight: 700; border-bottom: 2px solid rgba(194, 69, 95, .6); transition: border-color .2s, color .2s; }
.foot a:hover { color: var(--accent-light); border-color: var(--accent-light); }
.foot p { opacity: .65; font-size: .88rem; }

/* ---------- small screens ---------- */
@media (max-width: 480px) {
  .stores { gap: 10px; }
  .store { padding: 9px 16px 9px 12px; min-height: 52px; gap: 8px; }
  .store svg { width: 22px; height: 22px; }
  .store b { font-size: 1.05rem; }
  .store small { font-size: .6rem; }
  .final-scoops { opacity: .55; }
  .ccard .store { padding: 6px 12px 6px 10px; min-height: 42px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
  .sky-scoops, .final-scoops, .prop.shoot { display: none; }
  .marquee-track { animation: none !important; }
  .card-art * { animation: none !important; opacity: 1 !important; }
}