/* ============================================
   JUICE BOX BLEND — Global Design System v2
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  /* Brand Core — Blue Dominant */
  --brand-blue:      #5BBFEA;
  --brand-blue-dark: #2E9FCC;
  --brand-blue-soft: #E4F5FB;

  --brand-yellow:      #FFD93D;
  --brand-yellow-dark: #E5BF00;

  /* Legacy aliases (kept for component compatibility) */
  --blue:        #5BBFEA;
  --blue-mid:    #2E9FCC;
  --blue-dark:   #1a7aab;
  --blue-light:  #E4F5FB;
  --yellow:      #FFD93D;
  --yellow-dark: #E5BF00;

  /* Neutrals */
  --bg-cream:  #F7F4EC;
  --bg-dark:   #0F1115;
  --cream:     #F7F4EC;
  --black:     #111111;
  --white:     #ffffff;
  --off-white: #F0EDE4;

  /* Illustration-only accent colors */
  --green:  #58C27D;
  --pink:   #F2607D;
  --orange: #FF8C42;
  --purple: #9B72CF;

  --text-primary: #111111;
  --text-muted:   #555555;

  --font-head: 'Fredoka One', cursive;
  --font-body: 'Nunito', sans-serif;

  --border:       2px solid var(--black);
  --border-thick: 3px solid var(--black);
  --border-heavy: 4px solid var(--black);
  --radius-sm:    12px;
  --radius:       20px;
  --radius-lg:    28px;
  --radius-xl:    28px;
  --radius-pill:  999px;

  --shadow:       4px 4px 0 var(--black);
  --shadow-lg:    8px 8px 0 var(--black);
  --shadow-xl:    12px 12px 0 var(--black);
  --cursor-hide:  url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==") 0 0, none;
  --ribbon-h:     0px;
  --floating-header-height: 132px;
  --floating-header-height-mobile: 96px;
  --floating-header-current: var(--floating-header-height);
  --floating-header-sticky-offset: 108px;
  --floating-header-sticky-offset-mobile: 88px;
  --floating-header-sticky-current: var(--floating-header-sticky-offset);
  --landing-hero-gap: 34px;
  --landing-hero-gap-mobile: 22px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--black);
  overflow-x: hidden;
  -ms-overflow-style: none;
}
html,
body {
  cursor: var(--cursor-hide);
}
html,
html *,
html *::before,
html *::after {
  cursor: var(--cursor-hide) !important;
}
[id] {
  scroll-margin-top: calc(var(--floating-header-current) + 24px);
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: none; }

/* Cursor */
#cursor {
  width: 86px;
  height: 86px;
  background-image: url("Images/Pictures/JuiceBoxCursor.png?v=5");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 100001;
  transform: translate(-30%, -8%);
  transform-origin: 50% 100%;
  transition: transform 0.14s ease;
  will-change: left, top;
}

#cursor.big {
  animation: cursorHoverShake 0.28s ease-in-out infinite;
}

@keyframes cursorHoverShake {
  0% {
    transform: translate(-30%, -8%) scale(1.1) rotate(-3deg);
  }
  50% {
    transform: translate(-30%, -8%) scale(1.14) rotate(3deg);
  }
  100% {
    transform: translate(-30%, -8%) scale(1.1) rotate(-3deg);
  }
}

#cursor-dot, #cursor-trail { display: none; }

/* Requested cleanup: remove decorative circles + clouds from page content */
.hero-sticker-cloud,
.eyebrow-dot,
.hero-pill-dot,
.m-dot,
.badge-dot,
.fran-marquee-dot,
.loc-pip,
.blend-chip-dot {
  display: none !important;
}

main svg circle,
main svg ellipse {
  display: none !important;
}

