/* 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;
}

/* This file loads after the layout's global block, so the reduced-motion
   opt-out has to be repeated here to win on source order. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

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);
}

/* PEAK — the three beats that carry the decision. More air, and the CTA
   takes the largest type on the page rather than the smallest. */
.solution,
.pricing {
  padding-block: var(--space-section-peak);
}

/* 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);
}

.section-label {
  display: inline-block;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-accent);
  background: rgba(168, 30, 99, 0.08);
  border-radius: 100px;
  margin-bottom: 16px;
}

.section-title {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 16px;
  text-wrap: balance;
}

.section-subtitle {
  font-size: 18px;
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto 48px;
  text-wrap: pretty;
}

/* Hero Section */
.hero {
  position: relative;
  /* Generous, asymmetric: more air above the headline than below the CTA, so
     the section opens rather than sitting in a box. */
  padding: 132px 0 104px;
  /* 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. */
}

.text-accent { color: var(--color-accent); }

/* Background orbs */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* No overflow clip — let blurred orbs bleed through the header area
     and fade out naturally instead of being cut at a hard line. */
  z-index: 0;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.hero-orb-1 {
  width: 650px;
  height: 650px;
  background: none;
  top: -120px;
  right: -80px;
  animation: orb-drift 15s ease-in-out infinite alternate;
}

.hero-orb-2 {
  width: 480px;
  height: 480px;
  background: none;
  bottom: 40px;
  left: -100px;
  animation: orb-drift 20s ease-in-out infinite alternate-reverse;
}

@keyframes orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(28px, 18px) scale(1.07); }
}

/* Two-column layout */
.hero-inner {
  display: grid;
  gap: 48px;
  align-items: center;
  margin-bottom: 72px;
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .hero { padding: 152px 0 120px; }
  .hero-inner {
    /* Not 1fr 1fr: the copy column sets the headline's maximum size, and the
       visual is a fixed-width card that does not need half the row. */
    grid-template-columns: 1.18fr 1fr;
    gap: 64px;
  }
}

.hero-content { position: relative; z-index: 1; }

/* Badge */

@keyframes badge-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(3);   opacity: 0;    }
  100% { transform: scale(1);   opacity: 0;    }
}

/* Title */
.hero-title {
  /* Display scale. Three short clauses on three lines is what lets the
     headline run this large inside the hero column — a single long line could
     not. The ceiling is set by the longest French line ('Vous lancez la Pub.')
     against the measured column width; see the widened grid below. */
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}

/* The three key words carry the weight; the rest of the sentence recedes to
   600 so the contrast is legible rather than uniformly loud. */
.hero-title b {
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* Third line is the payoff, so its key word takes the brand colour. Flat fill,
   no gradient. */
.hero-line--payoff b { color: var(--color-primary); }

.hero-line {
  display: block;
  /* The entrance animation slides each line up behind a mask, so this box has
     to clip — but at the old 1.06 leading the line box was shorter than the
     font's em box, and the mask sheared the descenders off every line (worst
     in Arabic, whose ج ي م hang far below the baseline). Pad the bottom so the
     mask edge clears the descenders, then pull the same amount back with
     margin so the lines keep their tight stacking. */
  overflow: hidden;
  padding-block-end: 0.18em;
  margin-block-end: -0.18em;
}

/* Subtitle */
.hero-subtitle {
  font-size: 16.5px;
  color: var(--color-text-muted);
  max-width: 470px;
  line-height: 1.6;
  margin-bottom: 34px;
  text-wrap: pretty;
}

/* CTA */
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}

.hero-actions .btn {
  width: 100%;
}

@media (min-width: 480px) {
  .hero-actions { flex-direction: row; }
  .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);
}

/* Social proof */
.hero-proof {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-proof-avatars { display: flex; }

.hero-proof-text {
  font-size: 14px;
  color: var(--color-text-muted);
}

/* ── Hero visual (right column) ── */
.hero-visual {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 32px 12px 64px;
}

.hero-card {
  position: relative;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.03),
    0 8px 24px rgba(0,0,0,0.07),
    0 28px 56px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 400px;
  overflow: hidden;
}

/* Diagonal shimmer sweep — pure transform, zero layout, zero repaint */
@keyframes hc-shimmer {
  0%   { transform: translateX(-160%) skewX(-14deg); }
  22%  { transform: translateX(220%)  skewX(-14deg); }
  100% { transform: translateX(220%)  skewX(-14deg); }
}

.hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 55%;
  background: none;
  transform: translateX(-160%) skewX(-14deg);
  animation: hc-shimmer 6.5s 2.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 4;
}

/* Card chrome bar */
.hero-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background);
}

.hc-dots { display: flex; gap: 5px; }
.hc-dots span { width: 10px; height: 10px; border-radius: 50%; }
.hc-dots span:nth-child(1) { background: #ff5f57; }
.hc-dots span:nth-child(2) { background: #febc2e; }
.hc-dots span:nth-child(3) { background: #28c840; }

.hc-title {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.hc-live {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent);
}

.hc-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  position: relative;
}
.hc-live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-accent);
  animation: badge-pulse 2.2s ease-out infinite;
}

/* Card rows */
.hero-card-body { padding: 4px 0; }

.hc-order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.18s;
}

.hc-order:last-child { border-bottom: none; }
.hc-order:hover { background: var(--color-background); }

.hc-order-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hc-order-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted, #686f7d);
}
.hc-order-icon svg { width: 18px; height: 18px; display: block; }

.hc-order-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.hc-order-loc {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 1px;
}

.hc-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
  white-space: nowrap;
}

.hc-confirmed { background: rgba(168, 30, 99, 0.1);  color: var(--color-accent); }
.hc-transit   { background: rgba(234, 88, 12, 0.1);  color: var(--color-warning-text); }
.hc-delivered { background: rgba(34, 197, 94, 0.12); color: var(--color-success-text); }

/* Card footer */
.hero-card-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border);
  background: var(--color-background);
}

.hcf-item { display: flex; flex-direction: column; gap: 1px; }

.hcf-val {
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

.hcf-lbl {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.hcf-bar-wrap {
  flex: 1;
  height: 5px;
  background: var(--color-border);
  border-radius: 100px;
  overflow: hidden;
}

.hcf-bar {
  height: 100%;
  width: 0;
  background: var(--color-accent);
  border-radius: 100px;
  animation: hcf-grow 1.6s 1.4s ease-out forwards;
}

@keyframes hcf-grow {
  to { width: 85%; }
}

/* Floating notification chips */
.hero-notif {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  white-space: nowrap;
  z-index: 3;
}

.hero-notif-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--color-accent, #a81e63);
}
.hero-notif-icon svg { width: 18px; height: 18px; display: block; }

.hero-notif-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.hero-notif-sub {
  font-size: 12px;
  color: var(--color-text-muted);
}

.hero-notif-1 { top: 4px;   right: -4px; }
.hero-notif-2 { bottom: 20px; left: -4px; }

@media (max-width: 1100px) {
  .hero-notif-1 { right: 8px; }
  .hero-notif-2 { left: 8px;  }
}

@media (max-width: 640px) {
  .hero-notif-2 { display: none; }
}

/* Hero mobile text overflow fix — FR strings are significantly longer */
@media (max-width: 767px) {
  .hero-actions .btn {
    white-space: normal;
    word-break: break-word;
    text-align: center;
    line-height: 1.35;
  }
}

/* ── Stats bar ── */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 28px 32px;
  flex: 1;
  min-width: 130px;
}

.stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 13px;
  color: var(--color-text-muted);
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: var(--color-border);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .stat-divider { display: none; }
  .stat { border-bottom: 1px solid var(--color-border); }
  .stat:last-child { border-bottom: none; }
}

/* Problem Section — molecular diagram */
.problem {
  background: transparent;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.problem-header {
  position: relative;
  z-index: 1;
}

.problem-intro {
  font-size: 17px;
  color: var(--color-text-muted);
  max-width: 520px;
  margin: 0 auto 0;
  line-height: 1.65;
  text-wrap: pretty;
}

/* ── Diagram canvas (desktop only) ── */
.prob-diagram {
  position: relative;
  width: 100%;
  height: 900px;
  margin-top: 8px;
  overflow: visible;
}

/* SVG layer for connector lines */
/* ── Center brand node ── */
.prob-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
  Rings expand from the center circle (104px) outward to the orbital nodes (R=330px).
  Target diameter = 330*2 = 660px → scale = 660/104 ≈ 6.35
  4 rings, each offset by T/4 so one is always visibly expanding.
*/
@keyframes prob-ring-pulse {
  0%   { transform: translate(-50%, -50%) scale(1);    opacity: 0.25; }
  15%  { opacity: 0.18; }
  75%  { transform: translate(-50%, -50%) scale(6.35); opacity: 0;   }
  100% { transform: translate(-50%, -50%) scale(6.35); opacity: 0;   }
}

.prob-center-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 104px; height: 104px;
  border-radius: 50%;
  border: 1.5px solid rgba(184, 51, 118, 0.22);
  pointer-events: none;
  animation: prob-ring-pulse 4.8s ease-out infinite;
}

.prob-center-ring--1 { animation-delay:  0s;   }
.prob-center-ring--2 { animation-delay: -1.2s; }
.prob-center-ring--3 { animation-delay: -2.4s; }
.prob-center-ring--4 { animation-delay: -3.6s; }

.prob-center-inner {
  position: relative;
  z-index: 2;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background:  transparent;
  /*border: 2px solid rgba(184, 51, 118, 0.22);
  box-shadow:
    0 0 0 6px rgba(184, 51, 118, 0.04),
    0 8px 32px rgba(184, 51, 118, 0.10),
    0 2px 8px rgba(0,0,0,0.04);*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.prob-center-inner span {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.02em;
  line-height: 1;
}

/* ── Orbital problem node — rectangular card ── */
.prob-node {
  position: absolute;
  width: 180px;
  background: var(--color-card);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--radius-lg);
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  z-index: 3;
  transition: box-shadow 0.28s cubic-bezier(0.34,1.56,0.64,1), border-color 0.28s ease, transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
  cursor: default;
}

.prob-node:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.08), 0 16px 40px rgba(184,51,118,0.1);
  border-color: rgba(184,51,118,0.22);
}

/*
  Pentagon layout — R=330px from diagram center (50%, 50%).
  Card W=180 (half=90), estimated H=200 (half=100).
  Angles: pn0=-90°, pn1=-18°, pn2=+54°, pn3=+126°, pn4=+198°

  left = 50% + cos(angle)*R - 90
  top  = 50% + sin(angle)*R - 100

  pn0: cos=-90°=0,      sin=-90°=-1      → left=50%-90px,  top=50%-430px
  pn1: cos=-18°=+0.951, sin=-18°=-0.309  → left=50%+224px, top=50%-202px
  pn2: cos=+54°=+0.588, sin=+54°=+0.809  → left=50%+104px,  top=50%+167px
  pn3: cos=+126°=-0.588,sin=+126°=+0.809  → left=50%-284px, top=50%+167px
  pn4: cos=+198°=-0.951,sin=+198°=-0.309  → left=50%-404px, top=50%-202px
*/
#pn0 { left: calc(50% - 90px);  top: calc(50% - 430px); }
#pn1 { left: calc(50% + 224px); top: calc(50% - 202px); }
#pn2 { left: calc(50% + 104px); top: calc(50% + 167px); }
#pn3 { left: calc(50% - 284px); top: calc(50% + 167px); }
#pn4 { left: calc(50% - 404px); top: calc(50% - 202px); }

/* 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:hover .prob-node-icon,
.prob-mobile-card:hover .prob-node-icon {
  transform: scale(1.15);
  background: rgba(183, 69, 9, 0.16);
  box-shadow: 0 0 0 4px rgba(183, 69, 9, 0.07);
}

.prob-node-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

.prob-node-stat {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.prob-node-body strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.prob-node-body p {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}

.prob-node-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
  width: fit-content;
  background: rgba(183, 69, 9, 0.07);
  color: var(--color-warning-text);
  border: 1px solid rgba(183, 69, 9, 0.18);
}

/* 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); }

/* ── SVG connector lines ── */
/* ── Mobile card list ── */
.prob-mobile-list {
  display: none;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  flex-direction: column;
  gap: 14px;
}

.prob-mobile-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background: var(--color-card);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.05);
  text-align: left;
  transition: box-shadow 0.28s ease, border-color 0.28s ease, transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}

.prob-mobile-card:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,0.09), 0 20px 48px rgba(184,51,118,0.13);
  border-color: rgba(184,51,118,0.28);
  border-top-color: rgba(184,51,118,0.65);
  transform: translateY(-4px);
}

.prob-mobile-card > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.prob-mobile-card strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

.prob-mobile-card .prob-node-stat {
  font-size: 18px;
  font-weight: 800;
}

.prob-mobile-card p {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Show diagram on ≥768px, card list on smaller */
@media (max-width: 767px) {
  .prob-diagram    { display: none; }
  .prob-mobile-list { display: flex; }
}

@media (min-width: 768px) {
  .prob-mobile-list { display: none; }
}

/* Solution Section */
.solution {
  background: transparent;
  text-align: center;
}

.solution-header {
  max-width: 620px;
  margin: 0 auto;
}

/* ── Steps container ── */
.solution-steps {
  display: flex;
  align-items: flex-start;
  margin-top: 64px;
  position: relative;
  gap: 0;
}

/* Horizontal track line through node centers (desktop) */
/* With 4 equal flex-1 columns, each center is at 12.5%, 37.5%, 62.5%, 87.5% of total width */
.solution-steps::before {
  content: '';
  position: absolute;
  top: 19px; /* half of 38px node height */
  left: 12.5%;
  right: 12.5%;
  height: 1.5px;
  background: rgba(168, 30, 99, 0.22);
  pointer-events: none;
  z-index: 0;
}

/* ── Individual step ── */
.solution-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 10px;
  position: relative;
}

