/* ============================================================
   Stur Africa — Marketing site layout
   Uses tokens from colors_and_type.css
   ============================================================ */

/* Smooth anchor scrolling + account for the fixed 58px navbar
   (top 24px + 58px height = ~82px) so hash jumps land cleanly. */
html { scroll-behavior: smooth; background-color: var(--pastel-lilac); /* hero gradient start — covers iOS status bar area */ }
:target,
section[id] { scroll-margin-top: 110px; }

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

section {
  padding: 100px 24px;
}

.eyebrow-kicker {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1.4px;
  color: var(--ink-40);
  text-transform: uppercase;
  margin: 0 0 20px;
}

.section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  line-height: 54px;
  letter-spacing: -2.44px;
  color: var(--fg);
  margin: 0 0 60px;
  max-width: 720px;
  text-wrap: balance;
}

/* ------------ Buttons ------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  border: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.16px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-std),
              transform var(--dur-fast) var(--ease-std),
              box-shadow var(--dur-fast) var(--ease-std),
              color var(--dur-fast) var(--ease-std);
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover { background: var(--grey-near-black); transform: translateY(-1px); color: var(--paper); }
.btn-secondary {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--grey-300);
}
.btn-secondary:hover { background: var(--grey-50); }
.btn-neutral {
  background: var(--grey-100);
  color: var(--ink);
}
.btn-neutral:hover { background: var(--grey-200); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink-05); }

/* ------------ Navbar (glass pill) ------------ */
.navbar {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 48px), 760px);
  height: 58px;
  border-radius: 3000px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-nav);
  display: flex;
  align-items: center;
  padding: 6px 8px 6px 28px;
  gap: 28px;
  font-family: var(--font-body);
  z-index: var(--z-sticky);
}
.navbar .brand { display: flex; align-items: center; color: var(--stur-purple); }
.navbar .brand svg { height: 20px; width: auto; display: block; }
.navbar .links {
  display: flex;
  gap: 24px;
  flex: 1;
  align-items: center;
}
.navbar .links a {
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
}
.navbar .links a:hover { color: var(--stur-purple); }
.navbar .cta {
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  padding: 9px 16px 9px 18px;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.navbar .cta:hover { color: var(--paper); }
.navbar .cta .store-icons { display: flex; align-items: center; gap: 8px; }
.navbar .cta .store-icons img { height: 16px; width: auto; display: block; }
.navbar .cta .store-icons .apple { height: 18px; }

@media (max-width: 720px) {
  .navbar .links { display: none; }
  .navbar { width: calc(100% - 32px); top: 16px; padding: 6px 6px 6px 18px; }
}

/* ================================================================
   MOBILE NAVBAR (figma 22:5192)
   Glass pill — position: fixed, 20px from all sides.
   Logo left, "Get the app" + hamburger right.
   Desktop: hidden. Mobile (≤600px): visible, desktop nav hidden.
   ================================================================ */
.mobile-nav,
.mobile-menu,
.mobile-menu-overlay {
  display: none; /* hidden on desktop */
}

@media (max-width: 600px) {
  /* Hide desktop nav */
  .navbar { display: none; }

  /* Mobile pill nav */
  .mobile-nav {
    display: flex;
    position: fixed;
    top: 20px; /* fallback */
    top: calc(env(safe-area-inset-top) + 12px);
    left: 16px;
    right: 16px;
    z-index: var(--z-nav);
    height: 55px;
    box-sizing: border-box;
    padding: 12px 20px;
    align-items: center;
    justify-content: space-between;

    /* Glass effect */
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20000px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }

  /* Logo — 63×17.682 per Figma */
  .mobile-nav-brand {
    display: flex;
    align-items: center;
    color: var(--stur-purple);
    text-decoration: none;
    flex-shrink: 0;
  }
  .mobile-nav-brand svg {
    width: 63px;
    height: 17.682px;
    display: block;
  }

  /* Right-side actions */
  .mobile-nav-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-shrink: 0;
  }

  /* "Get the app" text — Inter SemiBold 16/24 0.16 */
  .mobile-nav-cta {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.16px;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
  }

  /* Hamburger / close button */
  .mobile-nav-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    /* size to the wider hamburger so layout stays stable */
    width: 19.306px;
    height: 14px;
  }
  .mobile-nav-hamburger svg { display: block; }
  .mobile-nav-hamburger .icon-hamburger { width: 19.306px; height: 14px; }
  .mobile-nav-hamburger .icon-close    { width: 13.653px; height: 13.653px; display: none; }

  /* Open state: swap icons, add smooth icon transition */
  .mobile-nav.is-open .icon-hamburger { display: none; }
  .mobile-nav.is-open .icon-close     { display: block; }

  /* Over a dark section (FAQ / Footer) — boost opacity so logo stays readable */
  .mobile-nav.is-over-dark {
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16);
    border-color: rgba(255, 255, 255, 0.7);
  }

  /* ---- Overlay — blurred dark scrim behind the dropdown ---- */
  .mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .mobile-menu-overlay.is-open { display: block; }

  /* ---- Mobile Menu Dropdown (figma 1:4263) ----
     White card, 381px, 20px border-radius, 20px padding.
     Links top, two CTAs bottom (justify-content: space-between). */
  .mobile-menu {
    display: none;
    position: fixed;
    top: 87px; /* fallback */
    top: calc(env(safe-area-inset-top) + 79px); /* safe-area + nav-offset(12) + nav-height(55) + gap(12) */
    left: 16px;
    right: 16px;
    z-index: var(--z-menu);
    background: var(--paper);
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;
    height: 381px;
    flex-direction: column;
    justify-content: space-between;
  }
  .mobile-menu.is-open {
    display: flex;
  }

  .mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .mobile-menu-links a {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.16px;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
  }

  .mobile-menu-ctas {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
  }
  .mmcta-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    height: 50px;
    background: var(--ink);
    border-radius: 2000px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.16px;
    color: var(--paper);
    text-decoration: none;
  }
  .mmcta-download:hover { color: var(--paper); }
  .mmcta-stores {
    display: flex;
    align-items: center;
    gap: 13px;
  }
  .mmcta-stores img { display: block; }
  .mmcta-start:hover { color: var(--paper); }
  .mmcta-start {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--stur-purple);
    border-radius: 2000px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.16px;
    color: var(--paper);
    text-decoration: none;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.12), 0px 2px 5px 0px rgba(60,66,87,0.08);
  }
}

/* ================================================================
   HERO (figma node 1:3384)
   Desktop spec: 1728 frame, 280px horizontal padding, 200/150 vertical
   Content column max 1168px, 100px gap between content and media.
   Responsive: fluid typography + breakpoints for tablet/mobile.
   ================================================================ */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(60px, 8vw, 100px);
  padding: clamp(120px, 14vw, 200px) clamp(20px, 4vw, 48px) clamp(80px, 10vw, 150px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 65.03%, rgb(255,255,255) 100%),
    linear-gradient(97.78deg, rgb(231,225,255) 0%, rgb(241,225,225) 83.071%);
  overflow: hidden;
}

/* Content stack — headline + subhead + button */
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  max-width: 1168px;
  width: 100%;
  text-align: center;
}
.hero-headline-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.hero h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  /* Figma: 88.568 / 90.5 / -4.21 */
  font-size: clamp(44px, 7.2vw, 88.568px);
  line-height: 1.022;
  letter-spacing: clamp(-2.1px, -0.24vw, -4.21px);
  color: var(--ink);
  margin: 0;
  max-width: 668px;
  text-wrap: balance;
}
/* ── Gradient text — shared clip properties ─────────────── */
.hero h1 .grad,
.grad-storefront,
.bt-title .grad,
.about-title .grad,
.cta-card h2 .grad,
.faq h2 .grad {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Vertical (section heads: Features, About, CTA card) */
.grad-storefront,
.bt-title .grad,
.about-title .grad,
.cta-card h2 .grad {
  background-image: var(--grad-text-v);
}
/* Diagonal (Hero headline, FAQ) */
.hero h1 .grad,
.faq h2 .grad {
  background-image: var(--grad-text-d);
}

.hero .lede {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
  color: var(--ink);
  margin: 0;
  max-width: 526px;
}

.hero .hero-tagline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.45;
  margin: 0;
}

