/* =============================================================================
   VIVALY — LIQUID GLASS
   A single coherent surface system layered over style.css.

   The idea: every raised surface is a piece of glass sitting above an ambient,
   slowly drifting field of light. Glass gets three things — a blurred backdrop,
   a specular rim that catches light unevenly around its edge, and a soft
   contact shadow. Motion is slow, springy, and never bounces twice.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Sunset brand — yellow → orange → red → coral carries the page. Aqua is
     still a brand colour, used as an accent for contrast (links, focus rings,
     the quote pool, category identity) but never as the dominant hue. */
  --yellow:      #F7C931;
  --gold:        #F5A623;
  --orange:      #FB8232;
  --red:         #F0554B;
  --coral:       #F18FA0;
  --aqua:        #5BB4DC;

  /* Ink — warm near-black and warm greys. Cool greys were what drained the
     colour out of everything sitting on top of them. */
  --dark:        #24140E;
  --mid:         #6E5449;
  --muted:       #A08A7E;

  /* Glass */
  --lg-tint:        rgba(255,255,255,.44);
  --lg-tint-strong: rgba(255,255,255,.72);
  --lg-tint-faint:  rgba(255,255,255,.34);
  --lg-blur:        blur(28px) saturate(190%);
  --lg-blur-lite:   blur(16px) saturate(170%);

  /* Specular rim: bright at top-left, thins out, catches again bottom-right */
  --lg-rim: linear-gradient(
    142deg,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.42) 18%,
    rgba(255,255,255,.10) 42%,
    rgba(255,255,255,.14) 62%,
    rgba(255,255,255,.82) 100%
  );

  /* Depth. Warm-shifted so shadows belong to the sunset rather than greying it. */
  --lg-shadow:      0 1px 2px rgba(122,58,20,.05), 0 6px 18px rgba(122,58,20,.07), 0 22px 48px rgba(122,58,20,.10);
  --lg-shadow-lift: 0 2px 4px rgba(122,58,20,.06), 0 12px 30px rgba(122,58,20,.11), 0 36px 80px rgba(122,58,20,.16);
  --lg-inner:       inset 0 1px 1px rgba(255,255,255,.85), inset 0 -1px 1px rgba(255,255,255,.30);

  /* Motion */
  --ease-glass: cubic-bezier(.16,1,.3,1);
  --ease-out:   cubic-bezier(.22,.61,.36,1);

  /* Radii — squircle-adjacent, Apple-generous */
  --r:      26px;
  --r-sm:   16px;
  --r-lg:   34px;
  --r-pill: 999px;

  --nav-h: 76px;
  --max-w: 1160px;
}

/* -----------------------------------------------------------------------------
   2. AMBIENT FIELD
   The page sits on a slow-drifting aurora instead of a flat cream. Everything
   glassy above it picks up the colour, which is what sells the material.
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  background: #FFF4E2;
  color: var(--dark);
  letter-spacing: -.011em;
  overflow-x: hidden;
}

/* Fixed so glass surfaces refract a *moving* field as you scroll past them.
   Deliberately no filter: blur() here — the gradients are already soft, and a
   blurred layer this large blows out the compositor. */
body::before {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38% 40% at 14% 8%,  rgba(255,201,58,.82),  transparent 72%),
    radial-gradient(36% 38% at 86% 6%,  rgba(255,140,52,.76),  transparent 72%),
    radial-gradient(40% 42% at 80% 62%, rgba(238,74,68,.66),   transparent 74%),
    radial-gradient(36% 38% at 12% 70%, rgba(252,124,96,.62),  transparent 74%),
    radial-gradient(46% 34% at 50% 96%, rgba(250,178,64,.58),  transparent 76%),
    /* centre fill so the middle of the page doesn't wash out to cream */
    radial-gradient(52% 46% at 50% 40%, rgba(255,170,90,.34),  transparent 78%),
    /* one cool note, kept small and low — a sunset has blue at its edges, and
       without it the warm blobs have nothing to read against */
    radial-gradient(24% 26% at 4% 44%,  rgba(91,180,220,.30),  transparent 72%);
  animation: aurora 40s ease-in-out infinite alternate;
}

