/* ============================================================
   Laabu — corporate teaser
   ============================================================ */

:root {
  --bg:            #ffffff;
  --bg-soft:       #fafafc;
  --bg-tint:       #f4f1ff;
  --ink:           #0b0a1f;
  --ink-2:         #1f1d3a;
  --muted:         #64618a;
  --line:          #ece8f5;
  --line-strong:   #d9d3ee;

  --brand:         #7c3aed;
  --brand-2:       #5b21b6;
  --brand-soft:    #ede9fe;
  --accent:        #ec4899;
  --accent-2:      #f43f5e;

  --tone-cyan:     #06b6d4;
  --tone-teal:     #14b8a6;
  --tone-pink:     #ec4899;
  --tone-blue:     #3b82f6;
  --tone-green:    #10b981;
  --tone-orange:   #f59e0b;

  --grad:          linear-gradient(135deg, #7c3aed 0%, #c026d3 50%, #ec4899 100%);
  --grad-cool:     linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #c026d3 100%);
  --grad-soft:     linear-gradient(135deg, #ede9fe 0%, #fce7f3 100%);

  --shadow-sm:     0 1px 2px rgba(20, 14, 60, .06);
  --shadow-md:     0 8px 24px -8px rgba(20, 14, 60, .12);
  --shadow-lg:     0 24px 60px -20px rgba(20, 14, 60, .25);
  --shadow-xl:     0 40px 80px -30px rgba(124, 58, 237, .35);

  --radius-sm:     8px;
  --radius:        14px;
  --radius-lg:     22px;
  --radius-xl:     32px;

  --container:     1200px;
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* allow extra room for the sticky nav so smooth-anchored scroll lands cleanly */
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: 'ss01', 'cv11', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--brand-2); text-decoration: none; }
a:hover { color: var(--brand); }
ul { padding: 0; margin: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: 'Sora', 'Inter Tight', sans-serif;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.06;
  margin: 0 0 .5em;
}
h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }

/* Editorial italic accent — used for the second word in big display headings */
em, .display-italic {
  font-family: 'Instrument Serif', 'Sora', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
h1 em, h2 em {
  /* tighten optical baseline for big serif italic next to sans */
  margin-inline: 0.04em;
}

::selection {
  background: rgba(124, 58, 237, .25);
  color: var(--ink);
}

/* Scroll progress bar — gradient stroke at top */
.scrollbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 200;
  pointer-events: none;
  background: rgba(124, 58, 237, .06);
}
.scrollbar__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7c3aed, #c026d3, #ec4899);
  box-shadow: 0 0 12px rgba(192, 38, 211, .55);
  transition: width .12s ease-out;
  will-change: width;
}

/* ============================================================
   Scroll companion + Laabu chat panel
   - Floating full-body Laabu pinned to the bottom-right corner.
   - No circular frame — the mascot floats freely with a drop-shadow.
   - Soft bob + pose-swap on scroll for ambient motion.
   - Small pill label tucked UNDER the mascot (not leftward, so it
     never extends into body copy).
   - Click anywhere on the mascot opens the chat panel.
   ============================================================ */
.companion {
  position: fixed;
  bottom: 18px;
  right: 22px;
  z-index: 120;
  width: 100px;
  height: 120px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px) scale(.9);
  transition:
    opacity .55s cubic-bezier(.22,1,.36,1),
    transform .55s cubic-bezier(.22,1,.36,1),
    filter .3s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.companion.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.companion:hover { filter: brightness(1.04); }
.companion:active .companion__mascot { transform: scale(.96); }
.companion:focus-visible .companion__mascot {
  outline: 2px dashed rgba(124, 58, 237, .6);
  outline-offset: 4px;
  border-radius: 999px;
}

/* The mascot floats freely — drop-shadow gives it lift without a frame */
.companion__mascot {
  position: relative;
  display: block;
  width: 100%;
  height: calc(100% - 22px); /* leave room for the label pill below */
  filter: drop-shadow(0 18px 24px rgba(124, 58, 237, .32));
  animation: companion-bob 4.2s ease-in-out infinite;
  transition: transform .2s ease;
}
.companion__mascot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .5s ease, transform .5s ease;
}
.companion__mascot img.is-active {
  opacity: 1;
  transform: scale(1);
}
@keyframes companion-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-6px) rotate(1.5deg); }
}

/* Small pill label UNDER the mascot — visible on hover / focus only.
   Never stretches leftward into page copy. */
.companion__tag {
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%) translateY(6px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 1px solid rgba(124, 58, 237, .2);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: 'Inter Tight', sans-serif;
  font-size: .66rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 10px 22px -10px rgba(20, 14, 60, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.companion:hover .companion__tag,
.companion:focus-visible .companion__tag,
.companion.is-hinting .companion__tag {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.companion.is-open .companion__tag { opacity: 0 !important; }

.companion__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, .55);
  animation: caption-pulse 1.8s ease-in-out infinite;
}

/* ============================================================
   Laabu chat panel — floating card anchored above the companion FAB.
   Visually consistent with popcards + nav.
   ============================================================ */
.laabuchat {
  position: fixed;
  bottom: 148px; /* sits above the floating full-body mascot */
  right: 22px;
  width: min(360px, calc(100vw - 44px));
  max-height: min(560px, calc(100vh - 180px));
  z-index: 119;
  background: white;
  border: 1px solid rgba(124, 58, 237, .18);
  border-radius: 20px;
  box-shadow:
    0 32px 80px -24px rgba(20, 14, 60, .45),
    0 8px 24px -12px rgba(20, 14, 60, .2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(.96);
  transform-origin: bottom right;
  transition:
    opacity .35s cubic-bezier(.22,1,.36,1),
    transform .35s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.laabuchat[hidden] { display: none; }
.laabuchat.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.laabuchat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #f5f3ff 0%, #fdf4ff 50%, #fff1f2 100%);
  border-bottom: 1px solid rgba(124, 58, 237, .12);
}
.laabuchat__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.laabuchat__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  padding: 2px;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -4px rgba(124, 58, 237, .5);
}
.laabuchat__avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: white;
  object-fit: cover;
  object-position: center top;
}
.laabuchat__id { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.laabuchat__id strong {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
.laabuchat__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .7rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .02em;
}
.laabuchat__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, .55);
  animation: caption-pulse 1.6s ease-in-out infinite;
}
.laabuchat__close {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(124, 58, 237, .08);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.laabuchat__close:hover { background: rgba(124, 58, 237, .15); transform: rotate(90deg); }

/* Scrollable message list */
.laabuchat__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
.laabuchat__body::-webkit-scrollbar { width: 6px; }
.laabuchat__body::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, .2);
  border-radius: 999px;
}