/* Loader */
#loader {
  position: fixed;
  inset: 0;
  background: linear-gradient(160deg, #5BBFEA 0%, #2E9FCC 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 99999;
  transition: opacity .7s ease, visibility .7s ease;
}
#loader.out { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-blender-svg {
  width: 198px;
  animation: loaderBlenderRock .55s ease-in-out infinite alternate;
  z-index: 1;
}

.loader-label {
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--white);
  letter-spacing: .5px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
  animation: loaderBob .9s ease-in-out infinite alternate;
  z-index: 1;
}

.loader-blender-svg .blender-svg-lid {
  animation: blenderLidBounce .4s ease-in-out infinite alternate;
  transform-origin: 100px 52px;
}

.loader-center-logo {
  opacity: .9;
}

.loader-blender-svg image {
  opacity: .9;
}

#loader-liquid-path,
#loader-foam-path,
#loader-gloss-path {
  will-change: d;
}

@keyframes loaderBob {
  from { transform: translateY(0); }
  to   { transform: translateY(-4px); }
}

@keyframes loaderBlenderRock {
  from { transform: translateX(-3px) rotate(-1.2deg); }
  to   { transform: translateX(3px) rotate(1.2deg); }
}

@keyframes blenderLidBounce {
  from { transform: translateY(0) rotate(-1deg); }
  to   { transform: translateY(-7px) rotate(1deg); }
}

/* =============================================
   NAVIGATION — Floating Blend Board
   ============================================= */

body.loader-active {
  padding-top: 0;
}

@keyframes swirlDriftA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(26px, -16px, 0) scale(1.08); }
}
@keyframes swirlDriftB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-30px, 12px, 0) scale(1.1); }
}
@keyframes swirlDriftC {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(20px, 16px, 0) scale(1.05); }
}
@keyframes tileIdleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(.35deg); }
}
@keyframes boardShake {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateX(-2px) rotate(-.4deg); }
  40% { transform: translateX(2px) rotate(.4deg); }
  60% { transform: translateX(-2px) rotate(-.4deg); }
  80% { transform: translateX(1px) rotate(.2deg); }
}
@keyframes logoWiggle {
  0%, 100% { transform: rotate(-2deg); }
  30% { transform: rotate(-4deg); }
  60% { transform: rotate(0deg); }
}
@keyframes ctaShake {
  0%, 100% { transform: translateY(-50%) rotate(-2deg); }
  20% { transform: translateY(-50%) translateX(-2px) rotate(-5deg); }
  40% { transform: translateY(-50%) translateX(2px) rotate(1deg); }
  60% { transform: translateY(-50%) translateX(-2px) rotate(-4deg); }
  80% { transform: translateY(-50%) translateX(1px) rotate(0deg); }
}

#navbar.blend-shelf-header {
  --shelf-collapse: 0;
  --shelf-height: calc(98px - (16px * var(--shelf-collapse)));
  --shelf-radius: calc(36px - (8px * var(--shelf-collapse)));
  --tile-font: calc(.9rem - (.08rem * var(--shelf-collapse)));
  --tile-height: calc(54px - (7px * var(--shelf-collapse)));
  --board-y: -10px;
  --board-scale: 1;
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, calc(100% - 26px));
  z-index: 930;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

#navbar.blend-shelf-header::before {
  display: none;
}

#navbar.blend-shelf-header::after {
  display: none;
}

#navbar.blend-shelf-header.is-ready {
  --board-y: 0px;
}

#navbar.blend-shelf-header.panel-open {
  --board-y: 1px;
  --board-scale: 1.014;
}

.blend-swirl {
  display: none;
}

.swirl-blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: .72;
}

.swirl-blob-a {
  width: 44%;
  height: 170%;
  left: -7%;
  top: -46%;
  background: radial-gradient(circle, rgba(255,216,96,.66), rgba(255,216,96,.18) 62%, transparent 100%);
  animation: swirlDriftA 8.4s ease-in-out infinite;
}