/* The old stripe, kept faint — it gives the glass something to bend, and keeps
   a thread back to the original brand. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.52) 0 46px, rgba(255,255,255,.10) 46px 92px),
    linear-gradient(180deg, rgba(255,251,244,.10), rgba(255,247,236,.22));
  opacity: .46;
}

@keyframes aurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2%,-2%,0) scale(1.10); }
  100% { transform: translate3d(-2%,2%,0) scale(1.05); }
}

/* Section backgrounds become transparent — the aurora shows through everywhere. */
.features, .categories, .cats, .how, .showcase, .waitlist-section,
.team-page, .launch-video, .page-hero, .press, .news-feature,
.quote-section, .cta-section, .stripe-bg, .ww-section,
.ww-section:nth-child(even), .ww-hero {
  background: transparent;
  position: relative;
}

/* The two full-bleed moments get their own pool of light — cool under the
   quote, warm under the download. The alternation is what stops the page
   reading as one long wash of the same colour. */
.quote-section::before,
.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.quote-section::before {
  background: radial-gradient(70% 100% at 50% 50%, rgba(255,255,255,.70), rgba(184,220,232,.34) 62%, transparent 82%);
}
.cta-section::before {
  background:
    radial-gradient(48% 62% at 50% 46%, rgba(255,255,255,.68), transparent 72%),
    radial-gradient(70% 90% at 50% 62%, rgba(245,209,74,.34), rgba(241,143,160,.24) 55%, transparent 80%);
}

/* -----------------------------------------------------------------------------
   3. THE GLASS PRIMITIVE
   Applied to every raised surface. ::before paints the specular rim using the
   padding-box mask trick, so the highlight lives *on* the edge, not inside it.
   -------------------------------------------------------------------------- */
.feature-card,
.value-card,
.team-card,
.team-founder-card,
.ww-form-card,
.news-card,
.event-callout,
.float-card,
.press-bar,
.cat-chip,
.cat-pill,
.waitlist-toggle,
.ww-nav-btn,
.form-feedback,
.waitlist-feedback {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: var(--r);
  background: var(--lg-tint);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-inner), var(--lg-shadow);
  transition:
    transform .55s var(--ease-glass),
    box-shadow .55s var(--ease-glass),
    background .4s var(--ease-out);
}

.feature-card::before,
.value-card::before,
.team-card::before,
.team-founder-card::before,
.ww-form-card::before,
.news-card::before,
.event-callout::before,
.float-card::before,
.press-bar::before,
.cat-chip::before,
.waitlist-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.25px;
  background: var(--lg-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  transition: opacity .5s var(--ease-out);
}

/* Pointer-tracked sheen. js/liquid.js writes --mx / --my on hover. */
.lg-sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--ease-out);
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.75),
    rgba(255,255,255,.28) 38%,
    transparent 62%
  );
}
.feature-card:hover  > .lg-sheen,
.value-card:hover    > .lg-sheen,
.team-card:hover     > .lg-sheen,
.news-card:hover     > .lg-sheen,
.event-callout:hover > .lg-sheen,
.ww-form-card:hover  > .lg-sheen { opacity: 1; }

/* Lift */
.feature-card:hover,
.value-card:hover,
.team-card:hover,
.news-card:hover,
.event-callout:hover {
  transform: translateY(-8px) scale(1.012);
  background: var(--lg-tint-strong);
  box-shadow: var(--lg-inner), var(--lg-shadow-lift);
}

/* -----------------------------------------------------------------------------
   4. NAVIGATION — a floating glass island
   -------------------------------------------------------------------------- */
nav {
  position: fixed;
  inset: 0 0 auto;
  height: auto;
  padding: 14px 24px;
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  z-index: 200;
  transition: padding .6s var(--ease-glass);
}