.chatmsg {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: 16px;
  font-family: 'Inter Tight', sans-serif;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--ink);
  word-wrap: break-word;
  opacity: 0;
  transform: translateY(8px);
  animation: chatmsg-in .32s cubic-bezier(.22,1,.36,1) forwards;
}
.chatmsg strong { font-weight: 700; }
.chatmsg em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.chatmsg--laabu {
  align-self: flex-start;
  background: rgba(124, 58, 237, .06);
  border-top-left-radius: 6px;
}
.chatmsg--laabu.is-big {
  background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(236, 72, 153, .08));
  border: 1px solid rgba(124, 58, 237, .15);
  font-family: 'Sora', sans-serif;
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: -.005em;
  padding: 12px 16px;
}
.chatmsg--user {
  align-self: flex-end;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  color: white;
  border-top-right-radius: 6px;
}

/* Typing indicator (three dots) */
.chatmsg--typing {
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
  align-self: flex-start;
  background: rgba(124, 58, 237, .06);
  border-radius: 16px;
  border-top-left-radius: 6px;
  opacity: 0;
  animation: chatmsg-in .22s ease forwards;
}
.chatmsg--typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
  animation: typing-bounce 1.2s ease-in-out infinite;
}
.chatmsg--typing span:nth-child(2) { animation-delay: .18s; }
.chatmsg--typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .45; }
  40%           { transform: translateY(-4px); opacity: 1; }
}
@keyframes chatmsg-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Footer with quick-reply chips + CTA */
.laabuchat__foot {
  border-top: 1px solid rgba(124, 58, 237, .08);
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, white 0%, #fcfcff 100%);
}
.laabuchat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(124, 58, 237, .14);
  margin-bottom: 10px;
}
.laabuchat__chips[hidden] { display: none; }
.chatchip {
  appearance: none;
  border: 1px solid rgba(124, 58, 237, .2);
  background: white;
  color: var(--ink);
  padding: 6px 11px;
  border-radius: 999px;
  font-family: 'Inter Tight', sans-serif;
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .15s ease, border-color .2s ease;
}
.chatchip:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, .1), rgba(236, 72, 153, .1));
  border-color: rgba(124, 58, 237, .35);
  transform: translateY(-1px);
}
.chatchip:active { transform: translateY(0); }
.chatchip[disabled] { opacity: .5; pointer-events: none; }

.laabuchat__composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px;
}
.laabuchat__hint {
  font-size: .66rem;
  color: var(--muted);
  letter-spacing: .01em;
  flex: 1;
  min-width: 0;
}
.btn--sm {
  font-size: .78rem !important;
  padding: 9px 14px !important;
}

/* On narrow viewports the chat becomes a bottom sheet anchored above the
   floating mascot. The mascot itself shrinks slightly so it doesn't crowd
   the thumb-reach area. */
@media (max-width: 760px) {
  .companion { right: 12px; bottom: 12px; width: 82px; height: 98px; }
  .laabuchat {
    right: 12px;
    left: 12px;
    bottom: 120px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 150px);
  }
  .companion__tag { display: none; }
}

/* Respect reduced-motion preferences — kill the bob animation */
@media (prefers-reduced-motion: reduce) {
  .companion__mascot { animation: none; }
}

/* ----- Layout ----- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ----- Reusable ----- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-2);
  background: var(--brand-soft);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(236, 72, 153, .18);
}
.eyebrow--center { display: inline-flex; }
.eyebrow--light  { color: white; background: rgba(255, 255, 255, .15); }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 56px;
}
.section-lead {
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 720px;
  margin: 12px auto 0;
}

/* ============================================================
   Button system
   - Magnetic hover (mouse-follow translate)
   - Sliding shimmer sweep on primary
   - Animated arrow icon on hover
   - Visible focus ring (a11y)
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  /* magnetic translation lives on a CSS variable that JS can update */
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    box-shadow .35s cubic-bezier(.22,1,.36,1),
    background .25s ease,
    color .25s ease,
    border-color .25s ease;
}
.btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .9),
    0 0 0 5px rgba(124, 58, 237, .55);
}
.btn:active { transform: translate(var(--mx, 0px), calc(var(--my, 0px) + 1px)) scale(.98); }

.btn__label {
  position: relative;
  z-index: 2;
  display: inline-block;
}
.btn__arrow {
  position: relative;
  z-index: 2;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn .btn__arrow--down { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.btn:hover .btn__arrow--down { transform: translateY(3px); }

.btn--lg { padding: 16px 30px; font-size: 1.02rem; gap: 12px; }
.btn--lg .btn__arrow { width: 16px; height: 16px; }
.btn--full { width: 100%; }

/* ----- Primary ----- */
.btn--primary {
  color: white;
  background: var(--grad);
  background-size: 180% 180%;
  background-position: 0% 50%;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, .4) inset,
    0 10px 30px -10px rgba(124, 58, 237, .55),
    0 4px 16px -4px rgba(236, 72, 153, .35);
}
.btn--primary::before {
  /* shimmer sweep */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255, 255, 255, .35) 50%,
    transparent 70%);
  transform: translateX(-120%);
  transition: transform .85s cubic-bezier(.22,1,.36,1);
  mix-blend-mode: overlay;
}
.btn--primary:hover {
  color: white;
  background-position: 100% 50%;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, .5) inset,
    0 18px 38px -10px rgba(124, 58, 237, .7),
    0 8px 22px -4px rgba(236, 72, 153, .55);
}
.btn--primary:hover::before { transform: translateX(120%); }

/* ----- Ghost ----- */
.btn--ghost {
  background: white;
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: 0 1px 2px rgba(20, 14, 60, .04);
}
.btn--ghost::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(236, 72, 153, .08));
  opacity: 0;
  transition: opacity .3s ease;
}
.btn--ghost:hover {
  border-color: var(--brand);
  color: var(--brand-2);
  box-shadow: 0 8px 22px -10px rgba(124, 58, 237, .35);
}
.btn--ghost:hover::after { opacity: 1; }

