/* ============================================
   HOME PAGE v3
   ============================================ */

/* ---- HERO ---- */
.hero {
  min-height: 100vh;
  background: linear-gradient(135deg, #5BBFEA 0%, #2E9FCC 100%);
  border-bottom: var(--border-thick);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: calc(var(--floating-header-current) + var(--landing-hero-gap)) 2.5rem 122px;
}

.hero::before {
  content: '';
  position: absolute;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%);
  top: -220px;
  right: -180px;
  border-radius: 50%;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255,217,61,0.10), transparent 70%);
  bottom: -100px;
  left: -100px;
  border-radius: 50%;
  pointer-events: none;
}

.hero-noise {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  opacity: 0.46;
}

.hero-sticker-cloud {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-sticker {
  position: absolute;
  animation: bobFloat 4s ease-in-out infinite;
}
.hero-sticker svg { display: block; }

/* strawberry — upper left */
.hero-sticker-a {
  top: 80px;
  left: 3%;
  animation-delay: -0.8s;
}
.hero-sticker-a svg { width: 68px; height: 68px; filter: drop-shadow(4px 5px 0 rgba(0,0,0,.18)); }

/* lemon — upper right far */
.hero-sticker-b {
  top: 60px;
  right: 3%;
  animation-delay: -1.4s;
}
.hero-sticker-b svg { width: 80px; height: 80px; filter: drop-shadow(4px 5px 0 rgba(0,0,0,.18)); }

/* blueberries — lower left */
.hero-sticker-c {
  left: 2%;
  bottom: 100px;
  animation-delay: -0.3s;
}
.hero-sticker-c svg { width: 62px; height: 62px; filter: drop-shadow(4px 5px 0 rgba(0,0,0,.18)); }

/* star badge — mid top center */
.hero-sticker-d {
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: -2.1s;
}
.hero-sticker-d svg { width: 54px; height: 54px; filter: drop-shadow(3px 4px 0 rgba(0,0,0,.18)); }

/* leaf — bottom right of copy area */
.hero-sticker-e {
  bottom: 80px;
  right: 3%;
  animation-delay: -1.8s;
}
.hero-sticker-e svg { width: 58px; height: 58px; filter: drop-shadow(4px 5px 0 rgba(0,0,0,.18)); }

.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2.2rem;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}

.hero-inner--text-only {
  grid-template-columns: 1fr;
}

.hero-copy {
  max-width: 560px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.42);
  border: 3px solid rgba(17, 17, 17, 0.2);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  margin-bottom: 1.2rem;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--black);
  backdrop-filter: blur(2px);
}

.eyebrow-dot {
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  display: inline-block;
  animation: pulseSoft 1.5s ease-in-out infinite;
}

.hero-title {
  font-family: var(--font-head);
  font-size: clamp(3.6rem, 8.5vw, 7.2rem);
  line-height: 0.95;
  color: var(--white);
  -webkit-text-stroke: 2px var(--black);
  text-shadow: 6px 6px 0 rgba(0, 0, 0, 0.22);
  margin-bottom: 0.45rem;
}

.hero-title-accent {
  color: var(--yellow);
  display: block;
  font-size: clamp(4.4rem, 10.4vw, 8.6rem);
  -webkit-text-stroke: 3px var(--black);
  text-shadow: 8px 8px 0 rgba(0, 0, 0, 0.24);
}

.hero-tagline {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--white);
  opacity: 0.95;
  line-height: 1.52;
  margin-bottom: 2.2rem;
  max-width: 470px;
}

.hero-actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  align-items: center;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 0.88rem;
  color: rgba(17, 17, 17, 0.82);
  background: rgba(255,255,255,0.52);
  border: 2px solid rgba(17,17,17,0.15);
  border-radius: 999px;
  padding: 5px 14px;
  backdrop-filter: blur(4px);
}

.hero-pill-dot {
  width: 7px;
  height: 7px;
  background: var(--black);
  border-radius: 50%;
}

.hero-mini-grid {
  margin-top: 1.45rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  max-width: 560px;
}