.swirl-blob-b {
  width: 46%;
  height: 160%;
  right: 5%;
  top: -22%;
  background: radial-gradient(circle, rgba(91,191,234,.62), rgba(91,191,234,.16) 66%, transparent 100%);
  animation: swirlDriftB 10s ease-in-out infinite;
}

.swirl-blob-c {
  width: 38%;
  height: 140%;
  left: 32%;
  bottom: -52%;
  background: radial-gradient(circle, rgba(242,96,125,.56), rgba(242,96,125,.14) 64%, transparent 100%);
  animation: swirlDriftC 9.2s ease-in-out infinite;
}

.shelf-platform {
  position: relative;
  z-index: 2;
  min-height: var(--shelf-height);
  border-radius: var(--shelf-radius);
  border: 2px solid #111;
  background:
    linear-gradient(180deg, #fffef8 0%, #fff7e2 56%, #ffe9be 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23000000' fill-opacity='.045'%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3Ccircle cx='48' cy='24' r='1'/%3E%3Ccircle cx='80' cy='16' r='1.3'/%3E%3Ccircle cx='108' cy='28' r='1.1'/%3E%3Ccircle cx='20' cy='52' r='1'/%3E%3Ccircle cx='56' cy='64' r='1.2'/%3E%3Ccircle cx='90' cy='56' r='1'/%3E%3Ccircle cx='24' cy='88' r='1.1'/%3E%3Ccircle cx='64' cy='96' r='1.2'/%3E%3Ccircle cx='100' cy='88' r='1'/%3E%3C/g%3E%3C/svg%3E");
  box-shadow:
    0 6px 0 rgba(17,17,17,.14),
    0 14px 22px rgba(17,17,17,.16),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -8px 10px rgba(215,164,73,.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 12px 136px 12px 22px;
  transform: translateY(var(--board-y)) scaleY(var(--board-scale));
  opacity: 0;
  transition:
    min-height .3s cubic-bezier(.22,1,.36,1),
    border-radius .3s cubic-bezier(.22,1,.36,1),
    padding .3s cubic-bezier(.22,1,.36,1),
    transform .52s cubic-bezier(.22,1,.22,1),
    box-shadow .28s ease,
    opacity .34s ease;
}

#navbar.blend-shelf-header.is-ready .shelf-platform {
  opacity: 1;
}

.shelf-platform::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -18px;
  height: 30px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(91,191,234,.44), rgba(91,191,234,0) 72%);
  filter: blur(8px);
  pointer-events: none;
}

.shelf-platform.is-shaking {
  animation: boardShake .42s cubic-bezier(.36,.07,.19,.97);
}

#navbar.blend-shelf-header.is-scrolled .shelf-platform {
  box-shadow:
    0 5px 0 rgba(17,17,17,.12),
    0 12px 18px rgba(17,17,17,.16),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -6px 8px rgba(215,164,73,.16);
}

.shelf-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: .24rem;
  transform: rotate(-2deg);
  transition: transform .24s ease;
}

.shelf-logo::before {
  display: none;
}

.shelf-logo .nav-logo {
  height: clamp(50px, 5.6vw, 64px);
  width: auto;
  filter: drop-shadow(0 7px 8px rgba(17,17,17,.28));
}

.shelf-logo:hover,
.shelf-logo:focus-visible {
  animation: logoWiggle .44s ease;
}

.shelf-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .56rem;
  margin-left: 0;
  margin-right: auto;
}