/* ----- Dark variant (CTA card uses a light-on-dark form button) ----- */
.btn--dark {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.btn--dark:hover { background: #1a1738; color: white; }

/* Inline link-button used in announce bar */
.announce__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.announce__link svg {
  width: 12px;
  height: 12px;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.announce__link:hover svg { transform: translateX(3px); }

/* ============================================================
   Announcement bar
   ============================================================ */
.announce {
  background: var(--ink);
  color: white;
  font-size: .9rem;
}
.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 24px;
}
.announce__pill {
  background: var(--grad);
  color: white;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.announce p { margin: 0; color: rgba(255,255,255,.85); }
.announce a { color: white; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 1px; }
.announce a:hover { border-color: white; color: white; }

/* ============================================================
   Nav
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 24px;
}

/* Brand wordmark — rendered from a transparent PNG produced by the chroma-key pipeline */
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand__mark {
  height: 36px;
  width: auto;
  display: block;
  transition: transform .2s ease, filter .2s ease;
  filter: drop-shadow(0 4px 10px rgba(124, 58, 237, .15));
}
.brand:hover .brand__mark {
  transform: translateY(-1px);
  filter: drop-shadow(0 6px 14px rgba(236, 72, 153, .35));
}
.brand__mark--footer {
  height: 48px;
  filter: drop-shadow(0 6px 14px rgba(236, 72, 153, .25));
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav__links a {
  color: var(--ink-2);
  font-weight: 500;
  font-size: .95rem;
  position: relative;
}
.nav__links a:hover { color: var(--brand-2); }
.nav__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -22px;
  height: 2px; background: var(--grad);
  transform: scaleX(0); transform-origin: center;
  transition: transform .2s ease;
}
.nav__links a:hover::after { transform: scaleX(1); }

.nav__cta { display: flex; gap: 10px; align-items: center; }

.nav__toggle {
  display: none;
  background: transparent; border: 0; cursor: pointer;
  width: 40px; height: 40px;
  flex-direction: column; gap: 5px; padding: 0; align-items: center; justify-content: center;
}
.nav__toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  padding: 80px 0 110px;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  animation: float 14s ease-in-out infinite;
}
.orb--purple { width: 520px; height: 520px; background: #c4b5fd; top: -120px; left: -100px; }
.orb--pink   { width: 460px; height: 460px; background: #fbcfe8; top: 200px; right: -80px; animation-delay: 2s; }
.orb--blue   { width: 380px; height: 380px; background: #bfdbfe; bottom: -120px; left: 30%; animation-delay: 4s; }

@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); }
  50%      { transform: translateY(-30px) translateX(20px); }
}

.grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(124, 58, 237, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
  position: relative;
}
.hero__copy { text-align: center; max-width: 920px; margin: 0 auto; }
.hero__title {
  margin-bottom: 18px;
  font-size: clamp(2rem, 5.2vw, 4.6rem);
  line-height: 1.04;
}
.hero__lead {
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  color: var(--muted);
  max-width: 680px;
  margin: 0 auto 30px;
  line-height: 1.55;
}
.hero__ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0;
}
.hero__copy .eyebrow { margin-inline: auto; }

.hero__proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  margin: 8px auto 0;
  width: 100%;
  max-width: 980px;
  text-align: center;
}
.hero__proof li {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  border-right: 1px solid var(--line);
}
.hero__proof li:last-child { border-right: 0; }
.hero__proof strong {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.05;
}
.hero__proof span { font-size: .82rem; color: var(--muted); letter-spacing: .02em; }

/* ============================================================
   THE STAGE — cinematic workforce tableau (hero)
   ============================================================ */
.stage {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 18px auto 36px;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 110%, #4c1d95 0%, #1e1b4b 35%, #08071f 75%, #050316 100%);
  box-shadow:
    0 60px 120px -40px rgba(76, 29, 149, .55),
    0 0 0 1px rgba(124, 58, 237, .25) inset,
    0 30px 80px -30px rgba(236, 72, 153, .25);
  isolation: isolate;
}

/* atmosphere layers — beams, grid, halo, sparkles */
.stage__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.stage__beams,
.stage__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.stage__beams {
  z-index: 1;
  mix-blend-mode: screen;
  opacity: .9;
  animation: beams-shift 12s ease-in-out infinite;
}
@keyframes beams-shift {
  0%, 100% { transform: scaleX(1)    translateX(0); opacity: .85; }
  50%      { transform: scaleX(1.05) translateX(-1%); opacity: 1; }
}
.stage__lines {
  z-index: 2;
  opacity: .6;
  animation: lines-shimmer 6s ease-in-out infinite;
}
@keyframes lines-shimmer {
  0%, 100% { opacity: .3; }
  50%      { opacity: .7; }
}

.stage__halo {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 70%;
  aspect-ratio: 3 / 1;
  background:
    radial-gradient(ellipse at center, rgba(236, 72, 153, .55) 0%, rgba(124, 58, 237, .25) 35%, transparent 70%);
  transform: translateX(-50%);
  filter: blur(24px);
  z-index: 0;
  animation: halo-breath 5s ease-in-out infinite;
}
@keyframes halo-breath {
  0%, 100% { opacity: .85; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.05); }
}

.stage__horizon {
  position: absolute;
  left: 0; right: 0; bottom: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(236, 72, 153, .45) 35%, rgba(196, 181, 253, .85) 50%, rgba(236, 72, 153, .45) 65%, transparent 100%);
  box-shadow: 0 0 24px rgba(236, 72, 153, .55), 0 0 60px rgba(124, 58, 237, .35);
  z-index: 0;
}

.stage__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(196, 181, 253, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196, 181, 253, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 60%, rgba(0,0,0,.95) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 60%, rgba(0,0,0,.95) 100%);
  z-index: 0;
}

/* Sparkle particles */
.stage__sparkles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.stage__sparkles span {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 10px white, 0 0 20px rgba(236, 72, 153, .6);
  opacity: 0;
  animation: spark-float 8s linear infinite;
}
.stage__sparkles span:nth-child(1)  { left:  6%; animation-delay: 0s;  animation-duration: 9s;  }
.stage__sparkles span:nth-child(2)  { left: 14%; animation-delay: 2s;  animation-duration: 8s;  }
.stage__sparkles span:nth-child(3)  { left: 23%; animation-delay: 4s;  animation-duration: 10s; }
.stage__sparkles span:nth-child(4)  { left: 32%; animation-delay: 1s;  animation-duration: 11s; }
.stage__sparkles span:nth-child(5)  { left: 41%; animation-delay: 5s;  animation-duration: 9s;  }
.stage__sparkles span:nth-child(6)  { left: 53%; animation-delay: 3s;  animation-duration: 8s;  }
.stage__sparkles span:nth-child(7)  { left: 60%; animation-delay: 6s;  animation-duration: 10s; }
.stage__sparkles span:nth-child(8)  { left: 71%; animation-delay: 1.5s;animation-duration: 11s; }
.stage__sparkles span:nth-child(9)  { left: 80%; animation-delay: 4.5s;animation-duration: 9s;  }
.stage__sparkles span:nth-child(10) { left: 88%; animation-delay: 2.5s;animation-duration: 8s;  }
.stage__sparkles span:nth-child(11) { left: 49%; animation-delay: 7s;  animation-duration: 12s; width: 6px; height: 6px; }
.stage__sparkles span:nth-child(12) { left: 27%; animation-delay: 6.5s;animation-duration: 12s; width: 5px; height: 5px; }
@keyframes spark-float {
  0%   { transform: translateY(100%) scale(.4); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-10%) scale(1.1); opacity: 0; }
}

/* live status caption */
.stage__caption {
  position: absolute;
  top: 18px; left: 22px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: 'Sora', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
}
.stage__caption-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .25);
  animation: caption-pulse 1.4s ease-in-out infinite;
}
@keyframes caption-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); transform: scale(1); }
  50%      { box-shadow: 0 0 0 6px rgba(52, 211, 153, .15); transform: scale(1.15); }
}

/* ============================================================
   Popcards — the floating "live outcome" chips on the stage.
   Each is a structured glass card: agent avatar + charter + LIVE,
   a big metric with delta arrow, a label, and a tone-coloured sparkline.
   ============================================================ */
