/* =============================================================================
   Chrome — holographic / liquid-metal Y2K. Chromed type, iridescent foil, glossy
   graphite, star & butterfly motifs. Futuristic, glossy, a little edgy-cute.
   Aesthetic EXPLORATION palette (metal/holo can't be tokens) — maps to the
   system if it wins.
   ========================================================================== */

body {
  font-family: var(--font-ui);
  color: #e9ecf7;
  background:
    radial-gradient(60% 40% at 80% 6%, #2a2350, transparent 62%),
    radial-gradient(54% 40% at 12% 16%, #143247, transparent 64%),
    radial-gradient(70% 50% at 50% 108%, #3a1840, transparent 60%),
    #0c0c12;
  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));
}

.stars { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.stars i {
  position: absolute; color: #fff; opacity: 0.8; font-size: 0.9rem;
  filter: drop-shadow(0 0 6px #9fd4ff);
  animation: tw 3s ease-in-out infinite;
}
@keyframes tw { 0%,100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.15); } }

.topchips { display: flex; justify-content: space-between; padding-block: var(--space-3); position: relative; z-index: 2; }
.chip {
  display: inline-grid; place-items: center; inline-size: var(--control-md); block-size: var(--control-md);
  border-radius: var(--radius-pill); color: #dfe6ff;
  background: linear-gradient(160deg, #23253a, #14151f);
  border: 1px solid #3a3f5e;
  box-shadow: inset 0 1px 0 #5a6088, 0 6px 14px -6px #000;
}
.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: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

/* liquid chrome blob with holographic tint */
.hero { text-align: center; position: relative; z-index: 2; padding-block: var(--space-5) var(--space-2); }
.chromeBlob {
  position: relative; inline-size: 15rem; aspect-ratio: 1; margin-inline: auto;
  border-radius: 44% 56% 54% 46% / 56% 44% 56% 44%;
  background:
    radial-gradient(40% 30% at 34% 24%, #ffffff, transparent 46%),
    conic-gradient(from 200deg at 50% 45%, #cfe0ff, #b9a7ff 18%, #ffd9f0 34%, #d7fbff 52%, #b7c4e6 70%, #eae0ff 86%, #cfe0ff),
    linear-gradient(160deg, #9aa6c8, #5c6488);
  box-shadow:
    inset 0 -18px 30px rgba(10, 12, 30, 0.55),
    inset 0 14px 26px rgba(255, 255, 255, 0.7),
    0 30px 60px -18px rgba(120, 90, 220, 0.5);
  filter: saturate(1.15) contrast(1.05);
  animation: sway 5s ease-in-out infinite alternate;
}
.chromeBlob::after {
  content: '🦋'; position: absolute; inset-block-start: -8%; inset-inline-end: 4%;
  font-size: 2rem; filter: drop-shadow(0 0 10px #b9a7ff);
}
@keyframes sway { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-12px) rotate(2deg); } }

.hosts { display: inline-flex; margin-block-start: calc(-1 * var(--space-5)); margin-inline-start: 8rem; }
.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: #14151f;
  background: radial-gradient(40% 35% at 34% 28%, #fff, transparent 60%), linear-gradient(150deg, #dfe6ff, #a9b6e0);
  box-shadow: inset 0 -3px 6px rgba(20,20,50,.4), 0 6px 14px -4px #000;
}
.bead + .bead { margin-inline-start: calc(-1 * var(--space-3)); }

.eyebrow {
  margin-block-start: var(--space-5); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: 0.34em; text-transform: uppercase; color: #a9b6e0;
}
.title {
  margin-block-start: var(--space-2);
  font-size: clamp(3rem, 16vw, 4.6rem); font-weight: var(--font-weight-heavy);
  line-height: 0.9; letter-spacing: -0.04em;
  background: linear-gradient(180deg, #ffffff 0%, #c3cdf0 22%, #ffffff 40%, #8f9ac4 54%, #e6dcff 72%, #c0a9e6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 1px rgba(255,255,255,.4)) drop-shadow(0 6px 18px rgba(120,90,220,.5));
}
.sub { margin-block-start: var(--space-4); font-size: var(--font-size-base); line-height: var(--line-relaxed); color: #b6bcd8; }
.sub b { color: #d9c4ff; }

/* holographic-edged glass card */
.holo {
  margin-block-start: var(--space-6); padding: 1.5px; border-radius: var(--radius-xl);
  background: conic-gradient(from 120deg, #b9a7ff, #7fe0ff, #ffd0f0, #cfe0ff, #b9a7ff);
}
.holoInner {
  border-radius: calc(var(--radius-xl) - 1.5px); padding: var(--space-4) var(--space-5);
  background: linear-gradient(160deg, #191b2c, #101019);
}
.gRow { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-3); }
.gRow + .gRow { border-block-start: 1px solid #2a2d44; }
.gGlyph {
  display: grid; place-items: center; inline-size: var(--control-md); block-size: var(--control-md);
  border-radius: var(--radius-md); flex: none; color: #14151f;
  background: linear-gradient(150deg, #dfe6ff, #b9a7ff);
  box-shadow: inset 0 2px 3px #fff, 0 6px 14px -6px #000;
}
.gBody { flex: 1; min-inline-size: 0; }
.gBody b { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: #eef1fb; }
.gBody span { font-size: var(--font-size-sm); color: #9198bb; }

.who { margin-block-start: var(--space-6); text-align: center; }
.whoLabel { font-size: var(--font-size-xs); letter-spacing: 0.24em; text-transform: uppercase; color: #9198bb; font-weight: var(--font-weight-semibold); }
.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: #eef1fb;
  background: linear-gradient(160deg, #23253a, #14151f); border: 1px solid #3a3f5e;
  box-shadow: inset 0 1px 0 #5a6088, 0 0 18px -4px var(--glow, #b9a7ff);
}

.cta {
  display: block; inline-size: 100%; margin-block-start: var(--space-7);
  padding: 1.5px; border: none; border-radius: var(--radius-pill);
  background: conic-gradient(from 120deg, #b9a7ff, #7fe0ff, #ffd0f0, #cfe0ff, #b9a7ff);
}
.ctaInner {
  border-radius: calc(var(--radius-pill)); padding-block: calc(var(--space-4) - 1.5px);
  background: linear-gradient(160deg, #1c1e30, #101019);
  font-size: var(--font-size-lg); font-weight: var(--font-weight-heavy); letter-spacing: 0.02em;
  background-clip: padding-box;
  color: transparent;
  background-image: linear-gradient(180deg, #fff, #c3cdf0 40%, #cfe0ff);
  -webkit-background-clip: text;
}
.cta { position: relative; }
.ctaLabel {
  display: block; padding-block: var(--space-4); border-radius: var(--radius-pill);
  background: linear-gradient(160deg, #1c1e30, #101019);
  font-size: var(--font-size-lg); font-weight: var(--font-weight-heavy);
  color: #eaf0ff; letter-spacing: 0.03em;
}

.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: linear-gradient(160deg, #1c1e30, #0f1017);
  border: 1px solid #34395a; box-shadow: 0 18px 44px -16px #000;
}
.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: #9198bb;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
}
.navInner button .lbl { display: none; }
.navInner button[aria-current='true'] {
  color: #14151f; background: linear-gradient(150deg, #dfe6ff, #b9a7ff);
  box-shadow: 0 0 16px -3px #b9a7ff;
}
.navInner button[aria-current='true'] .lbl { display: inline; }