/* =============================================================================
   Candy — jelly / 3D gummy. Glossy translucent shapes, puffy claymorphic cards,
   bouncy candy pastels. Cute-but-cool, tactile, delicious. Palette is an
   aesthetic EXPLORATION (candy pastels), not final tokens — if this wins we map
   it into the design system.
   ========================================================================== */

body {
  font-family: var(--font-ui);
  color: #4a2f52;
  background:
    radial-gradient(60% 40% at 82% 8%, #ffd9ec, transparent 60%),
    radial-gradient(56% 42% at 10% 20%, #d9e4ff, transparent 62%),
    radial-gradient(60% 50% at 40% 108%, #c9f6e4, transparent 60%),
    linear-gradient(165deg, #ffe6f3, #ece4ff 46%, #dbf6ec);
  overflow-x: hidden;
}

.wrap {
  position: relative;
  inline-size: min(92vw, 30rem);
  margin-inline: auto;
  padding-block: var(--space-4) calc(var(--space-10) + var(--space-9));
}

/* puffy claymorphic chip */
.topchips { display: flex; justify-content: space-between; padding-block: var(--space-3); }
.chip {
  display: inline-grid; place-items: center;
  inline-size: var(--control-md); block-size: var(--control-md);
  border-radius: var(--radius-pill); border: none; color: #7a4d84;
  background: #fff;
  box-shadow: 4px 5px 12px rgba(150, 100, 170, 0.28), -3px -3px 8px #fff, inset 0 1px 2px #fff;
}
.chipRow { display: inline-flex; gap: var(--space-2); }
.i { inline-size: var(--icon-md); block-size: var(--icon-md); stroke: currentcolor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

/* the gummy: a glossy translucent jelly blob cover */
.hero { text-align: center; padding-block: var(--space-5) var(--space-2); }
.gummy {
  position: relative;
  inline-size: 15rem; aspect-ratio: 1; margin-inline: auto;
  border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%;
  background:
    radial-gradient(50% 40% at 34% 26%, rgba(255, 255, 255, 0.95), transparent 55%),
    linear-gradient(150deg, #ff9ec9 0%, #c9a0ff 55%, #8fd8ff 100%);
  box-shadow:
    inset 0 -14px 30px rgba(150, 60, 130, 0.35),
    inset 0 12px 26px rgba(255, 255, 255, 0.75),
    0 26px 50px -14px rgba(200, 90, 160, 0.55);
  animation: bob 3.2s ease-in-out infinite;
}
.gummy::before {
  content: '';
  position: absolute;
  inset-block-start: 14%; inset-inline-start: 22%;
  inline-size: 30%; block-size: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), transparent);
  filter: blur(2px);
}
.gummy::after {
  content: '★';
  position: absolute;
  inset-block-start: -6%; inset-inline-end: 6%;
  font-size: 2rem;
  color: #ffd84d;
  filter: drop-shadow(2px 3px 0 #ffb03a);
  animation: spin 6s linear infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-12px) rotate(1.5deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

.hosts { display: inline-flex; margin-block-start: calc(-1 * var(--space-5)); margin-inline-start: 8rem; position: relative; }
.bead {
  inline-size: var(--control-md); block-size: var(--control-md); border-radius: var(--radius-pill);
  display: grid; place-items: center; font-weight: var(--font-weight-bold); font-size: var(--font-size-sm);
  color: #fff;
  background: radial-gradient(40% 35% at 34% 28%, #fff9, transparent 60%), linear-gradient(150deg, #ff8fc0, #c48cff);
  box-shadow: inset 0 -4px 8px rgba(140, 60, 130, 0.4), inset 0 3px 6px #ffffff90, 0 6px 14px -4px rgba(180, 90, 150, 0.6);
}
.bead + .bead { margin-inline-start: calc(-1 * var(--space-3)); }

.eyebrow { margin-block-start: var(--space-5); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); letter-spacing: 0.06em; color: #c059a0; }
.title {
  margin-block-start: var(--space-1);
  font-size: clamp(3rem, 16vw, 4.4rem);
  font-weight: var(--font-weight-heavy);
  line-height: 0.92; letter-spacing: -0.03em;
  color: #ff6db0;
  text-shadow: 0 3px 0 #fff, 0 6px 0 #ffd0e6, 0 10px 18px rgba(220, 90, 160, 0.35);
}
.sub { margin-block-start: var(--space-4); font-size: var(--font-size-base); line-height: var(--line-relaxed); color: #6b4a72; }
.sub b { color: #c059a0; }

/* puffy claymorphic card */
.card3d {
  margin-block-start: var(--space-6); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: 10px 12px 28px rgba(150, 100, 170, 0.28), -6px -6px 16px #ffffff, inset 0 2px 3px #fff;
}
.gRow { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-3); }
.gRow + .gRow { border-block-start: 2px dotted #f0d9ec; }
.gGlyph {
  display: grid; place-items: center; inline-size: var(--control-md); block-size: var(--control-md);
  border-radius: var(--radius-md); flex: none; color: #fff;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.18), inset 0 3px 5px #ffffff70, 0 6px 12px -4px rgba(180,110,150,.5);
}
.gGlyph--a { background: linear-gradient(150deg, #ffc36b, #ff8fb0); }
.gGlyph--b { background: linear-gradient(150deg, #7fe3c4, #7fb8ff); }
.gBody { flex: 1; min-inline-size: 0; }
.gBody b { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: #4a2f52; }
.gBody span { font-size: var(--font-size-sm); color: #8a6d90; }

.who { margin-block-start: var(--space-6); text-align: center; }
.whoLabel { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: #b06aa0; }
.bubbles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-block-start: var(--space-4); }
.bubble {
  inline-size: var(--control-lg); block-size: var(--control-lg); border-radius: var(--radius-pill);
  display: grid; place-items: center; font-weight: var(--font-weight-bold); color: #fff;
  background: radial-gradient(40% 35% at 32% 26%, #fff9, transparent 60%), linear-gradient(150deg, var(--c1), var(--c2));
  box-shadow: inset 0 -5px 10px rgba(120,50,110,.35), inset 0 4px 7px #ffffff80, 0 8px 16px -5px rgba(160,80,140,.55);
}

.cta {
  display: block; inline-size: 100%; margin-block-start: var(--space-7);
  padding-block: var(--space-4); border: none; border-radius: var(--radius-pill);
  font-size: var(--font-size-lg); font-weight: var(--font-weight-heavy); color: #fff;
  background: linear-gradient(150deg, #ff8ec2, #ff6db0 60%, #ff5aa0);
  box-shadow: inset 0 3px 5px #ffffffb0, inset 0 -5px 12px rgba(150,30,100,.4), 0 16px 30px -10px rgba(220,70,150,.6);
  transition: transform var(--dur-fast) var(--ease);
}
.cta:active { transform: scale(0.97); }

.nav { position: fixed; inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); inset-inline: 0; z-index: 5; display: flex; justify-content: center; pointer-events: none; }
.navInner {
  pointer-events: auto; display: flex; gap: var(--space-1); padding: var(--space-1);
  border-radius: var(--radius-pill); background: #fff;
  box-shadow: 8px 10px 24px rgba(150,100,170,.3), -4px -4px 12px #fff, inset 0 2px 3px #fff;
}
.navInner button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding-block: var(--space-2); padding-inline: var(--space-3); border: none;
  border-radius: var(--radius-pill); background: transparent; color: #b58ac0;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
}
.navInner button .lbl { display: none; }
.navInner button[aria-current='true'] {
  color: #fff;
  background: linear-gradient(150deg, #ff8ec2, #ff5aa0);
  box-shadow: inset 0 2px 3px #ffffff90, inset 0 -3px 7px rgba(150,30,100,.4), 0 6px 14px -4px rgba(220,70,150,.5);
}
.navInner button[aria-current='true'] .lbl { display: inline; }