.popcard {
  position: absolute;
  z-index: 9;
  width: 234px;
  padding: 14px 16px 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 100%);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    0 28px 60px -22px rgba(8, 5, 35, .65),
    inset 0 1px 0 rgba(255,255,255,.9);
  animation: chip-float 7s ease-in-out infinite;
  color: var(--ink);
  --tone: var(--tone-pink);
  overflow: hidden;
}
.popcard[data-tone="purple"] { --tone: #7c3aed; }
.popcard[data-tone="pink"]   { --tone: #ec4899; }
.popcard[data-tone="green"]  { --tone: #10b981; }
.popcard[data-tone="blue"]   { --tone: #3b82f6; }
.popcard[data-tone="teal"]   { --tone: #14b8a6; }
.popcard[data-tone="orange"] { --tone: #f59e0b; }

/* coloured top edge */
.popcard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 30%, white));
}

.popcard__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.popcard__avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tone), color-mix(in srgb, var(--tone) 60%, #1e1b4b));
  color: white;
  font-family: 'Sora', sans-serif;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--tone) 60%, transparent);
  flex-shrink: 0;
}
.popcard__meta {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  flex: 1;
  min-width: 0;
}
.popcard__agent {
  font-family: 'Sora', sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
}
.popcard__charter {
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-top: 2px;
}
.popcard__live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: #16a34a;
  background: rgba(22, 163, 74, .12);
  padding: 3px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.popcard__pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, .55);
  animation: caption-pulse 1.4s ease-in-out infinite;
}

.popcard__metric {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.popcard__num {
  font-family: 'Sora', sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--ink), color-mix(in srgb, var(--tone) 60%, var(--ink)));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  line-height: 1;
}
.popcard__num em {
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  margin-left: 1px;
}
.popcard__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 14%, white);
  color: color-mix(in srgb, var(--tone) 60%, var(--ink));
  white-space: nowrap;
}
.popcard__delta--good { color: #047857; background: rgba(16, 185, 129, .12); }

.popcard__label {
  font-size: .72rem;
  color: var(--muted);
  margin: 0 0 6px;
  letter-spacing: .01em;
}
.popcard__spark {
  display: block;
  width: 100%;
  height: 24px;
}

@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
/* All popcards live in the TOP half of the stage so they never collide with
   the mascot row that sits at the bottom (mascots are bottom-anchored). */
.popcard--a { top: 6%;  left: 2%;  animation-delay: 0s;   }
.popcard--b { top: 4%;  right: 2%; animation-delay: 1.2s; }
.popcard--c { top: 28%; left: 2%;  animation-delay: 2.6s; }
.popcard--d { top: 26%; right: 2%; animation-delay: 1.8s; }

/* On wide screens, slim the popcards so they don't crowd the side mascots
   when stacked two-deep on each side. */
@media (min-width: 1080px) {
  .popcard { width: 210px; padding: 12px 14px 10px; }
  .popcard__num { font-size: 1.55rem; }
  .popcard__num em { font-size: .9rem; }
  .popcard__avatar { width: 24px; height: 24px; font-size: .6rem; }
  .popcard__agent { font-size: .72rem; }
  .popcard__charter { font-size: .55rem; }
  .popcard__live { font-size: .54rem; padding: 2px 6px; }
  .popcard__delta { font-size: .58rem; padding: 2px 7px; }
  .popcard__label { font-size: .68rem; }
}

/* ----- The mascots themselves -----
   `transform-origin: 50% 100%` (bottom-centre) so that scaling never pushes
   the feet below the bottom of the stage — fixes the Laabu leg-cutoff. */
.mascot {
  position: absolute;
  left: var(--cx, 50%);
  bottom: var(--cy, 0%);
  width: clamp(110px, 16vw, 220px);
  transform-origin: 50% 100%;
  transform: translate(-50%, 0) scale(var(--scale, 1));
  z-index: var(--z, 5);
  animation: mascot-bob 5.5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  cursor: pointer;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.mascot--centre { width: clamp(160px, 22vw, 320px); }

@keyframes mascot-bob {
  0%, 100% { transform: translate(-50%, 0)    scale(var(--scale, 1)); }
  50%      { transform: translate(-50%, -8px) scale(var(--scale, 1)); }
}

.mascot[data-tone="teal"]   { --tone: var(--tone-teal);  }
.mascot[data-tone="pink"]   { --tone: var(--tone-pink);  }
.mascot[data-tone="blue"]   { --tone: var(--tone-blue);  }
.mascot[data-tone="navy"]   { --tone: #1e3a8a; }
.mascot[data-tone="green"]  { --tone: var(--tone-green); }
.mascot[data-tone="orange"] { --tone: var(--tone-orange); }
.mascot[data-tone="purple"] { --tone: #c084fc; }

/* the colored disc / spotlight under each character */
.mascot__platform {
  position: absolute;
  left: 50%; bottom: -10px;
  width: 90%;
  height: 18%;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, color-mix(in srgb, var(--tone) 75%, white) 0%, color-mix(in srgb, var(--tone) 35%, transparent) 45%, transparent 75%);
  filter: blur(6px);
  z-index: -1;
  opacity: .85;
  animation: platform-pulse 3.5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.mascot__platform--hero {
  height: 24%;
  width: 110%;
  background:
    radial-gradient(ellipse at center, #f0abfc 0%, rgba(236, 72, 153, .55) 35%, rgba(124, 58, 237, .25) 60%, transparent 80%);
  filter: blur(10px);
  opacity: 1;
  animation: platform-pulse-hero 3.2s ease-in-out infinite;
}
@keyframes platform-pulse {
  0%, 100% { opacity: .65; transform: translateX(-50%) scale(.95); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.05); }
}
@keyframes platform-pulse-hero {
  0%, 100% { opacity: .8;  transform: translateX(-50%) scale(.95); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.12); }
}

/* expanding rings around Laabu */
.mascot__ring {
  position: absolute;
  left: 50%; top: 60%;
  width: 110%; aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1.5px solid rgba(236, 72, 153, .6);
  transform: translate(-50%, -50%) scale(.6);
  opacity: 0;
  animation: ring-out 4.2s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}
.mascot__ring--2 { animation-delay: 1.4s; border-color: rgba(196, 181, 253, .55); }
.mascot__ring--3 { animation-delay: 2.8s; border-color: rgba(124, 58, 237, .5); }
@keyframes ring-out {
  0%   { transform: translate(-50%, -50%) scale(.5); opacity: .9; }
  80%  { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

/* the pose-cycling stack */
.mascot__poses {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
}
.mascot__poses img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  opacity: 0;
  transition: opacity .9s ease;
  filter: drop-shadow(0 18px 22px rgba(8, 5, 35, .55))
          drop-shadow(0 0 18px color-mix(in srgb, var(--tone) 55%, transparent));
}
.mascot__poses img.is-active { opacity: 1; }
/* Fallback: if JS hasn't run yet, surface the first pose. Once any sibling
   has `.is-active`, this rule disengages and the active class wins. */
.mascot__poses:not(:has(.is-active)) img:first-child { opacity: 1; }

.mascot--centre .mascot__poses img {
  filter: drop-shadow(0 24px 30px rgba(8, 5, 35, .65))
          drop-shadow(0 0 30px rgba(236, 72, 153, .55));
}

/* hover: pop forward and brighten */
.mascot:hover {
  transform: translate(-50%, -10px) scale(calc(var(--scale, 1) * 1.08));
  z-index: 11;
}
.mascot:hover .mascot__poses img.is-active,
.mascot:hover .mascot__poses:not(:has(.is-active)) img:first-child {
  filter: drop-shadow(0 22px 26px rgba(8, 5, 35, .7))
          drop-shadow(0 0 26px color-mix(in srgb, var(--tone) 75%, transparent));
}
.mascot:hover .mascot__platform { opacity: 1; transform: translateX(-50%) scale(1.18); }

/* the role pill under each mascot */
.mascot__label {
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  font-family: 'Sora', sans-serif;
  font-size: clamp(.6rem, .7vw, .72rem);
  font-weight: 700;
  letter-spacing: .04em;
  color: white;
  background: rgba(255, 255, 255, .12);
  border: 1px solid color-mix(in srgb, var(--tone) 60%, transparent);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .55);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}
.mascot:hover .mascot__label,
.mascot--centre .mascot__label {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}
.mascot__label--hero {
  background: linear-gradient(135deg, rgba(236, 72, 153, .35), rgba(124, 58, 237, .35));
  border-color: rgba(236, 72, 153, .8);
  font-size: clamp(.66rem, .8vw, .8rem);
  padding: 6px 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ============================================================
   Trust strip
   ============================================================ */
.trust-strip {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
}
.trust-strip__label {
  text-align: center;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  font-weight: 600;
}
.trust-strip__items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 32px;
}
.trust-strip__items li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-weight: 500;
  font-size: .92rem;
}
.trust-strip__items svg {
  width: 18px; height: 18px;
  color: var(--brand-2);
}
.trust-strip__star {
  margin-left: 2px;
  color: #b45309;
  font-weight: 800;
  font-size: .85em;
}
.trust-strip__note {
  text-align: center;
  font-size: .72rem;
  color: var(--muted);
  margin: 14px 0 0;
  letter-spacing: .02em;
}
.trust-strip__note span {
  color: #b45309;
  font-weight: 800;
  margin-right: 2px;
}

/* ============================================================
   Workforce / narration
   ============================================================ */
.workforce { padding: 110px 0; }

.workforce__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 20px;
}
.pillar {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.pillar__num {
  font-family: 'Sora', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  line-height: 1;
  margin-bottom: 20px;
}
.pillar p { color: var(--muted); margin: 0; }

/* ============================================================
   Agents grid
   ============================================================ */
.agents {
  padding: 110px 0;
  background: linear-gradient(180deg, var(--bg-soft) 0%, white 100%);
}
.agents__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.agent-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
}
.agent-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 1.5px;
  background: linear-gradient(135deg, var(--tone) 0%, transparent 60%);
  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.agent-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.agent-card:hover::before { opacity: 1; }

.agent-card[data-tone="cyan"]   { --tone: var(--tone-cyan); }
.agent-card[data-tone="teal"]   { --tone: var(--tone-teal); }
.agent-card[data-tone="pink"]   { --tone: var(--tone-pink); }
.agent-card[data-tone="blue"]   { --tone: var(--tone-blue); }
.agent-card[data-tone="navy"]   { --tone: #1e3a8a; }
.agent-card[data-tone="green"]  { --tone: var(--tone-green); }
.agent-card[data-tone="orange"] { --tone: var(--tone-orange); }

.agent-card__photo {
  background:
    radial-gradient(ellipse at 50% 110%, color-mix(in srgb, var(--tone) 35%, white) 0%, color-mix(in srgb, var(--tone) 8%, white) 50%, white 100%);
  height: 280px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.agent-card__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(124, 58, 237, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, .04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 60%, transparent 100%);
  pointer-events: none;
}
.agent-card__photo::after {
  content: "";
  position: absolute;
  bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 75%;
  height: 16px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--tone) 55%, transparent) 0%, transparent 70%);
  filter: blur(5px);
}
/* Pose-cycling stack inside the card */
.agent-card__poses {
  position: relative;
  width: 100%;
  height: 92%;
  align-self: flex-end;
}
.agent-card__poses img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  opacity: 0;
  transition: opacity .9s ease, transform .35s ease;
  filter: drop-shadow(0 24px 28px rgba(20, 14, 60, .18))
          drop-shadow(0 0 24px color-mix(in srgb, var(--tone) 35%, transparent));
}
.agent-card__poses img.is-active { opacity: 1; }
.agent-card__poses:not(:has(.is-active)) img:first-child { opacity: 1; }
.agent-card:hover .agent-card__poses img.is-active { transform: translateY(-8px) scale(1.04); }
.agent-card:hover .agent-card__poses:not(:has(.is-active)) img:first-child { transform: translateY(-8px) scale(1.04); }

