/* Site shell — generated from landing-page.css, do not edit by hand.
   Every page except the homepage loads its CSS through SiteHeader, and it was
   loading the whole 94 KB landing-page.css for the header, the footer and the
   token set. Measured on /pricing/: 631 rules, 59 used — 91% of the file was
   dead weight on every static page, on an audience that is phone-first on
   Moroccan mobile.
   This carries the tokens, the base elements and the shell (header, nav, lang
   switcher, footer, buttons, container). The homepage still links the full
   landing-page.css itself; it does not use SiteHeader. */
/* CSS Variables */
:root {
  --color-primary: #B83376;
  --color-accent: #a81e63;
  --color-accent-hover: #8a1850;
  --color-background: #fffcfd;  /* barely-there rose tint — near-white */
  --color-card: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #686f7d;   /* 5.04:1 white · 4.94:1 rose canvas · 4.78:1 panel tint */
  --color-border: #e5e5e0;
  --color-red: #dc2626;
  --color-orange: #ea580c;

  /* Status roles are split by CONTRAST, not by hue. The base value is a
     graphic — fills, dots, chart series, chip backgrounds. The -text value is
     the one that is safe to set as `color:`. Measured on white:
       #22c55e 2.28:1  · #15803d 5.02:1
       #ef4444 3.76:1  · #dc2626 4.83:1
     Four different greens used to mean "good"; two of them failed AA as text. */
  --color-success: #22c55e;         /* graphic only — never `color:` */
  --color-success-text: #147739;    /* 5.63:1 on white, 4.81:1 on the green chip */
  --color-danger: #cd2323;          /* 5.45:1 on white, 4.83:1 on the red chip */
  --color-danger-graphic: #ef4444;  /* 3.76:1 — fills and large marks only */
  --color-warning-text: #b74509;    /* 5.46:1 on white, 4.82:1 on the amber chip */
  --color-info: #1d4ed8;            /* 6.70:1 */

  /* Third-party brand marks. NOT semantic — never reuse these for status,
     or "success" quietly becomes "WhatsApp". */
  --brand-whatsapp: #25d366;

  /* Brand pinks, role-split: --color-primary is identity (large fills, the
     logo's own pink); --color-accent is interaction (links, inline emphasis,
     small text) and carries the higher contrast. Both pass AA as text. */
  --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Vertical rhythm. Three tiers, not one repeated value: the page was running
     80px between every section and 48px on every title, so nothing led. */
  --space-section: 80px;         /* body — supporting argument */
  --space-section-peak: 120px;   /* decision moments: offer, price, act */
  --space-section-quiet: 56px;   /* scannable indexes, not arguments */

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  /* Fixed header would otherwise cover the target of every anchor jump. */
  scroll-padding-top: 88px;
  /* Clean white canvas — all blob gradients live on body::after (position:fixed)
     so they flow continuously across sections without any horizontal cuts. */
  background: #ffffff !important;
  min-height: 100vh;
  /* clip, not hidden: `hidden` on one axis forces the other to `auto`, which
     makes this element a scroll container. body would then become a scroller
     that never scrolls, and any scroll-driven timeline resolved against it
     freezes at 0%. `clip` suppresses the overflow without that side effect. */
  overflow-x: clip;
}
body {
  font-family: var(--font-family);
  /* Transparent — the fixed blob canvas (body::after) shows through. */
  background-color: #FFFFFF !important;
  /* Prevent orb blur from adding a horizontal scrollbar without hard-clipping
     vertically, and without turning body into a scroll container (see html). */
  overflow-x: clip;
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* ── Fixed blob canvas: five organic radial shapes pinned to the viewport.
   Content scrolls over them, so no section ever meets a hard gradient edge. ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: none;
}
/* Subtle dot texture — fixed (stays still as you scroll) so it reads
   as a quiet room texture, not a moving pattern. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: none;
  background-size: 28px 28px;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
}
/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
}
.btn-primary:hover {
  background-color: #333;
  transform: translateY(-1px);
}
.btn-secondary {
  background-color: var(--color-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover {
  background-color: var(--color-background);
  border-color: #ccc;
}
.btn-ghost {
  background: transparent;
  color: var(--color-text);
}
.btn-ghost:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.lang-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 22px;
  line-height: 1;
  border-radius: 8px;
  border: 1.5px solid transparent;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.15s ease;
}
.lang-flag:hover {
  border-color: rgba(184, 51, 118, 0.35);
  background: rgba(184, 51, 118, 0.06);
  transform: translateY(-1px);
}
.lang-flag:active {
  transform: translateY(0);
  background: rgba(184, 51, 118, 0.12);
}
.btn-lg {
  padding: 16px 32px;
  font-size: 16px;
}
.btn-full {
  width: 100%;
}
/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Translucent tinted background that blends into the hero gradient.
     The slight pink tint matches the hero orbs so there's no white→pink seam. */
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Very subtle bottom border + feathered shadow to blend into hero */
  box-shadow: 0 1px 0 rgba(184, 51, 118, 0.04),
              0 4px 24px rgba(184, 51, 118, 0.03);
  z-index: 1000;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
}
.nav-desktop {
  display: none;
  gap: 32px;
}
.nav-desktop a {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color 0.2s;
}
.nav-desktop a:hover {
  color: var(--color-text);
}
/* ── COD Realities nav accent ── */
.nav-desktop .nav-cod-link {
  color: var(--color-accent);
  font-weight: 600;
  position: relative;
  padding-bottom: 2px;
}
.nav-desktop .nav-cod-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--color-primary), transparent);
  border-radius: 2px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.nav-desktop .nav-cod-link:hover {
  color: var(--color-primary);
}
.nav-desktop .nav-cod-link:hover::after {
  opacity: 1;
}
/* Mobile variant */
.nav-mobile .nav-cod-link {
  color: var(--color-accent);
  font-weight: 600;
}
.nav-mobile .nav-cod-link:hover,
.nav-mobile .nav-cod-link:active {
  color: var(--color-primary) !important;
}
.header-actions {
  display: none;
  align-items: center;
  gap: 12px;
}
.mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
}
.nav-mobile {
  display: none;
  flex-direction: column;
  padding: 8px 20px 28px;
  border-top: 1px solid rgba(184, 51, 118, 0.08);
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  gap: 2px;
}
.nav-mobile.active {
  display: flex;
}
.nav-mobile > a {
  padding: 13px 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: 10px;
  border-bottom: none;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-mobile > a:hover,
.nav-mobile > a:active {
  background: rgba(184, 51, 118, 0.06);
  color: var(--color-primary);
  padding-left: 18px;
}
/* Divider before action buttons */
.nav-mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(184, 51, 118, 0.08);
}
/* Full-width buttons in mobile nav */
.nav-mobile-actions .btn {
  width: 100%;
  justify-content: center;
  padding: 13px 20px;
  font-size: 15px;
  border-radius: 12px;
}
.nav-mobile-actions .btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 16px rgba(184, 51, 118, 0.28);
}
.nav-mobile-actions .btn-primary:hover {
  background: var(--color-accent);
  transform: none;
  box-shadow: 0 6px 20px rgba(184, 51, 118, 0.36);
}
.nav-mobile-actions .btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
}
.nav-mobile-actions .btn-ghost:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(184, 51, 118, 0.25);
  color: var(--color-text);
}
/* Language switcher row in mobile nav */
.nav-mobile-actions .lang-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 6px 0 2px;
}
.nav-mobile-actions .lang-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
  width: auto;
  height: auto;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.nav-mobile-actions .lang-flag img {
  border-radius: 3px;
  display: block;
}
.nav-mobile-actions .lang-flag:hover {
  border-color: rgba(184, 51, 118, 0.4);
  background: rgba(184, 51, 118, 0.05);
  color: var(--color-primary);
  transform: none;
}
@media (min-width: 768px) {
.nav-desktop {
    display: flex;
  }
.header-actions {
    display: flex;
  }
.mobile-menu-btn {
    display: none;
  }
}
/* Section Styles */
section {
  padding-block: var(--space-section);
}
/* QUIET — a capability index and a logo belt are not arguments; they get
   less room than the sections that ask the visitor to decide something. */