.hero-cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.hero .cta-support {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.13px;
  color: var(--ink);
  opacity: 0.5;
  margin: 0;
  text-align: center;
  max-width: 380px;
}

/* Get Started For Free button (figma 1:3389) */
.hero .cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 9px 20px;
  border-radius: 2000px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
  text-decoration: none;
  box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 5px rgba(60,66,87,0.08);
  transition: transform var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.hero .cta-primary:hover { background: var(--grey-near-black); transform: translateY(-1px); color: var(--paper); }

/* ---------- Media block (figma 1:3390) ---------- */
.hero-media-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 70px;
  max-width: 1168px;
  width: 100%;
}

.hero-media {
  position: relative;
  width: 100%;
  /* Figma: 1168 × 709 — preserve aspect ratio at every breakpoint */
  aspect-ratio: 1168 / 709;
  border-radius: 29px;
  overflow: hidden;
  background: var(--grey-900);
}
.hero-media > img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Chat overlay (figma 1:3392) — 323.833 wide on a 1168 frame ≈ 27.7% */
.hero-chat {
  position: absolute;
  /* anchor to bottom-center-ish, slightly right of center (matches figma) */
  left: 50%;
  transform: translateX(-50%);
  bottom: 51px;
  width: 27.7%;
  min-width: 240px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12.108px;
  z-index: 2;
  font-family: var(--font-body);
}
.chat-inbound {
  display: flex;
  gap: 7.706px;
  align-items: flex-end;
  width: 100%;
}
.chat-inbound .avatar {
  width: 27.743px;
  height: 27.743px;
  border-radius: 50%;
  flex-shrink: 0;
  background: url("assets/hero-avatar.png") center/cover, url("assets/avatar-sample.jpg") center/cover, #ccc;
}
.chat-bubble {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13.101px;
  line-height: 18.495px;
  letter-spacing: 0.1233px;
  color: var(--paper);
}
.chat-bubble.in {
  background: var(--grey-700);
  border-radius: 19.266px;
  padding: 8.477px 14.642px;
  width: 184.181px;
  max-width: calc(100% - 36px);
}
.chat-outbound {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12.108px;
  width: 100%;
}
.chat-bubble.out-sm {
  background: var(--stur-purple);
  border-radius: 19.266px;
  padding: 10.018px 9.248px;
  width: 91.705px;
  text-align: center;
}
.chat-bubble.out-lg {
  background: var(--stur-purple);
  border-radius: 19.266px;
  padding: 15.413px;
  width: 225.795px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9.248px;
  text-align: center;
}
.chat-bubble.out-lg .cta {
  background: var(--stur-purple-hover);
  border-radius: 7.706px;
  padding: 9.248px 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13.101px;
  line-height: 18.495px;
  letter-spacing: 0.1233px;
  text-align: center;
  color: var(--paper);
}

/* ================================================================
   Partner bar (figma node 1:3405)
   27px column gap → 45.997px row gap between logos
   Tagline: Inter SemiBold 14/21/0.16, whitespace-nowrap desktop
   Each partner preserves Figma pixel widths via intrinsic SVG sizing.
   ================================================================ */
.partner-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 27px;
  width: 100%;
}
.partner-bar .tagline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.16px;
  color: var(--ink);
  text-align: center;
  margin: 0;
  white-space: nowrap;
}
.partner-bar .logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 45.997px;
  flex-wrap: wrap;
}
.partner .logo-mobile { display: none; }

.partner {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
}

/* ---- Meta Business Partners (figma 1:3408) ----
   Container: gap 4.983, p 1.246, items-start, overflow-clip
   Mark: 24.289 × 16.133; Wordmark: 152.208 × 37.371 (total height ≈ 37.371) */
.partner--meta {
  gap: 4.983px;
  padding: 1.246px;
  align-items: flex-start;
}
.partner--meta .mark {
  width: 24.289px;
  height: 16.133px;
  display: block;
}
.partner--meta .word {
  width: 152.208px;
  height: 37.371px;
  display: block;
}

/* ---- TikTok Marketing Partner (figma 1:3409) ----
   Container: gap 7.474, items-center, overflow-clip
   "Socials" cluster: 39.863 × 39.863 (three offset notes stacked)
   Wordmark: 81.835 × 36.57 */
.partner--tiktok {
  gap: 7.474px;
  align-items: center;
}
.partner--tiktok .socials {
  position: relative;
  width: 39.863px;
  height: 39.863px;
  overflow: hidden;
  flex-shrink: 0;
}
.partner--tiktok .socials .note {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  max-width: none;
}
.partner--tiktok .socials .note-1 {
  width: 29.843px;
  height: 38.187px;
  left: calc(50% + 2.84px);
  top: calc(50% + 0.75px);
}
.partner--tiktok .socials .note-2 {
  width: 31.374px;
  height: 36.596px;
  left: calc(50% + 0.16px);
  top: calc(50% - 0.04px);
}
.partner--tiktok .socials .note-3 {
  width: 33.288px;
  height: 36.143px;
  left: calc(50% - 0.8px);
  top: calc(50% - 1.86px);
}
.partner--tiktok .word {
  width: 81.835px;
  height: 36.57px;
  display: block;
}

/* ---- Claude (figma 1:3410) ----
   Container 155.015 × 33.301. Inset math from figma:
     Mark   → inset[0 78.53% 0 0]     → 33.28 × 33.301
     Word   → inset[9.51% 0 8.5% 25.76%] → 115.09 × 27.30
   Gap between = 6.65px. Flex layout keeps img intrinsic sizing sane. */
.partner--claude {
  display: inline-flex;
  align-items: center;
  gap: 6.65px;
  height: 33.301px;
}
.partner--claude .mark {
  width: 33.28px;
  height: 33.301px;
  display: block;
  flex-shrink: 0;
}
.partner--claude .word {
  width: 115.09px;
  height: 27.30px;
  display: block;
  flex-shrink: 0;
}

/* ---- Responsive scaling ----
   Keep the exact proportions by scaling the whole group instead of
   re-authoring each size. The tagline wraps once viewport is too narrow. */
@media (max-width: 900px) {
  .partner-bar { gap: 22px; }
  .partner-bar .tagline { white-space: normal; max-width: 440px; }
  .partner-bar .logos { gap: 36px; }
}

/* ---------- Responsive tuning ---------- */

/* Tablet landscape / small desktop: 901–1279 */
@media (max-width: 1279px) {
  .hero { gap: 80px; }
  .hero-media-block { gap: 56px; }
  .hero-chat { bottom: 40px; width: 32%; min-width: 220px; }
}

/* Tablet portrait: 601–900 */
@media (max-width: 900px) {
  .hero { padding: 130px 24px 100px; gap: 64px; }
  .hero h1 { font-size: clamp(40px, 8vw, 64px); letter-spacing: -2.4px; }
  .hero-media-block { gap: 44px; }
  .hero-chat { bottom: 28px; width: 38%; min-width: 200px; }
  .chat-bubble.in { width: auto; max-width: 100%; }
  .chat-bubble.out-lg, .chat-bubble.out-sm { width: auto; }
  .partner-bar { gap: 20px; }
  .partner-bar .tagline { max-width: 420px; }
}