.agent-card__body {
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.agent-card__product {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 12%, white);
  padding: 4px 10px;
  border-radius: 999px;
  width: fit-content;
  margin-bottom: 12px;
}
.agent-card__body h3 {
  font-family: 'Sora', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.agent-card__role {
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
  font-family: 'Inter', sans-serif;
  letter-spacing: 0;
}
.agent-card__body > p {
  color: var(--muted);
  margin: 0 0 18px;
  flex: 1;
}
.agent-card__metrics {
  display: flex;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  flex-wrap: wrap;
}
.agent-card__metrics li {
  font-size: .85rem;
  color: var(--ink-2);
}
.agent-card__metrics strong {
  color: var(--tone);
  font-weight: 700;
  margin-right: 4px;
}

/* ============================================================
   Outcomes
   ============================================================ */
.outcomes {
  padding: 110px 0;
}
.outcomes__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.outcomes__list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.outcomes__list li {
  position: relative;
  padding-left: 32px;
  color: var(--muted);
}
.outcomes__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 4px 10px -4px rgba(124, 58, 237, .6);
}
.outcomes__list li::after {
  content: "";
  position: absolute;
  left: 5px; top: 12px;
  width: 8px; height: 4px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg);
}
.outcomes__list strong { color: var(--ink); display: block; margin-bottom: 2px; }