.nav-inner {
  position: relative;
  isolation: isolate;
  max-width: var(--max-w);
  padding: 9px 9px 9px 20px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.42);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.9),
    inset 0 -1px 1px rgba(255,255,255,.35),
    0 2px 10px rgba(20,30,48,.05),
    0 14px 40px rgba(20,30,48,.07);
  transition:
    max-width .7s var(--ease-glass),
    background .5s var(--ease-out),
    box-shadow .5s var(--ease-out);
}
.nav-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.25px;
  background: var(--lg-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

/* Contracts as you scroll — the island tightens up and the glass thickens.
   Keep the bar itself transparent: the old full-width white background from
   style.css's nav.scrolled must not bleed through behind the floating pill. */
nav.scrolled {
  padding: 10px 24px;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
nav.scrolled .nav-inner {
  max-width: 1040px;
  background: rgba(255,255,255,.68);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -1px 1px rgba(255,255,255,.4),
    0 4px 14px rgba(20,30,48,.07),
    0 18px 50px rgba(20,30,48,.10);
}

.nav-logo img {
  width: 34px; height: 34px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(20,30,48,.14), inset 0 0 0 1px rgba(255,255,255,.4);
  transition: transform .5s var(--ease-glass);
}
.nav-logo:hover img { transform: rotate(-6deg) scale(1.08); }

.nav-wordmark {
  font-size: 21px;
  letter-spacing: -.6px;
  background: linear-gradient(120deg, #F0B01C 0%, #FB7C3A 52%, #EE5C7E 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-links { gap: 4px; }
.nav-links a {
  position: relative;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--mid);
  transition: color .3s var(--ease-out);
}
/* The hover pill grows from the centre rather than just appearing. */
.nav-links a:not(.btn-nav)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(20,30,48,.06);
  opacity: 0;
  transform: scale(.86);
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-glass);
  z-index: -1;
}
.nav-links a:not(.btn-nav):hover { color: var(--dark); }
.nav-links a:not(.btn-nav):hover::before { opacity: 1; transform: scale(1); }

/* -----------------------------------------------------------------------------
   5. BUTTONS
   Dark buttons are obsidian glass: still a lens, just a tinted one.
   -------------------------------------------------------------------------- */
.btn-nav,
.app-store-badge,
.btn-waitlist,
.btn-submit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(150deg, #23262C 0%, #101216 60%, #191C21 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 2px 6px rgba(16,18,22,.20),
    0 12px 30px rgba(16,18,22,.22);
  transition:
    transform .45s var(--ease-glass),
    box-shadow .45s var(--ease-glass);
}
/* Specular sweep across the top face */
.btn-nav::after,
.app-store-badge::after,
.btn-waitlist::after,
.btn-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,.30), rgba(255,255,255,.05) 42%, transparent 60%);
  pointer-events: none;
}
/* Travelling glint on hover */
.btn-nav::before,
.app-store-badge::before,
.btn-waitlist::before,
.btn-submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.btn-nav:hover::before,
.app-store-badge:hover::before,
.btn-waitlist:hover::before,
.btn-submit:hover::before {
  left: 130%;
  transition: left .85s var(--ease-out);
}

.btn-nav:hover,
.app-store-badge:hover,
.btn-waitlist:hover,
.btn-submit:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 4px 10px rgba(16,18,22,.22),
    0 22px 46px rgba(16,18,22,.28);
}
/* Glass squishes when you press it */
.btn-nav:active,
.app-store-badge:active,
.btn-waitlist:active,
.btn-submit:active {
  transform: translateY(-1px) scale(.975);
  transition-duration: .12s;
}

.nav-links .btn-nav { padding: 10px 22px; font-weight: 600; color: #fff; }
.app-store-badge { padding: 12px 24px; border-radius: 18px; }
.app-store-badge .asb-text,
.app-store-badge .asb-apple { position: relative; z-index: 3; }

.btn-submit-grad {
  background: linear-gradient(140deg, #F5D14A 0%, #F1A08C 48%, #F18FA0 100%);
  color: #1A1206;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 2px 8px rgba(241,143,160,.28),
    0 16px 38px rgba(245,209,74,.32);
}
.btn-submit-grad:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 4px 12px rgba(241,143,160,.32),
    0 26px 56px rgba(245,209,74,.42);
}

/* Focus ring that matches the material */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(91,180,220,.95);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* -----------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero {
  min-height: 100svh;
  padding: calc(var(--nav-h) + 96px) 24px 120px;
}
.hero::after {
  /* Light pooling toward the fold, so the eye is pulled down the page. Warm
     and restrained — at full white this bleached the middle of the hero. */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -30%;
  width: 120vw;
  height: 60vh;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,246,228,.52), transparent 72%);
}