.features,
.integrations {
  padding-block: var(--space-section-quiet);
}
/* Hero Section */
.hero {
  position: relative;
  padding: 140px 0 100px;
  /* Soft top-to-bottom tint so the hero blends from the header's near-white
     into a very faint rose, then back to white at the bottom edge. */
  background: transparent;
  /* overflow must stay visible so the blurred orbs are not hard-clipped
     at the section's top edge (which sits at y=0, right behind the header).
     Horizontal overflow is suppressed by body { overflow-x: clip } above. */
}
@keyframes orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(28px, 18px) scale(1.07); }
}
.hero-actions .btn {
  width: 100%;
}
@media (min-width: 480px) {
.hero-actions .btn { width: auto; }
}
.btn-hero-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Hover shimmer — GPU composited (opacity only, no repaint) */
.btn-hero-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.btn-hero-primary:hover::after { opacity: 1; }
.btn-hero-primary:hover {
  background: var(--color-accent-hover, #8a1850);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.1);
}
/* Pulse glow — uses a ::before pseudo-element with opacity animation.
   This is fully GPU-composited and causes zero repaints, unlike
   animating box-shadow directly. */
.btn-hero-primary::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, rgba(184, 51, 118, 0.5) 0%, transparent 70%);
  opacity: 0;
  animation: none;
  pointer-events: none;
  z-index: -1;
}
@keyframes cta-pulse {
  0%, 100% { opacity: 0; transform: scale(0.95); }
  50%       { opacity: 1; transform: scale(1.04); }
}
.btn-hero-ghost {
  background: rgba(255,255,255,0.7);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-hero-ghost:hover {
  background: rgba(255,255,255,0.95);
  border-color: rgba(0,0,0,0.16);
  transform: translateY(-1px);
}
@keyframes hcf-grow {
  to { width: 85%; }
}
/* Problem Section — molecular diagram */
.problem {
  background: transparent;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* One tone across all five, not five.
   Every node here names the same thing — money leaving a COD business — so a
   red / orange / yellow / purple / rose rainbow was encoding nothing and read
   as playful on a section about loss. In one warning tone the pentagon becomes
   a single system of related failures pointing inward at the brand mark in its
   centre, which is the argument the section is actually making. */
.prob-node-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(183, 69, 9, 0.09);
  color: var(--color-warning-text);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.prob-node-body p {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}
/* The figure is the one thing on the card worth reading first; it takes the
   same warning tone as the icon and tag rather than a per-card hue. */
.prob-node-stat { color: var(--color-warning-text); }
.prob-mobile-card p {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}
/* Solution Section */
.solution {
  background: transparent;
  text-align: center;
}
.solution-step-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
}
.solution-step-card p {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.62;
  margin: 0;
}
/* ── Process Deep-Dive Section ──────────────────────────────────────────────── */




/* ── Grid: two cards + center divider ── */


/* ── Cards — branded background ── */







/* Card header */












/* ── Timeline (confirmation side) ── */















/* ── Step flow (tracking side) ── */



















/* ── Stats strip ── */






/* ── Center divider ── */




/* ── Animations ── */
@keyframes processCardReveal {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes processReveal {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes processWhitePulse {
  0%, 100% { transform: scale(1);   opacity: 0.8; }
  50%      { transform: scale(1.6); opacity: 0.3; }
}
@keyframes processDividerPulse {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.1); opacity: 1; }
}
@keyframes processFloatDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}
@keyframes processFloatUp {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
/* Ambient float — applied after reveal completes */






/* Features Section */
.features {
  background: transparent;
  text-align: center;
}
.feature-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
}
.feature-card p {
  font-size: 14.5px;
  color: var(--color-text-muted);
  line-height: 1.6;
}
/* ── The chosen one ──
   Same card, same tokens, more conviction: a white surface against the three
   tinted supporters, a 1px accent hairline, and the section's own larger
   heading step. Nothing here is a primitive the page did not already own. */