.outcomes__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  position: relative;
}
.outcomes__mascot {
  position: absolute;
  top: -90px;
  right: -30px;
  width: 200px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 24px 28px rgba(20, 14, 60, .25))
          drop-shadow(0 0 32px rgba(124, 58, 237, .2));
  animation: mascot-bob 5s ease-in-out infinite;
  transform-origin: bottom center;
}
.stat {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stat:nth-child(1) { background: linear-gradient(160deg, #faf5ff 0%, white 100%); }
.stat:nth-child(2) { background: linear-gradient(160deg, #fdf2f8 0%, white 100%); }
.stat:nth-child(3) { background: linear-gradient(160deg, #eff6ff 0%, white 100%); }
.stat:nth-child(4) { background: linear-gradient(160deg, #ecfdf5 0%, white 100%); }
.stat__num {
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 10px;
}
.stat__num em {
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 700;
  margin-left: 2px;
}
.stat p { color: var(--muted); font-size: .92rem; margin: 0; }

/* ============================================================
   Testimonials
   ============================================================ */
.testimonials { padding: 110px 0; }

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin: 0;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testimonial::before {
  content: "“";
  position: absolute;
  top: -10px; left: 22px;
  font-family: 'Sora', serif;
  font-size: 5rem;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.testimonial blockquote { margin: 0 0 22px; }
.testimonial p { color: var(--ink-2); font-size: 1rem; margin: 0; }
.testimonial figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.testimonial__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--grad);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Serif', 'Sora', serif;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
  /* Lift the quote glyph so its tail isn't clipped at the bottom of the circle */
  padding-top: 10px;
  flex-shrink: 0;
  user-select: none;
}
.testimonial figcaption strong { display: block; font-size: .95rem; }
.testimonial figcaption em { font-style: normal; font-size: .82rem; color: var(--muted); }

/* ============================================================
   Trust / compliance
   ============================================================ */
.trust {
  padding: 110px 0;
  background: linear-gradient(180deg, white 0%, var(--bg-tint) 100%);
}
.trust__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}
.trust__features {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trust__features li {
  padding: 14px 18px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.trust__features strong { color: var(--ink); }
.trust__star {
  margin-left: 2px;
  color: #b45309;
  font-weight: 800;
}
.trust__note {
  margin-top: 16px;
  font-size: .82rem;
  color: var(--muted);
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fcd34d;
  border-radius: var(--radius);
  padding: 12px 16px;
  line-height: 1.55;
}
.trust__note span {
  color: #b45309;
  font-weight: 800;
  margin-right: 2px;
}

.trust__badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  justify-content: center;
  align-items: start;
}
.trust__badge {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.trust__badge img {
  width: 100%;
  max-width: 180px;
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(20, 14, 60, .18));
  transition: transform .25s ease;
}
.trust__badge:hover img { transform: translateY(-4px) scale(1.04); }
.trust__badge figcaption {
  font-family: 'Sora', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}
.trust__badge figcaption em {
  display: block;
  font-style: normal;
  font-size: .7rem;
  font-weight: 500;
  color: #b45309;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ============================================================
   Integrations — categorised "Plays well with your stack" board
   ============================================================ */
.integrations {
  padding: 110px 0;
  background: linear-gradient(180deg, white 0%, var(--bg-soft) 100%);
}
.integrations__board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.intgroup {
  position: relative;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  --tone: var(--brand);
}
.intgroup[data-tone="purple"] { --tone: #7c3aed; }
.intgroup[data-tone="pink"]   { --tone: #ec4899; }
.intgroup[data-tone="blue"]   { --tone: #3b82f6; }
.intgroup[data-tone="green"]  { --tone: #10b981; }

.intgroup::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 30%, white));
  opacity: .9;
}
.intgroup:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px -22px color-mix(in srgb, var(--tone) 35%, rgba(8, 5, 35, .25));
  border-color: color-mix(in srgb, var(--tone) 25%, var(--line));
}

.intgroup__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 22px;
}
.intgroup__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tone) 14%, white);
  color: var(--tone);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.intgroup__icon svg { width: 22px; height: 22px; }
.intgroup__head h3 {
  font-family: 'Sora', sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -.01em;
}
.intgroup__head p {
  margin: 0;
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.5;
}

.intgroup__logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.intgroup__logos li {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  text-align: center;
  min-height: 88px;
}
.intgroup__logos li:hover {
  background: white;
  border-color: color-mix(in srgb, var(--tone) 30%, var(--line));
  box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--tone) 25%, rgba(8, 5, 35, .25));
  transform: translateY(-2px);
}
.intgroup__logos img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}
.intgroup__logos span {
  font-size: .7rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0;
  line-height: 1.15;
}

.integrations__note {
  text-align: center;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: .9rem;
}

/* ============================================================
   CTA
   ============================================================ */
.cta {
  padding: 110px 0;
}
.cta__card {
  background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 50%, #831843 100%);
  border-radius: var(--radius-xl);
  padding: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.cta__card::before {
  content: "";
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(236, 72, 153, .35) 0%, transparent 70%);
  top: -200px; right: -200px;
  border-radius: 50%;
}
.cta__card::after {
  content: "";
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(124, 58, 237, .4) 0%, transparent 70%);
  bottom: -200px; left: -200px;
  border-radius: 50%;
}
.cta__copy { position: relative; z-index: 1; }
.cta__copy h2 { color: white; margin-bottom: 14px; }
.cta__copy p { color: rgba(255, 255, 255, .82); margin: 0; }

.cta__mascot {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55))
          drop-shadow(0 0 32px rgba(236, 72, 153, .35));
  animation: mascot-bob 4.5s ease-in-out infinite;
}
.cta__mascot--centre {
  width: 160px;
  bottom: 24px;
  left: 30%;
  transform: translateX(-50%);
}
.cta__mascot--side {
  width: 140px;
  top: 20px;
  right: 40%;
  opacity: .85;
  animation-delay: 1.2s;
}

.cta__form {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .9);
}
.field input,
.field select {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  color: white;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: .95rem;
  outline: none;
  transition: border-color .2s ease, background .2s ease;
}
.field input::placeholder { color: rgba(255, 255, 255, .5); }
.field input:focus,
.field select:focus {
  border-color: rgba(236, 72, 153, .8);
  background: rgba(255, 255, 255, .12);
}
.field select option { color: var(--ink); }

.form-note {
  font-size: .8rem;
  color: rgba(255, 255, 255, .65);
  text-align: center;
  margin: 6px 0 0;
}
.form-note a { color: white; text-decoration: underline; }
.form-success {
  text-align: center;
  background: rgba(16, 185, 129, .15);
  border: 1px solid rgba(16, 185, 129, .35);
  border-radius: var(--radius);
  padding: 12px;
  color: #d1fae5;
  margin: 0;
  font-size: .9rem;
}
.form-error {
  text-align: center;
  background: rgba(239, 68, 68, .14);
  border: 1px solid rgba(239, 68, 68, .38);
  border-radius: var(--radius);
  padding: 10px 14px;
  color: #fecaca;
  margin: 0;
  font-size: .88rem;
}
.form-error a { color: #fff; text-decoration: underline; }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: #0a0820;
  color: rgba(255, 255, 255, .72);
  padding: 80px 0 24px;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 60px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.footer__brand p { margin-top: 18px; max-width: 320px; font-size: .95rem; }

.footer__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.footer__links h4 {
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: white;
  margin: 0 0 16px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}
.footer__links ul { display: flex; flex-direction: column; gap: 10px; }
.footer__links a {
  color: rgba(255, 255, 255, .65);
  font-size: .92rem;
}
.footer__links a:hover { color: white; }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  flex-wrap: wrap;
  gap: 16px;
  font-size: .82rem;
}
.footer__social { display: flex; gap: 8px; }
.footer__social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: white;
  transition: background .2s ease;
}
.footer__social a:hover { background: var(--grad); color: white; }