.hero-glow { filter: blur(110px); mix-blend-mode: normal; }
.hero-glow-1 { width: 620px; height: 620px; opacity: .30; animation: drift 18s ease-in-out infinite; }
.hero-glow-2 { width: 520px; height: 520px; opacity: .30; animation: drift 22s ease-in-out infinite reverse; }

@keyframes drift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(-6%,7%,0) scale(1.14); }
}

/* App icon on its own glass coaster */
.hero-logo,
.cta-logo {
  position: relative;
  border-radius: 30px;
  box-shadow:
    0 2px 6px rgba(20,30,48,.10),
    0 18px 44px rgba(245,209,74,.34),
    0 30px 80px rgba(241,143,160,.24),
    inset 0 0 0 1px rgba(255,255,255,.5);
  outline: none;
  animation: float 7s ease-in-out infinite;
}
.hero-logo { width: 116px; height: 116px; margin-bottom: 36px; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(1.5deg); }
}

.hero-eyebrow {
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: var(--lg-blur-lite);
  backdrop-filter: var(--lg-blur-lite);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 16px rgba(20,30,48,.06);
  color: #C8503C;
  text-shadow: none;
  font-size: 11.5px;
  letter-spacing: .16em;
  margin-bottom: 26px;
}

.hero h1 {
  font-size: clamp(48px, 8.5vw, 100px);
  line-height: .98;
  letter-spacing: -.035em;
  margin-bottom: 26px;
}
.hero h1 em {
  background: linear-gradient(100deg, #F7C325 0%, #FB8A2E 32%, #F0554B 64%, #EE6A86 100%);
  background-size: 150% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sheen 9s ease-in-out infinite;
}
@keyframes sheen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.hero-sub {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--mid);
  max-width: 520px;
}

/* -----------------------------------------------------------------------------
   7. TYPE
   -------------------------------------------------------------------------- */
.heading {
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.06;
  letter-spacing: -.032em;
  text-wrap: balance;
}
.subheading { font-size: 18px; color: var(--mid); text-wrap: pretty; }

.lbl, .hero-eyebrow {
  font-weight: 700;
  text-transform: uppercase;
}
.lbl {
  color: #C8503C;
  letter-spacing: .16em;
  text-shadow: none;
}

blockquote {
  font-size: clamp(26px, 4.2vw, 52px);
  letter-spacing: -.03em;
  line-height: 1.18;
}
blockquote strong {
  background: linear-gradient(100deg, #F0B01C, #FB7C3A 48%, #EE5C7E);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

section { padding: 100px 24px; }
.cats { padding: 92px 0; }

/* -----------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.features-grid { gap: 26px; }

.feature-card { padding: 38px 32px 32px; overflow: hidden; }
.feature-card p, .feature-card h3 { position: relative; z-index: 3; }
.feature-card h3 { font-size: 24px; letter-spacing: -.02em; margin-bottom: 12px; }
.feature-card .feature-tags { position: relative; z-index: 3; }

.feature-index {
  z-index: 3;
  font-size: 46px;
  opacity: .07;
  color: var(--dark);
}
.feature-card:hover .feature-index { opacity: .14; }

/* Icons become little glass tiles with their own coloured light inside */
.feature-icon,
.value-card-icon {
  position: relative;
  z-index: 3;
  border-radius: 20px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.85),
    inset 0 -2px 6px rgba(255,255,255,.35),
    0 2px 6px rgba(20,30,48,.10),
    0 12px 26px rgba(20,30,48,.12);
  transition: transform .6s var(--ease-glass), box-shadow .6s var(--ease-glass);
}
.feature-card:hover .feature-icon {
  transform: translateY(-3px) scale(1.09) rotate(-5deg);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.9),
    0 4px 10px rgba(20,30,48,.12),
    0 20px 40px rgba(20,30,48,.18);
}

.feature-tag {
  background: rgba(255,255,255,.62);
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(20,30,48,.05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--mid);
}

/* Colour blooms sit *under* the glass, so the card tints as it lifts. */
.feature-card-blob {
  z-index: 0;
  opacity: .22;
  filter: blur(18px);
  transition: transform .7s var(--ease-glass), opacity .7s var(--ease-out);
}
.feature-card:hover .feature-card-blob { transform: scale(1.9); opacity: .32; }
.feature-card-shine { display: none; }