/* Mobile: ≤600 */
@media (max-width: 600px) {
  /* Hero content (figma 1:3564): gap 30, headline block gap 11,
     h1 61/57/-2.44 Playfair italic, lede 14/21/0.16 Inter medium,
     CTA 50h pill, 16/24/0.16 Inter SemiBold.
     Padding-top: nav y=20 + nav h=67 + gap-to-content=63 = 150px (figma 1:3563). */
  .hero { padding: 150px 20px 80px; gap: 48px; }
  .hero-content { gap: 30px; }
  .hero-headline-block { gap: 11px; }
  .hero h1 {
    font-size: 61px;
    line-height: 57px;
    letter-spacing: -2.44px;
    text-wrap: balance;
  }
  .hero-h1-br, .lede-br { display: none; }
  .hero .lede {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.16px;
  }
  .hero .cta-primary {
    height: 50px;
    padding: 9px 20px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.16px;
  }
  .hero .cta-support { font-size: 12px; max-width: 300px; }
  /* Hero media card (figma 1:3570 mobile): portrait 362×483, radius 20,
     chat overlay anchored bottom-center with 25/20 internal padding. */
  .hero-media {
    border-radius: 20px;
    aspect-ratio: 362 / 483;
  }
  .hero-chat {
    left: 50%;
    transform: translateX(-50%);
    bottom: 25px;
    width: 266.863px;
    max-width: calc(100% - 40px);
    min-width: 0;
    gap: 9.978px;
  }
  .chat-inbound { gap: 6.351px; }
  .chat-inbound .avatar { width: 22.862px; height: 22.862px; }
  .chat-bubble {
    font-size: 10.796px;
    line-height: 15.241px;
    letter-spacing: 0.1016px;
  }
  .chat-bubble.in {
    width: 151.779px;
    max-width: calc(100% - 29px);
    border-radius: 15.876px;
    padding: 6.986px 12.066px;
  }
  .chat-outbound { gap: 9.978px; }
  .chat-bubble.out-sm {
    width: 75.572px;
    border-radius: 15.876px;
    padding: 8.256px 7.621px;
  }
  .chat-bubble.out-lg {
    width: 186.072px;
    max-width: 100%;
    border-radius: 15.876px;
    padding: 12.701px;
    gap: 7.621px;
  }
  .chat-bubble.out-lg .cta {
    border-radius: 6.351px;
    padding: 7.621px 0;
    font-size: 10.796px;
    line-height: 15.241px;
    letter-spacing: 0.1016px;
  }
  .hero-media-block { gap: 36px; }

  /* Partner bar (figma 1:3584): swap to clean PNGs, hide SVG compositions */
  .partner-bar { gap: 27px; }
  .partner-bar .tagline {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.16px;
    white-space: nowrap;
    max-width: none;
  }
  .partner-bar .tagline .tagline-ext { display: none; }
  .partner-bar .logos { gap: 24px; flex-wrap: nowrap; justify-content: center; transform: none; }
  .partner { height: auto; flex-shrink: 0; gap: 0; padding: 0; }

  /* Hide SVG parts, show PNG on mobile */
  .partner .mark,
  .partner .word,
  .partner .socials { display: none; }
  .partner .logo-mobile {
    display: block;
    width: auto;
    height: 23px;
    max-width: none;
  }
  .partner--meta .logo-mobile   { height: 17px; }
  .partner--tiktok .logo-mobile { height: 17px; }
  .partner--claude .logo-mobile { height: 21px; }
}

/* ------------ Section headers ------------ */
.section-intro {
  max-width: 1168px;
  margin: 0 auto 60px;
}

/* ================================================================
   FEATURES (figma node 1:3413)
   Desktop: 1168 content column, 100/280 section padding, 20px gaps
   Cards keep their preview-kit proportions (573px tall @ 1168 frame)
   Two-tone headlines use .fade (50% black) / .fade-55 / .fade-white
   ================================================================ */
.features {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 100px clamp(20px, 4vw, 48px);
}

/* ---- Header (figma 1:3414) ---- */
.features-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  max-width: 1168px;
  width: 100%;
  text-align: center;
}
.features-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
  color: rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  margin: 0;
}
.features-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  line-height: 54px;
  letter-spacing: -2.44px;
  color: var(--ink);
  max-width: 492px;
  margin: 0;
  text-wrap: balance;
}
/* .grad-storefront — gradient applied via shared selector group above */

/* ---- Card grid ---- */
.feature-grid {
  max-width: 1168px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.feature-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ---- Base card ----
   Wide: 1168×573, half: 574×573. Keep aspect ratio across breakpoints
   so every absolutely-positioned child scales proportionally. */
.feature-card {
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  aspect-ratio: 1168 / 573;
  box-sizing: border-box;
  isolation: isolate;
}
.feature-card.half { aspect-ratio: 574 / 573; }

/* Typography inside cards — Inter SemiBold 28/36 -0.56 matches figma */
.feature-card h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.56px;
  color: var(--ink);
  margin: 0;
}
.feature-card .body {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
  color: var(--ink);
  margin: 0;
}

/* Two-tone phrase utilities */
.feature-card h3 .fade        { color: rgba(0, 0, 0, 0.5); }
.feature-card h3 .fade-55     { color: rgba(0, 0, 0, 0.55); }
.feature-card h3 .fade-white  { color: rgba(255, 255, 255, 0.7); }

/* ---- Wide: Website Builder (figma 1:3419) ----
   pl 60 py 60; text col width 303; image left 444 top 59.14 779×713.957 */