.hero-mini-card {
  background: rgba(255, 255, 255, 0.82);
  border: 3px solid var(--black);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--black);
  padding: 0.75rem 0.85rem;
  display: grid;
  gap: 0.2rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hero-mini-card strong {
  font-family: var(--font-head);
  font-size: 0.8rem;
  line-height: 1.2;
}

.hero-mini-card span {
  font-size: 0.74rem;
  font-weight: 800;
  opacity: 0.75;
  line-height: 1.2;
}

.hero-mini-card:hover {
  transform: translateY(-3px) rotate(-0.7deg);
  box-shadow: 7px 7px 0 var(--black);
  background: #fff6cd;
}

/* Hero cup */
.hero-illustration {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hero-cup-wrap {
  position: relative;
  width: 344px;
  height: 432px;
}

.hero-cup-svg {
  width: 100%;
  height: 100%;
  animation: bobFloat 3.5s ease-in-out infinite;
  filter: drop-shadow(10px 16px 0 rgba(0, 0, 0, 0.28));
  transform-origin: center bottom;
}

.hero-cup-svg:hover {
  animation: jiggle 0.5s ease;
}

.hero-cup-svg .cup-straw {
  transform-origin: 162px 128px;
  animation: strawWag 2.5s ease-in-out infinite;
}

.hero-cup-svg .liquid {
  animation: liquidShift 3s ease-in-out infinite;
}

/* ---- HERO JUICE BOX STRAW ANIMATION ---- */

/* 1. Hole on top of box: pops open first */
.hero-straw-hole {
  transform-origin: 166px 105px;
  transform: scale(0);
  animation: heroHoleOpen 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards;
}

@keyframes heroHoleOpen {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

/* 2. Straight tube rises up out of the hole */
.hero-straw-rise {
  transform: translateY(110px);
  animation: heroStrawRise 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s forwards;
}

@keyframes heroStrawRise {
  0%   { transform: translateY(110px); }
  70%  { transform: translateY(-6px); }
  85%  { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

/* 3. Bent top arm swings out ~50deg after straw has risen */
.hero-straw-bend-arm {
  transform-origin: 166px 6px;
  transform: rotate(0deg);
  opacity: 0;
  animation: heroStrawBend 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.85s forwards;
}

@keyframes heroStrawBend {
  0%   { opacity: 0; transform: rotate(0deg); }
  15%  { opacity: 1; }
  100% { opacity: 1; transform: rotate(-52deg); }
}

/* 4. After intro done: whole straw group does a gentle idle wag */
.hero-straw-group {
  transform-origin: 166px 105px;
  animation: heroStrawWag 3s ease-in-out 2.6s infinite;
}

@keyframes heroStrawWag {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  30%       { transform: rotate(4deg) translateX(1px); }
  70%       { transform: rotate(-2.5deg) translateX(-1px); }
}

.orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.orbit-item {
  position: absolute;
  width: 48px;
  height: 48px;
  animation: orbitSpin var(--orbit-dur, 7s) linear infinite;
  animation-delay: var(--orbit-delay, 0s);
}

@keyframes orbitSpin {
  from {
    transform: rotate(0deg) translateX(var(--orbit-r, 150px)) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(var(--orbit-r, 150px)) rotate(-360deg);
  }
}

.hero-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 0;
}

/* ---- STRAW ANIMATION ---- */
.hero-title-row {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
}

.straw-scene {
  flex-shrink: 0;
  align-self: center;
  margin-top: 0.4rem;
}

.straw-svg {
  width: 68px;
  height: 136px;
  overflow: visible;
  filter: drop-shadow(4px 6px 0 rgba(0,0,0,.22));
}

/* wrapper slides off up */
.straw-wrapper {
  transform-origin: 41px 52px;
  animation: wrapperSlide 0.5s cubic-bezier(.4,0,.2,1) 1.2s forwards;
}
@keyframes wrapperSlide {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-62px); opacity: 0; }
}

/* straw drops down into box */
.straw-stick {
  transform-origin: 42px 82px;
  animation: strawDrop 0.55s cubic-bezier(.4,0,.2,1) 1.8s forwards;
  transform: translateY(-68px);
}
@keyframes strawDrop {
  0%   { transform: translateY(-68px); }
  70%  { transform: translateY(4px); }
  85%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* bend appears after straw is inserted */
.straw-bend {
  transform-origin: 42px 34px;
  opacity: 0;
  transform: rotate(0deg);
  animation: strawBend 0.4s cubic-bezier(.34,1.56,.64,1) 2.45s forwards;
}
@keyframes strawBend {
  0%   { opacity: 0; transform: rotate(0deg); }
  30%  { opacity: 1; }
  100% { opacity: 1; transform: rotate(-78deg); }
}

/* idle float after animation completes */
.straw-scene {
  animation: strawIdle 3s ease-in-out 3s infinite;
}
@keyframes strawIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-6px) rotate(1deg); }
}