.value-card { padding: 32px 30px; }
.value-card::after { filter: blur(16px); opacity: .2; z-index: 0; }
.value-card > *, .value-card h3, .value-card p { position: relative; z-index: 3; }

/* News cards */
.news-card { border-radius: var(--r-lg); overflow: hidden; }
.news-card .news-body, .news-card .news-media { position: relative; z-index: 3; }
.news-media img { transition: transform .8s var(--ease-glass); }
.news-card:hover .news-media img { transform: scale(1.06); }
.news-link { color: #3E8FBC; }
.news-title { letter-spacing: -.028em; }

/* Live-event callout: warm glass rather than a solid gradient slab */
.event-callout {
  border-radius: var(--r-lg);
  background:
    linear-gradient(140deg, rgba(255,255,255,.60), rgba(255,255,255,.30)),
    linear-gradient(140deg, rgba(245,209,74,.55), rgba(241,143,160,.45));
  box-shadow:
    var(--lg-inner),
    0 2px 8px rgba(212,150,60,.14),
    0 20px 50px rgba(241,143,160,.22);
}
.event-callout:hover {
  box-shadow:
    var(--lg-inner),
    0 4px 12px rgba(212,150,60,.18),
    0 32px 72px rgba(241,143,160,.32);
}
.event-callout > * { position: relative; z-index: 3; }
.event-live {
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.event-callout-arrow { transition: transform .5s var(--ease-glass); }
.event-callout:hover .event-callout-arrow { transform: translateX(6px); }

/* Press bar becomes one long glass shelf */
.press { padding: 20px 24px 60px; }
.press-bar {
  padding: 26px 40px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.45);
}
.press-bar > * { position: relative; z-index: 3; }
.press-logo { filter: saturate(.15) contrast(.9); opacity: .62; transition: filter .5s var(--ease-out), opacity .5s var(--ease-out), transform .5s var(--ease-glass); }
.press-logo:hover { filter: none; opacity: 1; transform: translateY(-3px) scale(1.04); }

/* Team */
.team-card { padding: 36px 26px 32px; }
.team-card > * { position: relative; z-index: 3; }
.team-founder-card { border-radius: var(--r-lg); padding: 38px; }
.team-founder-card::after { filter: blur(24px); opacity: .3; }
.team-photo {
  border: 0;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.85),
    0 2px 8px rgba(20,30,48,.10),
    0 16px 40px rgba(20,30,48,.16);
  transition: transform .6s var(--ease-glass);
}
.team-card:hover .team-photo { transform: scale(1.06); }

/* -----------------------------------------------------------------------------
   9. PILLS, CHIPS, MARQUEE
   -------------------------------------------------------------------------- */
.cat-pill {
  border-radius: var(--r-pill);
  border: 0;
  gap: 10px;
  padding: 12px 20px;
  background:
    linear-gradient(150deg, rgba(255,255,255,.78), rgba(255,255,255,.46));
  -webkit-backdrop-filter: var(--lg-blur-lite);
  backdrop-filter: var(--lg-blur-lite);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 3px rgba(20,30,48,.05),
    0 8px 22px rgba(20,30,48,.07);
  transition: transform .5s var(--ease-glass), box-shadow .5s var(--ease-glass);
}
/* The category colour lives as a glow beneath the glass, not as a hard border */
.cat-pill::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  opacity: .38;
  filter: blur(6px);
  transition: opacity .5s var(--ease-out), filter .5s var(--ease-out);
}
.cat-pill:hover {
  transform: translateY(-5px) scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 6px rgba(20,30,48,.07),
    0 18px 40px rgba(20,30,48,.13);
}
.cat-pill:hover::before { opacity: .62; filter: blur(11px); }
.cat-pill-new::after { box-shadow: 0 2px 8px rgba(20,30,48,.22), inset 0 1px 0 rgba(255,255,255,.4); }

.cat-chip {
  border-radius: var(--r-pill);
  padding: 10px 22px 10px 10px;
  background: rgba(255,255,255,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 18px rgba(20,30,48,.06);
}
.cat-chip > * { position: relative; z-index: 3; }
.cat-emoji {
  background: rgba(255,255,255,.85);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.95), 0 3px 10px rgba(20,30,48,.10);
}
.cat-chip:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 14px 32px rgba(20,30,48,.11);
}
.cat-track { animation-duration: 52s; }
.cat-track-rev { animation-duration: 64s; }