.fc-website {
  background: linear-gradient(
    142.62deg,
    rgb(253, 231, 220) 6.9%,
    rgb(240, 255, 255) 69.56%
  );
}
.fc-website .text {
  position: absolute;
  left: 5.14%;   /* 60/1168 */
  top: 10.47%;   /* 60/573  */
  bottom: 10.47%;
  width: 25.94%; /* 303/1168 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
}
.fc-website .text .body { max-width: 291px; }
.fc-website .media {
  position: absolute;
  left: 38.01%;  /* 444/1168 */
  top: 10.32%;   /* 59.14/573 */
  width: 66.70%; /* 779/1168 */
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* ---- Half: Payments (figma 1:3426) ----
   Gradient 135.23deg rose→sky @50%, headline width 384, img left 118 top 154.14 348.966×367 */
.fc-payments {
  background: linear-gradient(
    135.23deg,
    rgba(255, 213, 230, 0.5) 1.45%,
    rgba(213, 232, 255, 0.5) 98.10%
  );
}
.fc-payments h3 {
  position: absolute;
  left: 50%;
  top: 9.08%;   /* 52/573 */
  transform: translateX(-50%);
  width: 66.9%; /* 384/574 */
  text-align: center;
}
.fc-payments .media {
  position: absolute;
  left: 20.56%;   /* 118/574 */
  top: 26.90%;    /* 154.14/573 */
  width: 60.80%;  /* 348.966/574 */
  height: auto;
  display: block;
}

/* ---- Half: Comments Automation (figma 1:3430) ----
   Warm tri-stop gradient; headline width 443; img left 119.68 top 158.14 334.641×702.198 */
.fc-comments {
  background: linear-gradient(
    223.87deg,
    rgba(196, 221, 255, 0.3) 11.13%,
    rgba(221, 181, 111, 0.3) 68.11%,
    rgba(249, 123, 64, 0.3) 135.83%
  );
}
.fc-comments h3 {
  position: absolute;
  left: 50%;
  top: 9.08%;
  transform: translateX(-50%);
  width: 77.18%; /* 443/574 */
  text-align: center;
}
.fc-comments .media {
  position: absolute;
  left: 20.85%;   /* 119.68/574 */
  top: 27.60%;    /* 158.14/573 */
  width: 58.30%;  /* 334.641/574 */
  height: auto;
  display: block;
  pointer-events: none;
}

/* ---- Wide: DM Automation (figma 1:3434) ----
   Layout: pl 602 pr 193 py 181; content on RIGHT, phone image on LEFT.
   Phone image left 122 top 66.74 346×628.199 (bleeds top and bottom) */
.fc-dm {
  background: linear-gradient(
    27.25deg,
    rgba(255, 202, 138, 0.15) 0%,
    rgba(184, 0, 31, 0.15) 98.24%
  );
}
.fc-dm .media {
  position: absolute;
  left: 10.45%;   /* 122/1168 */
  top: 11.65%;    /* 66.74/573 */
  width: 29.62%;  /* 346/1168  */
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
}
.fc-dm .text {
  position: absolute;
  left: 51.54%;   /* 602/1168 */
  right: 16.52%;  /* 193/1168 */
  top: 31.59%;    /* 181/573 */
  bottom: 31.59%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
}
.fc-dm .text h3 { width: 373px; max-width: 100%; }
.fc-dm .text .body { width: 364px; max-width: 100%; }

.powered-by {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.2px;
}
.powered-by .by { color: rgba(0, 0, 0, 0.5); }
.powered-by .brand { color: var(--ink); }
.powered-by img { width: 26.91px; height: 27.325px; display: block; }

/* ---- Half: Smart Store (figma 1:3447) ----
   Same warm tri-stop gradient; headline centered; image left -77 top 156.14 641.479×488 (bleeds left/right) */
.fc-smart {
  background: linear-gradient(
    223.87deg,
    rgba(196, 221, 255, 0.3) 11.13%,
    rgba(221, 181, 111, 0.3) 68.11%,
    rgba(249, 123, 64, 0.3) 135.83%
  );
}
.fc-smart h3 {
  position: absolute;
  left: 50%;
  top: 9.08%;    /* 52/573 */
  transform: translateX(-50%);
  text-align: center;
  width: 86.06%; /* 494/574 */
}
.fc-smart .media {
  position: absolute;
  left: -13.41%;  /* -77/574 */
  top: 27.25%;    /* 156.14/573 */
  width: 111.76%; /* 641.479/574 */
  height: auto;
  display: block;
  pointer-events: none;
}

/* ---- Half: Natural Language Shopping (figma 1:3451) ----
   Full-bleed lifestyle image; expand icon top-right; white 2-tone headline bottom */
.fc-nlp {
  background: var(--grey-900);
  color: var(--paper);
  text-decoration: none;
}
.fc-nlp .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.fc-nlp .expand {
  position: absolute;
  left: 87.63%;   /* 503/574 */
  top: 2.64%;     /* 15.14/573 */
  width: 57px;
  height: 57px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform var(--dur-fast) var(--ease-std);
}
.fc-nlp:hover .expand { transform: none; }
.fc-nlp .expand svg { width: 27px; height: 27px; color: var(--ink); }
.fc-nlp h3 {
  position: absolute;
  left: 10.45%;   /* 60/574 */
  right: 10.45%;
  bottom: 8.20%;  /* 47/573 */
  text-align: center;
  color: var(--paper);
  z-index: 2;
}

/* ================================================================
   Features — responsive behavior
   >1200: desktop spec
   900–1200: content shrinks fluidly; row-2 stays 2 cols, cards shrink
   600–900 (tablet): Website/DM stack internally, rows collapse
   <600 (mobile): rows collapse, card padding/type scale down
   ================================================================ */
@media (max-width: 1200px) {
  .features { padding: 90px 24px; gap: 52px; }
}

/* Tablet */
@media (max-width: 900px) {
  .features { padding: 80px 20px; gap: 44px; }
  .features-title { font-size: 40px; line-height: 46px; letter-spacing: -1.8px; max-width: 420px; }
  .features-eyebrow { font-size: 14px; line-height: 20px; }
  .feature-card h3 { font-size: 24px; line-height: 32px; letter-spacing: -0.48px; }
  .feature-card .body { font-size: 15px; line-height: 22px; }

  .feature-row-2 { grid-template-columns: 1fr; }

  /* Wide website card adjusts text column on tablet */
  .fc-website .text { width: 44%; }
  .fc-website .media { left: 46%; width: 72%; }

  /* DM automation text column widens on tablet */
  .fc-dm .text { left: 48%; right: 6%; }
  .fc-dm .media { width: 32%; top: 10%; left: 6%; }

  .fc-smart h3, .fc-payments h3, .fc-comments h3 { width: 88%; }
  .fc-nlp .expand { left: calc(100% - 72px); top: 15px; }
}

/* Mobile */
@media (max-width: 600px) {
  .features { padding: 64px 16px; gap: 36px; }
  .features-title { font-size: 32px; line-height: 38px; letter-spacing: -1.3px; }
  .features-eyebrow { font-size: 13px; letter-spacing: 0.12px; }

  /* ----------------------------------------------------------------
     Mobile Feature Cards (figma 1:3594 parent frame, base 362×410)
     Shared shell — centered Inter SemiBold 18/24 title, pad 30/25,
     radius 20, gap 20, overflow clips bleeding media.
     ---------------------------------------------------------------- */
  .feature-card, .feature-card.half { aspect-ratio: auto; }

  .feature-card {
    border-radius: 20px;
    padding: 30px 25px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    overflow: hidden;
  }
  .feature-card h3 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0;
    text-align: center;
    max-width: 312px;
  }
  .feature-card .body { display: none; }

  /* ---- Website (1:3595) — 362×410, storefront centered below title ---- */
  .fc-website { height: 410px; }
  .fc-website .text {
    position: static;
    width: 100%;
    max-width: 267px;
    gap: 0;
    align-items: center;
    text-align: center;
  }
  .fc-website .text h3 { max-width: 267px; }
  .fc-website .media {
    content: url("assets/Mobile Mockup Image.png");
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 95.95px;
    width: 405.28px;
    height: auto;
    max-width: none;
    margin: 0;
  }

  /* ---- Payments (1:3637) — 362×410, image 254.45×267.6 at top 107.95 ---- */
  .fc-payments { height: 410px; }
  .fc-payments h3 {
    position: static;
    transform: none;
    width: auto;
    max-width: 312px;
  }
  .fc-payments .media {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 107.95px;
    width: 254.45px;
    height: 267.6px;
    object-fit: contain;
  }

  /* ---- Comments (1:3640) — 362×410, image bleeds below ---- */
  .fc-comments { height: 410px; }
  .fc-comments h3 {
    position: static;
    transform: none;
    width: auto;
    max-width: 312px;
  }
  .fc-comments .media {
    position: absolute;
    left: 46.57px;
    top: 101.95px;
    width: 258.87px;
    height: auto;
    max-width: none;
    object-fit: cover;
  }

  /* ---- DM Automation (1:3644) — 362×470, headline 2-line + chat bleed ---- */
  .fc-dm {
    height: 470px;
    padding: 30px 25px 0;
  }
  .fc-dm .text {
    position: static;
    width: 100%;
    padding: 0;
    gap: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .fc-dm .text .powered-by { display: none; }
  .fc-dm .text h3 {
    width: auto;
    max-width: 312px;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0;
    text-align: center;
  }
  .fc-dm .media {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 122.15px;
    width: 251.6px;
    height: auto;
    max-width: none;
    margin: 0;
  }

  /* ---- Smart Store (1:3647) — 362×410, big image bleeds beyond left ---- */
  .fc-smart { height: 410px; }
  .fc-smart h3 {
    position: static;
    transform: none;
    width: auto;
    max-width: 312px;
  }
  .fc-smart .media {
    position: absolute;
    left: -106px;
    top: 102.95px;
    width: 464.02px;
    height: 353px;
    max-width: none;
    object-fit: cover;
  }

  /* ---- NLP / Favorite vendors — matches short-card height ---- */
  .fc-nlp {
    height: 410px;
    padding: 0;
  }
  .fc-nlp .expand { left: calc(100% - 62px); top: 14px; width: 48px; height: 48px; }
  .fc-nlp .expand svg { width: 22px; height: 22px; }
  .fc-nlp h3 {
    position: absolute;
    bottom: 32px;
    left: 24px;
    right: 24px;
    max-width: none;
    text-align: left;
  }
}

/* ================================================================
   BUSINESS TYPES (figma node 1:3456)
   Header + infinite auto-scroll marquee. Pauses on hover/focus.
   Card spec: 413.724 × 560.091, r 36.252, label bottom-left 21.75/29
   ================================================================ */
.business-types {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 100px 0;
  overflow: hidden;
  border-radius: 60px;
}

/* ---- Header (figma 1:3457) ---- */
.bt-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  max-width: 1168px;
  width: 100%;
  padding: 0 24px;
  text-align: center;
}
.bt-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
  color: rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  margin: 0;
}
.bt-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  line-height: 54px;
  letter-spacing: -2.44px;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