/* ── Numbered node ── */
.solution-step-node {
  position: relative;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-card);
  border: 1.5px solid rgba(168, 30, 99, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  /* "punch-out" ring halo that visually separates node from track line */
  box-shadow: 0 0 0 5px var(--color-card), 0 2px 8px rgba(168, 30, 99, 0.12);
  flex-shrink: 0;
  transition: box-shadow 0.2s;
}

/* Final step — filled brand node */
.solution-step-node--done {
  background: var(--color-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 0 5px var(--color-card), 0 4px 14px rgba(168, 30, 99, 0.35);
}

/* ── Step card ── */
.solution-step-card {
  background: var(--color-background);
  border: 1px solid rgba(0, 0, 0, 0.055);
  border-radius: var(--radius-lg);
  padding: 22px 16px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 18px rgba(0, 0, 0, 0.055);
  width: 100%;
  transition: box-shadow 0.22s, transform 0.22s;
}

.solution-step-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07), 0 12px 32px rgba(0, 0, 0, 0.09);
  transform: translateY(-3px);
}

/* Final step card — faint brand tint */
.solution-step-card--done {
  border-color: rgba(168, 30, 99, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 18px rgba(168, 30, 99, 0.08);
}

.solution-step-card--done:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(168, 30, 99, 0.12);
}

/* ── Icon inside card ── */
.solution-step-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  /* background: rgba(168, 30, 99, 0.08); */
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.solution-step-icon--done {
  /* background: rgba(168, 30, 99, 0.1); */
  color: var(--color-accent);
}

.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;
}

/* ── Mobile: vertical stepper ── */
@media (max-width: 767px) {
  .solution-steps {
    flex-direction: column;
    gap: 0;
    max-width: 440px;
    margin: 48px auto 0;
  }

  /* Hide horizontal track */
  .solution-steps::before {
    display: none;
  }

  .solution-step {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 0 0 24px 0;
  }

  /* Vertical connector from bottom of node to center of next node */
  /* node height = 38px, so: top = 38px, height = 100% (padded) - 19px */
  .solution-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 38px;
    left: 18px; /* center of 38px node, accounting for 1px border */
    transform: translateX(-50%);
    width: 1.5px;
    height: calc(100% - 19px);
    background: rgba(168, 30, 99, 0.18);
    z-index: 0;
    pointer-events: none;
  }

  .solution-step-node {
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .solution-step-card {
    text-align: left;
    align-items: flex-start;
  }
}

/* ── 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;
}

.features-grid {
  display: grid;
  gap: 20px;
  margin-top: 48px;
}

/* The lead spans the full row at every size that has more than one column;
   the three supporting capabilities share the row beneath it. */
@media (min-width: 640px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-card--lead { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .features-grid { grid-template-columns: repeat(3, 1fr); }
}

.feature-card {
  padding: 24px;
  background: var(--color-background);
  border-radius: var(--radius-lg);
  text-align: start;
  transition: transform 0.2s, box-shadow 0.2s;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: rgba(168, 30, 99, 0.1);
  color: var(--color-accent);
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.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:hover { box-shadow: var(--shadow); }

.feature-card--lead .feature-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 0;
  background: var(--color-accent);
  color: #fff;
}

.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);
}

@media (min-width: 700px) {
  .feature-card--lead {
    grid-template-columns: 54px 1fr;
    column-gap: 22px;
    padding: 34px 36px;
    /* Spanning the full 1152px row left the copy stranded against a third of
       the card empty — the measure has to stay readable, so the card comes in
       to meet it. Still far wider than the three supporters. */
    max-width: 860px;
    margin-inline: auto;
    width: 100%;
  }
}

/* How It Works Section */
.how-it-works {
  background: transparent;
  text-align: center;
}

/* ── Horizontal track layout ── */
.hiw-track {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-top: 56px;
  position: relative;
}

/* ── Arrow connectors ── */
.hiw-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 80px;
  padding: 0 4px;
  color: rgba(168, 30, 99, 0.25);
  flex-shrink: 0;
}

/* ── Card ── */
.hiw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 20px 28px;
  width: 200px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(168, 30, 99, 0.1);
  border-radius: 16px;
  transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hiw-card:hover {
  border-color: rgba(168, 30, 99, 0.22);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 32px rgba(168, 30, 99, 0.08), 0 0 0 1px rgba(168, 30, 99, 0.06);
  transform: translateY(-4px);
}

/* Accent card (final step) */
.hiw-card--accent {
  background: rgba(168, 30, 99, 0.04);
  border-color: rgba(168, 30, 99, 0.18);
}

.hiw-card--accent:hover {
  background: rgba(168, 30, 99, 0.07);
  border-color: rgba(168, 30, 99, 0.3);
  box-shadow: 0 8px 32px rgba(168, 30, 99, 0.12), 0 0 0 1px rgba(168, 30, 99, 0.1);
}

/* ── Step number badge ── */
.hiw-number {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-card);
  border: 1.5px solid rgba(168, 30, 99, 0.2);
  border-radius: 50%;
  z-index: 2;
}

.hiw-number span {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
}

.hiw-number--accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.hiw-number--accent span {
  color: #fff;
}

/* ── 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;
}

.hiw-card:hover .hiw-icon {
  transform: scale(1.08);
}

.hiw-icon--accent {
  background: rgba(168, 30, 99, 0.1);
  color: var(--color-accent);
}

/* ── Text ── */
.hiw-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
  line-height: 1.3;
}

.hiw-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

/* ── Tag chip ── */
.hiw-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(168, 30, 99, 0.06);
  color: var(--color-accent);
  border: 1px solid rgba(168, 30, 99, 0.12);
  letter-spacing: 0.02em;
}

.hiw-tag--accent {
  background: rgba(168, 30, 99, 0.1);
  border-color: rgba(168, 30, 99, 0.22);
  color: #7a1548;
}

/* ── Wide card variant (for detail-heavy steps) ── */
.hiw-card--wide {
  width: 240px;
}