/* Colored marquee items */
.marquee-strip { padding: 18px 0; }
.marquee-item { font-size: 1.1rem; padding: 0 2.8rem; }
.m-dot { width: 8px; height: 8px; }
.m-pink  { color: #ff9dbe; }
.m-green { color: #7edba4; }
.m-blue  { color: #7dd6f5; }
.m-orange{ color: #ffb07a; }
.m-pink  .m-dot { background: #ff6b9d; }
.m-green .m-dot { background: #58C27D; }
.m-blue  .m-dot { background: var(--blue); }
.m-orange .m-dot { background: #FF8C42; }

/* ---- LINEUP ---- */
.lineup-section {
  background:
    repeating-linear-gradient(135deg, rgba(17,17,17,0.02) 0 16px, transparent 16px 34px),
    var(--cream);
  position: relative;
  overflow: hidden;
}

.lineup-section .container {
  position: relative;
}

.lineup-doodles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.lineup-doodle {
  position: absolute;
  animation: bobFloat 4.5s ease-in-out infinite;
}
.lineup-doodle svg { display: block; }

.lineup-doodle-a {
  top: 10px;
  left: -20px;
}
.lineup-doodle-a svg { width: 52px; height: 52px; filter: drop-shadow(3px 4px 0 rgba(0,0,0,.15)); }

.lineup-doodle-b {
  top: 40px;
  right: 30px;
  animation-delay: -0.9s;
}
.lineup-doodle-b svg { width: 48px; height: 48px; filter: drop-shadow(3px 4px 0 rgba(0,0,0,.15)); }

.lineup-doodle-c {
  top: 360px;
  left: -24px;
  animation-delay: -1.4s;
}
.lineup-doodle-c svg { width: 60px; height: 60px; filter: drop-shadow(3px 4px 0 rgba(0,0,0,.15)); }

.lineup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.7rem;
  position: relative;
  z-index: 2;
}

.lineup-card {
  border: 2px solid #111;
  border-radius: 28px;
  padding: 2.2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  position: relative;
  overflow: hidden;
  cursor: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 8px 0 #111;
  text-decoration: none;
  color: var(--black);
}

.lineup-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.3), transparent 48%);
  opacity: 0.6;
}

.lineup-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 0 #111;
}
.lineup-card:nth-child(odd):hover  { transform: translateY(-6px); }
.lineup-card:nth-child(even):hover { transform: translateY(-6px); }

.lineup-icon {
  display: none;
}

.lineup-icon svg {
  width: 42px;
  height: 42px;
}

.lineup-card h3 {
  font-family: var(--font-head);
  font-size: 1.68rem;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.lineup-card p {
  font-weight: 800;
  font-size: 0.92rem;
  opacity: 0.8;
  line-height: 1.48;
  position: relative;
  z-index: 1;
}

.lineup-arrow {
  width: 36px;
  height: 36px;
  background: var(--black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  align-self: flex-start;
  transition: transform 0.2s ease;
  position: relative;
  z-index: 1;
}

.lineup-card:hover .lineup-arrow {
  transform: translateX(6px);
}

.lineup-arrow svg {
  width: 16px;
  height: 16px;
}

.lineup-side-cartoons {
  position: absolute;
  right: -8px;
  bottom: -74px;
  z-index: 1;
}

.lineup-toon {
  position: absolute;
}

.lineup-toon-a {
  right: 0;
  bottom: 0;
}

.lineup-toon-b {
  right: 76px;
  bottom: 56px;
}

/* ---- BLEND BUILDER ---- */
.blend-builder-section {
  background: var(--bg-cream);
  border-top: var(--border-thick);
  border-bottom: var(--border-thick);
  position: relative;
  overflow: hidden;
}

.blend-builder-head { margin-bottom: 2.2rem; }

.blend-builder-layout {
  display: grid;
  grid-template-columns: 1fr 252px 1fr;
  gap: 1.4rem;
  align-items: start;
}

/* ingredient shelf */
.ingredient-shelf {
  background: var(--white);
  border: var(--border-thick);
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding: 1.4rem 1.2rem;
}

.shelf-label {
  font-family: var(--font-head);
  font-size: 0.82rem;
  letter-spacing: 1px;
  opacity: 0.5;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.ingredient-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}

.ingredient-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.38rem;
  padding: 0.8rem 0.5rem;
  border: var(--border);
  border-radius: 16px;
  background: var(--cream);
  cursor: none;
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s, background 0.2s;
  box-shadow: 3px 3px 0 rgba(17,17,17,.18);
  user-select: none;
}
.ingredient-chip:hover {
  transform: translateY(-4px) rotate(-2deg);
  box-shadow: 5px 5px 0 rgba(17,17,17,.22);
  background: #fffbe8;
}
.ingredient-chip:active { cursor: none; transform: scale(0.93); }
.ingredient-chip.used {
  opacity: 0.4;
  pointer-events: none;
}
.ingredient-chip svg { width: 40px; height: 40px; display: block; }
.ingredient-chip span {
  font-family: var(--font-head);
  font-size: 0.72rem;
  line-height: 1;
}

/* blender station */
.blender-station {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  position: relative;
}

.blender-drop-zone {
  position: relative;
  width: 232px;
}

.blend-svg {
  width: 232px;
  height: auto;
  overflow: visible;
  filter: drop-shadow(6px 10px 0 rgba(0,0,0,.22));
  display: block;
}

.blend-lid {
  transform-origin: 100px 52px;
}
.blend-lid.bouncing {
  animation: blendLidBounce .28s ease-in-out infinite alternate;
}
@keyframes blendLidBounce {
  from { transform: translateY(0) rotate(-2deg); }
  to   { transform: translateY(-10px) rotate(2deg); }
}

.blend-drop-hint {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -60%);
  font-family: var(--font-head);
  font-size: 0.8rem;
  color: rgba(17,17,17,.4);
  text-align: center;
  pointer-events: none;
  transition: opacity 0.3s;
  line-height: 1.4;
}
.blend-drop-hint.hidden { opacity: 0; }

.blend-inside-chips {
  position: absolute;
  bottom: 130px; left: 50%; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; gap: 4px;
  justify-content: center;
  max-width: 160px;
  pointer-events: none;
}

.blend-chip-dot {
  width: 30px; height: 30px;
  border: 2px solid #111;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.3px;
  animation: chipPop .3s cubic-bezier(.34,1.56,.64,1) forwards;
  background: #fff;
  box-shadow: 2px 2px 0 rgba(0,0,0,.15);
}
@keyframes chipPop {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

.blend-go-btn {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-size: 1.1rem;
  padding: 12px 28px;
  background: var(--yellow);
  border: var(--border-thick);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s, background .2s;
  white-space: nowrap;
}
.blend-go-btn:disabled {
  opacity: 0.38;
  cursor: none;
  transform: none !important;
  box-shadow: var(--shadow) !important;
}
.blend-go-btn:not(:disabled):hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: var(--shadow-lg);
  background: #ffe55a;
}

/* blending state */
.blender-station.is-blending .blend-svg {
  animation: blendShake .18s ease-in-out infinite alternate;
}
.blender-station.is-blending #blendLiquid {
  filter: saturate(1.18) brightness(1.06);
}
.blender-station.is-blending .blend-inside-chips {
  animation: chipsTumble .22s linear infinite;
}
@keyframes blendShake {
  from { transform: translateX(-4px) rotate(-.8deg); }
  to   { transform: translateX(4px) rotate(.8deg); }
}
@keyframes chipsTumble {
  from { transform: translateX(-50%) translateY(-2px) rotate(-2deg); }
  to   { transform: translateX(-50%) translateY(2px) rotate(2deg); }
}

/* result panel */
.blend-result-panel {
  background: var(--white);
  border: var(--border-thick);
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding: 1.8rem 1.4rem;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.blend-result-empty {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.blend-result-empty p {
  font-family: var(--font-head);
  font-size: 0.9rem;
  opacity: 0.45;
  max-width: 180px;
  line-height: 1.5;
}

.blend-result-cup {
  width: 112px;
  height: 128px;
  margin-bottom: 0.4rem;
  animation: cupBob 2s ease-in-out infinite;
}
.blend-result-cup svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes cupBob {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-10px) rotate(3deg); }
}

.blend-result-name {
  font-family: var(--font-head);
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
}

.blend-result-desc {
  font-size: 0.9rem;
  font-weight: 800;
  opacity: 0.65;
  line-height: 1.5;
  margin-bottom: 0.9rem;
}

.blend-result-tags {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.blend-result-tags span {
  font-family: var(--font-head);
  font-size: 0.72rem;
  padding: 4px 12px;
  border: 2px solid #111;
  border-radius: var(--radius-pill);
  background: var(--cream);
}

.blend-reset-btn {
  font-family: var(--font-head); font-size: 0.88rem;
  padding: 9px 22px;
  border: var(--border);
  border-radius: var(--radius-pill);
  background: #e5f5ff;
  box-shadow: 3px 3px 0 rgba(17,17,17,.2);
  transition: transform .2s, background .2s;
}
.blend-reset-btn:hover { transform: translateY(-2px); background: #d0ecff; }

/* drag-over highlight */
.blender-drop-zone.drag-over .blend-svg {
  filter: drop-shadow(6px 10px 0 rgba(0,0,0,.22)) brightness(1.07);
}

@media (max-width: 960px) {
  .blend-builder-layout {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
  .blender-station { order: -1; }
}

@media (max-width: 600px) {
  .ingredient-grid { grid-template-columns: repeat(4, 1fr); }
  .ingredient-chip span { display: none; }
}

/* ---- PILLARS ---- */
.pillars-section {
  background: var(--black);
  position: relative;
  overflow: hidden;
}

.pillars-section::before {
  display: none;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.35rem;
  margin-top: 2.7rem;
  position: relative;
  z-index: 1;
}

.pillar-card {
  border-radius: 32px;
  padding: 2.1rem 1.8rem;
  transition: background 0.3s, transform 0.3s, border-color 0.3s;
}
.pillar-card:nth-child(1) {
  background: rgba(255, 217, 61, 0.14);
  border: 2.5px solid rgba(255, 217, 61, 0.5);
}
.pillar-card:nth-child(2) {
  background: rgba(88, 194, 125, 0.12);
  border: 2.5px solid rgba(88, 194, 125, 0.45);
}
.pillar-card:nth-child(3) {
  background: rgba(91, 191, 234, 0.13);
  border: 2.5px solid rgba(91, 191, 234, 0.45);
}
.pillar-card:hover {
  transform: translateY(-6px);
}
.pillar-card:nth-child(1):hover { background: rgba(255, 217, 61, 0.22); }
.pillar-card:nth-child(2):hover { background: rgba(88, 194, 125, 0.2); }
.pillar-card:nth-child(3):hover { background: rgba(91, 191, 234, 0.2); }

.pillar-icon {
  margin-bottom: 1.2rem;
}

.pillar-icon svg {
  width: 50px;
  height: 50px;
}

.pillar-card h3 {
  font-family: var(--font-head);
  font-size: 1.45rem;
  color: var(--yellow);
  margin-bottom: 0.55rem;
}

.pillar-card p {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--white);
  opacity: 0.64;
  line-height: 1.62;
}

/* ---- FIND US ---- */
.findus-section {
  background: var(--brand-blue-soft);
  border-top: var(--border-thick);
  position: relative;
  overflow: hidden;
}

.findus-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3rem;
  position: relative;
  z-index: 2;
}

.findus-title {
  font-family: var(--font-head);
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.08;
}

.findus-sub {
  font-weight: 800;
  font-size: 1.02rem;
  opacity: 0.74;
  margin-top: 0.6rem;
}

.locations-mini {
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
  min-width: 260px;
}

.loc-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--white);
  border: var(--border-thick);
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.15rem;
  box-shadow: var(--shadow);
  font-weight: 800;
  transition: transform 0.2s;
}