/* .bt-title .grad — gradient applied via shared selector group above */

/* ---- Auto-scroll marquee ----
   The track renders the 5 cards twice (the second set is aria-hidden).
   We translate from 0 → -50% so the original set exits as the duplicate
   slides in, creating a seamless loop.
   CSS custom-property --bt-duration scales the speed for different widths. */
.bt-marquee {
  width: 100%;
  overflow: hidden;
}
.bt-track {
  display: flex;
  align-items: center;
  gap: 15px;
  width: max-content;
  --bt-shift: -2143.62px; /* 5 × 413.724 + 5 × 15 — set B's offset from origin */
  animation: bt-scroll var(--bt-duration, 60s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.bt-marquee:hover .bt-track,
.bt-marquee:focus-within .bt-track {
  animation-play-state: paused;
}

/* Seamless loop: translate the track by exactly one set's width
   so set B lands where set A started. */
@keyframes bt-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--bt-shift), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .bt-track { animation: none; }
  .bt-marquee { overflow-x: auto; }
}

/* ---- Card (figma 1:3462, 1:3466, 1:3470, 1:3474, 1:3478) ---- */
.industry-card {
  position: relative;
  flex: 0 0 413.724px;
  width: 413.724px;
  height: 560.091px;
  border-radius: 36.252px;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 40px -12px rgba(0,0,0,0.18);
  text-decoration: none;
  display: block;
}
.industry-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.industry-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
  z-index: 1;
}
.industry-card .label {
  position: absolute;
  left: 32.627px;
  right: 32.627px;
  bottom: 33.533px;
  z-index: 2;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 21.75px;
  line-height: 29.001px;
  letter-spacing: -0.3263px;
  color: var(--paper);
  margin: 0;
}

/* ---- Responsive ----
   Tablet: shrink cards slightly; keep animation.
   Mobile: smaller cards, shorter duration. */
@media (max-width: 900px) {
  .business-types { gap: 44px; padding: 80px 0; }
  .bt-title { font-size: 40px; line-height: 46px; letter-spacing: -1.8px; }
  .bt-eyebrow { font-size: 14px; }
  .bt-track { --bt-shift: -1675px; } /* 5 × 320 + 5 × 15 */
  .industry-card {
    flex: 0 0 320px;
    width: 320px;
    height: 430px;
    border-radius: 28px;
  }
  .industry-card .label { font-size: 18px; line-height: 24px; left: 24px; right: 24px; bottom: 24px; }
}

@media (max-width: 600px) {
  .business-types { gap: 32px; padding: 64px 0; border-radius: 32px; }
  .bt-head { padding: 0 20px; gap: 10px; }
  .bt-title { font-size: 31px; line-height: 37px; letter-spacing: -1.44px; }
  .bt-title-br { display: none; }
  .bt-eyebrow { font-size: 14px; line-height: 21px; letter-spacing: 0.16px; color: rgba(0,0,0,0.4); }
  .bt-track { --bt-shift: -1375px; } /* 5 × 260 + 5 × 15 */
  .industry-card {
    flex: 0 0 260px;
    width: 260px;
    height: 350px;
    border-radius: 24px;
  }
  .industry-card .label { font-size: 17px; line-height: 22px; left: 20px; right: 20px; bottom: 20px; }
}

/* ================================================================
   ABOUT STUR AFRICA (figma node 1:3481)
   Eyebrow + italic Playfair title with gradient word + 3 video cards
   + "Book a demo" primary pill button
   ================================================================ */
.about-stur {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 100px clamp(20px, 4vw, 48px);
}

/* ---- Header (figma 1:3482) ---- */
.about-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  max-width: 1168px;
  width: 100%;
  text-align: center;
}
.about-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
  color: rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  margin: 0;
}
.about-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  line-height: 43px;
  letter-spacing: -2.44px;
  color: var(--ink);
  max-width: 556px;
  margin: 0;
  text-wrap: balance;
}
/* .about-title .grad — gradient applied via shared selector group above */

/* ---- Video card grid (figma 1:3485) ---- */
.video-grid {
  max-width: 1168px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.video-card {
  position: relative;
  aspect-ratio: 382.667 / 514;
  border-radius: 40px;
  overflow: hidden;
  cursor: pointer;
  background: var(--grey-900);
  isolation: isolate;
  text-decoration: none;
}
.video-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Bottom overlay: 129px tall, 30px padding, dark→transparent gradient */
.video-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 129px;
  padding: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}

.video-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.video-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
  color: rgba(255,255,255,0.8);
}
.video-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.1px;
  color: var(--paper);
}

/* Play button — 40×40 white circle with figma shadow */
.play-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 9999px;
  background: var(--paper);
  box-shadow: var(--shadow-play);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px;
  transition: transform 200ms var(--ease-std);
}
.video-card:hover .play-btn { transform: none; }
.play-btn svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: var(--ink);
}

/* Video thumbnails — custom portrait photos, face-centred crop */
.thumb-why { background: url('assets/thumb-why-we-built.png') center 10% / cover no-repeat; }
.thumb-how { background: url('assets/IMG_6347.jpeg')           center 28% / 135% auto no-repeat; }
.thumb-ai  { background: url('assets/thumb-chat-to-buy.jpg')   center 28% / 135% auto no-repeat; }

/* ================================================================
   VIDEO MODAL
   Dark scrim + blur; landscape (16:9) or portrait (9:16) for Shorts.
   ================================================================ */
.vmodal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
}
.vmodal.is-open { display: flex; }

.vmodal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.vmodal-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  width: 90vw;
  max-width: 880px;
}
.vmodal-wrap.portrait-wrap {
  max-width: 420px;
}

.vmodal-close {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--paper);
  flex-shrink: 0;
  transition: background 150ms;
}
.vmodal-close:hover { background: rgba(255,255,255,0.28); }

/* Landscape 16:9 */
.vmodal-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink);
}
/* Portrait 9:16 (Shorts) */
.vmodal-frame--portrait {
  padding-bottom: 177.78%;
  max-height: 80vh;
  width: auto;
  aspect-ratio: 9 / 16;
  padding-bottom: 0;
  height: min(80vh, 560px);
}
.vmodal-frame--portrait iframe {
  position: static;
  width: 100%;
  height: 100%;
}

.vmodal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Book a demo button (figma 1:3513) ---- */
.about-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 9px 16px;
  border-radius: 2000px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
  text-decoration: none;
  box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 5px rgba(60,66,87,0.08);
  transition: transform var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.about-cta:hover { background: var(--grey-near-black); transform: translateY(-1px); color: var(--paper); }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .about-stur { gap: 48px; padding: 90px 24px; }
  .about-title { font-size: 42px; line-height: 40px; letter-spacing: -2px; max-width: 480px; }
}