.feature-card--lead {
  padding: 32px;
  background: var(--color-card, #fff);
  border: 1px solid rgba(168, 30, 99, 0.16);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 18px;
  align-items: start;
}
.feature-card--lead h3 {
  font-size: 24px;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.feature-card--lead p {
  font-size: 16px;
  max-width: 62ch;
  color: var(--color-text);
}
/* How It Works Section */
.how-it-works {
  background: transparent;
  text-align: center;
}
/* ── Icon circle ── */
/* Steps 1-4 recede to ink on a cool neutral; only the last step carries colour.
   The numbered badges already state the sequence, and step 5 is already the
   emphasised card — five different icon hues fought that emphasis instead of
   supporting it. Now the eye walks a calm sequence and lands on brand colour
   exactly where the product delivers. */
.hiw-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  margin-bottom: 16px;
  background: rgba(38, 44, 58, 0.05);
  color: var(--color-text);
  transition: transform 0.28s ease;
}
/* ── Detail list inside a card ── */
.hiw-details {
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
}
.hiw-details li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.hiw-details li svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-accent);
  opacity: 0.7;
}
.hiw-details li strong {
  color: var(--color-text);
  font-weight: 600;
}
/* Pricing Section */
.pricing {
  background: transparent;
  text-align: center;
}
.pricing-header h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
}
/* Testimonials Section */
/* ════════════════════════════════════════════════════════════════
   Before & After Section
   ════════════════════════════════════════════════════════════════ */