.loc-pill:hover {
  transform: translateX(6px);
}

.loc-pip {
  width: 10px;
  height: 10px;
  background: var(--green);
  border: 2px solid var(--black);
  border-radius: 50%;
  flex-shrink: 0;
}

.loc-pill span {
  font-family: var(--font-head);
  font-size: 0.94rem;
}

.loc-pill small {
  margin-left: auto;
  font-size: 0.76rem;
  font-weight: 700;
  opacity: 0.62;
}

.findus-splash {
  position: absolute;
  left: 4%;
  bottom: -86px;
  z-index: 1;
}

.single-real-shot {
  width: clamp(220px, 24vw, 332px);
  animation: bobFloat 6.5s ease-in-out infinite;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .hero { padding-inline: 2rem; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy { max-width: 100%; }
  .hero-mini-grid { max-width: 700px; }
  .hero-illustration { margin-top: 0.5rem; }
  .hero-sticker-a { left: 4%; top: 100px; }
  .hero-sticker-b { right: 4%; top: 80px; }
  .hero-sticker-c { left: 3%; bottom: 80px; }
  .hero-sticker-d { top: 20px; }
  .hero-sticker-e { right: 4%; bottom: 60px; }
  .lineup-grid { grid-template-columns: repeat(2, 1fr); }
  .lineup-side-cartoons { right: -28px; bottom: -66px; }
  .pillars-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 800px) {
  .hero { min-height: auto; padding: calc(var(--floating-header-current) + var(--landing-hero-gap)) 1.2rem 94px; }
  .hero-illustration { display: none; }
  .hero-title { font-size: clamp(3rem, 12vw, 5rem); }
  .hero-title-accent { font-size: clamp(3.4rem, 14vw, 6rem); }
  .hero-title-row { gap: 0.7rem; }
  .straw-svg { width: 52px; height: 104px; }
  .hero-mini-grid { grid-template-columns: 1fr; gap: 0.52rem; margin-top: 1.25rem; }
  .hero-mini-card { padding: 0.72rem 0.8rem; }
  .hero-sticker-cloud { display: none; }
  .lineup-grid { gap: 0.95rem; }
  .findus-inner { grid-template-columns: 1fr; gap: 1.7rem; }
  .findus-splash { position: relative; left: auto; bottom: auto; margin: 1.2rem auto 0; display: flex; justify-content: center; }
}

@media (max-width: 600px) {
  .lineup-grid { grid-template-columns: 1fr; }
  .lineup-side-cartoons, .lineup-doodle-c { display: none; }
  .hero-title-row { flex-direction: column; gap: 0.5rem; }
  .straw-scene { align-self: flex-start; margin-left: 0.5rem; }
  .pillars-grid { grid-template-columns: 1fr; }
}

/* ============================================
   HERO PRODUCT ORBIT SYSTEM
   ============================================ */

.hero-container {
  width: 90%;
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
  position: relative;
  z-index: 2;
}

.hero-left {
  max-width: 560px;
}

.hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-logo-stage {
  width: min(440px, 36vw);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

.hero-logo-stage img {
  width: clamp(240px, 25vw, 360px);
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.24));
}