@media (max-width: 760px) {
  .about-stur { gap: 40px; padding: 72px 20px; }
  .about-eyebrow { font-size: 14px; letter-spacing: 0.14px; }
  .about-title { font-size: 34px; line-height: 34px; letter-spacing: -1.4px; max-width: 380px; }
  .video-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    gap: 10px;
  }
  .video-card { aspect-ratio: 382.667 / 460; }
  .video-overlay { height: 108px; padding: 24px; }
  .video-title { font-size: 18px; }
  .video-eyebrow { font-size: 14px; line-height: 22px; }
}

@media (max-width: 480px) {
  .about-stur { gap: 32px; padding: 56px 16px; }
  .about-title { font-size: 31px; line-height: 37px; letter-spacing: -1.44px; }
}

/* ================================================================
   MOBILE APP CTA (figma node 1:3516)
   1168×519 card, 40 radius, 83° pastel gradient, phone bleeds right.
   Headline has gradient "store"; body has gradient underlined "Stur mobile app"
   (inline text link, NOT a button).
   ================================================================ */
.mobile-cta-wrap {
  background: var(--paper);
  padding: 20px clamp(20px, 4vw, 48px) 100px;
}
.cta-card {
  position: relative;
  max-width: 1168px;
  margin: 0 auto;
  aspect-ratio: 1168 / 519;
  border-radius: 40px;
  overflow: hidden;
  background: linear-gradient(
    83.19deg,
    rgba(250, 224, 197, 0.5) 20.55%,
    rgba(232, 212, 241, 0.5) 53.90%,
    rgba(214, 167, 255, 0.5) 110.16%
  );
}

/* Content column (figma 1:3517) — 517 × 413, justify-between */
.cta-card .text {
  position: absolute;
  left: 5.14%;   /* 60/1168 */
  top: 10.21%;   /* 53/519  */
  width: 44.26%; /* 517/1168 */
  bottom: 10.21%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
}
.cta-card .headline {
  display: flex;
  flex-direction: column;
  gap: 14.8px;
}
.cta-card h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  line-height: 43px;
  letter-spacing: -2.44px;
  color: var(--ink);
  margin: 0;
  max-width: 345px;
}
/* .cta-card h2 .grad — gradient applied via shared selector group above */
.cta-card .body {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
  color: var(--ink);
  margin: 0;
  max-width: 321px;
}
/* Inline gradient + underline link — NOT a button (figma spec) */
.mobile-app-link {
  background-image: var(--grad-text-d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-decoration-line: underline;
  text-decoration-color: rgb(221, 42, 123);
  text-decoration-thickness: from-font;
  text-underline-offset: 3px;
  font-weight: 600;
  cursor: pointer;
}
.mobile-app-link:hover { text-decoration-thickness: 1.5px; }

/* App-store badge row (figma 1:3521) — 28.935 gap, raw SVG images */
.cta-card .badges {
  display: flex;
  gap: 28.935px;
  align-items: center;
}
.store-badge {
  display: inline-block;
  line-height: 0;
  transition: transform 150ms var(--ease-std);
  flex-shrink: 0;
}
.store-badge:hover { transform: translateY(-1px); }
.store-badge img { display: block; }
/* Figma dimensions — explicit so the SVG's preserveAspectRatio="none" doesn't stretch */
.store-badge--apple img  { width: 95.058px;  height: 23.949px; }
.store-badge--google img { width: 104.724px; height: 24.873px; }

/* Phone (figma 1:3559) — absolute left 661 top 41.14, 375 × 768.682, bleeds bottom */
.cta-card .phone {
  position: absolute;
  left: 56.59%;  /* 661/1168 */
  top: 7.93%;    /* 41.14/519 */
  width: 32.11%; /* 375/1168 */
  height: auto;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* ---- Responsive ---- */
/* Tablet landscape */
@media (max-width: 1100px) {
  .cta-card h2 { font-size: 42px; line-height: 40px; letter-spacing: -2px; max-width: 300px; }
  .cta-card .text { width: 46%; }
}

/* Tablet portrait / small tablet */
@media (max-width: 820px) {
  .cta-card { aspect-ratio: auto; min-height: 520px; }
  .cta-card .text {
    position: static;
    width: auto;
    height: auto;
    padding: 48px 32px 40px;
    gap: 32px;
    justify-content: flex-start;
  }
  .cta-card h2 { font-size: 38px; line-height: 36px; letter-spacing: -1.6px; max-width: 100%; }
  .cta-card .body { max-width: 460px; }
  .cta-card .phone {
    position: static;
    width: 62%;
    max-width: 340px;
    margin: 12px auto 0;
    display: block;
  }
}

/* ---- Mobile (figma 1:3670) ----
   Card 362×590, radius 20, 88.13° gradient, padding 38/30.
   Content center-aligned, title 38/43, body 14/21 max 263.
   App-store badges removed on mobile. Phone absolutely positioned,
   clipped by card bounds so only the top portion of the device shows. */
@media (max-width: 520px) {
  .mobile-cta-wrap { padding: 8px 16px 64px; }

  .cta-card {
    aspect-ratio: auto;
    width: 100%;
    max-width: 362px;
    min-height: 590px;
    margin: 0 auto;
    padding: 38px 30px 0;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(
      88.13deg,
      rgba(250, 224, 197, 0.5) 20.55%,
      rgba(232, 212, 241, 0.5) 53.90%,
      rgba(214, 167, 255, 0.5) 110.16%
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .cta-card .text {
    position: static;
    width: 100%;
    height: auto;
    inset: auto;
    padding: 0;
    gap: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .cta-card .headline {
    align-items: center;
    text-align: center;
    gap: 14.8px;
    width: 100%;
  }
  .cta-card h2 {
    font-size: 38px;
    line-height: 43px;
    letter-spacing: -1.44px;
    max-width: 100%;
    text-align: center;
  }
  .cta-card .body {
    font-size: 14px;
    line-height: 21px;
    font-weight: 600;
    max-width: 263px;
    margin: 0;
    text-align: center;
  }

  /* App-store badges removed on mobile per Figma spec */
  .cta-card .badges { display: none; }

  /* Phone (figma 1:3675) — 288 × 599.682, centered, top 216.35.
     Card overflow:hidden clips the bottom of the device naturally. */
  .cta-card .phone {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 216.35px;
    bottom: auto;
    width: 288px;
    max-width: none;
    height: auto;
    margin: 0;
  }
}

/* ------------ Pricing ------------ */
.pricing {
  background: var(--paper);
  padding: 100px 24px;
  text-align: center;
}
.pricing .section-title { margin-left: auto; margin-right: auto; text-align: center; }
.billing-toggle {
  background: rgba(0,0,0,0.05);
  border-radius: var(--r-pill);
  padding: 4px;
  display: inline-flex;
  margin: 0 auto 60px;
}
.billing-toggle > button {
  padding: 12px 20px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  background: transparent;
  color: var(--ink);
  border: 0;
}
.billing-toggle > button.on { background: var(--ink); color: var(--paper); }

.plans {
  max-width: 1168px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  text-align: left;
}
.plan {
  position: relative;
  padding: 30px;
  border-radius: var(--r-card);
  background: var(--paper);
  border: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.plan.selected {
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(0deg, rgb(250,173,79) 0%, rgb(221,42,123) 33%, rgb(149,55,176) 66%, rgb(81,91,212) 100%) border-box;
  border: 2px solid transparent;
}
.plan-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  flex-shrink: 0;
}
.plan .title-block { display: flex; flex-direction: column; gap: 1px; }
.plan .name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;
  letter-spacing: -0.36px;
  color: var(--ink);
}
.plan .sub {
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.16px;
  color: rgba(0,0,0,0.6);
}
.plan .price-block { display: flex; flex-direction: column; gap: 9px; }
.plan .price {
  font-weight: 600;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: -0.72px;
  color: var(--ink);
}
.plan .price .per {
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  color: rgba(0,0,0,0.6);
  letter-spacing: 0.16px;
}
.plan .billed {
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.16px;
  color: rgba(0,0,0,0.6);
}
.plan .btn {
  width: 100%;
  padding: 13px 16px;
  font-size: 16px;
  line-height: 24px;
  display: block;
  text-align: center;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.16px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.plan .btn.secondary { background: var(--paper); color: var(--grey-900); border-color: var(--border-strong); }
.plan .btn.primary   { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-btn); }
.plan .btn.neutral   { background: var(--grey-100); color: var(--grey-900); }
.plan .feats { display: flex; flex-direction: column; gap: 2px; }
.plan .feat {
  min-height: 40px;
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
  color: var(--ink);
}
.plan .feat.inherit {
  background-image: var(--grad-text-d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; max-width: 420px; }
}

/* ------------ Enterprise banner ------------ */
.enterprise {
  background: var(--paper);
  padding: 20px 24px 100px;
}
.enterprise-banner {
  max-width: 1168px;
  margin: 0 auto;
  border-radius: var(--r-card);
  background: linear-gradient(41.74deg, rgb(221,42,123) 3.24%, rgb(49,22,100) 112.19%);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 35px;
  box-sizing: border-box;
  color: var(--paper);
}
.enterprise-banner .eb-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 121px;
  width: 100%;
}
.enterprise-banner .eb-title-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.enterprise-banner .eb-plan {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;
  letter-spacing: -0.36px;
  color: var(--paper);
  margin: 0;
}
.enterprise-banner .eb-desc {
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.16px;
  color: rgba(255,255,255,0.6);
  margin: 0;
}
.enterprise-banner .eb-body {
  max-width: 581px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
  color: var(--paper);
  margin: 0;
}
.enterprise-banner .eb-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}
.enterprise-banner .eb-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.2px;
}
.enterprise-banner .eb-badge .pb { color: rgba(255,255,255,0.6); }
.enterprise-banner .eb-badge img { width: 26px; height: auto; }
.eb-ai-icon { width: 27px; height: 27px; object-fit: contain; flex-shrink: 0; }
.enterprise-banner .eb-badge .ai { color: var(--paper); font-weight: 700; }

/* ------------ Comparison table ------------ */
.compare {
  background: var(--paper);
  padding: 60px 24px 120px;
}
.compare h2 {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  line-height: 54px;
  letter-spacing: -2.44px;
  color: var(--ink);
  margin: 0 0 60px;
}
.compare-table {
  max-width: 1168px;
  margin: 0 auto;
}
.cmp-row {
  display: grid;
  grid-template-columns: 1fr 160px 160px 160px;
  align-items: center;
  min-height: 50px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.cmp-row.head {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding: 20px 0;
}
.cmp-row.head .cmp-cell {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 0.2px;
}
.cmp-label {
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.1px;
  color: var(--ink);
}
.cmp-cell {
  text-align: center;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
}
.cmp-cell .tick,
.cmp-cell .cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 760px) {
  .cmp-row { grid-template-columns: 1fr 80px 80px 80px; }
  .cmp-label, .cmp-cell { font-size: 13px; }
}

/* ================================================================
   FAQ (figma node 18:5128)
   Black section, py 150, items-center gap 70, 888px accordion.
   Header: eyebrow "F.A.Qs" + 2-line italic title with rainbow
   gradient on "questions".
   Rows: py 25, 1px hairline border rgba(255,255,255,0.1)
   (0.07 for the open item), 35×35 plus icon toggle.
   ================================================================ */
.faq {
  background: var(--ink);
  color: var(--paper);
  padding: 150px 24px;
  display: flex;
  justify-content: center;
}
.faq-inner {
  width: 100%;
  max-width: 888px;
  display: flex;
  flex-direction: column;
  gap: 70px;
  align-items: center;
}
.faq-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
}
.faq-header .eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
  text-transform: none; /* keep "F.A.Qs" literal, not uppercase-transformed */
}
.faq h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  line-height: 43px;
  letter-spacing: -2.44px;
  color: var(--paper);
  margin: 0;
  text-align: center;
}
/* .faq h2 .grad — gradient applied via shared selector group above */