/* ── 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;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hiw-card {
    width: 170px;
    padding: 28px 14px 24px;
  }

  .hiw-card--wide {
    width: 210px;
  }

  .hiw-arrow svg {
    width: 24px;
  }
}

@media (max-width: 768px) {
  .hiw-track {
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .hiw-card {
    width: 100%;
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: 28px 20px 24px;
    gap: 0;
    border-radius: 14px;
  }

  .hiw-card--wide {
    width: 100%;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .hiw-number {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
  }

  .hiw-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 12px;
  }

  .hiw-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hiw-title { font-size: 15px; margin-bottom: 6px; }
  .hiw-desc  { font-size: 13px; margin-bottom: 12px; line-height: 1.55; }

  .hiw-arrow {
    transform: rotate(90deg);
    margin: 8px 0;
    padding: 0;
  }

  /* Spacing between cards */
  .hiw-card:not(:last-child) {
    margin-bottom: 4px;
  }
}

@media (max-width: 480px) {
  .hiw-card {
    padding: 24px 16px 20px;
  }
}

/* Pricing Section */
.pricing {
  background: transparent;
  text-align: center;
}

.price {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
}

.pricing-feature--soon {
  opacity: 0.6;
}

.pricing-feature--soon svg {
  color: var(--color-text-muted);
}

.pricing-soon-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(168, 30, 99, 0.08);
  color: var(--color-primary);
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Testimonials Section */
/* ════════════════════════════════════════════════════════════════
   Before & After Section
   ════════════════════════════════════════════════════════════════ */
.bna-section {
  background: transparent;
  text-align: center;
}

/* ── Two-column comparison grid ── */
.bna-ledger {
  max-width: 940px;
  margin-inline: auto;
  margin-block-start: 48px;
  text-align: start;
}

/* Column labels sit above the ledger, not on each side's box — the sides are
   no longer boxes. */
