:root {
  --blue: #050c43;
  --orange: #fe5000;
  --bg: #f4f8ff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", system-ui, sans-serif;
  background: var(--bg);
  color: var(--blue);
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  display: flex;
  flex-direction: column;      /* stack sections top-to-bottom */
  align-items: center;
  justify-content: flex-start;
  overflow-x: hidden;
}

/* --------------------------------------------------------------- Hero */
.hero {
  width: 100%;
  min-height: 100svh;          /* fill the first screen; self-center the stage */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 1440 × 810 design stage. All children are positioned on this grid and
   sized in cqw (1cqw = 1% of the stage width) so the whole composition
   scales as one unit, pixel-faithful to the Canva design at any width. */
.stage {
  position: relative;
  width: 100%;
  max-width: 1440px;
  aspect-ratio: 1440 / 810;
  container-type: inline-size;
  background: var(--bg);
}

/* ------------------------------------------------------------- Content */
.content {
  position: absolute;
  left: 5.625%;         /* x = 81 */
  top: 50%;
  transform: translateY(-50%);
  width: max-content;   /* auto shrink-to-fit is unreliable with nowrap children */
}

.tagline {
  font-style: italic;
  font-weight: 500;
  font-size: 2.083cqw;   /* 30px */
  line-height: 1;
  margin-bottom: 0.78cqw;
}

.headline {
  font-weight: 700;
  font-size: 3.472cqw;   /* 50px */
  line-height: 1.18;    /* → 84px baseline pitch */
  letter-spacing: normal;
}
.headline .line {
  display: block;
  white-space: nowrap;
}
.headline .line-2 {
  margin-left: 5.306cqw; /* indent 76.4px */
}
.headline .line-3 {
  font-weight: 400;      /* "e-commerce" is lighter */
}
.headline .line-3 .accent {
  color: var(--orange);
  font-weight: 700;      /* "AI" is bold */
}

/* -------------------------------------------------- Right CTA cluster */
.explore {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: inherit;
  font-size: 2.083cqw;   /* ~30px */
  font-weight: 500;
  color: var(--blue);
  text-decoration: none;
  line-height: 1;
  transition: color 0.2s ease;
}
.explore:hover {
  color: var(--orange);
}
.explore {
  left: 74.72%;   /* center x = 1076 */
  top: 76.30%;    /* baseline y ≈ 629 */
}

/* -------------------------------------------- Nav pill (Menu toggle) */
/* Closed: only "Menu" shows, in blue, centered at x≈1180.
   Open: a blue-outlined pill grows to the left revealing Team · Sign Up,
   and "Menu" turns orange italic. Matches pill-border.svg (stadium,
   3px #050c43 stroke). */
.nav-pill {
  position: absolute;
  top: 29.14%;              /* pill vertical center = Menu center (y ≈ 236) */
  right: 13.02%;            /* right edge fixed; keeps Menu ≈ x1180 when closed */
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  height: 3.78cqw;          /* 54.4px pill height from the design */
  padding: 0 1.94cqw;       /* ~28px side padding */
  border: 0.208cqw solid transparent;   /* 3px stroke, revealed on open */
  border-radius: 999px;
  transition: border-color 0.35s ease;
}
.nav-pill:hover,
.nav-pill:focus-within {
  border-color: var(--blue);
}

.nav-item {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  margin-right: 0;
  opacity: 0;
  font-family: inherit;
  font-size: 2.083cqw;      /* ~30px */
  font-weight: 500;
  line-height: 1.4;         /* room for descenders (e.g. "Sign Up") so
                                overflow:hidden doesn't clip the g */
  color: var(--blue);
  text-decoration: none;
  pointer-events: none;
  transition: max-width 0.4s ease, max-height 0.4s ease, opacity 0.35s ease,
              margin-right 0.4s ease, margin-top 0.4s ease, color 0.2s ease;
}
.nav-pill:hover .nav-item,
.nav-pill:focus-within .nav-item {
  max-width: 12cqw;
  margin-right: 2.9cqw;     /* spacing between items when open */
  opacity: 1;
  pointer-events: auto;
}
.nav-item:hover { color: var(--orange); }
/* Cascade the reveal from right (nearest Menu) outward to the left */
.nav-pill:hover .nav-item:nth-last-child(2),
.nav-pill:focus-within .nav-item:nth-last-child(2) { transition-delay: 0.05s; } /* Sign Up */
.nav-pill:hover .nav-item:nth-last-child(3),
.nav-pill:focus-within .nav-item:nth-last-child(3) { transition-delay: 0.12s; } /* Team */

.menu {
  font-family: inherit;
  font-size: 2.083cqw;      /* ~30px */
  font-weight: 500;
  color: var(--blue);
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.nav-pill:hover .menu,
.nav-pill:focus-within .menu {
  color: var(--orange);     /* #fe5000 when the pill is open */
  font-style: italic;
}

.cta-chevron {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 2.78cqw;    /* ~40px */
  height: 1.714cqw;  /* keep the 24:14.8 chevron ratio */
  color: #000;       /* chevrons are pure black in the design */
}
.chevron-up {
  left: 81.97%;
  top: 36.81%;
  animation: bob-up 1.8s ease-in-out infinite;
}
.chevron-down {
  left: 74.82%;
  top: 68.52%;
  animation: bob-down 1.8s ease-in-out infinite;
}
@keyframes bob-up {
  0%, 100% { transform: translate(-50%, -50%) rotate(180deg) translateY(0); }
  50%      { transform: translate(-50%, -50%) rotate(180deg) translateY(4px); }
}
@keyframes bob-down {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(4px); }
}

/* Crossed circles */
.circles {
  position: absolute;
  left: 78.39%;   /* bbox center x */
  top: 52.67%;    /* bbox center y */
  transform: translate(-50%, -50%);
  width: 10.528cqw; /* 151.6px */
  height: auto;
}

/* ============================================= SocialProof (desktop) */
/* 1:1 recreation of design/Social-proof-resting-full.png on a 1920×1080
   stage. Same technique as the hero: everything is placed on the design
   grid and typographic sizes are in cqw (1cqw = 1% of stage width) so the
   whole composition scales as one unit. */
.social-proof {
  position: relative;   /* hover zone for the cursor-following pill */
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ManyChat-style "Read now" pill that trails the cursor over this section.
   Position is driven entirely by transform (GPU) in script.js; here we only
   define the look and the fade. */
.cursor-pill {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  pointer-events: none;              /* never blocks clicks/hover underneath */
  will-change: transform, opacity;
  transform: translate3d(-200px, -200px, 0);  /* off-screen until first move; offset from cursor set in JS */
  opacity: 0;
  transition: opacity 0.25s ease;

  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 999px;
  white-space: nowrap;
  background: #fff;
  color: var(--blue);
  box-shadow: 0 8px 24px rgba(5, 12, 67, 0.14);
}
.cursor-pill.is-visible { opacity: 1; }
.sp-stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  aspect-ratio: 1920 / 1080;
  container-type: inline-size;
  background: var(--bg);
}

/* Full-canvas PNG exports — the vertical wordmark and the divider line. Each is
   already positioned on the grid, so it's just laid full-bleed with a
   transparent background. */
.sp-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Right-hand headline, recreated as live Poppins text. Each line is centred
   on its measured design position (centres from Social-proof-resting-full.png:
   x ≈ 1665/1920). 40px → 2.083cqw, 30px → 1.563cqw. */
.sp-line {
  position: absolute;
  left: 86.72%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-weight: 400;
  line-height: 1;
  color: var(--blue);
}
.sp-line--1 { top: 35.79%; font-size: 2.083cqw; }  /* Every week */
.sp-line--2 { top: 42.92%; font-size: 2.083cqw; }  /* a retailer */
.sp-line--3 { top: 50.79%; font-size: 2.083cqw; }  /* enters     */
.sp-line--4 { top: 57.78%; font-size: 1.563cqw; }  /* the (30px) */
.sp-line--5 { top: 64.40%; font-size: 2.083cqw; }  /* circle     */
.sp-accent { color: var(--orange); }

/* "Leading Merchants" pill, centred on its measured design position
   (x ≈ 831/1920, y ≈ 543/1080). Box: 630×73px → 32.81×3.80cqw; 2px #fe5000
   border → 0.104cqw. Resting: transparent fill, blue text.
   Hover: white fill, orange text, a slight scale-up. */
.sp-pill {
  position: absolute;
  left: 43.31%;
  top: 50.28%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32.81cqw;
  height: 3.80cqw;
  border: 0.104cqw solid var(--orange);
  border-radius: 999px;
  background: transparent;
  white-space: nowrap;
  font-family: inherit;
  font-size: 1.563cqw;   /* 30px */
  font-weight: 500;
  line-height: 1;
  color: var(--blue);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.sp-pill:hover {
  background: #fff;
  color: var(--orange);
  transform: translate(-50%, -50%) scale(1.04);
}

/* ---- Clicked/expanded state cross-fade -----------------------------------
   Resting elements (.sp-rest: pill + "Every week…" headline) fade out and the
   expanded elements (.sp-expand: brand boxes, mini-headlines, chevrons) fade in
   when the section gets .is-expanded. The wordmark + divider stay in both. */
.sp-expand {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.social-proof.is-expanded .sp-expand {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0s;
}
.sp-rest {
  transition: opacity 0.4s ease, visibility 0s;
}
.social-proof.is-expanded .sp-rest {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

/* Two mini-headlines, live Poppins text centred on their measured positions.
   Left "Top / retail / brands" (cx 430/1920); right "Top / decision / makers"
   (cx 1687/1920). 30px → 1.563cqw. Middle line is orange. */
.sp-mini-line {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 1.563cqw;   /* 30px */
  font-weight: 400;
  line-height: 1;
  color: var(--blue);
}
.sp-mini-2 { color: var(--orange); }
.sp-mini--left  .sp-mini-1 { left: 22.40%; top: 41.30%; }
.sp-mini--left  .sp-mini-2 { left: 22.40%; top: 48.38%; }
.sp-mini--left  .sp-mini-3 { left: 22.40%; top: 56.11%; }
.sp-mini--right .sp-mini-1 { left: 87.86%; top: 41.02%; }
.sp-mini--right .sp-mini-2 { left: 87.86%; top: 48.19%; }
.sp-mini--right .sp-mini-3 { left: 87.86%; top: 55.93%; }

/* ---- Per-card hover: swap brand logo → representative photo + role ---------
   Each card has an invisible hover zone matching its box (16.8% × 29.81%).
   It sits under the pointer-events:none image layers, so hover still reaches it
   (events pass through the transparent layers above). */
.sp-zone {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 16.8%;
  height: 29.81%;
}
.sp-zone-tl { left: 41.82%; top: 27.31%; }
.sp-zone-tr { left: 67.55%; top: 27.31%; }
.sp-zone-bl { left: 41.82%; top: 72.55%; }
.sp-zone-br { left: 67.55%; top: 72.55%; }

/* Hover content (photo box, photo, role) — hidden until its card is hovered. */
.sp-hov {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* Role labels — Avenir 20, centred on the card, at an equal gap below each
   card's (baked-in) dash. Note: Avenir renders on Apple devices; elsewhere it
   falls back to the system sans. */
.sp-role {
  position: absolute;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  font-family: "Avenir", "Avenir Next", system-ui, sans-serif;
  font-size: 1.042cqw;   /* 20px */
  font-weight: 400;
  line-height: 1.6;
  color: var(--blue);
  pointer-events: none;
}
.sp-role-tl { left: 41.82%; top: 34.9%; }
.sp-role-tr { left: 67.55%; top: 34.9%; }
.sp-role-bl { left: 41.82%; top: 79.9%; }
.sp-role-br { left: 67.55%; top: 80.6%; }

/* Reveal on hover (after the .is-expanded rules → wins on equal specificity). */
.sp-zone-tl:hover ~ .sp-hov-tl,
.sp-zone-tr:hover ~ .sp-hov-tr,
.sp-zone-bl:hover ~ .sp-hov-bl,
.sp-zone-br:hover ~ .sp-hov-br {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}
.sp-zone-tl:hover ~ .sp-logo-tl,
.sp-zone-tr:hover ~ .sp-logo-tr,
.sp-zone-bl:hover ~ .sp-logo-bl,
.sp-zone-br:hover ~ .sp-logo-br {
  opacity: 0;
}

/* Back navigation (expanded state). The chevron is a full-canvas PNG (chevron
   at ~10.8%/94%) gently bobbing left↔right; the "back" button sits to its right,
   its hit area padded left to also cover the chevron. Click → resting state. */
.sp-back-chevron {
  animation: back-bob 1.6s ease-in-out infinite;
}
@keyframes back-bob {
  0%, 100% { transform: translateX(2px); }
  50%      { transform: translateX(-4px); }
}
.sp-back {
  position: absolute;
  left: 10.2%;
  top: 94.07%;
  transform: translateY(-50%);
  padding: 0.4cqw 0.5cqw 0.4cqw 2.6cqw;   /* left pad clears the chevron */
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 1.042cqw;   /* 20px */
  font-weight: 500;
  line-height: 1;
  color: var(--blue);
  cursor: pointer;
  transition: color 0.2s ease;
}
.sp-back:hover { color: var(--orange); }

/* The cursor-following pill is only for the initial (resting) state. */
.social-proof.is-expanded .cursor-pill { display: none; }

/* ------------------------------------------------------- Small screens */
@media (max-width: 700px) {
  body { align-items: flex-start; }
  /* Desktop-only for now. */
  .social-proof { display: none; }
  .hero { min-height: auto; }
  .stage {
    aspect-ratio: auto;
    min-height: 100svh;
    container-type: normal;
  }
  /* Reflow to a single readable column on phones */
  .content {
    position: static;
    transform: none;
    padding: 12vw 6vw 0;
  }
  .tagline { font-size: 5.5vw; margin-bottom: 2vw; }
  .headline { font-size: 10vw; line-height: 1.15; }
  .headline .line-2 { margin-left: 9vw; }

  /* Narrow screens: the pill drops DOWN as a vertical dropdown.
     Menu stays on top; Team · Sign Up unfold beneath it. */
  .nav-pill {
    top: 8vw; right: 6vw; transform: none;
    flex-direction: column; align-items: flex-end;
    height: auto; padding: 2.4vw 5vw; border-width: 2px;
    border-radius: 7vw;
  }
  .nav-item, .menu { font-size: 4.5vw; }
  .menu { order: -1; }              /* Menu sits at the top */
  .nav-item {
    max-width: none;                /* width isn't the constraint here */
    max-height: 0;
    margin-right: 0; margin-top: 0;
  }
  .nav-pill:hover .nav-item,
  .nav-pill:focus-within .nav-item {
    max-width: none;
    max-height: 12vw;
    margin-right: 0; margin-top: 3.2vw;
  }
  .chevron-up { left: auto; right: 6vw; top: 15vw; transform: rotate(180deg); width: 6vw; }

  .circles {
    left: 50%; top: auto; bottom: 22vw;
    transform: translateX(-50%); width: 34vw;
  }
  .explore {
    left: 50%; top: auto; bottom: 8vw;
    transform: translateX(-50%); font-size: 4.5vw;
  }
  .chevron-down {
    left: 50%; top: auto; bottom: 14vw;
    transform: translateX(-50%); width: 7vw;
  }
  @keyframes bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(4px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .chevron-down, .chevron-up, .sp-back-chevron { animation: none; }
  .cursor-pill { display: none; }
  * { transition-duration: 0.01ms !important; }
}