.accordion { width: 100%; display: flex; flex-direction: column; }
.faq-item {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 25px 0;
  cursor: pointer;
  user-select: none;
  transition: border-color 200ms var(--ease-std);
}
.faq-item[aria-expanded="true"] {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
.faq-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 35px;
}
.faq-q {
  flex: 1;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.1px;
  color: var(--paper);
}

/* Plus ↔ minus icon — 35×35 outer, ~20×20 inner strokes per figma
   (inset[-7.14%] inside the inner icon bumps the arms a touch past 20). */
.faq-icon {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
}
.faq-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.faq-icon .v {
  transform-origin: center;
  transition: transform 260ms var(--ease-std);
}
.faq-item[aria-expanded="true"] .faq-icon .v { transform: rotate(90deg); }

/* Collapsible answer */
.faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--ease-std);
}
.faq-item[aria-expanded="true"] .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a { overflow: hidden; min-height: 0; }
.faq-a p {
  margin: 4px 0 0;
  max-width: 683px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
  color: rgba(255, 255, 255, 0.6);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .faq { padding: 110px 24px; }
  .faq-inner { gap: 52px; }
  .faq h2 { font-size: 42px; line-height: 40px; letter-spacing: -2px; }
}
@media (max-width: 600px) {
  .faq { padding: 72px 20px; }
  .faq-inner { gap: 40px; }
  .faq-header { gap: 12px; }
  .faq-header .eyebrow { font-size: 14px; letter-spacing: 0.14px; }
  .faq h2 { font-size: 32px; line-height: 30px; letter-spacing: -1.3px; }
  .faq-q { font-size: 17px; line-height: 22px; }
  .faq-a p { font-size: 14px; line-height: 22px; }
  .faq-icon { width: 28px; height: 28px; }
  .faq-icon svg { width: 18px; height: 18px; }
}

/* ================================================================
   FOOTER (figma node 1:3560)
   Black section, py 100 / px 280, 100 gap between top row and bottom.
   Top: 70×19.646 Stur logo → 4 nav columns (gap 9).
   Business Types column uses SB 16/24 links; other columns use Medium.
   Bottom: Meta + TikTok partner logos left, 4 social icons (36×36) right.
   ================================================================ */