.bna-heads {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  gap: 0 8px;
  margin-block-end: 14px;
}
.bna-head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.bna-head--before { color: var(--color-text-muted, #686f7d); }
.bna-head--after  { color: var(--color-success-text); }

/* One pain, one resolution, one line. The reversal is the point, so it is
   the structure rather than something the reader has to assemble. */
.bna-pair {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  align-items: stretch;
  gap: 0 8px;
  border-block-start: 1px solid var(--color-border, #e5e5e0);
}
.bna-pair:last-child { border-block-end: 1px solid var(--color-border, #e5e5e0); }

.bna-side {
  display: grid;
  align-content: center;
  gap: 3px;
  padding-block: 18px;
  min-width: 0;
}
.bna-stat { font-size: 17px; font-weight: 700; line-height: 1.3; }
.bna-desc { font-size: 13.5px; line-height: 1.5; color: var(--color-text-muted, #686f7d); }

/* The problem side recedes; the resolution side is the one that wins. Same
   type scale, different conviction — no second palette introduced. */
.bna-side--before .bna-stat { color: var(--color-text-muted, #686f7d); font-weight: 600; }
.bna-side--before .bna-desc { opacity: 0.75; }

.bna-side--after {
  padding-inline: 18px;
  background: rgba(34, 197, 94, 0.05);
  border-radius: var(--radius, 12px);
}
.bna-side--after .bna-stat { color: var(--color-success-text); font-size: 18px; }
.bna-side--after .bna-desc { color: var(--color-text, #1a1a1a); }

.bna-becomes {
  display: grid;
  place-items: center;
  color: var(--color-success-text);
  opacity: 0.45;
}
/* The arrow points from problem to resolution; in Arabic that is leftward. */
[dir="rtl"] .bna-becomes svg { transform: scaleX(-1); }

@media (max-width: 767px) {
  .bna-heads { display: none; }
  .bna-pair {
    grid-template-columns: 1fr;
    gap: 0;
    padding-block: 16px;
  }
  .bna-side { padding-block: 0; }
  .bna-side--after {
    padding: 14px 16px;
    margin-block-start: 10px;
  }
  /* Stacked, the arrow turns to point down the page. */
  .bna-becomes {
    justify-content: start;
    padding-block-start: 10px;
  }
  .bna-becomes svg { transform: rotate(90deg); }
  [dir="rtl"] .bna-becomes svg { transform: rotate(90deg); }
}

.stats-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 64px;
  padding: 40px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  .stats-bar {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stats-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-text);
}

.stats-label {
  font-size: 14px;
  color: var(--color-text-muted);
}

/* FAQ Section */
.faq {
  padding-block: var(--space-section);
  background: var(--color-background);
  text-align: center;
}

.faq-list {
  max-width: 760px;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s;
}

.faq-item:hover {
  border-color: var(--color-primary);
}

.faq-item[open] {
  border-color: var(--color-primary);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  color: var(--color-text);
  list-style: none;
  gap: 16px;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-chevron {
  flex-shrink: 0;
  transition: transform 0.25s ease;
  color: var(--color-text-muted);
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.faq-answer {
  padding: 0 24px 20px;
}

.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 {
    padding: 64px 0;
  }

  .faq-question {
    padding: 16px 20px;
    font-size: 15px;
  }

  .faq-answer {
    padding: 0 20px 16px;
  }

  .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-content {
  max-width: 640px;
  margin: 0 auto;
}

.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;
}

/* ── WhatsApp button group ── */
.cta-wa-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 520px) {
  .cta-wa-group {
    flex-direction: row;
    max-width: 100%;
  }
}

.cta-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
  padding: 16px 22px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  line-height: 1.3;
  flex-wrap: wrap;
}

.cta-wa-btn:hover {
  transform: translateY(-2px);
}

/* Primary: white bg, green accent */
.cta-wa-btn--primary {
  background: #fff;
  color: #111;
  box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}

.cta-wa-btn--primary:hover {
  background: #f0fdf4;
  box-shadow: 0 6px 24px rgba(34,197,94,0.2);
}

.cta-wa-btn--primary .cta-wa-icon {
  color: var(--brand-whatsapp);
}

/* Secondary: transparent outline */
.cta-wa-btn--secondary {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.3);
}

.cta-wa-btn--secondary:hover {
  background: rgba(255,255,255,0.14);
  box-shadow: 0 4px 18px rgba(255,255,255,0.08);
}

.cta-wa-btn--secondary .cta-wa-icon {
  color: var(--brand-whatsapp);
}

.cta-wa-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.cta-wa-num {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.65;
  width: 100%;
  text-align: center;
}

.cta-note {
  font-size: 14px;
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════
   Workflow Diagram Section
   ════════════════════════════════════════════════════════════════ */
.workflow-section {
  background: transparent;
  padding-block: var(--space-section);
  overflow: hidden;
}

.workflow-header {
  text-align: center;
  margin-bottom: 56px;
}

.workflow-header .section-subtitle {
  margin-bottom: 0;
}

/* ── Stage: horizontal flex container ── */

@media (max-width: 767px) {
  .wf-stage {
    justify-content: flex-start;
    padding: 0 20px 56px;
  }
}

/* ── Column ── */

/* Column width hints */

/* ── Connector (SVG arrows between columns) ── */

/* ── Flow lines ── */

@keyframes wfl-flow {
  from { stroke-dashoffset: 14; }
  to   { stroke-dashoffset: 0; }
}

@keyframes wfl-flow-feedback {
  from { stroke-dashoffset: 22; }
  to   { stroke-dashoffset: 0; }
}

/* ════ Column 1: Sources ════ */

/* Source row card */

/* ════ Column 2: CRM Hub ════ */

@keyframes crm-ripple {
  0%   { transform: scale(0.78); opacity: 0.75; }
  80%  { opacity: 0.1; }
  100% { transform: scale(1.12); opacity: 0; }
}

/* ════ Column 3: Confirmation — action cards ════ */

/* attempt dots row */

/* message bubbles */

/* ════ Column 4: Delivery ════ */

/* carrier pill grid */

/* ════ Column 5: Tracking & Feedback ════ */

/* ── Dashboard Preview Section ──────────────────────────────────────────────── */

.dash-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 52px;
}

/* 3-column zig-zag grid: featured cards span 2 cols */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Row 1: Orders featured (left 2/3) + Delivery (right 1/3) */
.dash-card:nth-child(1) { grid-column: span 2; }
/* Row 2: Analytics (left 1/3) + Overview featured (right 2/3) */
.dash-card:nth-child(4) { grid-column: span 2; }

/* ── Card shell ── */
.dash-card {
  display: flex;
  flex-direction: column;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: transform 0.32s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.32s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: default;
}

.dash-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 28px 52px -14px rgba(0, 0, 0, 0.15),
              0 0 0 1px rgba(184, 51, 118, 0.09);
}

/* ── Browser chrome bar ── */
.dash-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: #f4f5f7;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.dash-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.dash-dots span {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.dash-dots span:nth-child(1) { background: #f87171; }
.dash-dots span:nth-child(2) { background: #fbbf24; }
.dash-dots span:nth-child(3) { background: #4ade80; }

.dash-url {
  font-size: 11px;
  color: #6b7280;
  background: #ffffff;
  border: 1px solid #e9eaec;
  border-radius: 5px;
  padding: 3px 10px;
  flex: 1;
  max-width: 280px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── Screen / mockup area ── */
.dash-screen {
  flex: 1;
  padding: 14px 16px;
  background: #f8f9fb;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

/* ── Caption bar ── */
.dash-caption {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.dash-caption-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(184, 51, 118, 0.09);
  color: var(--color-primary);
  flex-shrink: 0;
}

.dash-caption-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-caption-text strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}

.dash-caption-text span {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ─────────────────────────────────
   Mockup UI — Orders Table
   ───────────────────────────────── */
.dm-orders { font-size: 11px; }

.dm-topbar-kpis {
  display: flex;
  gap: 7px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.dm-kpi-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 6px;
  background: #f0f1f4;
  border: 1px solid #e4e5e9;
}

.dm-kpi-chip--green  { background: rgba(34,197,94,0.08);   border-color: rgba(34,197,94,0.24); }
.dm-kpi-chip--red    { background: rgba(239,68,68,0.08);   border-color: rgba(239,68,68,0.24); }
.dm-kpi-chip--orange { background: rgba(245,158,11,0.08);  border-color: rgba(245,158,11,0.24); }

.dm-kpi-num {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}

.dm-kpi-chip--green  .dm-kpi-num { color: var(--color-success-text); }
.dm-kpi-chip--red    .dm-kpi-num { color: var(--color-danger); }
.dm-kpi-chip--orange .dm-kpi-num { color: #d97706; }

.dm-kpi-lbl {
  font-size: 9px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.dm-table-head {
  display: grid;
  grid-template-columns: 52px 1fr 90px 82px 64px;
  gap: 4px;
  padding: 5px 8px;
  background: #f0f1f4;
  border-radius: 5px 5px 0 0;
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.dm-table-body {
  border: 1px solid #e9eaec;
  border-top: none;
  border-radius: 0 0 5px 5px;
  overflow: hidden;
}

.dm-row {
  display: grid;
  grid-template-columns: 52px 1fr 90px 82px 64px;
  gap: 4px;
  align-items: center;
  padding: 7px 8px;
  font-size: 11px;
  border-bottom: 1px solid #f0f1f4;
  background: #ffffff;
}

.dm-row:last-child  { border-bottom: none; }
.dm-row--active     { background: rgba(184, 51, 118, 0.04); }

.dm-id     { color: var(--color-text-muted); font-family: monospace; font-size: 11px; }
.dm-name   { font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-city   { color: var(--color-text-muted); }
.dm-amount { font-weight: 600; color: var(--color-text); text-align: right; }

.dm-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.dm-badge--green  { background: rgba(34,197,94,0.1);   color: var(--color-success-text); }
.dm-badge--orange { background: rgba(245,158,11,0.12); color: #b45309; }
.dm-badge--blue   { background: rgba(59,130,246,0.1);  color: #1d4ed8; }
.dm-badge--red    { background: rgba(239,68,68,0.1);   color: var(--color-danger); }

/* ─────────────────────────────────
   Mockup UI — Delivery Tracking
   ───────────────────────────────── */
.dm-delivery { font-size: 11px; }

.dm-section-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.dm-d-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.dm-d-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  gap: 2px;
}

.dm-d-num {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.dm-d-num--green  { color: var(--color-success-text); }

.dm-d-lbl {
  font-size: 9px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Timeline */
.dm-tl {
  display: flex;
  flex-direction: column;
  position: relative;
}

.dm-tl::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: #e5e7eb;
  z-index: 0;
}

.dm-tl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  position: relative;
  z-index: 1;
}

.dm-tl-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e5e7eb;
  border: 2px solid #f8f9fb;
  flex-shrink: 0;
  z-index: 2;
}

.dm-tl-done .dm-tl-dot   { background: var(--color-success); }
.dm-tl-active .dm-tl-dot { background: var(--color-primary); box-shadow: 0 0 0 3px rgba(184,51,118,0.18); }

.dm-tl-lbl  { flex: 1; font-size: 11px; color: var(--color-text-muted); }
.dm-tl-done .dm-tl-lbl   { color: var(--color-text); font-weight: 500; }
.dm-tl-active .dm-tl-lbl { color: var(--color-primary); font-weight: 600; }

.dm-tl-time { font-size: 10px; color: var(--color-text-muted); font-family: monospace; }

/* ─────────────────────────────────
   Mockup UI — Analytics / KPIs
   ───────────────────────────────── */
.dm-analytics { font-size: 11px; }

.dm-big-kpi {
  font-size: 48px;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin: 8px 0 14px;
  letter-spacing: -0.02em;
}

.dm-pct {
  font-size: 26px;
  font-weight: 700;
  opacity: 0.55;
}

.dm-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 72px;
  border-bottom: 1px solid #e5e7eb;
}

.dm-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 0;
}

.dm-bar-group > span {
  font-size: 9px;
  color: var(--color-text-muted);
  margin-top: 5px;
  line-height: 1;
}

.dm-bar {
  width: 100%;
  height: var(--h, 50%);
  background: rgba(184, 51, 118, 0.22);
  border-radius: 3px 3px 0 0;
}

.dm-bar--hi { background: var(--color-primary); }

/* ─────────────────────────────────
   Mockup UI — Business Overview
   ───────────────────────────────── */
.dm-overview { font-size: 11px; }

.dm-ov-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.dm-ov-kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.dm-ov-num {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
  white-space: nowrap;
}

.dm-ov-lbl {
  font-size: 10px;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.dm-ov-delta { font-size: 10px; font-weight: 600; margin-top: 2px; }
.dm-delta--up   { color: var(--color-success-text); }
.dm-delta--down { color: var(--color-danger); }

.dm-ov-chart-lbl {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
  font-weight: 500;
}

.dm-ov-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 64px;
  border-bottom: 1px solid #e5e7eb;
}

.dm-ov-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}

.dm-ov-col > span {
  font-size: 8px;
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1;
}

.dm-ov-bar {
  width: 100%;
  height: var(--h, 50%);
  background: rgba(184, 51, 118, 0.2);
  border-radius: 2px 2px 0 0;
}

.dm-ov-bar--hi { background: var(--color-primary); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .dash-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dash-card:nth-child(1),
  .dash-card:nth-child(4) {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .dash-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .dash-card:nth-child(1),
  .dash-card:nth-child(4) {
    grid-column: span 1;
  }
  .dm-table-head,
  .dm-row {
    grid-template-columns: 44px 1fr 72px 60px;
  }
  .dm-table-head > span:nth-child(3),
  .dm-row > span:nth-child(3) { display: none; }
  .dm-ov-kpis {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Feedback label ── */

/* ── Feedback arc (below stage) ── */

/* ════════════════════════════════════════════════════════════════
   Integrations Section
   ════════════════════════════════════════════════════════════════ */
.integrations {
  background: transparent;
  overflow: hidden;
}

.integrations-header {
  text-align: center;
  margin-bottom: 56px;
}

.integrations-marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}

.integrations-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 180px;
  z-index: 2;
  pointer-events: none;
}

.integrations-fade-left {
  left: 0;
  background: linear-gradient(to right, #ffffff 20%, transparent);
}

.integrations-fade-right {
  right: 0;
  background: linear-gradient(to left, #ffffff 20%, transparent);
}

.integrations-marquee {
  display: flex;
  overflow: hidden;
}

.integrations-marquee--fwd .integrations-track {
  animation: marquee-left 35s linear infinite;
}

.integrations-marquee--rev .integrations-track {
  animation: marquee-right 35s linear infinite;
}

.integrations-marquee:hover .integrations-track {
  animation-play-state: paused;
}

@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.integrations-track {
  display: flex;
  gap: 14px;
  width: max-content;
  padding: 4px 0;
}

.integration-card {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  cursor: default;
}

.integration-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: rgba(168, 30, 99, 0.3);
}

.integration-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.delivery-logo {
  width: 120px !important;
  height: 44px;
}
.integration-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.integration-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.integration-type {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.integrations-footer {
  text-align: center;
  margin-top: 40px;
}

.integrations-note {
  font-size: 15px;
  color: var(--color-text-muted);
}

.integrations-link {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.integrations-link:hover {
  color: var(--color-accent-hover);
}

/* 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;
}

/* Ambient radial glow background */
.kpi-showcase-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: none;
}

.kpi-showcase-head {
  text-align: center;
  max-width: 580px;
  margin: 0 auto 56px;
  position: relative;
  z-index: 1;
}

/* ── Floating keyframes ── */
@keyframes kpiFloat1 {
  0%,100% { transform: translateY(0) rotateX(0) rotateY(0); }
  33%     { transform: translateY(-14px) rotateX(1deg) rotateY(-0.3deg); }
  66%     { transform: translateY(-4px) rotateX(-0.4deg) rotateY(0.2deg); }
}
@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); }
}

.kpi-float-1 { animation: kpiFloat1 6s   cubic-bezier(0.37,0,0.63,1) infinite; }
.kpi-float-2 { animation: kpiFloat2 7s   cubic-bezier(0.37,0,0.63,1) infinite 0.6s; }
.kpi-float-3 { animation: kpiFloat3 5.5s cubic-bezier(0.37,0,0.63,1) infinite 1.2s; }
.kpi-float-4 { animation: kpiFloat4 6.5s cubic-bezier(0.37,0,0.63,1) infinite 0.3s; }

/* ── Rate panels grid ── */
.kpi-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.kpi-panel {
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 8px 24px -4px rgba(0,0,0,0.06),
    0 20px 48px -8px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 0.45s cubic-bezier(0.23,1,0.32,1),
              box-shadow 0.45s cubic-bezier(0.23,1,0.32,1);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.kpi-panel:hover {
  transform: translateY(-6px) rotateX(1deg) scale(1.005);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.04),
    0 16px 40px -4px rgba(0,0,0,0.1),
    0 32px 64px -8px rgba(0,0,0,0.07),
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 0 0 1px rgba(184,51,118,0.08);
}

/* ── Donut chart container ── */
.kpi-donut-wrap {
  position: relative;
  width: 148px;
  height: 148px;
  flex-shrink: 0;
}

.kpi-donut-wrap canvas {
  display: block;
  width: 148px !important;
  height: 148px !important;
}

.kpi-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}

.kpi-pct {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--color-text);
}

.kpi-pct-lbl {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ── Panel body ── */
.kpi-panel-body {
  flex: 1;
  min-width: 0;
}

.kpi-panel-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
}

.kpi-panel-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: 18px;
}

/* ── Sub-stat chips ── */
.kpi-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.kpi-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  min-width: 60px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform 0.3s ease;
}

.kpi-chip:hover {
  transform: translateY(-2px);
}

.kpi-chip-num {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.kpi-chip-lbl {
  font-size: 10px;
  opacity: 0.72;
  line-height: 1;
}

.kpi-chip--green { background: rgba(34,197,94,0.09);   color: var(--color-success-text); }
.kpi-chip--blue  { background: rgba(59,130,246,0.09);  color: #1d4ed8; }
.kpi-chip--muted { background: rgba(107,114,128,0.08); color: #4b5563; }
.kpi-chip--red   { background: rgba(239,68,68,0.09);   color: var(--color-danger); }

/* ── Lower section: financials + cities ── */
.kpi-lower {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 24px;
  position: relative;
  z-index: 1;
}

.kpi-fin-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 8px 24px -4px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 0.36s ease, box-shadow 0.36s ease;
  transform-style: preserve-3d;
}

.kpi-fin-card:hover {
  transform: translateY(-4px) rotateX(0.5deg);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.04),
    0 16px 36px -4px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

.kpi-fin-card--accent {
  background: rgba(184,51,118,0.05);
  border-color: rgba(184,51,118,0.18);
}

.kpi-fin-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(184,51,118,0.09);
  color: var(--color-primary);
  flex-shrink: 0;
}

.kpi-fin-icon--accent {
  background: rgba(184,51,118,0.16);
}

.kpi-fin-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.kpi-fin-val {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
  white-space: nowrap;
}

.kpi-fin-val small {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.5;
}

.kpi-fin-val--accent {
  font-size: 21px;
  color: var(--color-primary);
}

.kpi-fin-lbl {
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.15px;
}

/* ── KPI: tall accent card (enriched) ── */
.kpi-fin-card--tall {
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 22px 20px;
}

.kpi-fin-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.kpi-fin-header .kpi-fin-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
}

.kpi-fin-header .kpi-fin-val--accent {
  font-size: 26px;
}

/* ── Sub-metrics grid ── */
.kpi-fin-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.kpi-fin-metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 11px;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform 0.3s ease;
}

.kpi-fin-metric:hover {
  transform: translateY(-2px);
}

.kpi-fin-metric-val {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.kpi-fin-metric-lbl {
  font-size: 10px;
  opacity: 0.7;
  line-height: 1;
  letter-spacing: 0.1px;
}

.kpi-fin-metric--green   { background: rgba(34,197,94,0.09);   color: var(--color-success-text); }
.kpi-fin-metric--emerald { background: rgba(16,185,129,0.09);  color: var(--color-success-text); }
.kpi-fin-metric--blue    { background: rgba(59,130,246,0.09);  color: #1d4ed8; }
.kpi-fin-metric--muted   { background: rgba(107,114,128,0.08); color: #4b5563; }

.kpi-fin-note {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-top: 4px;
  max-width: 220px;
}

/* ── Cities chart ── */
.kpi-cities {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 8px 24px -4px rgba(0,0,0,0.06),
    0 20px 48px -8px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.9);
  transform-style: preserve-3d;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.kpi-cities:hover {
  transform: translateY(-4px) rotateX(0.4deg);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.04),
    0 16px 36px -4px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

.kpi-cities-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}

.kpi-city-list {
  display: flex;
  flex-direction: column;
}

.kpi-city-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.kpi-city-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.kpi-city-nm {
  width: 86px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  flex-shrink: 0;
}

.kpi-city-track {
  flex: 1;
  height: 6px;
  background: rgba(0,0,0,0.06);
  border-radius: 100px;
  overflow: hidden;
}

.kpi-city-bar {
  height: 100%;
  width: 0;
  background: var(--color-primary);
  border-radius: 100px;
  transition: width 1.1s cubic-bezier(0.16,1,0.3,1);
}

.kpi-city-val {
  width: 48px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ── Monthly comparison charts ── */
.kpi-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
  position: relative;
  z-index: 1;
}

.kpi-chart-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 8px 24px -4px rgba(0,0,0,0.06),
    0 20px 48px -8px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 0.45s cubic-bezier(0.23,1,0.32,1),
              box-shadow 0.45s cubic-bezier(0.23,1,0.32,1);
  transform-style: preserve-3d;
}

.kpi-chart-card:hover {
  transform: translateY(-6px) rotateX(0.8deg) scale(1.003);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.04),
    0 16px 40px -4px rgba(0,0,0,0.1),
    0 32px 64px -8px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

.kpi-chart-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.kpi-chart-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}

.kpi-chart-legend {
  display: flex;
  gap: 12px;
}

.kpi-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--color-text-muted);
}

.kpi-chart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px currentColor;
}

/* Canvas wrapper */
.kpi-canvas-wrap {
  position: relative;
  height: 160px;
}

.kpi-canvas-wrap canvas {
  display: block;
}

/* ── CTA block ── */
.kpi-cta {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 28px 32px;
  background: rgba(184,51,118,0.05);
  border: 1px solid rgba(184,51,118,0.16);
  border-radius: var(--radius-lg);
  position: relative;
  z-index: 1;
  transition: border-color 0.2s ease;
}

.kpi-cta:hover {
  border-color: rgba(184,51,118,0.32);
}

.kpi-cta-text {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 420px;
  text-align: center;
}

.kpi-cta .btn svg {
  margin-left: 6px;
  vertical-align: middle;
}

/* ── KPI Showcase: responsive ── */
@media (max-width: 1024px) {
  .kpi-panels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .kpi-panel {
    flex-direction: column;
    align-items: flex-start;
  }
  .kpi-donut-wrap,
  .kpi-donut-wrap canvas {
    width: 120px !important;
    height: 120px !important;
  }
  .kpi-lower {
    grid-template-columns: 1fr;
  }
  .kpi-charts {
    grid-template-columns: 1fr;
  }
  .kpi-float-1, .kpi-float-2,
  .kpi-float-3, .kpi-float-4 {
    animation: none;
  }
}

@media (max-width: 480px) {
  .kpi-chips {
    gap: 6px;
  }
  .kpi-fin-metrics {
    gap: 6px;
  }
  .kpi-fin-metric {
    padding: 8px 9px;
  }
}

/* ════════════════════════════════════════════════════════════════
   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. */
/* 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. */
@media (max-width: 560px) {
  .pricing-free-row { grid-template-columns: 1fr; row-gap: 2px; }
  .pricing-free-desc { grid-column: 1; }
  .pricing-free-price { font-size: 18px; }
}


/* ── Original workflow diagram (restored, namespaced wfl-*) ───────── */
.wfl-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 32px 72px;
  max-width: 1360px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
@media (max-width: 767px) {
.wfl-stage {
    justify-content: flex-start;
    padding: 0 20px 56px;
  }
}
.wfl-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.wfl-col-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
  white-space: nowrap;
}
.wfl-col--sources { width: 148px; }
.wfl-col--crm { width: 168px; }
.wfl-col--confirm { width: 168px; }
.wfl-col--delivery { width: 180px; }
.wfl-col--tracking { width: 180px; }
.wfl-connector {
  flex-shrink: 0;
  align-self: center;
}
.wfl-connector--in { width: 72px;  height: 300px; }
.wfl-connector--mid { width: 48px;  height: 56px; }
.wfl-svg { width: 100%; height: 100%; overflow: visible; }
.wfl-path {
  fill: none;
  stroke-width: 1.5;
}
.wfl-path--in,
.wfl-path--mid {
  stroke: rgba(168, 30, 99, 0.4);
  stroke-dasharray: 6 8;
  animation: wfl-flow 0.8s linear infinite;
}
.wfl-path--feedback {
  stroke: var(--color-primary);
  stroke-dasharray: 8 14;
  opacity: 0.45;
  animation: wfl-flow-feedback 2.4s linear infinite;
}
.wfl-sources {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.wfl-node.wfl-source {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  background: transparent;
  border: 1.5px dashed rgba(168, 30, 99, 0.22);
  border-radius: var(--radius-sm);
  width: 100%;
  transition: border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}
.wfl-node.wfl-source:hover {
  border-color: rgba(168, 30, 99, 0.45);
  background: rgba(168, 30, 99, 0.03);
  box-shadow: 0 0 12px rgba(168, 30, 99, 0.06);
}
.wfl-node.wfl-source .wfl-node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(168, 30, 99, 0.06);
  color: var(--color-accent);
  flex-shrink: 0;
}
.wfl-node.wfl-source .wfl-node-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}
.wfl-col--crm { position: relative; }
.wfl-crm-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 168px;
}
.wfl-crm-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.75);
}
.wfl-crm-ring--outer {
  width: 156px;
  height: 156px;
  border: 1.5px dashed rgba(168, 30, 99, 0.25);
  animation: crm-ripple 2.8s ease-out infinite;
}
.wfl-crm-ring--inner {
  width: 122px;
  height: 122px;
  border: 1.5px dashed rgba(168, 30, 99, 0.35);
  animation: crm-ripple 2.8s ease-out 1.4s infinite;
}
.wfl-node--crm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px dashed rgba(168, 30, 99, 0.4);
  background: transparent;
  box-shadow: 0 0 16px rgba(168, 30, 99, 0.08);
  gap: 4px;
  z-index: 1;
  position: relative;
  transition: border-color 0.28s ease, box-shadow 0.28s ease;
}
.wfl-node--crm:hover {
  border-color: rgba(168, 30, 99, 0.6);
  box-shadow: 0 0 24px rgba(168, 30, 99, 0.14);
}
.wfl-node--crm .wfl-node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 94px;
  height: 94px;
  padding: 5px !important;
  background: transparent;
  color: var(--color-accent);
}
.wfl-node--crm .wfl-node-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-accent);
  text-align: center;
  line-height: 1.25;
  padding: 0 6px;
}
.wfl-confirm-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.wfl-action-card {
  background: transparent;
  border: 1.5px dashed rgba(168, 30, 99, 0.22);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: fit-content;
  min-width: 100%;
  transition: border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}