.hero-fruit-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.fs-fruit {
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  width: var(--size, clamp(110px, 11.5vw, 180px));
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  z-index: 2;
  pointer-events: none;
  animation: heroFruitFloat var(--dur, 7.2s) ease-in-out var(--d, 0s) infinite;
}

/*
  FRUIT BACKGROUND SYSTEM — v4
  ─────────────────────────────
  28 fruits, all identical opacity/size/shadow.
  Randomised image order (no two same fruits directly adjacent).
  Positions form a loose 7-across × 4-deep quasi-grid with
  per-fruit offsets so it reads as scattered, not as rows.
*/

/* all fruits share the same look */
.fs-fruit {
  width: clamp(100px, 10.5vw, 164px);
  opacity: 0.55;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.14));
}

/* ── band 1  (y ≈ 7–16%) ── */
.f1  { --x:  4%; --y: 14%; --r: -22deg; --d: -1.2s; --dur: 6.1s; }
.f2  { --x: 19%; --y:  9%; --r:  12deg; --d: -0.3s; --dur: 7.8s; }
.f3  { --x: 34%; --y: 13%; --r:  -8deg; --d: -2.6s; --dur: 5.4s; }
.f4  { --x: 50%; --y:  7%; --r:  20deg; --d: -1.8s; --dur: 8.2s; }
.f5  { --x: 65%; --y: 14%; --r: -14deg; --d: -3.4s; --dur: 6.7s; }
.f6  { --x: 80%; --y:  9%; --r:  10deg; --d: -0.7s; --dur: 9.0s; }
.f7  { --x: 95%; --y: 13%; --r: -17deg; --d: -2.0s; --dur: 7.3s; }