/* ============================================================
   Editorial marquee — slow scrolling phrase river
   ============================================================ */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 28px 0;
  background:
    linear-gradient(180deg, var(--bg-soft) 0%, white 100%);
  border-block: 1px solid var(--line);
}
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--bg-soft), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--bg-soft), transparent); }
.marquee__track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: marquee-slide 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: 'Sora', 'Inter Tight', sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 32px;
  white-space: nowrap;
}
.marquee__item--ghost {
  color: transparent;
  -webkit-text-stroke: 1px rgba(124, 58, 237, .5);
  font-style: italic;
  font-family: 'Instrument Serif', 'Sora', serif;
  font-weight: 400;
}
.marquee__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grad);
  -webkit-text-stroke: 0;
}
@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   Mask-reveal headlines
   - Each <h*> with .mask-reveal contains <span class="mask-line">
   - Lines slide up from below their own clip mask on enter
   ============================================================ */
.mask-reveal {
  display: block;
}
.mask-reveal .mask-line {
  display: block;
  position: relative;
}
.mask-reveal .mask-line > * {
  display: inline-block;
}

/* When JS is ready, hide text inside masks and animate in on .is-visible.
   Without JS, content is visible by default (no FOUC, no broken hero). */
html.js-ready .mask-reveal .mask-line {
  overflow: hidden;
  padding-block: 0.22em;
  margin-block: -0.22em;
}
html.js-ready .mask-reveal .mask-line > * {
  transform: translateY(120%);
  transition: transform .95s cubic-bezier(.2, .9, .2, 1);
  will-change: transform;
}
html.js-ready .mask-reveal.is-visible .mask-line > * {
  transform: translateY(0);
}
html.js-ready .mask-reveal.is-visible .mask-line:nth-child(2) > * { transition-delay: .12s; }
html.js-ready .mask-reveal.is-visible .mask-line:nth-child(3) > * { transition-delay: .24s; }

/* ============================================================
   Reveal-on-scroll  (gated by html.js-ready so failed JS never hides content)
   ============================================================ */
html.js-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    transform 1s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
html.js-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   Critical / above-the-fold safety net
   --------------------------------------------------------------
   The hero copy and the hero stage (with all 7 mascots) must NEVER
   get stuck in the pre-reveal state. On some mobile loads the
   IntersectionObserver was firing late or measurements landed just
   outside the .95 * vh cutoff, leaving the stage invisible and the
   user staring at an empty lavender grid where the mascots should be.
   These elements have plenty of internal animation, so we can safely
   always-show them and let the reveal system handle below-the-fold
   only. The <h1> still gets its mask-reveal entrance; the stage's
   own mascot-bob / beams / platform-pulse animations handle its
   "coming alive" feel.
   ------------------------------------------------------------ */
html.js-ready .hero__copy.reveal,
html.js-ready .stage.reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Stagger children when the parent has [data-stagger] */
[data-stagger] > .reveal,
[data-stagger].reveal > * {
  transition-delay: 0s;
}
[data-stagger].is-visible > *:nth-child(1) { transition-delay: .04s; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: .14s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: .26s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: .38s; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: .50s; }