.ingredient-tile {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-head);
  font-size: var(--tile-font);
  color: #141f2b;
  min-width: 104px;
  min-height: var(--tile-height);
  border: 2px solid #111;
  border-radius: 20px;
  padding: .52rem 1rem;
  background: linear-gradient(170deg, #fffdf5 0%, #fff1c9 100%);
  box-shadow: 0 4px 0 rgba(17,17,17,.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  text-align: center;
  white-space: nowrap;
  animation: tileIdleFloat 4.2s ease-in-out infinite;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.ingredient-tile:nth-child(1) { background: linear-gradient(170deg, #fff7dd, #ffe8b4); animation-duration: 4.6s; }
.ingredient-tile:nth-child(2) { background: linear-gradient(170deg, #eefdff, #d8f2ff); animation-duration: 4.2s; }
.ingredient-tile:nth-child(3) { background: linear-gradient(170deg, #f0ffed, #ddf6d3); animation-duration: 4.9s; }
.ingredient-tile:nth-child(4) { background: linear-gradient(170deg, #fff2f8, #ffd9e7); animation-duration: 4s; }

.ingredient-tile:hover,
.ingredient-tile:focus-visible,
.ingredient-tile.active {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #111;
}

.ingredient-tile.nav-parent {
  cursor: none;
}

.ingredient-tile.nav-parent::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: .24rem;
  transition: transform .2s ease;
}

#navbar.blend-shelf-header.panel-open .ingredient-tile.nav-parent::after {
  transform: rotate(225deg) translate(-1px, -1px);
}

.app-cta {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%) rotate(-2deg);
  min-width: 122px;
  height: calc(var(--shelf-height) - 26px);
  border-radius: 20px;
  border: 3px solid #111;
  background: linear-gradient(165deg, #fff4bf 0%, #ffd95d 100%);
  box-shadow: 0 7px 0 rgba(17,17,17,.16), 0 12px 18px rgba(17,17,17,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  font-family: var(--font-head);
  font-size: .84rem;
  color: #121c27;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: transform .24s cubic-bezier(.22,1,.36,1), box-shadow .24s ease, background .24s ease;
  z-index: 4;
}

.app-cta:hover,
.app-cta:focus-visible {
  transform: translateY(-50%) rotate(2deg) translateY(-2px);
  box-shadow: 0 10px 0 rgba(17,17,17,.16), 0 16px 22px rgba(17,17,17,.24);
  background: linear-gradient(165deg, #fff6cb 0%, #ffdf73 100%);
}

.app-cta.active {
  background: linear-gradient(165deg, #ffeeb1 0%, #ffd043 100%);
}

.app-cta.is-shaking {
  animation: ctaShake .46s cubic-bezier(.36,.07,.19,.97);
}

.locations-panel {
  position: absolute;
  left: 22px;
  right: 22px;
  top: calc(100% + 8px);
  border-radius: 26px;
  border: 3px solid #111;
  background: linear-gradient(165deg, rgba(255,252,244,.98), rgba(255,240,200,.98));
  box-shadow: 0 16px 24px rgba(17,17,17,.2), inset 0 1px 0 rgba(255,255,255,.92);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .86rem;
  max-height: 0;
  opacity: 0;
  padding: 0 .9rem;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-10px) scale(.985);
  transition:
    max-height .34s cubic-bezier(.22,1,.36,1),
    padding .34s cubic-bezier(.22,1,.36,1),
    opacity .24s ease,
    transform .26s cubic-bezier(.22,1,.36,1);
  z-index: 3;
}

#navbar.blend-shelf-header.panel-open .locations-panel {
  max-height: 168px;
  padding: .94rem;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: .05s, .05s, .07s, .07s;
}

.flavor-card {
  min-height: 84px;
  border-radius: 20px;
  border: 3px solid #111;
  background: linear-gradient(160deg, #ffffff 0%, #fff1d3 100%);
  display: flex;
  align-items: center;
  gap: .28rem;
  padding: .72rem .9rem;
  box-shadow: 0 6px 0 rgba(17,17,17,.14), 0 10px 14px rgba(17,17,17,.12);
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease;
}

.flavor-card:nth-child(2) {
  background: linear-gradient(160deg, #ffffff 0%, #ffe6ef 100%);
}

.flavor-card:hover,
.flavor-card:focus-visible,
.flavor-card.active {
  transform: translateY(-4px) rotate(-0.5deg);
  box-shadow: 0 10px 0 rgba(17,17,17,.14), 0 14px 18px rgba(17,17,17,.2);
}

.flavor-card:nth-child(2):hover,
.flavor-card:nth-child(2):focus-visible,
.flavor-card:nth-child(2).active {
  transform: translateY(-4px) rotate(0.5deg);
}

.flavor-icon {
  display: none;
}

.flavor-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.flavor-copy {
  display: flex;
  flex-direction: column;
  gap: .14rem;
}

.flavor-copy strong {
  font-family: var(--font-head);
  font-size: .88rem;
  line-height: 1.05;
  color: #131c28;
}

.flavor-copy small {
  font-size: .72rem;
  font-weight: 800;
  color: rgba(19,28,40,.72);
}

/* ---- Hamburger ---- */
.hamburger {
  display: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 5px;
  border: 3px solid rgba(17,17,17,.9);
  border-radius: 14px;
  padding: 9px 8px;
  background: linear-gradient(170deg, #fffef6, #ffeec0);
  box-shadow: 0 7px 0 rgba(17,17,17,.16), 0 12px 16px rgba(17,17,17,.2);
  transition: transform .22s ease, box-shadow .22s ease;
  z-index: 10;
}

.hamburger:hover {
  transform: translateY(-50%) scale(1.04);
  box-shadow: 0 9px 0 rgba(17,17,17,.16), 0 14px 18px rgba(17,17,17,.2);
}

.hamburger span {
  width: 20px;
  height: 3px;
  background: #1c2a38;
  border-radius: 3px;
  transition: all .28s ease;
  display: block;
}

.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---- Mobile menu ---- */
.mobile-menu {
  display: none;
  position: fixed;
  top: calc(var(--floating-header-height-mobile) - 6px);
  inset-inline: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255,252,240,.98), rgba(255,246,221,.96));
  border-top: 1px solid rgba(255,255,255,.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 905;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: 2rem 1.2rem;
  overflow-y: auto;
}

.mobile-menu.open { display: flex; }

.mobile-menu a {
  font-family: var(--font-head);
  font-size: 1.34rem;
  padding: 12px 22px;
  border: 3px solid rgba(17,17,17,.9);
  border-radius: var(--radius-pill);
  background: #fffef2;
  box-shadow: 0 7px 0 rgba(17,17,17,.14), 0 12px 20px rgba(17,17,17,.14);
  width: 100%;
  max-width: 380px;
  text-align: center;
  transition: transform .22s cubic-bezier(.22,1,.36,1), background .18s ease, box-shadow .18s ease;
}

.mobile-menu a:hover,
.mobile-menu a.active {
  transform: translateY(-2px);
  background: #ffffff;
  box-shadow: 0 10px 0 rgba(17,17,17,.14), 0 14px 20px rgba(17,17,17,.2);
}

.mobile-sub-link {
  font-size: 1.06rem !important;
  max-width: 328px !important;
}

.mobile-cta-link {
  background: linear-gradient(145deg, rgba(255,251,204,.95), rgba(255,220,116,.92)) !important;
}

/* Buttons */
.btn {
  font-family: var(--font-head); font-size: 1rem;
  padding: 12px 28px; border-radius: var(--radius-pill);
  border: var(--border-thick);
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .15s, box-shadow .15s;
  box-shadow: var(--shadow); line-height: 1;
  white-space: nowrap; position: relative; overflow: hidden;
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translateY(1px); box-shadow: 2px 2px 0 var(--black); }
.btn-yellow { background: var(--yellow); color: var(--black); }
.btn-blue   { background: var(--blue);   color: var(--black); }
.btn-black  { background: var(--black);  color: var(--white); }
.btn-white  { background: var(--white);  color: var(--black); }
.btn-lg { font-size: 1.2rem; padding: 16px 42px; }

/* Layout helpers */
.section { padding: 90px 2rem; }
.container { max-width: 1180px; margin: 0 auto; }
.section-label {
  font-family: var(--font-head);
  font-size: 0.74rem;
  letter-spacing: 2.3px;
  text-transform: uppercase;
  opacity: 1;
  margin-bottom: 0.72rem;
  display: inline-block;
  padding: 5px 12px;
  border: 2px solid var(--black);
  border-radius: 12px;
  background: var(--brand-blue-soft);
  box-shadow: 2px 2px 0 rgba(17,17,17,0.14);
  transform: rotate(-1.2deg);
}
.section-title {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.05;
  display: inline-block;
  position: relative;
}
.section-title::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -7px;
  height: 12px;
  background: rgba(255, 217, 61, 0.85);
  border-radius: 12px;
  z-index: -1;
  opacity: 0.95;
}
.section-sub {
  font-size: 1.05rem;
  font-weight: 700;
  opacity: .66;
  margin-top: .8rem;
  line-height: 1.65;
  max-width: 690px;
}

/* Marquee strip */
.marquee-strip {
  background: var(--black); overflow: hidden;
  border-top: var(--border-thick); border-bottom: var(--border-thick);
  padding: 14px 0;
}
.marquee-track {
  display: flex; width: max-content;
  animation: marquee 26s linear infinite;
}
.marquee-strip:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  font-family: var(--font-head); font-size: 1rem;
  color: var(--yellow); padding: 0 2.5rem;
  white-space: nowrap; display: flex; align-items: center; gap: 10px;
}
.m-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); display: inline-block; flex-shrink: 0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Card */
.card {
  background: #ffffff;
  border: 2px solid #111;
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 0 #111;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: all 0.25s ease;
}
.card::before {
  display: none;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 14px 0 #111; }

/* Tag */
.tag {
  display: inline-block; font-family: var(--font-head); font-size: .8rem;
  padding: 4px 14px; border-radius: var(--radius-pill);
  border: 2px solid var(--black); line-height: 1.4;
}

/* Scroll reveal */
.reveal     { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
.reveal.in  { opacity: 1; transform: translateY(0); }
.reveal-l   { opacity: 0; transform: translateX(-36px); transition: opacity .65s ease, transform .65s ease; }
.reveal-l.in{ opacity: 1; transform: translateX(0); }
.reveal-r   { opacity: 0; transform: translateX(36px); transition: opacity .65s ease, transform .65s ease; }
.reveal-r.in{ opacity: 1; transform: translateX(0); }
.reveal-left { opacity: 0; transform: translateX(-36px); transition: opacity .65s ease, transform .65s ease; }
.reveal-left.in { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(36px); transition: opacity .65s ease, transform .65s ease; }
.reveal-right.in { opacity: 1; transform: translateX(0); }
.reveal-pop { opacity: 0; transform: scale(.82); transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }
.reveal-pop.in { opacity: 1; transform: scale(1); }

/* Animations */
@keyframes bobFloat  { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-18px) rotate(2deg)} }
@keyframes spinSlow  { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes pulseSoft { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes jiggle {
  0%,100%{transform:rotate(0deg) scale(1)}
  15%{transform:rotate(-6deg) scale(1.04)}
  30%{transform:rotate(6deg) scale(.97)}
  45%{transform:rotate(-3deg) scale(1.02)}
  60%{transform:rotate(2deg)}
  75%{transform:rotate(-1deg)}
}
@keyframes strawWag {
  0%,100%{transform:rotate(0deg) translateX(0)}
  30%{transform:rotate(5deg) translateX(1px)}
  70%{transform:rotate(-3deg) translateX(-1px)}
}
@keyframes liquidShift { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-6%)} }

/* Confetti */
.confetti-piece {
  position: fixed; pointer-events: none; z-index: 9990;
  border-radius: 2px; animation: confettiFall 1.4s ease forwards;
}
@keyframes confettiFall { 0%{opacity:1} 100%{opacity:0;transform:var(--cf-t) rotate(var(--cf-r))} }

/* Shared playful bits */
.interactive-tilt {
  transform-style: preserve-3d;
  transition: transform .22s ease, box-shadow .22s ease;
  will-change: transform;
}
.floating-sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.splash-photo {
  --splash-rot: -2deg;
  --splash-border: var(--yellow);
  --splash-shape: polygon(48% 2%, 62% 7%, 77% 4%, 89% 14%, 96% 28%, 93% 42%, 99% 58%, 90% 74%, 82% 90%, 66% 92%, 50% 99%, 36% 93%, 20% 96%, 10% 82%, 2% 66%, 6% 49%, 1% 33%, 12% 18%, 26% 10%, 36% 11%);
  width: clamp(180px, 23vw, 300px);
  aspect-ratio: 1 / 1;
  position: relative;
  transform: rotate(var(--splash-rot));
  filter: drop-shadow(8px 10px 0 rgba(0,0,0,.35));
  isolation: isolate;
}
.splash-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--black);
  clip-path: var(--splash-shape);
}
.splash-photo::after {
  content: '';
  position: absolute;
  inset: 7px;
  background: var(--splash-border);
  clip-path: var(--splash-shape);
  box-shadow: -20px 86px 0 -13px var(--splash-border), 82px 80px 0 -12px var(--splash-border);
}
.splash-photo img {
  position: absolute;
  inset: 16px;
  clip-path: var(--splash-shape);
  border: 3px solid var(--black);
  object-fit: cover;
}
.splash-photo--berry {
  --splash-rot: -6deg;
  --splash-border: #ff9cc0;
  --splash-shape: polygon(50% 1%, 64% 8%, 81% 2%, 90% 15%, 99% 31%, 91% 47%, 100% 63%, 87% 79%, 76% 95%, 61% 88%, 48% 100%, 35% 90%, 19% 94%, 8% 80%, 1% 63%, 9% 48%, 3% 30%, 14% 16%, 29% 8%, 39% 10%);
}
.splash-photo--mango {
  --splash-rot: 5deg;
  --splash-border: #ffe48a;
  --splash-shape: polygon(47% 3%, 60% 9%, 74% 7%, 88% 16%, 96% 30%, 94% 45%, 98% 60%, 90% 74%, 80% 89%, 66% 93%, 50% 97%, 34% 92%, 20% 95%, 11% 83%, 2% 67%, 7% 49%, 2% 34%, 11% 18%, 25% 10%, 36% 12%);
}
.splash-photo--mint {
  --splash-rot: -3deg;
  --splash-border: #a6ebc0;
  --splash-shape: polygon(49% 3%, 63% 10%, 79% 5%, 90% 17%, 97% 32%, 92% 46%, 99% 62%, 89% 77%, 76% 90%, 61% 91%, 50% 99%, 37% 91%, 22% 95%, 10% 83%, 2% 66%, 8% 49%, 2% 31%, 12% 17%, 27% 10%, 37% 12%);
}

/* Page hero (inner pages) */
.page-hero {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
  border-bottom: var(--border-thick);
  padding: 80px 2rem 100px;
  text-align: center; position: relative; overflow: hidden;
}
.page-hero-title {
  font-family: var(--font-head);
  font-size: clamp(3.5rem, 9vw, 7rem);
  color: var(--yellow); -webkit-text-stroke: 2px var(--black);
  text-shadow: 6px 6px 0 var(--black);
  line-height: 1; position: relative; z-index: 1;
}
.page-hero-sub {
  font-size: 1.15rem; font-weight: 800;
  margin-top: .8rem; position: relative; z-index: 1; opacity: .75;
}

/* Footer */
footer { background: var(--black); color: var(--white); padding: 70px 2rem 28px; border-top: var(--border-thick); }
.footer-inner {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem; max-width: 1180px; margin: 0 auto 3rem;
}
.footer-logo {
  height: 60px;
  width: auto;
  max-width: 100%;
  display: block;
  margin-bottom: 1.2rem;
  filter: none;
}
.footer-tagline { font-size: .9rem; font-weight: 700; opacity: .5; line-height: 1.7; max-width: 230px; }
.footer-socials { display: flex; gap: .75rem; margin-top: 1.4rem; }
.footer-social {
  width: 38px; height: 38px;
  background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.12);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 900; color: var(--white);
  transition: background .2s, transform .2s; text-transform: uppercase;
}
.footer-social:hover { background: var(--yellow); color: var(--black); transform: scale(1.15) rotate(8deg); border-color: var(--yellow); }
.footer-col h4 { font-family: var(--font-head); font-size: 1rem; color: var(--yellow); margin-bottom: 1rem; }
.footer-col a, .footer-col p { display: block; font-size: .88rem; font-weight: 700; opacity: .45; margin-bottom: .5rem; transition: opacity .2s, transform .2s; }
.footer-col a:hover { opacity: 1; transform: translateX(4px); }
.footer-bottom {
  max-width: 1180px; margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
  font-size: .82rem; font-weight: 700; opacity: .3;
}

/* Floating Foods */
.floating-foods {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.floating-food {
  position: absolute;
  width: 80px;
  height: 80px;
  will-change: transform;
  animation: foodFloat 6s ease-in-out infinite;
}

.floating-food svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(3px 4px 0 rgba(0,0,0,.18));
}

@keyframes foodFloat {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(-20px) rotate(3deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.ff-strawberry { animation-delay: 0s;   top: 12%; left: 4%; }
.ff-mango      { animation-delay: 1s;   top: 8%;  right: 5%; width: 90px; height: 90px; }
.ff-banana     { animation-delay: 2s;   bottom: 18%; left: 3%; width: 72px; height: 72px; }
.ff-pineapple  { animation-delay: 0.5s; bottom: 22%; right: 4%; width: 68px; height: 68px; }
.ff-blueberry  { animation-delay: 1.5s; top: 42%; left: 2%; width: 64px; height: 64px; }
.ff-smoothie   { animation-delay: 2.5s; top: 30%; right: 3%; width: 76px; height: 76px; }

/* Responsive */
@media (max-width: 1100px) {
  #navbar.blend-shelf-header {
    width: calc(100% - 22px);
  }
  .shelf-platform {
    padding-right: 126px;
  }
  .ingredient-tile {
    min-width: 92px;
  }
  .app-cta {
    min-width: 114px;
    padding-inline: .82rem;
  }
}

@media (max-width: 960px) {
  :root {
    --floating-header-current: var(--floating-header-height-mobile);
    --floating-header-sticky-current: var(--floating-header-sticky-offset-mobile);
    --landing-hero-gap: var(--landing-hero-gap-mobile);
  }
  #navbar.blend-shelf-header {
    top: 10px;
    width: calc(100% - 16px);
  }
  .shelf-platform {
    min-height: 76px;
    border-radius: 32px;
    padding: 8px 62px 8px 12px;
  }
  .shelf-links,
  .app-cta,
  .locations-panel {
    display: none;
  }
  .shelf-logo {
    transform: rotate(-2deg);
  }
  .shelf-logo .nav-logo {
    height: 48px;
  }
  .hamburger { display: flex; }
  .mobile-menu {
    top: calc(var(--floating-header-height-mobile) - 8px);
  }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  #navbar.blend-shelf-header {
    width: calc(100% - 12px);
    top: 8px;
  }
  .shelf-platform {
    min-height: 72px;
    border-radius: 28px;
    padding: 8px 58px 8px 10px;
  }
  .shelf-logo .nav-logo {
    height: 42px;
  }
  .mobile-menu a {
    font-size: 1.2rem;
    padding: 11px 18px;
  }
  .section-title::after {
    height: 8px;
    bottom: -5px;
  }
  .section { padding: 60px 1.2rem; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}