/* ── band 2  (y ≈ 29–37%) ── */
.f8  { --x:  7%; --y: 30%; --r:  16deg; --d: -2.1s; --dur: 7.2s; }
.f9  { --x: 23%; --y: 36%; --r: -20deg; --d: -3.8s; --dur: 5.9s; }
.f10 { --x: 38%; --y: 29%; --r:   9deg; --d: -1.0s; --dur: 8.5s; }
.f11 { --x: 53%; --y: 35%; --r: -16deg; --d: -2.9s; --dur: 6.3s; }
.f12 { --x: 67%; --y: 29%; --r:  24deg; --d: -0.5s; --dur: 7.6s; }
.f13 { --x: 82%; --y: 36%; --r: -11deg; --d: -4.1s; --dur: 5.1s; }
.f14 { --x: 96%; --y: 30%; --r:  14deg; --d: -1.5s; --dur: 8.7s; }

/* ── band 3  (y ≈ 51–59%) ── */
.f15 { --x:  5%; --y: 52%; --r: -18deg; --d: -1.6s; --dur: 8.8s; }
.f16 { --x: 20%; --y: 58%; --r:  13deg; --d: -3.2s; --dur: 6.5s; }
.f17 { --x: 36%; --y: 52%; --r:  -6deg; --d: -0.9s; --dur: 9.3s; }
.f18 { --x: 51%; --y: 58%; --r:  22deg; --d: -2.5s; --dur: 7.0s; }
.f19 { --x: 66%; --y: 52%; --r: -18deg; --d: -3.7s; --dur: 5.7s; }
.f20 { --x: 80%; --y: 58%; --r:   7deg; --d: -1.4s; --dur: 8.1s; }
.f21 { --x: 96%; --y: 53%; --r: -22deg; --d: -2.8s; --dur: 6.9s; }