.footer {
  background: var(--ink);
  color: var(--paper);
  padding: 100px clamp(20px, 4vw, 48px);
  display: flex;
  justify-content: center;
}
.footer-inner {
  width: 100%;
  max-width: 1168px;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

/* ---- Top: logo + nav columns ---- */
.footer-top {
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: stretch;
}
.footer-brand {
  display: inline-block;
  width: 70px;
  height: 19.646px;
  line-height: 0;
}
.footer-brand img {
  width: 100%;
  height: 100%;
  display: block;
  color: var(--paper);
}

.footer-nav {
  display: grid;
  /* figma: first col flex-1, others ~208/209px (gap 9) */
  grid-template-columns: 1fr 208px 209px 208px;
  gap: 9px;
  align-items: start;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-heading {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.2px;
  color: var(--grey-500);
  margin: 0;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li { padding: 2px 0; }
.footer-links a {
  font-family: var(--font-body);
  font-weight: 500; /* default — medium (matches Products/Company/Support) */
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
  color: var(--paper);
  text-decoration: none;
  display: inline-block;
  transition: color 150ms var(--ease-std);
}
.footer-links a:hover { color: rgba(255, 255, 255, 0.7); }
.footer-address {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
  color: var(--paper);
}
/* Business Types column uses SemiBold weight per figma */
.footer-col--primary .footer-links a { font-weight: 600; }

/* ---- Bottom row: partners (L) + socials (R) ---- */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-partners {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
/* Partner blocks reuse the same structure as the hero partner bar
   but scale slightly smaller here (figma sizes). */
.footer-partners .partner {
  display: inline-flex;
  align-items: center;
}
.footer-partners .partner--meta {
  gap: 4.561px;
  padding: 1.14px;
  align-items: flex-start;
}
.footer-partners .partner--meta .mark { width: 22.234px; height: 14.768px; display: block; }
.footer-partners .partner--meta .word { width: 139.331px; height: 34.21px; display: block; }

.footer-partners .partner--tiktok { gap: 6.842px; align-items: center; }
.footer-partners .socials-group {
  position: relative;
  width: 36.49px;
  height: 36.49px;
  overflow: hidden;
  flex-shrink: 0;
}
.footer-partners .socials-group .note {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  max-width: none;
}
.footer-partners .socials-group .note-1 {
  width: 27.318px;
  height: 34.956px;
  left: calc(50% + 2.6px);
  top: calc(50% + 0.69px);
}
.footer-partners .socials-group .note-2 {
  width: 28.72px;
  height: 33.5px;
  left: calc(50% + 0.15px);
  top: calc(50% - 0.04px);
}
.footer-partners .socials-group .note-3 {
  width: 30.472px;
  height: 33.085px;
  left: calc(50% - 0.73px);
  top: calc(50% - 1.7px);
}
.footer-partners .partner--tiktok .word { width: 74.912px; height: 33.476px; display: block; }

.footer-socials {
  display: flex;
  align-items: center;
  gap: 7.217px;
}
.social-icon {
  width: 36.087px;
  height: 36.087px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 150ms var(--ease-std), transform 150ms var(--ease-std);
}
.social-icon img {
  width: 100%;
  height: 100%;
  display: block;
}
.social-icon:hover { opacity: 0.8; transform: translateY(-1px); }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .footer-nav { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 24px; }
}
@media (max-width: 900px) {
  .footer { padding: 72px 24px; }
  .footer-inner { gap: 80px; }
  .footer-top { gap: 48px; }
  .footer-nav { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 43px;
  }
}

/* ---- Mobile (figma 1:3677) ----
   px 20 py 50, gap 100 col items-start.
   Top: logo → nav (col gap 42 between stacked columns, gap 16 inside each).
   Bottom: partners row (gap 30) THEN socials row (gap 7.217) — col gap 43.
   ================================================================ */
@media (max-width: 520px) {
  .footer {
    padding: 50px 20px;
    justify-content: flex-start;
  }
  .footer-inner {
    gap: 100px;
    align-items: flex-start;
  }
  .footer-top {
    gap: 50px;
  }
  .footer-nav {
    display: flex;
    flex-direction: column;
    gap: 42px;
    align-items: flex-start;
    width: 100%;
  }
  .footer-col { gap: 16px; width: 100%; }
  .footer-links { gap: 10px; }
  .footer-links li { padding: 2px 0; }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 43px;
  }
  .footer-partners {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 30px;
    align-items: center;
  }
  .footer-socials {
    gap: 7.217px;
    justify-content: flex-start;
  }
}

/* ================================================================
   MOBILE — Unified card corner radius
   Placed last so it wins the cascade over every earlier card rule.
   Every card on mobile matches the Mobile App CTA's 20px corner;
   tablet/desktop keep their original radii. Pill buttons and chat
   bubbles are intentionally untouched.
   ================================================================ */
@media (max-width: 600px) {
  .feature-card,
  .feature-card.half,
  .industry-card,
  .video-card,
  .cta-card,
  .plan,
  .enterprise-banner,
  .hero-media {
    border-radius: 20px;
  }
}

/* ================================================================
   ANIMATION SYSTEM — Apple-level motion
   Hero entrance · Scroll reveals · Image scale-reveals
   Hover micro-interactions · Page transitions · Menu slide-in
   Gated by .js-anim on <html> (set synchronously before first paint).
   ================================================================ */

/* ── Page transition ─────────────────────────────────────────── */
@keyframes s-page-in { from { opacity: 0 } to { opacity: 1 } }
.js-anim body    { animation: s-page-in 0.45s cubic-bezier(0.25,1,0.5,1) both; }

/* ── Hero entrance ───────────────────────────────────────────── */
@keyframes s-hero-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.js-anim .hero h1           { animation: s-hero-up 0.9s cubic-bezier(0.25,1,0.5,1)  0.05s both; }
.js-anim .hero .lede        { animation: s-hero-up 0.9s cubic-bezier(0.25,1,0.5,1)  0.22s both; }
.js-anim .hero .cta-primary { animation: s-hero-up 0.9s cubic-bezier(0.25,1,0.5,1)  0.38s both; }
.js-anim .hero-media-block  { animation: s-hero-up 1.1s cubic-bezier(0.25,1,0.5,1)  0.08s both; }

/* ── Scroll reveal ───────────────────────────────────────────── */
.sc-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.25,1,0.5,1),
              transform 0.7s cubic-bezier(0.25,1,0.5,1);
  will-change: opacity, transform;
}
.sc-reveal.is-visible { opacity: 1; transform: none; will-change: auto; }

/* ── Image scale-reveal ──────────────────────────────────────── */
.sc-reveal-img { overflow: hidden; }
.sc-reveal-img img,
.sc-reveal-img .bg {
  transform: scale(1.06);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.25,1,0.5,1),
              opacity 0.85s ease;
}
.sc-reveal-img.is-visible img,
.sc-reveal-img.is-visible .bg { transform: scale(1); opacity: 1; }

/* ── Mobile menu slide-in ────────────────────────────────────── */
@keyframes s-menu-in    { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
@keyframes s-overlay-in { from { opacity:0; }                             to { opacity:1; }                 }
.mobile-menu.is-open         { animation: s-menu-in    0.3s  cubic-bezier(0.25,1,0.5,1) both; }
.mobile-menu-overlay.is-open { animation: s-overlay-in 0.25s ease both; }

/* ── Button hover lift ───────────────────────────────────────── */
.cta-primary {
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.22s cubic-bezier(0.25,1,0.5,1),
              background-color 0.18s ease, color 0.18s ease;
}
.cta-primary:hover  { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.cta-primary:active { transform: translateY(0); }

.about-cta, .mmcta-start {
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.about-cta:hover, .mmcta-start:hover { transform: translateY(-2px); }

.mmcta-download {
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s ease;
}
.mmcta-download:hover { transform: translateY(-2px); opacity: 0.88; }

.store-badge {
  display: inline-block;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.store-badge:hover { transform: translateY(-1px); }

/* ── Card hovers ─────────────────────────────────────────────── */
.industry-card {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.35s cubic-bezier(0.25,1,0.5,1);
}
.industry-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(0,0,0,0.14);
}
.video-card {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  cursor: pointer;
}
.video-card:hover { transform: translateY(-4px); }

/* ── FAQ hover ───────────────────────────────────────────────── */
.faq-item { transition: background 0.2s ease; }

/* ── Footer links ────────────────────────────────────────────── */
.footer-links a {
  transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.footer-links a:hover { opacity: 0.6; transform: translateX(3px); }

/* ── Social icons ────────────────────────────────────────────── */
.social-icon {
  display: inline-flex;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), opacity 0.18s ease;
}
.social-icon:hover { opacity: 0.65; }

/* ── Reduced-motion safety net ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js-anim body,
  .js-anim .hero h1, .js-anim .hero .lede,
  .js-anim .hero .cta-primary, .js-anim .hero-media-block {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .sc-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sc-reveal-img img, .sc-reveal-img .bg { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mobile-menu.is-open, .mobile-menu-overlay.is-open { animation: none; }
}
}