.wfl-action-card:hover {
  border-color: rgba(168, 30, 99, 0.45);
  background: rgba(168, 30, 99, 0.03);
  box-shadow: 0 0 14px rgba(168, 30, 99, 0.06);
}
.wfl-action-header {
  display: flex;
  align-items: center;
  gap: 9px;
}
.wfl-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
}
.wfl-action-icon--phone {
  background: rgba(168, 30, 99, 0.08);
  color: var(--color-accent);
}
.wfl-action-icon--wa {
  /* The real WhatsApp mark: solid brand green with a white glyph. It was an
     8% tint behind a hard-coded fill="white", so the logo was invisible. */
  background: var(--brand-whatsapp, #25d366);
  color: #fff;
}
.wfl-action-icon--delivery {
  background: rgba(168, 30, 99, 0.08);
  color: var(--color-accent);
}
.wfl-action-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}
.wfl-attempt-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 1px;
}
.wfl-attempt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background 0.25s;
  flex-shrink: 0;
}
.wfl-attempt-dot.is-active {
  background: var(--color-accent);
}
.wfl-attempt-dot-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: 2px;
}
.wfl-bubbles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.wfl-bubble {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
  background: transparent;
  border: 1px dashed rgba(168, 30, 99, 0.2);
  color: var(--color-accent);
  opacity: 1;
  transform: translateX(0);
  white-space: nowrap;
  width: fit-content;
}
.wfl-delivery-wrap {
  background: transparent;
  border: 1.5px dashed rgba(168, 30, 99, 0.22);
  border-radius: var(--radius);
  padding: 12px 14px;
  width: fit-content;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}
