@font-face {
  font-family: 'Advercase';
  src: url('fonts/Advercase-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Advercase';
  src: url('fonts/Advercase-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #0A1830;
  --navy-mid: #12224a;
  --navy-light-dark: #1a2340;
  --navy-solid: #0F1E3D;
  --blue: #2F6FED;
  --blue-hover: #1a4fc4;
  --light-blue: #9db8f5;
  --pink: #f4a3be;
  --cream: #F7F5F0;
  --cream2: #F1EEE7;
  --muted: #5b6472;
  --footer-muted: #8a92a0;
  --whatsapp: #25D366;
  --hero-gradient: linear-gradient(160deg, #0A1830 0%, #12224a 55%, #1a2340 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: 'Instrument Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }
::selection { background: var(--blue); color: #fff; }
img { max-width: 100%; display: block; }
ul { margin: 0; }

@keyframes floatBlobA {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  22%  { transform: translate(-100px, 70px) scale(1.14) rotate(16deg); }
  46%  { transform: translate(50px, 130px) scale(0.9) rotate(-11deg); }
  68%  { transform: translate(110px, 10px) scale(1.1) rotate(13deg); }
  86%  { transform: translate(-55px, -65px) scale(0.94) rotate(-7deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}
@keyframes floatBlobB {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  25%  { transform: translate(90px, -70px) scale(1.16) rotate(-14deg); }
  50%  { transform: translate(-65px, -110px) scale(0.88) rotate(11deg); }
  75%  { transform: translate(-115px, 45px) scale(1.08) rotate(-15deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  will-change: transform;
}
.blob--pink {
  width: 640px; height: 640px;
  left: 62%; top: -40px;
  background: radial-gradient(circle, rgba(244,163,190,0.55), transparent 70%);
  animation: floatBlobA 17s ease-in-out infinite;
}
/* No negative animation-delay here on purpose. The blobs' ambient float is
   frozen during a page transition and resumed just after; a negative delay
   would make it resume 9s deep into its cycle — i.e. jump straight to a
   mid-motion offset — which showed up as this blob snapping after landing.
   Starting at 0% (its base position) makes the resume seamless. The two
   blobs stay visually out of step via different keyframes and durations. */
.blob--blue {
  width: 560px; height: 760px;
  left: -140px; top: 480px;
  background: radial-gradient(circle, rgba(63,122,235,0.55), transparent 70%);
  animation: floatBlobB 20s ease-in-out infinite;
}
.contact-card__blob { animation-duration: 19s; }

/* On the Online Store page, the two hero blobs sit mirrored left-right
   (pink top-left instead of top-right, blue bottom-right instead of
   bottom-left) — same vertical zone per blob, horizontal side swapped —
   so the page-swipe transition can visibly relocate them from one side
   to the other instead of sliding off and snapping back. */
.hero-wrap > .blob--pink.blob--mirror { left: auto; right: 62%; }
.hero-wrap > .blob--blue.blob--mirror { left: auto; right: -140px; }

/* ---------- Buttons / pills ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 14px;
  padding: 11px 22px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s cubic-bezier(.16,1,.3,1), background-color 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--white { background: #fff; color: var(--navy); }
.btn--white:hover { background: #eee; color: var(--navy); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-mid); color: #fff; }
.btn--ghost {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
}
.btn--ghost:hover { background: rgba(255,255,255,0.16); color: #fff; }
.btn--lg { padding: 15px 30px; font-size: 16px; }
.btn--block { display: flex; width: 100%; padding: 13px; font-size: 15px; }

.pill { border-radius: 100px; }
.pill--eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  margin-bottom: 28px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  padding: 9px 16px;
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.badge:hover { background: rgba(255,255,255,0.12); color: #fff; }
.badge--dark { background: var(--navy); border: none; padding: 9px 14px; font-size: 12.5px; }
.badge--dark:hover { background: var(--navy-mid); }

.whatsapp-dot {
  width: 20px; height: 20px;
  border-radius: 50% 50% 50% 4px;
  background: var(--whatsapp);
  display: inline-block;
  flex-shrink: 0;
}

/* ---------- Nav + Hero shared background ---------- */
.hero-wrap {
  position: relative;
  overflow: hidden; /* fallback for older browsers */
  overflow: clip;   /* clips blobs without breaking position:sticky */
  background: var(--hero-gradient);
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 56px;
  background: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.nav.is-scrolled {
  background: rgba(10, 24, 48, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
}
.nav__brand:hover { color: #fff; }
.nav__logo-mark { display: block; flex-shrink: 0; }
.nav__wordmark {
  font-family: 'Advercase', 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.5px;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav__links a {
  color: rgba(255,255,255,0.85);
  font-size: 15px;
  font-weight: 500;
}
.nav__links a:hover { color: #fff; }
.nav__cta-mobile { display: none; }
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  margin: 0 auto;
  transition: transform .25s ease, opacity .25s ease;
}
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Product toggle (Accounting / Online Store) ---------- */
.product-toggle-wrap {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  padding: 18px 24px 0;
}
.product-toggle {
  display: inline-flex;
  gap: 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 100px;
  padding: 4px;
}
.product-toggle__item {
  padding: 8px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.product-toggle__item:hover { color: #fff; }
.product-toggle__item.is-active { background: #fff; color: var(--navy); }
.product-toggle__item.is-active:hover { color: var(--navy); }
.product-toggle__brand { opacity: 0.75; }
.product-toggle__item.is-active .product-toggle__brand { opacity: 0.55; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 56px 56px 0;
}
.hero__inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  z-index: 2;
}
.hero__title {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: 60px;
  line-height: 1.08;
  color: #fff;
  margin: 0 0 22px;
  letter-spacing: -1.5px;
}
.accent-light { color: var(--light-blue); }
.hero__subhead {
  font-size: 19px;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  max-width: 620px;
  margin: 0 auto 36px;
}
.hero__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.hero__stores {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 56px;
}

/* ---------- Carousel ---------- */
.carousel {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  padding-bottom: 100px;
}
.carousel__card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 32px;
  padding: 8px;
  overflow: hidden;
  backdrop-filter: blur(6px);
}
.carousel__viewport {
  overflow: hidden;
  border-radius: 26px;
}
.carousel__track {
  display: flex;
  transition: transform 0.5s cubic-bezier(.65,0,.35,1);
}
.carousel__slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 40px;
  padding: 52px 56px;
}
.carousel__tag {
  color: var(--pink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.carousel__pain {
  font-family: 'Instrument Sans', sans-serif;
  font-style: italic;
  font-size: 30px;
  line-height: 1.35;
  color: #fff;
  margin-bottom: 18px;
}
.carousel__solution {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
}
.carousel__image { display: flex; justify-content: center; }
.carousel__image img {
  width: 230px;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5));
}
.carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.carousel__dots button {
  height: 8px;
  border-radius: 100px;
  background: rgba(255,255,255,0.3);
  border: none;
  cursor: pointer;
  padding: 0;
  width: 8px;
  transition: all .3s;
}
.carousel__dots button.is-active {
  width: 28px;
  background: #fff;
}

/* ---------- Sections (generic) ---------- */
.section {
  padding: 120px 56px;
  max-width: 1200px;
  margin: 0 auto;
}
.section__head {
  max-width: 600px;
  margin: 0 auto 64px;
  text-align: center;
}
.section__lead {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.6;
}
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.eyebrow--blue { color: var(--blue); }
.eyebrow--light { color: var(--light-blue); }
.h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 44px;
  font-weight: 400;
  color: var(--navy);
  margin: 0 0 16px;
  line-height: 1.15;
}
.h2--white { color: #fff; margin-bottom: 0; }

.grid { display: grid; gap: 24px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Feature cards ---------- */
.card {
  background: #fff;
  border: 1px solid rgba(10,24,48,0.08);
  border-radius: 20px;
  padding: 32px 26px;
  transition: transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(10,24,48,0.08);
  border-color: rgba(10,24,48,0.14);
}
.card h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 10px; }
.card p { font-size: 14.5px; color: var(--muted); line-height: 1.55; margin: 0; }
.mark { width: 44px; height: 44px; margin-bottom: 22px; }
.mark--square { border-radius: 12px; background: var(--navy); }

/* Feature-card tile: gradient-filled square with an INVERTED gradient border,
   both running the bottom-left -> top-right axis so they cross over each
   other. Painted in one background shorthand: padding-box for the fill,
   border-box for the border, over a transparent border. Plus a flat drop
   shadow, a fine noise texture, and a white lucide glyph centred on top. */
.mark--tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 56px tile as specced. The 10px bottom margin is deliberate: 56 + 10
     equals the 44 + 22 of the other three marks, so this card's title and
     body stay aligned with its neighbours despite the larger icon. */
  width: 56px;
  height: 56px;
  margin-bottom: 10px;
  border-radius: 12px;
  /* Transparent border so the border-box gradient reads as a frame. The
     fill runs blue (bottom-left) -> light blue (top-right) on the padding
     box; the border runs the SAME axis with the colours inverted, white ->
     blue, so the two gradients cross over each other. */
  border: 4px solid transparent;
  background:
    linear-gradient(to top right, #1e4fd8, #a8c4fc) padding-box,
    linear-gradient(to top right, #ffffff, #5b8def) border-box;
  box-shadow: 0 4px 4px rgba(10, 24, 48, 0.25);
}
/* Grain over the WHOLE tile, border included — the negative inset (equal to
   the border width) pushes this out from the padding box to the border box. */
.mark--tile::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.28;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.mark__glyph {
  position: relative;
  width: 24px;
  height: 24px;
  color: #fff;
}

/* Untiled variant: no square, no border, no grain — the gradients are carried
   by the glyph itself (fill bounded by the icon shape, plus a gradient stroke,
   defined inline in the SVG). Sized to the full 56px mark footprint since it
   has no container of its own, with the same 10px margin so this card's title
   stays on the same baseline as the tiled ones. */
.mark--astroid {
  /* display:block matters — as an inline SVG it would sit on the text
     baseline and pick up ~4px of descender space beneath it, pushing this
     card's title out of line with the other three. */
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 10px;
  overflow: visible;
  /* drop-shadow(), not box-shadow — box-shadow would trace this SVG's square
     box, whereas drop-shadow follows the rendered alpha, so the shadow takes
     the astroid's actual star silhouette. Same offset/blur/colour as the
     tiles' box-shadow so both read as lit from the same source. */
  filter: drop-shadow(0 4px 4px rgba(10, 24, 48, 0.25));
}
.mark--circle { border-radius: 100px; background: var(--blue); }
.mark--diamond { border-radius: 12px; transform: rotate(45deg); background: var(--pink); }
.mark--outline { border-radius: 12px; border: 3px solid var(--navy); }

/* ---------- How it works ---------- */
.section--navy {
  max-width: none;
  padding: 100px 56px;
  background: var(--navy-solid);
}
.steps {
  max-width: 1000px;
  margin: 72px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
}
.steps__line {
  position: absolute;
  top: 24px;
  left: 16%;
  right: 16%;
  height: 1px;
  background: rgba(255,255,255,0.15);
}
.step { position: relative; text-align: center; }
.step__num {
  width: 48px; height: 48px;
  border-radius: 100px;
  background: #fff;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 20px;
  margin: 0 auto 24px;
}
.step h3 { color: #fff; font-size: 18px; font-weight: 700; margin: 0 0 10px; }
.step p { color: rgba(255,255,255,0.62); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* ---------- Use cases ---------- */
.tile {
  background: #fff;
  border: 1px solid rgba(10,24,48,0.08);
  border-radius: 16px;
  padding: 26px 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  transition: transform 0.3s cubic-bezier(.16,1,.3,1), box-shadow 0.3s ease;
}
.tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(10,24,48,0.08);
}
.usecase-grid { gap: 16px; }

/* ---------- Pricing ---------- */
.section--cream2 { max-width: none; background: var(--cream2); }
.pricing {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.price-card {
  background: #fff;
  border: 1px solid rgba(10,24,48,0.1);
  border-radius: 24px;
  padding: 40px;
  transition: transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.35s ease;
}
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(10,24,48,0.1);
}
.price-card--dark { background: var(--navy); color: #fff; border: none; }
.price-card__tier {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.price-card--dark .price-card__tier { color: var(--light-blue); }
.price-card__price {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 40px;
  color: var(--navy);
  margin-bottom: 20px;
}
.price-card--dark .price-card__price { color: #fff; }
.price-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.price-card__list li {
  font-size: 14.5px;
  color: #3a4150;
  padding-left: 22px;
  position: relative;
}
.price-card__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--blue);
  font-weight: 700;
}
.price-card--dark .price-card__list li { color: rgba(255,255,255,0.8); }
.price-card--dark .price-card__list li::before { color: var(--light-blue); }

/* ---------- Contact ---------- */
.contact-card {
  background: linear-gradient(135deg, var(--navy), var(--navy-light-dark));
  border-radius: 32px;
  padding: 64px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.contact-card__blob {
  width: 420px; height: 420px;
  right: -100px; top: -140px; left: auto;
  background: radial-gradient(circle, rgba(244,163,190,0.4), transparent 70%);
  filter: blur(80px);
}
.contact-card__left { position: relative; z-index: 2; }
.contact-card__left h2 { font-size: 38px; margin-bottom: 14px; }
.contact-card__left p {
  color: rgba(255,255,255,0.68);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 28px;
}
.contact-card__right {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-card__label {
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.socials { display: flex; gap: 12px; }
.socials a {
  width: 44px; height: 44px;
  border-radius: 100px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.socials a:hover { background: rgba(255,255,255,0.16); color: #fff; }
.contact-card__email { color: rgba(255,255,255,0.5); font-size: 14px; margin-top: 10px; }

/* ---------- Footer ---------- */
.footer {
  padding: 64px 56px 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(10,24,48,0.1);
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  margin-bottom: 14px;
}
.footer__logo-mark { display: block; flex-shrink: 0; }
.footer__wordmark {
  font-family: 'Advercase', 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
}
.footer__grid > div > p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 260px;
  margin: 0 0 20px;
}
.footer__stores { display: flex; gap: 10px; flex-wrap: wrap; }
.footer__heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.footer__grid > div { display: flex; flex-direction: column; }
.footer__grid > div > a {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 10px;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  font-size: 13px;
  color: var(--footer-muted);
  flex-wrap: wrap;
  gap: 12px;
}
.footer__legal { display: flex; gap: 16px; }
.footer__legal a { color: var(--footer-muted); font-size: 13px; }

/* ---------- Floating WhatsApp ---------- */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--navy);
  color: #fff;
  padding: 14px 20px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(10,24,48,0.35);
}
.whatsapp-float:hover { color: #fff; background: var(--navy-mid); }

/* ================= PAGE SWIPE TRANSITION (Finance <-> Online Store) ================= */
/* Native cross-document View Transitions — supported in Chromium browsers,
   ignored elsewhere (plain navigation still works everywhere).
   Only the hero text and the two hero blobs are pulled into their own
   named groups and animated; everything else (nav, rest of page) is
   excluded from the root snapshot so it never animates. */
@view-transition {
  navigation: auto;
}

/* Everything that isn't the hero text or the two blobs swaps INSTANTLY —
   no fade, no box morph. Previously root cross-faded over 0.5s while its
   group box also morphed between the two pages' different total heights,
   which scaled the incoming content inside that box and let it settle at
   the end — that "settles, flicks back, then lands" glitch. Hiding the old
   snapshot outright means the new page is simply there from frame one. */
::view-transition-group(root) { animation: none; }
::view-transition-old(root) { animation: none; opacity: 0; }
::view-transition-new(root) { animation: none; opacity: 1; }

/* The UA clips each group's box to its own bounds by default (overflow:
   hidden), so the hero-text slide gets cut off at that small box edge
   instead of clearing the viewport. Let it paint outside its bounds.
   The group ALSO runs an implicit box morph between the two pages'
   differently-sized hero text blocks, and the old/new snapshots stretch
   to fill that morphing box — the distortion that read as the text
   "switching back" right as it settled. Pin the box (animation: none) so
   only our own slide keyframes move anything. */
::view-transition-group(hero-content) {
  overflow: visible;
  animation: none;
}

/* Keep each snapshot at its natural captured height instead of stretching
   it to the group box, so neither the outgoing nor incoming text squashes. */
::view-transition-old(hero-content),
::view-transition-new(hero-content) {
  height: auto;
}

/* The UA isolates each image-pair and blends the layers with `plus-lighter`,
   which ADDS light where old and new overlap. That's built for a cross-fade
   (combined alpha stays ~1); we don't cross-fade, so it was pure extra
   brightness. Drop the isolation and blend normally. */
::view-transition-image-pair(root),
::view-transition-image-pair(hero-content),
::view-transition-image-pair(blob-pink-hero),
::view-transition-image-pair(blob-blue-hero) {
  isolation: auto;
}
::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(hero-content),
::view-transition-new(hero-content),
::view-transition-old(blob-pink-hero),
::view-transition-new(blob-pink-hero),
::view-transition-old(blob-blue-hero),
::view-transition-new(blob-blue-hero) {
  mix-blend-mode: normal;
}

/* Named groups pulled out of the root snapshot */
.hero__inner { view-transition-name: hero-content; }
.hero-wrap > .blob--pink { view-transition-name: blob-pink-hero; }
.hero-wrap > .blob--blue { view-transition-name: blob-blue-hero; }

/* Hero text: swipes in the direction of travel, synced to the same 0.5s
   window as the root fade so nothing lingers after everything else settles. */
html.dir-fwd::view-transition-old(hero-content) {
  animation: mw-push-out-left 0.5s cubic-bezier(.65,0,.35,1) both;
}
html.dir-fwd::view-transition-new(hero-content) {
  animation: mw-push-in-right 0.5s cubic-bezier(.65,0,.35,1) both;
}
html.dir-back::view-transition-old(hero-content) {
  animation: mw-push-out-right 0.5s cubic-bezier(.65,0,.35,1) both;
}
html.dir-back::view-transition-new(hero-content) {
  animation: mw-push-in-left 0.5s cubic-bezier(.65,0,.35,1) both;
}
@keyframes mw-push-out-left { to { transform: translateX(-120vw); } }
@keyframes mw-push-in-right { from { transform: translateX(120vw); } to { transform: translateX(0); } }
@keyframes mw-push-out-right { to { transform: translateX(120vw); } }
@keyframes mw-push-in-left { from { transform: translateX(-120vw); } to { transform: translateX(0); } }

/* Blobs: pure position change, nothing else.
   These are semi-transparent radial gradients (alpha .55). Painting BOTH
   the old and the new snapshot at once — as we did before — meant that
   mid-transition the pair spanned a wider area (looked like it expanded)
   and composited to ~.8 alpha where they overlapped (looked brighter),
   then collapsed back to a single blob at the end (contract + dim). That
   is exactly the expand/brighten/contract/dim artifact.
   Fix: paint only ONE snapshot. It's the same blob either way, so we hide
   the outgoing copy and let the group's own morph carry the incoming one
   from the old position to the new one. One object, moving. Nothing else
   changes — no opacity animation, no scale, no cross-fade. */
::view-transition-group(blob-pink-hero),
::view-transition-group(blob-blue-hero) {
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
::view-transition-old(blob-pink-hero),
::view-transition-old(blob-blue-hero) {
  animation: none;
  opacity: 0;
}
::view-transition-new(blob-pink-hero),
::view-transition-new(blob-blue-hero) {
  animation: none;
  opacity: 1;
}

/* The live blobs run their own infinite ambient float, which includes
   scale() steps. If it is still running when a snapshot is taken, that
   snapshot is captured mid-scale — so the outgoing copy is a different
   SIZE than the incoming one and the group morph resizes between them,
   adding an unwanted grow/shrink on top of the move.
   Freezing has to happen on BOTH sides: the arriving page via the
   dir-* class below, and — critically — the departing page too, which
   script.js does on `pageswap` before its snapshot is taken. With both
   frozen at the identical base state, the only difference left between
   the two snapshots is position. */
html.dir-fwd .hero-wrap > .blob--pink,
html.dir-fwd .hero-wrap > .blob--blue,
html.dir-back .hero-wrap > .blob--pink,
html.dir-back .hero-wrap > .blob--blue,
html.mw-vt-freeze .hero-wrap > .blob--pink,
html.mw-vt-freeze .hero-wrap > .blob--blue {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  html.dir-fwd::view-transition-old(hero-content),
  html.dir-fwd::view-transition-new(hero-content),
  html.dir-back::view-transition-old(hero-content),
  html.dir-back::view-transition-new(hero-content) {
    animation: none;
  }
  ::view-transition-group(blob-pink-hero),
  ::view-transition-group(blob-blue-hero) {
    animation-duration: 1ms;
  }
}

/* ================= SCROLL REVEAL ================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);
}
[data-reveal-group].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
/* staggered entrance for grid/list children */
[data-reveal-group] > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group] > *:nth-child(2) { transition-delay: 90ms; }
[data-reveal-group] > *:nth-child(3) { transition-delay: 180ms; }
[data-reveal-group] > *:nth-child(4) { transition-delay: 270ms; }
[data-reveal-group] > *:nth-child(5) { transition-delay: 360ms; }
[data-reveal-group] > *:nth-child(6) { transition-delay: 450ms; }
[data-reveal-group] > *:nth-child(7) { transition-delay: 540ms; }
[data-reveal-group] > *:nth-child(8) { transition-delay: 630ms; }
/* the connecting line in "How it works" is decorative, not a reveal target */
.steps__line { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blob { animation: none !important; }
  [data-reveal], [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 980px) {
  .nav { padding: 18px 24px; }
  .nav__links {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--navy-mid);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    z-index: 49;
  }
  .nav__links.is-open { max-height: 420px; }
  .nav__links a {
    width: 100%;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav__cta-mobile { display: flex; margin: 16px 24px; width: calc(100% - 48px); }
  .nav__cta-desktop { display: none; }
  .nav__toggle { display: flex; }

  .hero { padding: 40px 24px 0; }
  .hero__title { font-size: 42px; letter-spacing: -1px; }
  .hero__subhead { font-size: 17px; }

  .carousel__slide {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 36px 28px;
    gap: 24px;
  }
  .carousel__image { order: -1; }
  .carousel__image img { width: 170px; }
  .carousel__pain { font-size: 24px; }

  .section, .section--navy, .section--cream2 { padding: 80px 24px; }
  .h2 { font-size: 32px; }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: 48px; }
  .steps__line { display: none; }

  .pricing { grid-template-columns: 1fr; }

  .contact-card {
    grid-template-columns: 1fr;
    padding: 40px 28px;
    text-align: left;
  }
  .contact-card__right { align-items: flex-start; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .hero__title { font-size: 34px; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }
  .hero__stores { flex-direction: column; align-items: stretch; }
  .hero__stores .badge { justify-content: center; }

  .grid--4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .whatsapp-float__label { display: none; }
  .whatsapp-float { padding: 14px; }

  .product-toggle-wrap { padding-top: 14px; }
  .product-toggle__item { padding: 7px 14px; font-size: 12px; }
  .product-toggle__brand { display: none; }
}