/* Hero parallax target — orbs and grid drift on --scrollY (set by JS) */
.orb { transform: translate3d(0, calc(var(--scrollY, 0) * -0.12px), 0); }
.grid-overlay { transform: translate3d(0, calc(var(--scrollY, 0) * 0.06px), 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .mask-reveal .mask-line > *,
  .mask-reveal .mask-line:not(:has(*)) { transform: none !important; transition: none !important; }
  .marquee__track { animation: none; }
  .orb,
  .stage__beams,
  .stage__lines,
  .stage__halo,
  .stage__sparkles span,
  .stage__caption-dot,
  .popcard,
  .popcard__pulse,
  .mascot,
  .mascot__platform,
  .mascot__ring,
  .outcomes__mascot,
  .cta__mascot { animation: none !important; }
  .btn--primary::before { display: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .stage {
    aspect-ratio: 4 / 3;
    max-width: 760px;
  }
  /* Tablet popcards: smaller, only show 2 (one per top-corner) */
  .popcard { width: 190px; padding: 11px 13px 9px; border-radius: 14px; }
  .popcard__num { font-size: 1.4rem; }
  .popcard__num em { font-size: .85rem; }
  .popcard__avatar { width: 22px; height: 22px; font-size: .58rem; }
  .popcard__agent { font-size: .68rem; }
  .popcard__charter { font-size: .54rem; }
  .popcard__live { font-size: .5rem; padding: 2px 6px; }
  .popcard__delta { font-size: .56rem; padding: 2px 6px; }
  .popcard__label { font-size: .66rem; }
  .popcard__spark { height: 20px; }
  .popcard--c { display: none; }
  .popcard--d { display: none; }

  /* Pull side mascots a bit closer to the edges so they don't crowd Laabu */
  .mascot--aura { --cx: 5%;  --scale: .68; }
  .mascot--jany { --cx: 21%; --scale: .8;  }
  .mascot--fina { --cx: 36%; --scale: .68; --cy: 12%; }
  .mascot--augy { --cx: 64%; --scale: .68; --cy: 12%; }
  .mascot--rivo { --cx: 79%; --scale: .8;  }
  .mascot--criz { --cx: 95%; --scale: .68; }

  .hero__proof { grid-template-columns: repeat(2, 1fr); }
  .hero__proof li:nth-child(2n) { border-right: 0; }

  .agents__grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: 1fr; }
  .workforce__pillars { grid-template-columns: 1fr; }

  .integrations__board { grid-template-columns: 1fr; }
  .intgroup__logos { grid-template-columns: repeat(5, 1fr); }

  /* Stack outcomes — float the mascot accent above the right edge of the stats card so it
     never clips into the copy column above. */
  .outcomes__grid { grid-template-columns: 1fr; gap: 80px; }
  .outcomes__stats { padding-top: 70px; }
  .outcomes__mascot { width: 130px; right: 0; top: -80px; }

  .trust__inner { grid-template-columns: 1fr; gap: 40px; }
  .trust__badges { grid-template-columns: repeat(3, 1fr); justify-content: stretch; }

  /* CTA: stack copy + form, hide both side mascots, drop a single Laabu thumbs-up
     accent inside the corner of the card */
  .cta__card { grid-template-columns: 1fr; padding: 40px; gap: 32px; }
  .cta__mascot--side { display: none; }
  .cta__mascot--centre {
    width: 90px;
    bottom: auto;
    top: 14px;
    right: 14px;
    left: auto;
    transform: none;
  }
  .footer__inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 760px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav__inner { height: 68px; }

  .nav__links.is-open,
  .nav__cta.is-open {
    display: flex;
    position: absolute;
    top: 68px; left: 0; right: 0;
    background: white;
    flex-direction: column;
    align-items: stretch;
    padding: 16px 24px;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
  }
  .nav__cta.is-open { top: auto; padding-top: 0; padding-bottom: 24px; }
  .nav__links.is-open a { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .nav__links.is-open a::after { display: none; }
  .nav__cta.is-open .btn { width: 100%; }
  .brand__mark { height: 30px; }

  .announce p { display: none; }
  .announce__inner { gap: 0; }

  .hero { padding: 40px 0 70px; }

  /* Stage scales down for phones — tighter aspect, smaller mascots, hide some chips */
  .stage {
    aspect-ratio: 5 / 6;
    border-radius: 22px;
  }
  .popcard { display: none; }
  .popcard--a {
    display: block;
    top: 14px; left: 12px;
    width: 168px;
    padding: 9px 11px 7px;
    border-radius: 12px;
  }
  .popcard--a .popcard__num { font-size: 1.15rem; }
  .popcard--a .popcard__num em { font-size: .72rem; }
  .popcard--a .popcard__avatar { width: 20px; height: 20px; font-size: .54rem; }
  .popcard--a .popcard__agent { font-size: .62rem; }
  .popcard--a .popcard__charter { font-size: .48rem; }
  .popcard--a .popcard__live { font-size: .44rem; padding: 1px 5px; }
  .popcard--a .popcard__delta { font-size: .5rem; padding: 1px 5px; }
  .popcard--a .popcard__label { font-size: .58rem; }
  .popcard--a .popcard__spark { height: 16px; }
  /* Hide the "LIVE • WORKFORCE ONLINE" caption on phones — the JANY
     popcard sits right on top of it and has its own LIVE pill already,
     so the caption was getting hidden AND is redundant info on mobile. */
  .stage__caption { display: none; }

  /* On phones, all 7 mascots get smaller and the inner pair sit slightly higher
     so they peek out clearly behind the centred Laabu — feels like a band photo. */
  .mascot {
    width: 18vw;
    min-width: 78px;
    max-width: 110px;
  }
  .mascot--centre {
    width: 30vw;
    min-width: 120px;
    max-width: 160px;
  }
  .mascot--aura { --cx: 7%;  --scale: .85; }
  .mascot--jany { --cx: 25%; --scale: .95; }
  .mascot--fina { --cx: 38%; --scale: .8;  --cy: 14%; }
  .mascot--augy { --cx: 62%; --scale: .8;  --cy: 14%; }
  .mascot--rivo { --cx: 75%; --scale: .95; }
  .mascot--criz { --cx: 93%; --scale: .85; }
  .mascot--centre { --cy: 8%; }

  .mascot__label { font-size: .52rem; padding: 3px 8px; bottom: -22px; }

  .hero__proof { gap: 14px; padding: 18px 0; }
  .hero__proof strong { font-size: 1.35rem; }
  .hero__proof span { font-size: .72rem; }

  .workforce, .agents, .outcomes, .testimonials, .trust, .integrations, .cta {
    padding: 70px 0;
  }

  .agents__grid { grid-template-columns: 1fr; }
  .outcomes__stats {
    grid-template-columns: 1fr;
    padding-top: 90px;
  }
  .outcomes__mascot { width: 110px; right: -8px; top: -10px; }

  /* Stack the integration board to single column with a 2-up logo grid */
  .integrations__board { grid-template-columns: 1fr; gap: 16px; }
  .intgroup { padding: 22px; }
  .intgroup__logos { grid-template-columns: repeat(3, 1fr); }
  .intgroup__head { margin-bottom: 18px; }
  .intgroup__head h3 { font-size: 1.02rem; }

  .trust__badges { grid-template-columns: 1fr; gap: 28px; }
  .trust__badge img { max-width: 200px; }

  .footer__links { grid-template-columns: repeat(2, 1fr); }

  /* ============================================================
     Request-access / CTA section — mobile treatment
     ------------------------------------------------------------
     On phones the corner mascot was clipping the H2 heading
     ("Hire your AI Wo..." was getting chopped off). Fix:
       1. Hide the decorative mascot entirely on phones (it's not
          critical content; the H2 + form are)
       2. Give the copy full card width
       3. Harden horizontal-overflow protection on card + section
          so nothing can ever push content past the viewport
       4. Tight, thumb-friendly form with iOS-zoom-proof input
          (font-size 16px, ≥ 44px tap targets)
     ============================================================ */
  .cta {
    padding: 56px 0 72px;
    overflow-x: clip;
  }

  .cta__card {
    padding: 26px 20px 22px;
    gap: 22px;
    border-radius: 22px;
    overflow: hidden;     /* was already set, re-assert on mobile */
    max-width: 100%;
  }
  /* Shrink the decorative orbs so they can never push layout width */
  .cta__card::before,
  .cta__card::after {
    width: 260px;
    height: 260px;
  }
  .cta__card::before { top: -100px; right: -100px; }
  .cta__card::after  { bottom: -100px; left: -100px; }

  /* Hide the corner mascot on phones — it was clipping the heading.
     The card already has plenty of visual accent from the gradient
     + orbs + glow, so this loss is purely additive to readability. */
  .cta__mascot--centre,
  .cta__mascot--side {
    display: none;
  }

  .cta__copy { padding-right: 0; }
  .cta__copy h2 {
    font-size: 1.55rem;
    line-height: 1.15;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
    word-break: break-word;      /* just in case of super-narrow viewports */
    overflow-wrap: break-word;
  }
  .cta__copy p {
    font-size: .95rem;
    line-height: 1.55;
    margin-bottom: 0;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .cta__copy .eyebrow {
    font-size: .62rem;
    padding: 5px 10px;
  }

  .cta__form {
    padding: 20px 16px;
    gap: 12px;
    border-radius: 16px;
    max-width: 100%;
    box-sizing: border-box;
  }
  .cta__form .field { min-width: 0; }
  .cta__form .field label { font-size: .78rem; }
  .cta__form .field input,
  .cta__form .field select {
    width: 100%;
    padding: 13px 14px;
    font-size: 16px;            /* prevents iOS Safari zoom-on-focus */
    border-radius: 10px;
    box-sizing: border-box;
    min-width: 0;               /* don't force min-content width */
  }
  .cta__form .btn--lg {
    padding: 15px 22px;
    font-size: 1rem;
    gap: 10px;
    width: 100%;
  }
  .form-note { font-size: .72rem; margin-top: 4px; }

  .trust-strip__items { gap: 10px 20px; }
}

/* Extra-small phones (≤ 380px): final squeeze so heading never clips */
@media (max-width: 380px) {
  .cta__card { padding: 22px 16px 18px; }
  .cta__copy h2 { font-size: 1.4rem; }
  .cta__form { padding: 18px 14px; }
}