/* ── band 4  (y ≈ 76–85%) ── */
.f22 { --x:  8%; --y: 76%; --r:  16deg; --d: -0.2s; --dur: 7.4s; }
.f23 { --x: 22%; --y: 83%; --r: -26deg; --d: -3.5s; --dur: 5.5s; }
.f24 { --x: 37%; --y: 77%; --r:  11deg; --d: -1.9s; --dur: 8.9s; }
.f25 { --x: 52%; --y: 84%; --r:  -7deg; --d: -4.0s; --dur: 6.2s; }
.f26 { --x: 67%; --y: 78%; --r:  21deg; --d: -1.1s; --dur: 7.9s; }
.f27 { --x: 81%; --y: 84%; --r: -15deg; --d: -2.4s; --dur: 5.8s; }
.f28 { --x: 94%; --y: 77%; --r:   8deg; --d: -0.6s; --dur: 8.4s; }

@keyframes heroFruitFloat {
  0%   { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) translateY(0px); }
  50%  { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) translateY(-6px); }
  100% { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) translateY(0px); }
}

.blend-builder-section.is-archived {
  display: none !important;
}

.product-orbit {
  position: relative;
  width: 420px;
  height: 420px;
}

.product-orbit::before {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.main-smoothie {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 210px;
  transform: translate(-50%, -50%);
  z-index: 2;
  animation: floatSmoothie 5s ease-in-out infinite;
  /* Two layers: natural drop shadow + pink ambient glow matching the liquid */
  filter: drop-shadow(6px 14px 10px rgba(0,0,0,0.26)) drop-shadow(0 0 44px rgba(255,75,155,0.15));
}

@keyframes floatSmoothie {
  /* Base tilt: -2deg gives cup organic personality vs. mathematical symmetry */
  0%   { transform: translate(-50%, -50%) translateY(0)     rotate(-2deg); }
  25%  { transform: translate(-50%, -50%) translateY(-9px)  rotate(-1.4deg); }
  50%  { transform: translate(-50%, -50%) translateY(-16px) rotate(-2deg); }
  75%  { transform: translate(-50%, -50%) translateY(-9px)  rotate(-2.6deg); }
  100% { transform: translate(-50%, -50%) translateY(0)     rotate(-2deg); }
}

.ingredient {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 66px;
  height: 66px;
  margin: -33px 0 0 -33px;
  animation: orbit 14s linear infinite;
  z-index: 3;
  /* Soft blurred shadow (not hard pixel) — consistent with top-left light */
  filter: drop-shadow(3px 7px 7px rgba(0,0,0,0.28));
}

/* Individual fruit tilts — personality + lighting consistency */
.orb-strawberry svg { transform: rotate(-6deg); }
.orb-mango svg      { transform: rotate(7deg); }
.orb-banana svg     { transform: rotate(-4deg); }
.orb-blueberry svg  { transform: rotate(5deg); }

/* Depth layering: banana orbits behind smoothie (z-index 1 < cup z-index 2) */
.orb-banana { z-index: 1; }

/* Blueberry cluster slightly larger = appears closer to the viewer */
.orb-blueberry { width: 78px; height: 78px; margin: -39px 0 0 -39px; }

.ingredient svg {
  width: 100%;
  height: 100%;
}

@keyframes orbit {
  from { transform: rotate(0deg) translateX(155px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(155px) rotate(-360deg); }
}

.orb-strawberry { animation-delay: 0s; }
.orb-mango      { animation-delay: -3.5s; }
.orb-banana     { animation-delay: -7s; }
.orb-blueberry  { animation-delay: -10.5s; }

/* ---- POPULAR BLENDS BAR ---- */
.popular-blends {
  background: var(--white);
  border-bottom: var(--border-thick);
  padding: 1rem 2.5rem;
}

.popular-blends-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.popular-label {
  font-family: var(--font-head);
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.5;
  white-space: nowrap;
  flex-shrink: 0;
}

.popular-row {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  flex: 1;
}

.blend-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-size: 0.92rem;
  background: var(--bg-cream);
  border: 2px solid #111;
  border-radius: var(--radius-pill);
  padding: 6px 18px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--black);
  box-shadow: 2px 2px 0 #111;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blend-pill:hover {
  transform: translateY(-2px);
  box-shadow: 2px 4px 0 #111;
}

.blend-pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.blend-pip--pink   { background: #FF6B9D; }
.blend-pip--purple { background: #9B72CF; }
.blend-pip--yellow { background: #FFD93D; border: 1px solid rgba(0,0,0,0.15); }
.blend-pip--green  { background: #58C27D; }

/* ---- ORBIT RESPONSIVE ---- */
@media (max-width: 960px) {
  .hero-container { grid-template-columns: 1fr; }
  .hero-right { display: none; }
  .hero-left { max-width: 100%; }
  /* Tablet: thin each band to every other fruit (keeps 16 of 28) */
  .f2, .f4, .f6,
  .f9, .f11, .f13,
  .f16, .f18, .f20,
  .f23, .f25, .f27 { display: none; }
}

@media (max-width: 600px) {
  .popular-blends { padding: 0.85rem 1.2rem; }
  .popular-label { display: none; }
  /* Mobile: keep only the 8 edge anchors (first + last of each band) */
  .f2, .f3, .f4, .f5, .f6,
  .f9, .f10, .f11, .f12, .f13,
  .f16, .f17, .f18, .f19, .f20,
  .f23, .f24, .f25, .f26, .f27 { display: none; }
}