/* -----------------------------------------------------------------------------
   10. PHONE / SHOWCASE
   -------------------------------------------------------------------------- */
.phone {
  border-radius: 46px;
  background: linear-gradient(155deg, #2A2E35 0%, #0B0D10 50%, #1C1F24 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 2px 2px rgba(255,255,255,.20),
    0 4px 12px rgba(16,20,28,.18),
    0 40px 90px rgba(16,20,28,.30);
}
.phone-screen { border-radius: 36px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
.phone-sm { transition: transform .6s var(--ease-glass), filter .6s var(--ease-out); }
.phone-sm:hover { transform: translateY(-14px) scale(1.03); }

.float-card {
  border-radius: 20px;
  padding: 13px 15px;
  background: rgba(255,255,255,.62);
  box-shadow: var(--lg-inner), 0 4px 12px rgba(20,30,48,.08), 0 20px 44px rgba(20,30,48,.14);
}
.float-card > * { position: relative; z-index: 3; }
/* The glass primitive above sets position:relative on every surface; these two
   have to stay absolute or they fall into the phone stage's flow. */
.float-card { position: absolute; }
/* Separated vertically so the roomier glass padding can't make them collide. */
.float-aura { top: 34px;   left: -104px;  bottom: auto; }
.float-snap { top: auto;   right: -88px;  bottom: 44px; }

.showcase-glow {
  background: radial-gradient(circle, rgba(245,209,74,.30), rgba(241,143,160,.16) 45%, transparent 68%);
  filter: blur(30px);
}

.step {
  padding: 14px 18px;
  margin-left: -18px;
  border-radius: 20px;
  transition: background .45s var(--ease-out), box-shadow .45s var(--ease-out), transform .5s var(--ease-glass);
}
.step:hover {
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px rgba(20,30,48,.07);
  transform: translateX(6px);
}
.step-num {
  border-radius: 13px;
  background: linear-gradient(140deg, #F5D14A, #F18FA0);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.7),
    0 2px 6px rgba(241,143,160,.24),
    0 10px 24px rgba(245,209,74,.32);
}

/* -----------------------------------------------------------------------------
   11. FORMS
   -------------------------------------------------------------------------- */
.form-input, .form-select, .form-textarea, .waitlist-input {
  border: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.58);
  -webkit-backdrop-filter: var(--lg-blur-lite);
  backdrop-filter: var(--lg-blur-lite);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(20,30,48,.06),
    0 4px 14px rgba(20,30,48,.04);
  transition: box-shadow .4s var(--ease-out), background .4s var(--ease-out);
}
.waitlist-input { border-radius: var(--r-pill); }
.form-input:focus, .form-select:focus, .form-textarea:focus, .waitlist-input:focus {
  outline: none;
  background: rgba(255,255,255,.78);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(91,180,220,.60),
    0 0 0 4px rgba(91,180,220,.16),
    0 10px 28px rgba(20,30,48,.08);
}

.ww-form-card { border-radius: var(--r-lg); padding: 38px; }
.ww-form-card > * { position: relative; z-index: 3; }

.ww-nav-btn {
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: var(--lg-blur-lite);
  backdrop-filter: var(--lg-blur-lite);
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 18px rgba(20,30,48,.06);
}
.ww-nav-btn:hover, .ww-nav-btn.active {
  background: linear-gradient(150deg, #23262C, #101216);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 30px rgba(16,18,22,.24);
}

.waitlist-toggle { background: rgba(255,255,255,.42); }
.toggle-opt { position: relative; z-index: 3; border-radius: var(--r-pill); }
.toggle-opt.active {
  background: rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 3px 10px rgba(20,30,48,.10);
}

.form-feedback, .waitlist-feedback { border-radius: var(--r-sm); }
.form-feedback.success, .waitlist-feedback.success {
  background: rgba(209,250,229,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 24px rgba(6,95,70,.10);
}
.form-feedback.error, .waitlist-feedback.error {
  background: rgba(254,226,226,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 24px rgba(153,27,27,.10);
}

/* -----------------------------------------------------------------------------
   12. INTERIOR PAGES
   -------------------------------------------------------------------------- */
.page-hero {
  padding: calc(var(--nav-h) + 88px) 24px 72px;
  border-bottom: 0;
}
.page-hero h1 { font-size: clamp(40px, 5.6vw, 66px); letter-spacing: -.035em; line-height: 1.02; }
.page-body a { color: #C8503C; }
.ww-hero h1 { letter-spacing: -.035em; }
.ww-hero h1 em {
  background: linear-gradient(100deg, #F0B01C, #FB7C3A 48%, #EE5C7E);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.launch-frame {
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 4px 14px rgba(16,20,28,.14),
    0 40px 90px rgba(16,20,28,.24);
}

/* -----------------------------------------------------------------------------
   13. FOOTER — smoked glass over dark
   -------------------------------------------------------------------------- */
footer {
  position: relative;
  margin-top: 40px;
  background:
    radial-gradient(60vmax 40vmax at 12% 0%, rgba(91,180,220,.26), transparent 60%),
    radial-gradient(50vmax 36vmax at 84% 10%, rgba(241,143,160,.16), transparent 60%),
    linear-gradient(180deg, #16181D 0%, #0B0C0F 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  padding-top: 76px;
}
.social-btn {
  border: 0;
  background: rgba(255,255,255,.07);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform .5s var(--ease-glass), background .4s var(--ease-out), color .4s var(--ease-out);
}
.social-btn:hover {
  transform: translateY(-4px) scale(1.06);
  color: #14161A;
  background: linear-gradient(140deg, #F5D14A, #F18FA0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 12px 28px rgba(245,209,74,.30);
}
.footer-col a { transition: color .3s var(--ease-out), transform .4s var(--ease-glass); }
.footer-col a:hover { transform: translateX(3px); }

/* -----------------------------------------------------------------------------
   14. MOTION — scroll reveal
   Content arrives out of focus and settles, like glass coming to rest.
   -------------------------------------------------------------------------- */
.fade-in {
  opacity: 0;
  transform: translateY(34px) scale(.985);
  filter: blur(8px);
  transition:
    opacity .95s var(--ease-glass),
    transform .95s var(--ease-glass),
    filter .95s var(--ease-glass);
}
.fade-in.visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Scroll progress hairline along the top of the viewport */
.lg-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, #F7C325, #FB8232 45%, #EE5C7E 72%, #5BB4DC);
  box-shadow: 0 0 12px rgba(241,143,160,.6);
  z-index: 300;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero h1 { font-size: clamp(44px, 9vw, 76px); }
}

@media (max-width: 768px) {
  :root { --nav-h: 0px; --r: 22px; --r-lg: 26px; }
  section { padding: 84px 20px; }

  nav { position: sticky; padding: 10px 12px; }
  .nav-inner {
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 26px;
  }
  nav.scrolled .nav-inner { max-width: 100%; }
  .nav-links { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .nav-links a {
    padding: 7px 13px;
    font-size: 13px;
    background: rgba(255,255,255,.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 2px 8px rgba(20,30,48,.05);
    color: var(--dark);
  }
  .nav-links a:not(.btn-nav)::before { display: none; }
  .nav-links .btn-nav {
    background: linear-gradient(150deg, #23262C, #101216);
    color: #fff !important;
  }

  .hero { min-height: auto; padding-top: 56px; padding-bottom: 88px; }
  .hero-logo { width: 96px; height: 96px; }
  .press-bar { padding: 22px 20px; }
  .feature-card { padding: 30px 24px 26px; }
}

/* -----------------------------------------------------------------------------
   16. FALLBACKS & PREFERENCES
   -------------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-inner,
  .feature-card, .value-card, .team-card, .team-founder-card, .ww-form-card,
  .news-card, .press-bar, .cat-chip, .cat-pill, .float-card,
  .form-input, .form-select, .form-textarea, .waitlist-input {
    background: rgba(255,255,255,.93);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before,
  .hero-glow-1, .hero-glow-2,
  .hero-logo, .cta-logo,
  .float-card,
  .hero h1 em { animation: none; }
  .fade-in { opacity: 1; transform: none; filter: none; transition: none; }
  .lg-sheen { display: none; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}