.wfl-delivery-wrap:hover {
  border-color: rgba(168, 30, 99, 0.45);
  background: rgba(168, 30, 99, 0.03);
  box-shadow: 0 0 14px rgba(168, 30, 99, 0.06);
}
.wfl-delivery-header {
  display: flex;
  align-items: center;
  gap: 9px;
}
.wfl-delivery-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}
.wfl-carriers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.wfl-carrier {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px 3px 5px;
  background: transparent;
  border: 1px dashed rgba(168, 30, 99, 0.18);
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text);
  transition: border-color 0.2s, background 0.2s;
}
.wfl-carrier:hover {
  border-color: rgba(168, 30, 99, 0.4);
  background: rgba(168, 30, 99, 0.04);
}
.wfl-carrier-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
}
.wfl-carrier--more {
  background: transparent;
  border-color: rgba(107, 114, 128, 0.2);
  border-style: dashed;
  color: var(--color-text-muted);
  font-style: italic;
}
.wfl-tracking-wrap {
  background: transparent;
  border: 1.5px dashed rgba(168, 30, 99, 0.22);
  border-radius: var(--radius);
  padding: 12px;
  width: fit-content;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}
.wfl-tracking-wrap:hover {
  border-color: rgba(168, 30, 99, 0.45);
  background: rgba(168, 30, 99, 0.03);
  box-shadow: 0 0 14px rgba(168, 30, 99, 0.06);
}
.wfl-track-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px dashed rgba(168, 30, 99, 0.15);
  position: relative;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.wfl-track-item:hover {
  border-color: rgba(168, 30, 99, 0.35);
  background: rgba(168, 30, 99, 0.02);
}
.wfl-track-item--ai {
  border-color: rgba(168, 30, 99, 0.28);
  background: transparent;
}
.wfl-track-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  flex-shrink: 0;
}
.wfl-track-icon--phone {
  background: rgba(168, 30, 99, 0.08);
  color: var(--color-accent);
}
.wfl-track-icon--wa {
  background: rgba(37, 211, 102, 0.08);
  color: var(--color-success-text);
}
.wfl-track-icon--ai {
  background: rgba(168, 30, 99, 0.1);
  color: var(--color-accent);
}
.wfl-track-icon--loop {
  background: rgba(168, 30, 99, 0.06);
  color: var(--color-accent);
}
.wfl-track-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.wfl-track-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}
.wfl-track-desc {
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.wfl-ai-badge {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 4px;
  padding: 2px 5px;
}
.wfl-feedback-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  opacity: 0;
  margin-top: 4px;
  padding: 0 4px;
  white-space: nowrap;
}
.wfl-feedback-label svg {
  flex-shrink: 0;
  color: var(--color-primary);
}
.wfl-feedback-arc {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  height: 60px;
  overflow: visible;
}
.wfl-feedback-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}