.bna-section {
  background: transparent;
  text-align: center;
}
/* FAQ Section */
.faq {
  padding-block: var(--space-section);
  background: var(--color-background);
  text-align: center;
}
.faq-answer p {
  color: var(--color-text-muted);
  line-height: 1.7;
  font-size: 15px;
  /* Answers were running ~95 characters per line; cap the measure. */
  max-width: 68ch;
  margin: 0;
}
@media (max-width: 768px) {
.faq-answer p {
    font-size: 14px;
  }
}
/* Language Switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* CTA Section */
.cta {
  /* Layout.astro ships a generic `.cta { padding: 1.5rem }` utility. A class
     beats a type selector, so it was silently overriding `section` and left
     the conversion moment as the least prominent block on the page. */
  padding-block: var(--space-section-peak);
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  border-radius: 0 !important;
}
.cta h2 {
  font-size: clamp(32px, 5.5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.cta p {
  font-size: 18px;
  opacity: 0.85;
  margin-bottom: 36px;
}
/* ════════════════════════════════════════════════════════════════
   Workflow Diagram Section
   ════════════════════════════════════════════════════════════════ */
.workflow-section {
  background: transparent;
  padding-block: var(--space-section);
  overflow: hidden;
}
@keyframes wf-flow {
  from { stroke-dashoffset: 14; }
  to   { stroke-dashoffset: 0; }
}
@keyframes wf-flow-feedback {
  from { stroke-dashoffset: 22; }
  to   { stroke-dashoffset: 0; }
}
@keyframes crm-ripple {
  0%   { transform: scale(0.78); opacity: 0.75; }
  80%  { opacity: 0.1; }
  100% { transform: scale(1.12); opacity: 0; }
}
/* ── Dashboard Preview Section ──────────────────────────────────────────────── */


.dash-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 52px;
}
/* ════════════════════════════════════════════════════════════════
   Integrations Section
   ════════════════════════════════════════════════════════════════ */
.integrations {
  background: transparent;
  overflow: hidden;
}
@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
/* Footer */
.footer {
  padding: 80px 0 40px;
  background: #FFFFFF !important;
}
.footer-grid {
  display: grid;
  gap: 40px;
  margin-bottom: 48px;
}
@media (min-width: 768px) {
.footer-grid {
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 32px;
  }
}
.footer-brand {
  max-width: 280px;
}
.footer-brand .logo {
  margin-bottom: 16px;
}
.footer-brand p {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}
.social-links {
  display: flex;
  gap: 12px;
}
.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  transition: all 0.2s;
}
.social-links a:hover {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}
.footer-links h3 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}
.footer-links li {
  margin-bottom: 12px;
}
.footer-links a {
  font-size: 14px;
  color: var(--color-text-muted);
  transition: color 0.2s;
}
.footer-links a:hover {
  color: var(--color-text);
}
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
  text-align: center;
}
@media (min-width: 640px) {
.footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.footer-bottom p {
  font-size: 14px;
  color: var(--color-text-muted);
}
/* ── KPI Showcase Section ──────────────────────────────────────────────────── */
.kpi-showcase {
  position: relative;
  padding-block: var(--space-section);
  overflow: hidden;
  perspective: 1200px;
}
@keyframes kpiFloat2 {
  0%,100% { transform: translateY(0) rotateX(0) rotateY(0); }
  40%     { transform: translateY(-12px) rotateX(-0.8deg) rotateY(0.4deg); }
  70%     { transform: translateY(-3px) rotateX(0.3deg) rotateY(-0.2deg); }
}
@keyframes kpiFloat3 {
  0%,100% { transform: translateY(0) rotateX(0); }
  35%     { transform: translateY(-10px) rotateX(0.6deg); }
  65%     { transform: translateY(-3px) rotateX(-0.3deg); }
}
@keyframes kpiFloat4 {
  0%,100% { transform: translateY(0) rotateX(0) rotateY(0); }
  45%     { transform: translateY(-13px) rotateX(0.7deg) rotateY(-0.3deg); }
  75%     { transform: translateY(-5px) rotateX(-0.4deg) rotateY(0.15deg); }
}
/* ── Panel body ── */
.kpi-panel-body {
  flex: 1;
  min-width: 0;
}
/* ── Lower section: financials + cities ── */
.kpi-lower {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 24px;
  position: relative;
  z-index: 1;
}
.kpi-cta .btn svg {
  margin-left: 6px;
  vertical-align: middle;
}
/* ════════════════════════════════════════════════════════════════
   Reduced motion
   Twenty-one keyframe animations run on this page — orbs, marquees,
   shimmer, pulses, the CTA shake, the workflow path flow. None of them
   carry information, so all of them stop here. Transitions are cut to
   a near-zero duration rather than 0 so :hover/:focus styles still
   commit and transitionend handlers still fire.
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* The universal animation/transition kill lives in Layout.astro's global
     block so it covers every page, not just this one. What follows is the
     landing-page-specific remainder. */

  /* The two logo belts are transform-driven and would otherwise sit
     mid-scroll at a random offset; park them at their start. */
  .marquee-track,
  .integrations-track {
    animation: none !important;
    transform: none !important;
  }

  /* Entrance helpers set opacity:0 inline before animating in. With motion
     off there is no animation to restore them, so force them visible. */
  .feature-card,
  .testimonial-card,
  .step {
    opacity: 1 !important;
    transform: none !important;
  }
}
/* ── Suspend ambient motion outside the viewport ─────────────────────────────
   The page is ~13,500px tall and every ambient animation on it is infinite.
   Measured at 72% scroll depth, 29 of 29 running CSS animations were driving
   elements that were entirely off-screen — continuous compositor and
   style-recalc work billed to a phone-first audience on mid-range Android.

   landing-page.js marks a section idle once it is 300px clear of the viewport
   and clears the flag before it returns, so nothing is ever seen paused. With
   JS off the attribute is never set and the page animates exactly as before.

   !important is needed because these animations are declared on the elements
   themselves; nothing else on the page sets animation-play-state. */
[data-anim-idle] *,
[data-anim-idle] *::before,
[data-anim-idle] *::after {
  animation-play-state: paused !important;
}
/* ── Free tier, above the paid card ──────────────────────────────────────────
   The CRM and the WhatsApp automation cost nothing, and they were listed as
   items four and five inside the 10 MAD card's tick list, where they read as
   part of what the 10 MAD buys. Stated here instead, priced, in the order a
   merchant actually meets the offer: the platform is free, you pay for people.
   Figures use --color-success-text because Free is the good news; the paid
   figures below stay brand-coloured. */
.pricing-free {
  max-width: 560px;
  margin: 0 auto 28px;
}
/* The pricing section centres its content; a two-column ledger has to opt out
   or the price and the name stop lining up with each other. */
.pricing-free-row > * { text-align: start; }