/* ===== styles.css ===== */
/* =========================================================================
   OPD Pilot — Website Styles
   Built on Amvin OPD Pilot Design System tokens (see colors_and_type.css)
   ========================================================================= */
@import url("assets/colors_and_type.css");

/* Smooth in-page nav scrolling, offset for the sticky 72px nav bar */
html { scroll-behavior: smooth; }
[id], section { scroll-margin-top: 104px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* ---------- Tweakable knobs (overridable via Tweaks panel) ---------- */
:root {
  --tw-section-pad: 64px;        /* vertical padding per section */
  --tw-section-head-mb: 36px;    /* space below section header */
  --tw-section-title-scale: 1;   /* multiplier on section title sizes */
  --tw-hero-title-scale: 1;      /* multiplier on hero title */
  --tw-hero-pad: 56px;           /* hero vertical padding */
  --tw-card-pad: 24px;           /* generic card padding */
}

/* ---------- Icon system: Lucide-style uniform stroke ----------
   The design system specifies 1.5px stroke + rounded line caps for all
   outline icons. This single rule normalises every outlined SVG on the
   page so we can't drift away from the spec by hand-setting stroke-width
   on individual icons. Filled icons (fill="currentColor") are untouched.
*/
svg[fill="none"][stroke] {
  stroke-width: 1.5 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Decorative diagram paths (journey loop, etc.) keep their own width */
.journey__svg path,
.journey__svg polygon { stroke-width: revert !important; }

/* ---------- Unified icon container system ----------
   Every icon tile on the page uses ONE of these two shapes:
   - .ui-icon       — 44×44 rounded square (radius-md), crimson-50 tint, crimson-500 stroke
   - .ui-icon--circle — same colors but a circle (used on journey nodes)
   The classes below alias each section-specific selector to the same look
   so nothing visually drifts from the system.
*/
.problem-card__icon,
.solution-tab__icon,
.control-card__icon,
.support__item .ico {
  width: 44px !important;
  height: 44px !important;
  background: var(--color-crimson-50) !important;
  color: var(--color-crimson-500) !important;
  border-radius: var(--radius-md) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Why-card and Revenue icons keep base shape, but tone color comes from data-tone */
.why-card__icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--radius-md) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.why-card:not([data-tone]) .why-card__icon,
.why-card[data-tone="crimson"] .why-card__icon { background: var(--color-crimson-50) !important; color: var(--color-crimson-500) !important; }
.why-card[data-tone="green"] .why-card__icon   { background: var(--color-success-50) !important; color: var(--color-success-700) !important; }
.why-card[data-tone="navy"] .why-card__icon    { background: var(--color-midnight-50) !important; color: var(--color-midnight-800) !important; }
.why-card[data-tone="amber"] .why-card__icon   { background: var(--color-warning-50) !important; color: var(--color-warning-700) !important; }
.why-card[data-tone="blue"] .why-card__icon    { background: var(--color-info-50) !important; color: var(--color-info-700) !important; }
.why-card[data-tone="violet"] .why-card__icon  { background: #F1ECFB !important; color: #6B46C1 !important; }
.why-card[data-tone="rose"] .why-card__icon    { background: var(--color-danger-50) !important; color: var(--color-danger-500) !important; }
/* Revenue icons keep base size/shape but tone color comes from data-tone */
.revenue__icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--radius-md) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.revenue__card:not([data-tone]) .revenue__icon,
.revenue__card[data-tone="crimson"] .revenue__icon { background: var(--color-crimson-50) !important; color: var(--color-crimson-500) !important; }
.revenue__card[data-tone="green"] .revenue__icon  { background: var(--color-success-50) !important; color: var(--color-success-700) !important; }
.revenue__card[data-tone="navy"] .revenue__icon   { background: var(--color-midnight-50) !important; color: var(--color-midnight-800) !important; }
.revenue__card[data-tone="warning"] .revenue__icon { background: var(--color-warning-50) !important; color: var(--color-warning-700) !important; }
.revenue__card[data-tone="amber"] .revenue__icon  { background: var(--color-warning-50) !important; color: var(--color-warning-700) !important; }
.revenue__card[data-tone="blue"] .revenue__icon   { background: var(--color-info-50) !important; color: var(--color-info-700) !important; }
.revenue__card[data-tone="violet"] .revenue__icon { background: #F1ECFB !important; color: #6B46C1 !important; }
.revenue__card[data-tone="rose"] .revenue__icon   { background: var(--color-danger-50) !important; color: var(--color-danger-500) !important; }
/* Per-card tones for Problem section — same shape, different semantic color */
.problem-card[data-tone="crimson"] .problem-card__icon { background: var(--color-crimson-50) !important; color: var(--color-crimson-500) !important; }
.problem-card[data-tone="amber"]   .problem-card__icon { background: var(--color-warning-50) !important; color: var(--color-warning-700) !important; }
.problem-card[data-tone="blue"]    .problem-card__icon { background: var(--color-info-50) !important;    color: var(--color-info-700) !important; }
.problem-card[data-tone="navy"]    .problem-card__icon { background: var(--color-midnight-50) !important; color: var(--color-midnight-800) !important; }
.problem-card[data-tone="rose"]    .problem-card__icon { background: var(--color-danger-50) !important;  color: var(--color-danger-500) !important; }
.problem-card[data-tone="violet"]  .problem-card__icon { background: #F1ECFB !important; color: #6B46C1 !important; }
.problem-card[data-tone="green"]   .problem-card__icon { background: var(--color-success-50) !important; color: var(--color-success-700) !important; }
.problem-card[data-tone="red"]     .problem-card__icon { background: var(--color-crimson-50) !important; color: var(--color-crimson-600) !important; }
.problem-card__icon svg,
.revenue__icon svg,
.control-card__icon svg,
.why-card__icon svg,
.support__item .ico svg,
.solution-tab__icon svg {
  width: 22px !important;
  height: 22px !important;
}
/* Revenue card data-tone variants no longer need these overrides (now covered above) */
/* Active solution-tab icon needs its existing dark/red treatment kept */
.solution-tab.is-active .solution-tab__icon {
  background: var(--color-crimson-500) !important;
  color: var(--fg-on-accent) !important;
}
/* Support items live on dark navy — prominent crimson icon tile */
.support__item .ico {
  background: linear-gradient(140deg, var(--color-crimson-500) 0%, var(--color-crimson-600) 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -6px rgba(220, 16, 46, 0.6), 0 0 0 1px rgba(220, 16, 46, 0.32);
}
/* Implementation tick (large red circle) stays as-is, but normalize size */
.impl-li .check {
  width: 28px; height: 28px;
}

/* ---------- Booking mockup (Solution panel 1) ---------- */
.booking-mockup {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-primary);
  width: 100%;
}
.booking-mockup__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--color-midnight-50);
  border-bottom: 1px solid var(--border-subtle);
}
.booking-mockup__dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.booking-mockup__url {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--fg-tertiary);
  background: var(--bg-surface);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
}
.booking-mockup__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.booking-mockup__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.booking-mockup__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-bottom: 4px;
}
.booking-mockup__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  line-height: 1.2;
}
.booking-mockup__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--color-success-50);
  color: var(--color-success-700);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.booking-mockup__pill-dot {
  width: 6px; height: 6px;
  background: var(--color-success-500);
  border-radius: 50%;
  animation: pulse var(--dur-pulse) ease-in-out infinite;
}
.booking-mockup__field { display: block; }
.booking-mockup__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-bottom: 6px;
}
.booking-mockup__input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--fg-primary);
}
.booking-mockup__input svg {
  width: 16px; height: 16px;
  color: var(--fg-tertiary);
  flex-shrink: 0;
}
.booking-mockup__input em {
  font-style: normal;
  color: var(--fg-tertiary);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}
.booking-mockup__badge {
  margin-left: auto;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  background: var(--color-info-50);
  color: var(--color-info-700);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}
.booking-mockup__doc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.booking-mockup__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-midnight-800);
  color: var(--fg-on-inverse);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  flex-shrink: 0;
}
.booking-mockup__doc-name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
  line-height: 1.2;
}
.booking-mockup__doc-meta {
  font-size: var(--text-2xs);
  color: var(--fg-tertiary);
  margin-top: 2px;
}
.booking-mockup__doc-status {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--color-success-700);
}
.booking-mockup__doc-status .dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.booking-mockup__doc-status .dot--ok {
  background: var(--color-success-500);
  animation: pulse var(--dur-pulse) ease-in-out infinite;
}
.booking-mockup__slots-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: 4px;
}
.booking-mockup__hint {
  font-size: var(--text-2xs);
  color: var(--fg-tertiary);
}
.booking-mockup__slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.booking-mockup__slot {
  padding: 7px 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  text-align: center;
}
.booking-mockup__slot:hover { border-color: var(--color-midnight-400); }
.booking-mockup__slot--booked {
  background: var(--color-midnight-50);
  color: var(--fg-tertiary);
  text-decoration: line-through;
  cursor: not-allowed;
}
.booking-mockup__slot--best {
  background: var(--color-crimson-500);
  color: var(--fg-on-accent);
  border-color: var(--color-crimson-500);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-shadow: var(--shadow-crimson);
  position: relative;
}
.booking-mockup__slot--best:hover { background: var(--color-crimson-600); border-color: var(--color-crimson-600); }
.booking-mockup__best-tag {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.92;
}
.booking-mockup__cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: 4px;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.booking-mockup__sum-label {
  font-size: var(--text-2xs);
  color: var(--fg-tertiary);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.booking-mockup__sum-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-crimson-600);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: 2px;
}
.booking-mockup__sum-value span {
  color: var(--fg-tertiary);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  margin-left: 4px;
}
.booking-mockup__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--color-midnight-800);
  color: var(--fg-on-inverse);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.booking-mockup__cta:hover { background: var(--color-midnight-700); }
.booking-mockup__cta svg { width: 16px; height: 16px; }
@media (max-width: 760px) {
  .booking-mockup__slots { grid-template-columns: repeat(3, 1fr); }
  .booking-mockup__cta-row { flex-direction: column; align-items: stretch; }
}

/* ---------- Revenue · Three pillars (Variant D) ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}
.pillar {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.pillar:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.pillar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--color-crimson-500);
}
.pillar__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-crimson-50);
  color: var(--color-crimson-500);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5);
}
.pillar__icon svg { width: 24px; height: 24px; }
.pillar__name {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-crimson-500);
  margin-bottom: 4px;
}
.pillar__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  margin-bottom: var(--space-4);
  line-height: 1.25;
}
.pillar__stat {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: var(--fw-bold);
  color: var(--color-crimson-500);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.pillar__stat small {
  font-size: 22px;
  font-weight: var(--fw-bold);
}
.pillar__stat-label {
  font-size: var(--text-xs);
  color: var(--fg-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-6);
}
.pillar__list {
  border-top: 1px dashed var(--border-default);
  padding-top: var(--space-5);
  margin-top: auto;
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.pillar__li {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
  display: flex; align-items: flex-start;
  gap: var(--space-3);
  line-height: 1.45;
}
.pillar__li::before {
  content: "›";
  color: var(--color-crimson-500);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}
.revenue__compare-label {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin: var(--space-8) 0 var(--space-6);
  padding-top: var(--space-7);
  border-top: 1px dashed var(--border-default);
}
@media (max-width: 1100px) {
  .pillars { grid-template-columns: 1fr; }
}

/* ---------- Stats hero (Variant D) ---------- */
.stats-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-7);
  align-items: stretch;
  margin: var(--space-9) auto 0;
  max-width: 1100px;
}
.stats-hero__big {
  background: linear-gradient(140deg, var(--color-crimson-500) 0%, var(--color-crimson-600) 100%);
  color: var(--fg-on-accent);
  border-radius: var(--radius-2xl);
  padding: var(--space-9) var(--space-9);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
}
.stats-hero__big::before {
  content: "";
  position: absolute;
  top: -60%; left: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 65%);
  pointer-events: none;
}
.stats-hero__big::after {
  content: "";
  position: absolute;
  bottom: -40%; right: -10%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(10,26,47,0.32), transparent 60%);
  pointer-events: none;
}
.stats-hero__badge {
  align-self: flex-start;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  display: inline-flex; align-items: center; gap: 8px;
  position: relative;
  z-index: 1;
}
.stats-hero__badge i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  animation: pulse var(--dur-pulse) ease-in-out infinite;
}
.stats-hero__inner { position: relative; z-index: 1; }
.stats-hero__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  opacity: 0.88;
  margin-bottom: var(--space-4);
}
.stats-hero__num {
  font-family: var(--font-display);
  font-size: clamp(72px, 9vw, 130px);
  font-weight: var(--fw-bold);
  line-height: 0.9;
  letter-spacing: -0.05em;
  margin-bottom: var(--space-4);
  font-variant-numeric: tabular-nums;
}
.stats-hero__num small {
  font-size: 0.46em;
  opacity: 0.78;
}
.stats-hero__label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  margin-bottom: var(--space-3);
}
.stats-hero__sub {
  font-size: var(--text-md);
  opacity: 0.92;
  line-height: 1.5;
  max-width: 360px;
}
.stats-hero__side {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: var(--space-5);
}
.stats-hero__supp {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.stats-hero__supp:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.stats-hero__supp-num {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: var(--fw-bold);
  color: var(--color-midnight-800);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.stats-hero__supp-num .plus,
.stats-hero__supp-num .pct { color: var(--color-crimson-500); }
.stats-hero__supp-label {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
  line-height: 1.2;
}
.stats-hero__supp-sub {
  font-size: var(--text-xs);
  color: var(--fg-tertiary);
  margin-top: 4px;
}
.stats-hero__supp-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-crimson-50);
  color: var(--color-crimson-500);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stats-hero__supp-icon svg { width: 22px; height: 22px; }
.stats-compare-label {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin: var(--space-9) 0 var(--space-5);
  padding-top: var(--space-7);
  border-top: 1px dashed var(--border-default);
}
@media (max-width: 1100px) {
  .stats-hero { grid-template-columns: 1fr; }
  .stats-hero__big { min-height: 0; padding: var(--space-7); }
}
/* Dark variant — full hero treatment, prominent on canvas */
.stats-card--dark {
  background:
    radial-gradient(circle at 88% 10%, rgba(220,16,46,0.40), transparent 55%),
    radial-gradient(circle at 8% 100%, rgba(220,16,46,0.18), transparent 60%),
    linear-gradient(140deg, var(--color-midnight-900) 0%, var(--color-midnight-800) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 32px 64px -20px rgba(10,26,47,0.55),
    0 8px 16px -8px rgba(10,26,47,0.4),
    inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
  display: block;
  padding: var(--space-9) var(--space-9);
  grid-template-columns: none;
  gap: 0;
}
.stats-card--dark::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(220,16,46,0.5) 50%, transparent 100%);
}
.stats-card--dark::after {
  content: "";
  position: absolute;
  bottom: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
}
.stats-card--dark__head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: 1px dashed rgba(255,255,255,0.10);
}
.stats-card--dark__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--fg-on-inverse);
  letter-spacing: -0.01em;
  margin: var(--space-2) 0 0;
  line-height: 1.2;
}
.stats-card--dark__head .eyebrow--on-dark {
  margin-bottom: 0;
}
.stats-card--dark__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-7);
}
.stats-card--dark .stats-card__item {
  text-align: left;
  position: relative;
  padding: 0;
}
.stats-card--dark .stats-card__item + .stats-card__item::before {
  content: "";
  position: absolute;
  left: calc(var(--space-7) * -0.5);
  top: 15%; bottom: 15%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.10) 50%, transparent 100%);
}
.stats-card--dark__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: rgba(220,16,46,0.16);
  color: var(--color-crimson-300);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5);
  border: 1px solid rgba(220,16,46,0.22);
}
.stats-card--dark__icon svg { width: 22px !important; height: 22px !important; }
.stats-card--dark .stats-card__num {
  color: var(--fg-on-inverse);
  font-size: clamp(48px, 5vw, 64px);
  letter-spacing: -0.025em;
  margin-bottom: var(--space-3);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.stats-card--dark .stats-card__num .plus {
  color: var(--color-crimson-300);
  font-size: 0.7em;
  margin-left: 2px;
}
.stats-card--dark .stats-card__label {
  color: var(--color-midnight-100);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
}
@media (max-width: 760px) {
  .stats-card--dark { padding: var(--space-7); }
  .stats-card--dark__head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .stats-card--dark__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .stats-card--dark .stats-card__item + .stats-card__item::before { display: none; }
}

/* ---------- Stats hero END ---------- */

/* ---------- Revenue · Variant C (Cards | Phone + Dashboard | Cards) ---------- */
.rev-c {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: var(--space-7);
  align-items: stretch;
  margin-bottom: var(--space-10);
}
.rev-c__col {
  display: flex; flex-direction: column;
  gap: var(--space-5);
  justify-content: center;
}
.rev-c__center {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-6);
  min-height: 480px;
}
.rev-mini {
  display: flex; gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5) var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.rev-mini:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.rev-mini__icon {
  width: 36px !important; height: 36px !important;
  border-radius: var(--radius-md) !important;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rev-mini__icon svg { width: 18px !important; height: 18px !important; }
.rev-mini[data-tone="crimson"] .rev-mini__icon { background: var(--color-crimson-50) !important; color: var(--color-crimson-500) !important; }
.rev-mini[data-tone="green"]   .rev-mini__icon { background: var(--color-success-50) !important; color: var(--color-success-700) !important; }
.rev-mini[data-tone="navy"]    .rev-mini__icon { background: var(--color-midnight-50) !important; color: var(--color-midnight-800) !important; }
.rev-mini[data-tone="amber"]   .rev-mini__icon { background: var(--color-warning-50) !important; color: var(--color-warning-700) !important; }
.rev-mini[data-tone="blue"]    .rev-mini__icon { background: var(--color-info-50) !important; color: var(--color-info-700) !important; }
.rev-mini[data-tone="violet"]  .rev-mini__icon { background: #F1ECFB !important; color: #6B46C1 !important; }

/* Multicolor preview grid */
.rev-color-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: 1100px;
  margin: 0 auto;
}
.rev-mini--color {
  border-width: 1px;
  border-style: solid;
}
.rev-mini--color[data-tone="crimson"] { background: #FFF1F3; border-color: #FBD0D8; }
.rev-mini--color[data-tone="green"]   { background: #EEFAF1; border-color: #CDEBD6; }
.rev-mini--color[data-tone="navy"]    { background: #F1F4F9; border-color: #D6DEEC; }
.rev-mini--color[data-tone="amber"]   { background: #FFF8EC; border-color: #FBE4BE; }
.rev-mini--color[data-tone="violet"]  { background: #F6F1FD; border-color: #E4D8F6; }
.rev-mini--color[data-tone="blue"]    { background: #EFF5FF; border-color: #CFE0FB; }
/* Solid icon tiles + white glyph for stronger pop on tinted cards */
.rev-mini--color[data-tone="crimson"] .rev-mini__icon { background: var(--color-crimson-500) !important; color: #fff !important; }
.rev-mini--color[data-tone="green"]   .rev-mini__icon { background: var(--color-success-700) !important; color: #fff !important; }
.rev-mini--color[data-tone="navy"]    .rev-mini__icon { background: var(--color-midnight-800) !important; color: #fff !important; }
.rev-mini--color[data-tone="amber"]   .rev-mini__icon { background: var(--color-warning-700) !important; color: #fff !important; }
.rev-mini--color[data-tone="violet"]  .rev-mini__icon { background: #6B46C1 !important; color: #fff !important; }
.rev-mini--color[data-tone="blue"]    .rev-mini__icon { background: var(--color-info-700) !important; color: #fff !important; }
.rev-compare-label {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin: var(--space-10) 0 var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px dashed var(--border-default);
}
@media (max-width: 900px) {
  .rev-color-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .rev-color-grid { grid-template-columns: 1fr; }
}
.rev-mini__h {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  margin: 0 0 4px;
  line-height: 1.25;
}
.rev-mini__p {
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
  line-height: 1.5;
  margin: 0;
}

/* ----- Phone mockup ----- */
.rev-phone {
  background: #0d0d0f;
  border-radius: 28px;
  padding: 7px;
  border: 1px solid #2a2a2e;
  box-shadow: var(--shadow-xl);
  position: relative;
  width: 220px;
  flex-shrink: 0;
}
.rev-phone__notch {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 30%; height: 14px;
  background: #0d0d0f;
  border-radius: 0 0 9px 9px;
  z-index: 2;
}
.rev-phone__screen {
  background: var(--bg-surface);
  border-radius: 22px;
  padding: 24px 14px 14px;
  aspect-ratio: 9/19;
  overflow: hidden;
  display: flex; flex-direction: column;
  gap: 9px;
}
.rev-phone__status {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  margin-bottom: 4px;
}
.rev-phone__icons { display: inline-flex; gap: 3px; color: var(--fg-primary); }
.rev-phone__icons svg { width: 11px; height: 7px; }
.rev-phone__h1 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  line-height: 1.2;
}
.rev-phone__sub { font-size: 9px; color: var(--fg-tertiary); margin-bottom: 4px; }
.rev-phone__num {
  background: linear-gradient(180deg, var(--color-crimson-50) 0%, var(--bg-surface) 100%);
  border: 1px solid var(--color-crimson-100);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.rev-phone__num-label {
  font-family: var(--font-display);
  font-size: 8px; font-weight: var(--fw-bold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-tertiary);
}
.rev-phone__num-value {
  font-family: var(--font-display);
  font-size: 36px; font-weight: var(--fw-bold);
  color: var(--color-crimson-600);
  line-height: 1; margin: 4px 0;
  font-variant-numeric: tabular-nums;
}
.rev-phone__num-meta { font-size: 9px; color: var(--fg-secondary); }
.rev-phone__row {
  display: flex; justify-content: space-between;
  padding: 5px 0;
  font-size: 9px; color: var(--fg-secondary);
  border-bottom: 1px solid var(--border-subtle);
}
.rev-phone__row b {
  color: var(--fg-primary);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}
.rev-phone__promo {
  background: linear-gradient(135deg, var(--color-midnight-900) 0%, var(--color-midnight-700) 100%);
  color: #fff;
  border-radius: 10px;
  padding: 12px;
  margin-top: 4px;
}
.rev-phone__promo-tag {
  font-family: var(--font-display);
  font-size: 8px; font-weight: var(--fw-bold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-crimson-300);
  margin-bottom: 5px;
}
.rev-phone__promo-h {
  font-family: var(--font-display);
  font-size: 11px; font-weight: var(--fw-bold);
  line-height: 1.2;
}
.rev-phone__promo-price {
  font-family: var(--font-display);
  font-size: 14px; font-weight: var(--fw-bold);
  color: var(--color-crimson-300);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.rev-phone__promo-price span {
  color: #9CA3AF;
  text-decoration: line-through;
  font-size: 10px;
  font-weight: var(--fw-medium);
  margin-left: 6px;
}
.rev-phone__promo-cta {
  margin-top: 8px;
  background: var(--color-crimson-500);
  color: #fff;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: var(--fw-bold);
  display: inline-block;
}

/* ----- Dashboard mockup ----- */
.rev-dash {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  flex: 1;
  align-self: stretch;
}
.rev-dash__chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: var(--color-midnight-50);
  border-bottom: 1px solid var(--border-subtle);
}
.rev-dash__dot { width: 9px; height: 9px; border-radius: 50%; }
.rev-dash__url {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-tertiary);
  background: var(--bg-surface);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
}
.rev-dash__body {
  padding: var(--space-5);
  display: flex; flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}
.rev-dash__top {
  display: flex; justify-content: space-between; align-items: flex-end;
}
.rev-dash__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
}
.rev-dash__sub { font-size: 10px; color: var(--fg-tertiary); margin-top: 2px; }
.rev-dash__pills { display: flex; gap: 6px; }
.rev-dash__pill {
  padding: 4px 9px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: var(--fw-semibold);
  color: var(--fg-secondary);
}
.rev-dash__pill.is-active {
  background: var(--color-midnight-800);
  color: var(--fg-on-inverse);
  border-color: var(--color-midnight-800);
}
.rev-dash__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rev-dash__kpi {
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.rev-dash__kpi-label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-bottom: 6px;
}
.rev-dash__kpi-val {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 6px;
  flex-wrap: wrap;
}
.rev-dash__kpi-trend {
  font-size: 9px;
  font-weight: var(--fw-semibold);
  color: var(--color-success-700);
  background: var(--color-success-50);
  padding: 2px 5px;
  border-radius: 3px;
}
.rev-dash__chart {
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px;
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 140px;
}
.rev-dash__chart-head {
  display: flex; justify-content: space-between;
  margin-bottom: 8px;
}
.rev-dash__chart-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
}
.rev-dash__chart-legend {
  font-size: 9px;
  color: var(--fg-tertiary);
  display: flex; gap: 12px;
}
.rev-dash__chart-legend span { display: inline-flex; align-items: center; gap: 4px; }
.rev-dash__chart-legend i {
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--color-crimson-500);
}
.rev-dash__chart-legend i.muted { background: var(--color-midnight-300); }
.rev-dash__bars {
  flex: 1;
  display: flex; align-items: flex-end;
  gap: 6px;
  padding: 4px 0;
}
.rev-dash__bargroup {
  flex: 1;
  display: flex; gap: 2px;
  align-items: flex-end;
  height: 100%;
}
.rev-dash__bar {
  flex: 1;
  background: linear-gradient(180deg, var(--color-midnight-300) 0%, var(--color-midnight-500) 100%);
  border-radius: 2px 2px 0 0;
  min-height: 4px;
  height: var(--h);
}
.rev-dash__bar--accent {
  background: linear-gradient(180deg, var(--color-crimson-400) 0%, var(--color-crimson-600) 100%);
}
.rev-dash__axis {
  display: flex; justify-content: space-between;
  font-size: 8px;
  color: var(--fg-tertiary);
  margin-top: 4px;
  font-family: var(--font-numeric);
}

.rev-compare-label {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin: var(--space-10) 0 var(--space-7);
  padding-top: var(--space-8);
  border-top: 1px dashed var(--border-default);
}

@media (max-width: 1240px) {
  .rev-c { grid-template-columns: 1fr; gap: var(--space-6); }
  .rev-c__col { display: grid; grid-template-columns: repeat(3, 1fr); }
  .rev-c__center { flex-direction: column; align-items: stretch; min-height: 0; }
  .rev-phone { width: 240px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .rev-c__col { grid-template-columns: 1fr; }
  .rev-dash__kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Revenue · Variant C END ---------- */

/* ---------- Implementation · Alternate (photo + steps) ---------- */
.impl-compare-label {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin: var(--space-11) 0 var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px dashed var(--border-default);
}
.impl-v2 {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--space-9);
  align-items: center;
}
.impl-v2__photo {
  position: relative;
}
.impl-v2__photo .imgph {
  aspect-ratio: 5/4;
  border-radius: var(--radius-2xl);
}
.impl-v2__overlay {
  position: absolute;
  bottom: var(--space-5);
  left: var(--space-5);
  right: var(--space-5);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: 0 20px 40px -12px rgba(10, 26, 47, 0.32);
}
.impl-v2__overlay-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}
.impl-v2__overlay-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
}
.impl-v2__overlay-day {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-crimson-500);
}
.impl-v2__overlay-bar {
  height: 6px;
  background: var(--bg-canvas);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.impl-v2__overlay-bar span {
  display: block;
  height: 100%;
  width: 70%;
  background: linear-gradient(90deg, var(--color-crimson-500), var(--color-success-500));
  border-radius: var(--radius-pill);
}
.impl-v2__overlay-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-2xs);
  color: var(--fg-tertiary);
}
.impl-v2__h2 {
  text-align: left;
  margin-top: var(--space-4);
}
.impl-v2__sub {
  text-align: left;
  margin: 0 0 var(--space-7);
  max-width: 480px;
}
.impl-v2__steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.impl-v2__step {
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.impl-v2__step:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.impl-v2__step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-crimson-500);
  color: var(--fg-on-accent);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  margin-bottom: var(--space-3);
}
.impl-v2__step[data-phase="2"] .impl-v2__step-num { background: var(--color-warning-700); }
.impl-v2__step[data-phase="3"] .impl-v2__step-num { background: var(--color-info-700); }
.impl-v2__step[data-phase="4"] .impl-v2__step-num { background: var(--color-success-700); }
.impl-v2__step-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  line-height: 1.25;
}
.impl-v2__step-day {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--color-crimson-600);
  font-weight: var(--fw-semibold);
  margin-top: 2px;
  margin-bottom: var(--space-3);
}
.impl-v2__step-p {
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
  line-height: 1.5;
  margin: 0;
}
.impl-v2__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-6);
}
.impl-v2__feat {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
}
.impl-v2__feat svg {
  width: 18px !important; height: 18px !important;
  color: var(--color-success-700);
  flex-shrink: 0;
}
@media (max-width: 1100px) {
  .impl-v2 { grid-template-columns: 1fr; gap: var(--space-7); }
  .impl-v2__features { grid-template-columns: 1fr; }
}
/* ---------- Implementation · Alternate END ---------- */

/* ---------- Implementation CTA (dark, Option B) ---------- */
.impl-cta {
  position: relative;
  overflow: hidden;
  margin-top: var(--space-11);
  margin-bottom: 0;
  padding: var(--space-12) 0 0;
  background:
    radial-gradient(900px 520px at 84% 0%, rgba(220,16,46,0.22), transparent 55%),
    linear-gradient(150deg, var(--color-midnight-900) 0%, #08111F 100%);
}
.impl-cta__stars { position: absolute; inset: 0; pointer-events: none; }
.impl-cta__star {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: rgba(255,255,255,0.4);
  animation: ecoTwinkle 3s ease-in-out infinite;
}
.impl-cta__inner { position: relative; z-index: 1; text-align: center; }
.impl-cta__h {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(26px, 3.4vw, 34px);
  color: var(--fg-on-inverse);
  letter-spacing: -0.02em;
  margin: var(--space-3) 0 var(--space-3);
}
.impl-cta__h em { font-style: normal; color: var(--color-crimson-300); }
.impl-cta__p {
  font-size: var(--text-md);
  color: var(--color-midnight-200);
  margin: 0 auto var(--space-7);
  max-width: 540px;
  line-height: 1.6;
}
.impl-cta__btns { display: flex; gap: var(--space-4); justify-content: center; margin-bottom: var(--space-6); flex-wrap: wrap; }
.impl-cta__ticks { display: flex; gap: var(--space-7); justify-content: center; flex-wrap: wrap; }
.impl-cta__tick {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--text-sm); color: var(--fg-on-inverse);
}
.impl-cta__tick i {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(220,16,46,0.2); color: var(--color-crimson-300);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.impl-cta__tick i svg { width: 11px; height: 11px; }

/* ---------- Testimonials section ---------- */
.section--testimonials {
  background: #F2F4F9;
}
.testi-card__stars {
  display: flex;
  gap: 3px;
  margin-bottom: var(--space-4);
  color: var(--color-warning-500);
}
.testi-card__stars svg {
  width: 18px; height: 18px;
}

/* ---------- Implementation (orbit + checklist) ---------- */
.impl { position: relative; padding-bottom: 0 !important; }
.impl__grid {
  display: block;
}
.impl__copy { text-align: left; }
.impl__title {
  text-align: left;
  margin-left: 0;
  margin-bottom: var(--space-4);
}
.impl__title em {
  font-style: italic;
  color: var(--color-crimson-500);
  font-family: 'Manrope', serif;
}
.impl__sub {
  text-align: left;
  margin-left: 0;
  margin-bottom: var(--space-8);
  max-width: 640px;
}
.impl__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7) var(--space-11);
}
.impl__item {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: 0 0 var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.impl__item:hover {
  transform: none;
  box-shadow: none;
}
.impl__item-h {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  margin-bottom: var(--space-2);
  display: block;
  line-height: 1.25;
}
.impl__icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-crimson-50);
  color: var(--color-crimson-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.impl__icon-wrap svg {
  width: 26px !important;
  height: 26px !important;
}
/* Per-item semantic colors */
.impl__item:nth-child(2) .impl__icon-wrap { background: var(--color-warning-50); color: var(--color-warning-700); }
.impl__item:nth-child(3) .impl__icon-wrap { background: var(--color-info-50); color: var(--color-info-700); }
.impl__item:nth-child(4) .impl__icon-wrap { background: var(--color-success-50); color: var(--color-success-700); }
.impl__item:nth-child(5) .impl__icon-wrap { background: #F1ECFB; color: #6B46C1; }
.impl__item:nth-child(6) .impl__icon-wrap { background: var(--color-midnight-50); color: var(--color-midnight-800); }
.impl__item-p {
  font-size: var(--text-lg);
  color: var(--fg-secondary);
  line-height: 1.5;
  margin: 0;
}
.impl__item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.impl__item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-default);
}
.impl__item-h {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  margin-bottom: 6px;
  display: flex; align-items: center;
  gap: var(--space-4);
  line-height: 1.3;
}
.impl__icon-wrap {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-crimson-50);
  color: var(--color-crimson-500);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.impl__icon-wrap svg {
  width: 18px !important; height: 18px !important;
}
.impl__item-h svg {
  /* fallback if not wrapped */
  width: 18px; height: 18px;
  color: var(--color-crimson-500);
  flex-shrink: 0;
}
.impl__item-p {
  font-size: var(--text-sm);
  color: var(--fg-secondary);
  line-height: 1.55;
  margin: 0;
}

/* Orbit visual */
.impl__visual {
  position: relative;
  aspect-ratio: 1;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.impl__halo {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1.5px dashed var(--color-crimson-300);
  opacity: 0.6;
  animation: impl-spin 30s linear infinite;
}
.impl__halo--outer {
  inset: 4%;
  border-color: var(--color-crimson-200);
  opacity: 0.4;
  animation-duration: 50s;
  animation-direction: reverse;
}
@keyframes impl-spin {
  to { transform: rotate(360deg); }
}
.impl__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--color-crimson-50) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
}
.impl__core {
  position: relative;
  z-index: 2;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-midnight-900);
  color: var(--fg-on-inverse);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-2xl), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.impl__core-num {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg-on-inverse);
  font-variant-numeric: tabular-nums;
  position: relative;
}
.impl__core-num small {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-crimson-300);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-top: var(--space-3);
}
.impl__core-tag {
  font-size: var(--text-sm);
  color: var(--color-midnight-200);
  line-height: 1.5;
  margin-top: var(--space-4);
  font-weight: var(--fw-medium);
}

/* Orbit chips — positioned absolutely around the core */
.impl__orbit {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  animation: impl-orbit-float 6s ease-in-out infinite;
}
.impl__orbit svg {
  width: 14px; height: 14px;
  color: var(--color-success-700);
  flex-shrink: 0;
}
.impl__orbit--1 { top: 4%;    left: 30%;  animation-delay: 0s; }
.impl__orbit--2 { top: 28%;   right: -6%; animation-delay: 1.5s; }
.impl__orbit--3 { bottom: 18%; right: 0%; animation-delay: 3s; }
.impl__orbit--4 { bottom: 0%;  left: 18%; animation-delay: 4.5s; }
@keyframes impl-orbit-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .impl__halo, .impl__orbit { animation: none; }
}

@media (max-width: 1100px) {
  .impl__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .impl__list { grid-template-columns: 1fr; }
}
.rcp-mockup {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rcp-tablet {
  width: 100%;
  max-width: 600px;
  background: #1a1a1d;
  border: 1px solid #2a2a2e;
  border-radius: 22px;
  padding: 14px;
  filter: drop-shadow(0 24px 40px rgba(10, 26, 47, 0.18));
}
.rcp-tablet__screen {
  background: var(--bg-canvas);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-body);
  color: var(--fg-primary);
  aspect-ratio: 4/3.05;
  overflow: hidden;
}
.rcp-tablet__home {
  display: none; /* Modern bezel-less tablet */
}

/* Top bar */
.rcp-app__top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
}
.rcp-app__h1 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  line-height: 1.2;
}
.rcp-app__date {
  font-size: 10px;
  color: var(--fg-tertiary);
  margin-top: 2px;
}
.rcp-app__actions {
  display: flex; align-items: center; gap: 8px;
}
.rcp-search {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: 10px;
  color: var(--fg-tertiary);
}
.rcp-search svg { width: 11px; height: 11px; color: var(--fg-tertiary); }
.rcp-search em { font-style: normal; }
.rcp-new {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--color-crimson-500);
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 10px;
  cursor: pointer;
}
.rcp-new svg { width: 11px; height: 11px; }

/* Filter pills */
.rcp-pills {
  display: flex; gap: 6px;
  overflow: hidden;
}
.rcp-pill {
  padding: 5px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: var(--fw-semibold);
  color: var(--fg-secondary);
  white-space: nowrap;
}
.rcp-pill.is-active {
  background: var(--color-midnight-800);
  color: #fff;
  border-color: var(--color-midnight-800);
}

/* List */
.rcp-list {
  flex: 1;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.rcp-list__head, .rcp-row {
  display: grid;
  grid-template-columns: 50px 1.8fr 1fr 1.1fr 28px;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
}
.rcp-list__head {
  background: var(--bg-canvas);
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  border-bottom: 1px solid var(--border-subtle);
}
.rcp-row {
  border-bottom: 1px solid var(--border-subtle);
  font-size: 10px;
}
.rcp-row:last-child { border-bottom: none; }
.rcp-row--active { background: linear-gradient(90deg, var(--color-crimson-50) 0%, transparent 60%); }
.rcp-time {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  font-size: 10px;
}
.rcp-patient {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.rcp-av {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-midnight-800);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 9px;
  flex-shrink: 0;
}
.rcp-patient b {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
  line-height: 1.2;
}
.rcp-patient em {
  display: block;
  font-style: normal;
  font-size: 8px;
  color: var(--fg-tertiary);
  margin-top: 1px;
}
.rcp-doc {
  font-size: 10px;
  color: var(--fg-secondary);
  font-weight: var(--fw-medium);
  font-family: var(--font-display);
}
.rcp-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  width: max-content;
}
.rcp-status--done {
  background: var(--color-success-50);
  color: var(--color-success-700);
}
.rcp-status--active {
  background: var(--color-crimson-50);
  color: var(--color-crimson-700);
}
.rcp-status--active i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-crimson-500);
  animation: pulse var(--dur-pulse) ease-in-out infinite;
}
.rcp-status--wait {
  background: var(--color-warning-50);
  color: var(--color-warning-700);
}
.rcp-status--upcoming {
  background: var(--color-midnight-50);
  color: var(--color-midnight-700);
}
.rcp-status--resched {
  background: var(--color-info-50);
  color: var(--color-info-700);
}
.rcp-action {
  color: var(--fg-tertiary);
  font-weight: var(--fw-bold);
  text-align: right;
  font-size: 14px;
  line-height: 1;
}

/* Footer */
.rcp-footer {
  display: flex; align-items: center;
  gap: 14px;
  font-size: 9px;
  color: var(--fg-tertiary);
  padding: 0 2px;
}
.rcp-footer b {
  color: var(--fg-primary);
  font-weight: var(--fw-bold);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}
.rcp-footer__sync {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--color-success-700);
  font-weight: var(--fw-semibold);
}
.rcp-footer__sync i {
  width: 6px; height: 6px;
  background: var(--color-success-500);
  border-radius: 50%;
  animation: pulse var(--dur-pulse) ease-in-out infinite;
}

@media (max-width: 760px) {
  .rcp-list__head, .rcp-row {
    grid-template-columns: 40px 1.4fr 1fr 28px;
  }
  .rcp-list__head span:nth-child(4),
  .rcp-row .rcp-status { display: none; }
  .rcp-patient em { display: none; }
}

/* ---------- Reception (tablet) mockup END ---------- */

/* ---------- Clinical Ops device mockup ---------- */
.ops-mockup {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ops-laptop {
  position: relative;
  width: 96%;
  max-width: 620px;
  filter: drop-shadow(0 24px 40px rgba(10, 26, 47, 0.18));
}
.ops-laptop__bezel {
  background: #1a1a1d;
  border-radius: 12px 12px 4px 4px;
  padding: 12px 12px 8px;
  border: 1px solid #2a2a2e;
}
.ops-laptop__screen {
  background: var(--bg-canvas);
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 16/10;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--fg-primary);
}
.ops-laptop__hinge {
  height: 6px;
  background: linear-gradient(180deg, #2a2a2e 0%, #1a1a1d 100%);
  border-radius: 0 0 4px 4px;
  position: relative;
  margin: 0 -10px;
}
.ops-laptop__hinge::after {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 22%;
  height: 4px;
  background: #0d0d0f;
  border-radius: 0 0 6px 6px;
}
.ops-laptop__base {
  height: 8px;
  background: linear-gradient(180deg, #d7d9de 0%, #b7bac1 100%);
  border-radius: 0 0 14px 14px;
  margin: 0 -22px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
}

/* App chrome */
.ops-app__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
}
.ops-app__logo {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 10px;
  color: var(--fg-primary);
}
.ops-app__logo svg { width: 12px; height: 12px; color: var(--color-crimson-500); }
.ops-app__crumbs {
  font-size: 9px;
  color: var(--fg-tertiary);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
}
.ops-app__crumbs span { color: var(--border-default); margin: 0 4px; }
.ops-app__user {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
}
.ops-app__bell {
  position: relative;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg-canvas);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-secondary);
}
.ops-app__bell svg { width: 10px; height: 10px; }
.ops-app__bell i {
  position: absolute;
  top: 2px; right: 2px;
  width: 5px; height: 5px;
  background: var(--color-crimson-500);
  border-radius: 50%;
  border: 1px solid var(--bg-canvas);
}
.ops-app__avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-midnight-800);
  color: var(--fg-on-inverse);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 8px;
}

.ops-app__body {
  flex: 1;
  display: flex;
  min-height: 0;
}
.ops-app__side {
  width: 32px;
  background: var(--color-midnight-900);
  display: flex; flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 0;
}
.ops-app__side-item {
  width: 22px; height: 22px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.45);
}
.ops-app__side-item svg { width: 11px; height: 11px; }
.ops-app__side-item.is-active {
  background: var(--color-crimson-500);
  color: #fff;
}

.ops-app__main {
  flex: 1;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

/* KPI tiles */
.ops-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ops-kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 8px 10px;
}
.ops-kpi__label {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-bottom: 4px;
}
.ops-kpi__value {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 18px;
  color: var(--fg-primary);
  line-height: 1;
  display: flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.ops-kpi__trend {
  font-size: 9px;
  font-weight: var(--fw-semibold);
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--color-success-50);
  color: var(--color-success-700);
}
.ops-kpi--alert .ops-kpi__trend {
  background: var(--color-crimson-50);
  color: var(--color-crimson-600);
}
.ops-kpi__meta {
  margin-top: 5px;
  font-size: 9px;
  color: var(--fg-tertiary);
}
.ops-kpi__meta b { color: var(--fg-secondary); font-weight: var(--fw-semibold); }
.ops-kpi--alert {
  background: linear-gradient(180deg, #FFF5F7 0%, var(--bg-surface) 50%);
  border-color: var(--color-crimson-100);
}

/* Grid: chart + workload */
.ops-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.ops-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ops-card__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 6px;
}
.ops-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 10px;
  color: var(--fg-primary);
}
.ops-card__sub {
  font-size: 8px;
  color: var(--fg-tertiary);
  margin-top: 1px;
}
.ops-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px;
  background: var(--color-success-50);
  color: var(--color-success-700);
  border-radius: 999px;
  font-size: 8px;
  font-weight: var(--fw-semibold);
}
.ops-pill i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-success-500);
  animation: pulse var(--dur-pulse) ease-in-out infinite;
}
.ops-link {
  font-size: 9px; color: var(--color-crimson-600);
  font-weight: var(--fw-semibold);
}

.ops-chart {
  display: flex; align-items: flex-end;
  gap: 4px;
  flex: 1;
  padding: 4px 0;
}
.ops-bar {
  flex: 1;
  height: var(--h);
  background: linear-gradient(180deg, var(--color-midnight-300) 0%, var(--color-midnight-500) 100%);
  border-radius: 2px 2px 0 0;
  min-height: 4px;
}
.ops-bar--peak {
  background: linear-gradient(180deg, var(--color-crimson-400) 0%, var(--color-crimson-600) 100%);
}
.ops-axis {
  display: flex; justify-content: space-between;
  font-size: 7px;
  color: var(--fg-tertiary);
  margin-top: 2px;
  font-family: var(--font-numeric);
}

/* Doctor workload */
.ops-doc {
  display: grid;
  grid-template-columns: 14px 1fr 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}
.ops-doc + .ops-doc { border-top: 1px solid var(--border-subtle); }
.ops-doc__av {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-midnight-800);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 7px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}
.ops-doc__name {
  font-size: 9px;
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
  font-family: var(--font-display);
}
.ops-doc__bar {
  height: 4px;
  background: var(--bg-canvas);
  border-radius: 2px;
  overflow: hidden;
}
.ops-doc__bar span {
  display: block; height: 100%;
  background: var(--color-crimson-500);
  border-radius: 2px;
}
.ops-doc__val {
  font-size: 8px;
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  color: var(--fg-secondary);
  font-weight: var(--fw-semibold);
}

/* iPhone overlay */
.ops-phone {
  position: absolute;
  right: 2%;
  bottom: -4%;
  width: 22%;
  min-width: 130px;
  filter: drop-shadow(0 18px 28px rgba(10, 26, 47, 0.28));
}
.ops-phone__bezel {
  background: #0d0d0f;
  border-radius: 22px;
  padding: 6px;
  border: 1px solid #2a2a2e;
}
.ops-phone__notch {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 12px;
  background: #0d0d0f;
  border-radius: 0 0 8px 8px;
  z-index: 1;
}
.ops-phone__screen {
  background: var(--bg-surface);
  border-radius: 16px;
  padding: 18px 12px 14px;
  aspect-ratio: 9/19;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ops-phone__status {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  margin-bottom: 4px;
}
.ops-phone__icons { display: inline-flex; gap: 3px; align-items: center; color: var(--fg-primary); }
.ops-phone__icons svg { width: 10px; height: 7px; }
.ops-phone__h1 {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  line-height: 1.2;
}
.ops-phone__sub {
  font-size: 8px;
  color: var(--fg-tertiary);
  margin-bottom: 4px;
}
.ops-phone__num {
  background: linear-gradient(180deg, var(--color-crimson-50) 0%, var(--bg-surface) 100%);
  border: 1px solid var(--color-crimson-100);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  margin: 2px 0 4px;
}
.ops-phone__num-label {
  font-family: var(--font-display);
  font-size: 7px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}
.ops-phone__num-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--fw-bold);
  color: var(--color-crimson-600);
  line-height: 1;
  margin: 2px 0;
  font-variant-numeric: tabular-nums;
}
.ops-phone__num-meta {
  font-size: 8px;
  color: var(--fg-secondary);
  font-weight: var(--fw-medium);
}
.ops-phone__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0;
  font-size: 8px;
  color: var(--fg-secondary);
  border-bottom: 1px solid var(--border-subtle);
}
.ops-phone__row-value {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
}
.ops-phone__cta {
  margin-top: auto;
  background: var(--color-midnight-800);
  color: #fff;
  border-radius: 8px;
  padding: 6px 8px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 8px;
  cursor: pointer;
}

@media (max-width: 760px) {
  .ops-mockup { aspect-ratio: 5/4; }
  .ops-phone { width: 28%; right: 1%; bottom: -8%; }
}

/* ---------- Decorative backgrounds ----------
   The design system specifies restraint ("no repeating patterns"), so these
   are *ambient* effects: faint dot grids and soft radial glows that read as
   atmosphere rather than decoration. Strength is tuned with very low alpha
   so they never compete with the content.
*/
.section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.section--canvas { background: var(--bg-canvas); }
.section--pink {
  background: var(--bg-accent-soft);
  background-image:
    radial-gradient(ellipse 800px 400px at 0% 0%, rgba(220,16,46,0.10), transparent 60%),
    radial-gradient(ellipse 700px 380px at 100% 100%, rgba(220,16,46,0.08), transparent 60%);
}
/* Journey section gets its own warm canvas */
.section--journey {
  background:
    radial-gradient(900px 600px at 50% 0%, rgba(220,16,46,0.10), transparent 60%),
    radial-gradient(800px 500px at 50% 100%, rgba(220,16,46,0.06), transparent 65%),
    linear-gradient(180deg, #FFF5F7 0%, #FFEBEF 100%);
  background-image:
    radial-gradient(circle, rgba(220,16,46,0.08) 1px, transparent 1px),
    radial-gradient(900px 600px at 50% 0%, rgba(220,16,46,0.10), transparent 60%),
    radial-gradient(800px 500px at 50% 100%, rgba(220,16,46,0.06), transparent 65%),
    linear-gradient(180deg, #FFF5F7 0%, #FFEBEF 100%);
  background-size: 28px 28px, 100% 100%, 100% 100%, 100% 100%;
}
/* Journey loop gradient stronger now */
.journey__svg [id="loopGrad"] { /* selector ref only */ }
/* Node circles pulse in sync with the 14s tracer that sweeps the loop */
.journey__node-circle {
  animation: jpulse 14s ease-in-out infinite;
}
.journey__node:nth-child(1) .journey__node-circle { animation-delay: 0.5s; }
.journey__node:nth-child(2) .journey__node-circle { animation-delay: 2.25s; }
.journey__node:nth-child(3) .journey__node-circle { animation-delay: 4.0s; }
.journey__node:nth-child(4) .journey__node-circle { animation-delay: 5.75s; }
.journey__node:nth-child(5) .journey__node-circle { animation-delay: 7.5s; }
.journey__node:nth-child(6) .journey__node-circle { animation-delay: 9.25s; }
.journey__node:nth-child(7) .journey__node-circle { animation-delay: 11.0s; }
.journey__node:nth-child(8) .journey__node-circle { animation-delay: 12.75s; }
@keyframes jpulse {
  0%, 88%, 100% {
    box-shadow: var(--shadow-md);
    transform: translateY(0) scale(1);
  }
  93% {
    box-shadow: 0 0 0 8px rgba(220,16,46,0.22), 0 14px 32px -8px rgba(220,16,46,0.55);
    transform: translateY(-3px) scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .journey__node-circle { animation: none; }
}
.section--canvas {
  background-image:
    radial-gradient(circle, rgba(10,26,47,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
}
/* Soft corner glows for hero / cta-final navy bands */
.section--navy::before {
  background:
    radial-gradient(circle at 88% 8%, rgba(220,16,46,0.28), transparent 55%),
    radial-gradient(circle at 10% 92%, rgba(220,16,46,0.10), transparent 55%);
}
/* Decorative "blob" elements that sit behind the content (utility class) */
.deco-blob {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  z-index: -1;
}
.deco-blob--crimson { background: var(--color-crimson-200); }
.deco-blob--navy    { background: var(--color-midnight-200); }
.deco-blob--peach   { background: var(--color-crimson-100); }

/* Small numbered chevron between sections — a subtle funnel cue */
.section-funnel {
  position: relative;
  margin-top: calc(var(--tw-section-pad) * -0.45);
  margin-bottom: calc(var(--tw-section-pad) * -0.05);
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.section-funnel__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-crimson-700);
  box-shadow: var(--shadow-sm);
}
.section-funnel__pill svg { width: 14px; height: 14px; }

/* Hero is handled in its own block lower down with the photo background \u2014
   no override needed here. */

/* Stats band gets its own soft glow */
[data-screen-label="11b Stats"] {
  background: var(--bg-canvas);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(220,16,46,0.06), transparent 60%),
    radial-gradient(circle, rgba(10,26,47,0.05) 1px, transparent 1px);
  background-size: 100% 100%, 28px 28px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
  background: var(--bg-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; padding: 0; margin: 0; }
a { color: inherit; text-decoration: none; }
.btn, .btn:hover, .btn:focus, .btn:active, .btn:focus-visible { text-decoration: none; }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-7);
}
.section {
  padding: var(--tw-section-pad) 0;
}
.section--tight { padding: calc(var(--tw-section-pad) * 0.5) 0; }
.section--canvas { background: var(--bg-canvas); }
.section--changes-green { background: #EEFAF1; }
.section--navy   {
  background: var(--bg-inverse);
  color: var(--fg-on-inverse);
  position: relative;
  overflow: hidden;
}
.section--navy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 0%, rgba(220,16,46,0.22), transparent 55%);
  pointer-events: none;
}
.section--navy > .container { position: relative; z-index: 1; }

/* ---------- Section header ---------- */
.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--tw-section-head-mb);
}
.section-head--left { text-align: left; margin-left: 0; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-brand);
  margin-bottom: var(--space-5);
}
.eyebrow--on-dark { color: var(--color-crimson-300); }
.section-title {
  font-family: var(--font-display);
  font-size: calc(clamp(26px, 3.4vw, 40px) * var(--tw-section-title-scale));
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
.section-title em {
  font-style: italic;
  color: var(--color-crimson-500);
  font-family: 'Manrope', serif;
}
.section--navy .section-title em { color: var(--color-crimson-300); }
/* Problem heading: stays on one line on desktop, wraps on narrow */
@media (min-width: 880px) {
  .problem__title { white-space: nowrap; max-width: none; }
}
[data-screen-label="02 Clients"] .section-head {
  margin-bottom: var(--space-5);
}
[data-screen-label="02 Clients"] .clients-logos {
  padding: var(--space-4) 0;
}
.clients__title {
  font-size: calc(clamp(18px, 1.8vw, 22px) * var(--tw-section-title-scale));
  font-weight: var(--fw-semibold);
  color: var(--fg-secondary);
  letter-spacing: -0.005em;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
}
.clients__deco-line {
  flex: 0 1 90px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-default));
  position: relative;
}
.clients__deco-line:last-child {
  background: linear-gradient(90deg, var(--border-default), transparent);
}
.clients__deco-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-crimson-500);
  transform: translateY(-50%);
}
.clients__deco-line:first-child::after { right: 0; }
.clients__deco-line:last-child::after { left: 0; }
@media (max-width: 600px) {
  .clients__deco-line { flex-basis: 36px; }
}
.section--navy .section-title,
.section--navy .section-head p { color: var(--fg-on-inverse); }
.section-sub {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: 0 auto;
  max-width: 620px;
  text-wrap: pretty;
}
.section--navy .section-sub { color: var(--color-midnight-200); }
.title-accent { color: var(--color-crimson-500); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 14px 26px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-base);
  letter-spacing: 0.01em;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn:active { transform: scale(0.97); transition-duration: 70ms; }
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.btn--primary {
  background: var(--color-crimson-500);
  color: var(--fg-on-accent);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--color-crimson-600);
  box-shadow: var(--shadow-crimson);
}
.btn--secondary {
  background: transparent;
  color: var(--fg-primary);
  border-color: var(--border-default);
}
.btn--secondary:hover {
  border-color: var(--fg-primary);
  background: var(--bg-canvas);
}
.btn--ghost-dark {
  background: transparent;
  color: var(--fg-on-inverse);
  border-color: rgba(255,255,255,0.32);
}
.btn--ghost-dark:hover {
  border-color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.04);
}
.btn--lg { padding: 13px 26px; font-size: var(--text-md); }
.btn--lg.btn--primary {
  box-shadow:
    0 14px 32px -8px rgba(220, 16, 46, 0.55),
    0 6px 12px -2px rgba(220, 16, 46, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.btn--lg.btn--primary:hover {
  box-shadow:
    0 20px 44px -10px rgba(220, 16, 46, 0.65),
    0 8px 16px -2px rgba(220, 16, 46, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}
.btn--lg.btn--secondary {
  box-shadow:
    0 10px 24px -8px rgba(10, 26, 47, 0.18),
    0 4px 8px -2px rgba(10, 26, 47, 0.10);
}
.btn--lg.btn--secondary:hover {
  box-shadow:
    0 16px 34px -10px rgba(10, 26, 47, 0.25),
    0 6px 12px -2px rgba(10, 26, 47, 0.14);
  transform: translateY(-1px);
}
.btn--lg.btn--ghost-dark {
  box-shadow:
    0 10px 24px -8px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}
.btn-row {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.btn-row--center { justify-content: center; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.nav.is-scrolled {
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 92px;
  gap: var(--space-7);
}
.nav__logo img { height: 36px; width: auto; }

/* ---------- OPD Pilot wordmark logo (live-pulse i-dot) ---------- */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__wm {
  font-family: 'Outfit', var(--font-display), sans-serif;
  font-weight: 700;
  font-size: 25px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-midnight-800);
  white-space: nowrap;
}
.brand__pilot { color: var(--color-crimson-500); }
.brand__stack { display: inline-flex; flex-direction: column; line-height: 1; }
.brand__by {
  font-family: 'Outfit', var(--font-display), sans-serif;
  font-weight: 600;
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-top: 5px;
}
.brand__by b { color: var(--fg-secondary); font-weight: 700; }
.brand--on-dark .brand__by { color: var(--color-midnight-200); }
.brand--on-dark .brand__by b { color: #dde4ee; }
.brand__i { position: relative; display: inline-block; }
.brand__dot {
  position: absolute;
  left: 50%;
  bottom: 0.62em;
  transform: translateX(-50%);
  line-height: 0;
}
.brand__dot svg { display: block; }
.brand--on-dark .brand__wm { color: #fff; }
.brand--on-dark .brand__pilot { color: #FF5870; }
/* live pulse on the i-dot ring — echoes the product's "live" motif */
@media (prefers-reduced-motion: no-preference) {
  .brand__dot svg circle:nth-child(2) {
    transform-origin: center;
    transform-box: fill-box;
    animation: brandPulse var(--dur-pulse, 1600ms) ease-in-out infinite;
  }
}
@keyframes brandPulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.12; transform: scale(1.25); }
}
.nav__links {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}
.nav__links a {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  color: var(--fg-primary);
  padding: 8px 0;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__links a:hover { color: var(--color-crimson-500); text-decoration: none; }
.nav__links a, .nav__links a:hover, .nav__links a:focus, .nav__links a:focus-visible { text-decoration: none; }
.nav__cta { display: flex; gap: var(--space-3); align-items: center; }
.nav__cta-primary {
  box-shadow:
    0 8px 20px -6px rgba(220, 16, 46, 0.50),
    0 3px 8px -2px rgba(220, 16, 46, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.nav__cta-primary:hover {
  box-shadow:
    0 12px 28px -8px rgba(220, 16, 46, 0.60),
    0 5px 12px -2px rgba(220, 16, 46, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}
.nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  color: var(--fg-primary);
}
.nav__toggle svg { width: 24px; height: 24px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: var(--tw-hero-pad) 0 calc(var(--tw-section-pad) * 0.5);
  background-image:
    /* Soft neutral white wash so headline/CTAs stay legible */
    linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.86) 60%, rgba(255,255,255,0.94) 100%),
    /* Brand-red glow top-right, faint navy glow bottom-left */
    radial-gradient(900px 600px at 80% -10%, rgba(220,16,46,0.10), transparent 65%),
    radial-gradient(700px 500px at 10% 110%, rgba(10,26,47,0.06), transparent 60%),
    /* The clinic-reception photo */
    url("assets/hero-bg.webp");
  background-size: 100% 100%, 100% 100%, 100% 100%, cover;
  background-position: 0 0, 0 0, 0 0, center top;
  background-repeat: no-repeat;
  background-color: var(--bg-surface);
  overflow: hidden;
}
.hero__grid {
  position: static;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

/* ---------- Hero floating UI cards ---------- */
.hero-float {
  position: absolute;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  width: 240px;
  font-family: var(--font-body);
  text-align: left;
  z-index: 1;
  box-shadow:
    0 24px 48px -12px rgba(10, 26, 47, 0.18),
    0 8px 16px -4px rgba(10, 26, 47, 0.08);
  animation: heroFloat 6s ease-in-out infinite;
}
.hero-float--left {
  top: 12%;
  left: 24px;
  transform: rotate(-2deg);
}
.hero-float--right {
  top: 18%;
  right: 24px;
  transform: rotate(2deg);
  animation-delay: 1.5s;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(var(--rot, -2deg)); }
  50%      { transform: translateY(-10px) rotate(var(--rot, -2deg)); }
}
.hero-float--left  { --rot: -2deg; }
.hero-float--right { --rot:  2deg; }

.hero-float__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.hero-float__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-crimson-700);
  background: var(--color-crimson-50);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}
.hero-float__live i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-crimson-500);
  animation: pulse var(--dur-pulse) ease-in-out infinite;
}
.hero-float__time {
  font-size: var(--text-2xs);
  color: var(--fg-tertiary);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}
.hero-float__tag {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}
.hero-float__delta {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  color: var(--color-success-700);
  background: var(--color-success-50);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}
.hero-float__big {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: var(--space-4);
}
.hero-float__big-num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-float__big-label {
  font-size: var(--text-xs);
  color: var(--fg-tertiary);
  line-height: 1.2;
}
.hero-float__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: var(--text-xs);
  color: var(--fg-secondary);
  border-top: 1px solid var(--border-subtle);
}
.hero-float__row b {
  color: var(--fg-primary);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
}
.hero-float__row-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.hero-float__bar {
  height: 6px;
  background: var(--bg-canvas);
  border-radius: 3px;
  margin-top: var(--space-3);
  overflow: hidden;
}
.hero-float__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-crimson-500), var(--color-crimson-400));
  border-radius: 3px;
}

.hero-float__metric { margin-bottom: var(--space-4); }
.hero-float__metric-label {
  font-size: var(--text-xs);
  color: var(--fg-tertiary);
  margin-bottom: 4px;
}
.hero-float__metric-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: var(--fw-bold);
  color: var(--color-crimson-600);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-float__metric-num small {
  font-size: 18px;
  color: var(--fg-tertiary);
  margin-left: 2px;
}
.hero-float__chips {
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.hero-float__chip {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-secondary);
  background: var(--bg-canvas);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}
.hero-float__chip b {
  color: var(--color-crimson-600);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}
.hero-float__doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--bg-canvas);
  border-radius: var(--radius-md);
}
.hero-float__doc-av {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-midnight-800);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xs);
  flex-shrink: 0;
}
.hero-float__doc-name {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  line-height: 1.2;
}
.hero-float__doc-meta {
  font-size: 10px;
  color: var(--fg-tertiary);
  margin-top: 1px;
}
.hero-float__doc-status {
  margin-left: auto;
  color: var(--color-success-500);
  font-size: 10px;
}

@media (max-width: 1240px) {
  .hero-float--left  { left: 12px; width: 200px; }
  .hero-float--right { right: 12px; width: 200px; }
}
@media (max-width: 1080px) {
  .hero-float { display: none; }
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 16px;
  background: var(--color-crimson-50);
  border: 1px solid var(--color-crimson-100);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-crimson-700);
  margin: 0 auto;
}
.hero__eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-crimson-500);
  animation: pulse var(--dur-pulse) ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.2); }
}
.hero__title {
  font-family: var(--font-display);
  font-size: calc(clamp(32px, 4.8vw, 56px) * var(--tw-hero-title-scale));
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  margin: 0;
  text-wrap: balance;
}
.hero__title-em { color: var(--color-crimson-500); }
.hero__title-line { display: block; }
.hero__sub {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.55;
  color: var(--fg-secondary);
  max-width: 600px;
  margin: 0 auto;
}
.hero__benefits {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--space-7) * -0.5);
  justify-content: center;
  gap: var(--space-9);
  padding: 0;
}
.hero__benefit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  line-height: 1;
}
.hero__benefit .check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-success-50);
  color: var(--color-success-700);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hero__benefit .check svg { width: 12px; height: 12px; }
.hero__cta-row { margin-top: var(--space-6); }
.hero__visual {
  position: relative;
  margin-top: var(--space-7);
}
.hero__dash {
  position: relative;
  margin: 0 auto;
  max-width: 980px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-2xl);
}
.hero__floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__float {
  position: absolute;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.hero__float--tl { top: 8%; left: -2%; animation-delay: 0s; max-width: 220px; }
.hero__float--br { bottom: 12%; right: -2%; animation-delay: 2s; max-width: 240px; }
.hero__float-label {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.hero__float-num {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  line-height: 1;
}
.hero__float-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  color: var(--color-success-700);
  margin-top: 6px;
}
.hero__float .dot-live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-crimson-500);
  animation: pulse var(--dur-pulse) ease-in-out infinite;
}

/* ---------- Image placeholder ---------- */
.imgph {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #FAFBFD 0%, #F1F3F8 100%);
  border: 1.5px dashed var(--color-midnight-300);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--space-7);
  text-align: center;
  color: var(--fg-secondary);
  overflow: hidden;
}
.imgph::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(45deg, rgba(10,26,47,0.025) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(10,26,47,0.025) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(10,26,47,0.025) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(10,26,47,0.025) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  opacity: 0.6;
  pointer-events: none;
}
.imgph > * { position: relative; z-index: 1; }
.imgph__tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--color-crimson-50);
  color: var(--color-crimson-700);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}
.imgph__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
  margin: 0 0 var(--space-3);
  max-width: 90%;
}
.imgph__desc {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--fg-secondary);
  max-width: 92%;
  margin: 0 0 var(--space-5);
}
.imgph__dim {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-tertiary);
  padding: 6px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}
.imgph__prompt {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1.55;
  color: var(--fg-tertiary);
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  max-width: 100%;
  text-align: left;
}
.imgph__prompt strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  color: var(--color-crimson-700);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.imgph--dark {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
}
.imgph--dark .imgph__title { color: var(--fg-on-inverse); }
.imgph--dark .imgph__desc  { color: var(--color-midnight-200); }
.imgph--dark .imgph__dim,
.imgph--dark .imgph__prompt { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); color: var(--color-midnight-100); }
.imgph--dark .imgph__prompt strong { color: var(--color-crimson-300); }
.imgph--dark::before { opacity: 0.15; }
.imgph--ratio-16x9 { aspect-ratio: 16/9; }
.imgph--ratio-4x3 { aspect-ratio: 4/3; }
.imgph--ratio-1x1 { aspect-ratio: 1/1; }
.imgph--ratio-21x9 { aspect-ratio: 21/9; }
.imgph--ratio-3x2 { aspect-ratio: 3/2; }

/* Hero dashboard placeholder smaller text */
.hero .imgph { aspect-ratio: 16/9; }

/* ---------- Clients section ---------- */
.clients-logos {
  position: relative;
  overflow: hidden;
  padding: var(--space-8) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.clients-track {
  display: flex;
  gap: var(--space-9);
  width: max-content;
  animation: scroll-x 32s linear infinite;
}
@keyframes scroll-x {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.client-logo {
  flex-shrink: 0;
  width: 180px; height: 78px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
}
.client-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.stats-card {
  margin: var(--space-7) auto 0;
  max-width: 1100px;
  background: linear-gradient(140deg, var(--color-midnight-900) 0%, var(--color-midnight-800) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 48px -16px rgba(10,26,47,0.45);
  padding: var(--space-9) var(--space-8);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-7);
  position: relative;
  overflow: hidden;
}
.stats-card::before {
  content: "";
  position: absolute;
  top: -40%; right: -8%;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(220,16,46,0.26), transparent 60%);
  pointer-events: none;
}
.stats-card::after {
  content: "";
  position: absolute;
  bottom: -45%; left: -8%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(220,16,46,0.10), transparent 65%);
  pointer-events: none;
}
.stats-card__item { text-align: center; position: relative; z-index: 1; }
.stats-card__item + .stats-card__item::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px;
  background: rgba(255,255,255,0.12);
}
.stats-card__num {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: var(--fw-bold);
  color: var(--fg-on-inverse);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--space-3);
  font-variant-numeric: tabular-nums;
}
.stats-card__num .plus { color: var(--color-crimson-400); }
.stats-card__label {
  font-size: var(--text-md);
  color: var(--color-midnight-100);
  font-weight: var(--fw-medium);
}

/* ---------- Problem section ---------- */
/* Option A — split: sticky heading left + 2-col list right */
.problem-split {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 2.1fr);
  gap: var(--space-9);
  align-items: center;
  margin-bottom: var(--space-9);
}
.problem-split__copy { position: sticky; top: 100px; min-width: 0; }
.problem-split__img {
  aspect-ratio: 16/11;
  margin: var(--space-6) 0 0;
  border-radius: var(--radius-lg);
}
.problem-split__copy .section-title {
  font-size: clamp(26px, 2.4vw, 34px);
  white-space: normal;
  max-width: none;
  overflow-wrap: break-word;
}
.problem-split__copy .eyebrow { display: inline-block; }
.problem-split__stats {
  display: flex;
  gap: var(--space-9);
  margin-top: var(--space-8);
}
.problem-split__stat-n {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-4xl);
  color: var(--color-crimson-500);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.problem-split__stat-l {
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
  margin-top: var(--space-2);
  max-width: 110px;
}
.problem-split__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.problem-split__row {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  min-height: 132px;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.problem-split__row:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.problem-split__ic {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--color-crimson-50);
  color: var(--color-crimson-500);
}
.problem-split__ic svg { width: 20px; height: 20px; }
.problem-split__row[data-tone="amber"]  .problem-split__ic { background: var(--color-warning-50); color: var(--color-warning-700); }
.problem-split__row[data-tone="blue"]   .problem-split__ic { background: var(--color-info-50); color: var(--color-info-700); }
.problem-split__row[data-tone="navy"]   .problem-split__ic { background: var(--color-midnight-50); color: var(--color-midnight-800); }
.problem-split__row[data-tone="rose"]   .problem-split__ic { background: var(--color-danger-50); color: var(--color-danger-500); }
.problem-split__row[data-tone="violet"] .problem-split__ic { background: #F1ECFB; color: #6B46C1; }
.problem-split__row[data-tone="green"]  .problem-split__ic { background: var(--color-success-50); color: var(--color-success-700); }
.problem-split__row[data-tone="red"]    .problem-split__ic { background: var(--color-crimson-50); color: var(--color-crimson-600); }
.problem-split__h {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  color: var(--fg-primary);
  margin: 0 0 var(--space-2);
  line-height: 1.25;
  text-wrap: balance;
}
.problem-split__p {
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
  line-height: 1.5;
  margin: 0;
  text-wrap: pretty;
}
.problem-compare-label {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin: 0 0 var(--space-9);
  padding-top: var(--space-7);
  border-top: 1px dashed var(--border-default);
}
@media (max-width: 1000px) {
  .problem-split { grid-template-columns: 1fr; gap: var(--space-7); }
}
@media (max-width: 600px) {
  .problem-split__list { grid-template-columns: 1fr; }
}

/* Multicolor preview — tinted card backgrounds + matching borders */
.problem-card--color[data-tone="crimson"] { background: #FFF1F3; border-color: #FBD0D8; }
.problem-card--color[data-tone="amber"]   { background: #FFF8EC; border-color: #FBE4BE; }
.problem-card--color[data-tone="blue"]    { background: #EFF5FF; border-color: #CFE0FB; }
.problem-card--color[data-tone="navy"]    { background: #F1F4F9; border-color: #D6DEEC; }
.problem-card--color[data-tone="rose"]    { background: #FFF1F4; border-color: #FBD0DB; }
.problem-card--color[data-tone="violet"]  { background: #F6F1FD; border-color: #E4D8F6; }
.problem-card--color[data-tone="green"]   { background: #EEFAF1; border-color: #CDEBD6; }
.problem-card--color[data-tone="red"]     { background: #FFF1F3; border-color: #FBD0D8; }
/* Solid icon tiles + white glyph for stronger pop on tinted cards */
.problem-card--color[data-tone="crimson"] .problem-card__icon { background: var(--color-crimson-500) !important; color: #fff !important; }
.problem-card--color[data-tone="amber"]   .problem-card__icon { background: var(--color-warning-700) !important; color: #fff !important; }
.problem-card--color[data-tone="blue"]    .problem-card__icon { background: var(--color-info-700) !important; color: #fff !important; }
.problem-card--color[data-tone="navy"]    .problem-card__icon { background: var(--color-midnight-800) !important; color: #fff !important; }
.problem-card--color[data-tone="rose"]    .problem-card__icon { background: var(--color-danger-500) !important; color: #fff !important; }
.problem-card--color[data-tone="violet"]  .problem-card__icon { background: #6B46C1 !important; color: #fff !important; }
.problem-card--color[data-tone="green"]   .problem-card__icon { background: var(--color-success-700) !important; color: #fff !important; }
.problem-card--color[data-tone="red"]     .problem-card__icon { background: var(--color-crimson-600) !important; color: #fff !important; }

.problem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.problem-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.problem-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.problem-card__icon {
  width: 48px; height: 48px;
  background: var(--color-crimson-50);
  color: var(--color-crimson-500);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.problem-card__icon svg { width: 24px; height: 24px; }
.problem-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  margin: 0;
  line-height: 1.3;
}
.problem-card__desc {
  font-size: var(--text-md);
  color: var(--fg-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ---------- Solution section (tabs) ---------- */
.solution-shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-7);
  background:
    radial-gradient(ellipse 600px 400px at 100% 0%, rgba(220,16,46,0.06), transparent 60%),
    radial-gradient(ellipse 500px 350px at 0% 100%, rgba(10,26,47,0.03), transparent 65%),
    linear-gradient(180deg, var(--bg-surface) 0%, #FFF8FA 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.solution-shell::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--color-crimson-500) 0%, var(--color-crimson-600) 100%);
}
.solution-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: var(--space-5);
  border-right: 1px solid var(--border-subtle);
}
.solution-tab {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg-secondary);
  transition: all var(--dur-fast) var(--ease-out);
  position: relative;
}
.solution-tab__icon {
  width: 36px !important;
  height: 36px !important;
  background: var(--bg-canvas) !important;
  color: var(--color-midnight-500) !important;
  border-radius: var(--radius-sm) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.solution-tab__icon svg { width: 18px !important; height: 18px !important; }
.solution-tab:hover {
  background: var(--bg-canvas);
  color: var(--fg-primary);
}
.solution-tab.is-active {
  background: var(--color-midnight-800);
  color: var(--fg-on-inverse);
}
.solution-tab.is-active .solution-tab__icon {
  background: var(--color-crimson-500);
  color: var(--fg-on-accent);
}
.solution-panels {
  position: relative;
  min-height: 380px;
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  margin-left: calc(var(--space-5) * -1);
  background-image:
    radial-gradient(circle, rgba(10,26,47,0.05) 1px, transparent 1px),
    radial-gradient(600px 400px at 100% 0%, var(--panel-glow, rgba(10,110,247,0.18)), transparent 60%),
    linear-gradient(180deg, var(--panel-bg-1, #EFF5FF) 0%, var(--panel-bg-2, #E3EDFB) 100%);
  background-size: 24px 24px, 100% 100%, 100% 100%;
  transition: background var(--dur-medium) var(--ease-out);
}
/* Per-tab panel backdrops — cycles through the design system's semantic palette */
.solution-panels[data-active="0"] {
  --panel-bg-1: #EFF5FF; --panel-bg-2: #DCE9FB;          /* info / blue */
  --panel-glow: rgba(10,110,247,0.20);
}
.solution-panels[data-active="1"] {
  --panel-bg-1: #FFF7E8; --panel-bg-2: #FCEBC8;          /* warning / amber */
  --panel-glow: rgba(245,158,11,0.22);
}
.solution-panels[data-active="2"] {
  --panel-bg-1: #EEFAF1; --panel-bg-2: #D9F2DF;          /* success / green */
  --panel-glow: rgba(22,163,74,0.20);
}
.solution-panels[data-active="3"] {
  --panel-bg-1: #FFF1F4; --panel-bg-2: #FFD9E0;          /* crimson / pink */
  --panel-glow: rgba(220,16,46,0.18);
}
.solution-panels[data-active="4"] {
  --panel-bg-1: #F2F4FA; --panel-bg-2: #DEE3F0;          /* midnight / slate */
  --panel-glow: rgba(10,26,47,0.18);
}
.solution-panels[data-active="5"] {
  --panel-bg-1: #F4F1FB; --panel-bg-2: #E4DCF4;          /* violet (out-of-palette but harmonious) */
  --panel-glow: rgba(122,90,224,0.22);
}
.solution-panel { padding: 0; }
.solution-panel {
  display: none;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-8);
  align-items: center;
  animation: fadeUp var(--dur-medium) var(--ease-out);
}
.solution-panel.is-active { display: grid; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.solution-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
  line-height: 1.3;
}
.solution-panel__title::before {
  content: "";
  display: inline-block;
  width: 24px; height: 3px;
  background: var(--color-crimson-500);
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 12px;
  margin-bottom: 4px;
}
.solution-panel__desc {
  font-size: var(--text-md);
  color: var(--fg-secondary);
  margin: 0 0 var(--space-5);
  line-height: 1.6;
}
.solution-panel__list { display: flex; flex-direction: column; gap: var(--space-4); }
.solution-panel__li {
  display: flex; align-items: flex-start; gap: var(--space-4);
  font-size: var(--text-md);
  color: var(--fg-primary);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}
.solution-panel__li .tick {
  width: 22px; height: 22px;
  background: var(--color-crimson-50);
  color: var(--color-crimson-600);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.solution-panel__li .tick svg { width: 14px; height: 14px; }

/* ---------- Solution · "Love" alternating rows (comparison) ---------- */
.section--love { background: var(--bg-surface); padding-top: var(--space-7); }
.love-compare-label {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin: 0 0 var(--space-10);
  padding-bottom: var(--space-7);
  border-bottom: 1px dashed var(--border-default);
}
/* Horizontal card (card 5) — full width, text left, image right (62%) */
.love-wide {
  grid-column: 1 / -1;
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 38% 62%;
  align-items: center;
  gap: 0;
  background: #FFF8EC;
  border: 1px solid #FBE4BE;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.love-wide__copy {
  padding: var(--space-8) var(--space-9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
}
.love-wide__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--color-neutral-700);
  margin: 0;
}
.love-wide__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-neutral-700);
  margin: 0;
  max-width: 420px;
}
.love-wide__visual {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: var(--space-7) 0 var(--space-7) var(--space-5);
}
.love-wide__visual img {
  width: 100%;
  height: auto;
  display: block;
}
.love-wide__ph {
  width: 100%;
  aspect-ratio: 16/9.6;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF1D6 100%);
  border: 1.5px dashed #E6B860;
  border-right: none;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-7);
}
.love-wide__ph-tag {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-warning-700);
  background: var(--color-warning-50);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.love-wide__ph-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  color: var(--color-midnight-800);
  margin: var(--space-2) 0 0;
}
.love-wide__ph-desc {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-tertiary);
  margin: 0;
  max-width: 460px;
}
.love-wide__ph-dim {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--fg-tertiary);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  margin-top: var(--space-2);
}
@media (max-width: 760px) {
  .love-wide { grid-template-columns: 1fr; }
  .love-wide__visual { padding: 0 var(--space-6) var(--space-6); }
  .love-wide__ph { border-right: 1.5px dashed #E6B860; border-radius: var(--radius-xl); }
}

.love-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
}
.love-row {
  display: flex;
  flex-direction: column;
  background: var(--lv-bg, var(--color-crimson-50));
  border: 1px solid var(--lv-border, var(--color-crimson-100));
  border-radius: var(--radius-2xl);
  padding: var(--space-9) var(--space-5) var(--space-9);
  overflow: hidden;
  align-items: stretch;
}
/* Card tint rotation */
.love-row:nth-child(1) { --lv-bg:#EEFAF1; --lv-border:#CDEBD6; --lv-c:var(--color-success-700); }
.love-row:nth-child(2) { --lv-bg:#F2F4F9; --lv-border:#DEE3EE; --lv-c:var(--color-midnight-700); }
.love-row:nth-child(3) { --lv-bg:#EFF5FF; --lv-border:#CFE0FB; --lv-c:var(--color-info-700); }
.love-row:nth-child(4) { --lv-bg:#FFF1F3; --lv-border:#FBD0D8; --lv-c:var(--color-crimson-600); }
.love-row:nth-child(5) { --lv-bg:#FFF8EC; --lv-border:#FBE4BE; --lv-c:var(--color-warning-700); }
.love-row:nth-child(6) { --lv-bg:#F6F1FD; --lv-border:#E4D8F6; --lv-c:#6B46C1; }
.love-row__copy { order: 0; }
.love-row__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--lv-c, var(--color-crimson-600));
  margin-bottom: var(--space-4);
}
.love-row__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  color: var(--lv-c, var(--color-crimson-600));
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
}
.love-row__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--color-neutral-700);
  line-height: 1.25;
  margin: 0 0 var(--space-3);
}
.love-row__desc {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-neutral-700);
  margin: 0 0 var(--space-5);
  max-width: 480px;
}
.love-row__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}
.love-row__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  color: var(--fg-primary);
}
.love-tick {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.75);
  color: var(--lv-c, var(--color-crimson-600));
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.love-tick svg { width: 13px; height: 13px; }
.love-row__visual {
  margin-top: var(--space-7);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 40px -16px rgba(10,26,47,0.35);
  border: 1px solid var(--border-subtle);
  padding: 0;
  background: rgba(255,255,255,0.5);
}
.love-row__visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}
.love-row__visual .imgph {
  border-radius: 0;
  border: none;
}
/* Cut-out PNG: no card frame, sits transparent on the tinted card */
.love-row__visual--cutout {
  margin-top: var(--space-5);
  border: none;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  padding: 0;
  filter: drop-shadow(0 18px 36px rgba(10,26,47,0.18));
}
.love-row__visual--cutout img {
  border-radius: 0;
}
/* Phone-style cut-out: smaller, centered — matches Card 1 visual weight */
.love-row__visual--phone {
  filter: drop-shadow(0 18px 36px rgba(10,26,47,0.16));
}
.love-row__visual--phone img {
  width: 74%;
  max-width: 360px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .love-rows { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* ===== AI Voice Demo (Card 4, TTS — Option B) ===== */
.vdemo {
  margin-top: var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.vdemo__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); gap: var(--space-4); }
.vdemo__badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-crimson-600);
}
.vdemo__badge .d { width: 7px; height: 7px; border-radius: 50%; background: var(--color-crimson-500); flex: none; }
.vdemo.is-playing .vdemo__badge .d { animation: vdemoPulse var(--dur-pulse) ease-in-out infinite; }
.vdemo__langs { display: flex; gap: 6px; }
.vdemo__lang {
  border: 1px solid var(--border-default); background: var(--bg-surface);
  border-radius: var(--radius-pill); padding: 5px 12px;
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-xs);
  color: var(--fg-secondary); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.vdemo__lang:hover { border-color: var(--color-midnight-400); color: var(--fg-primary); }
.vdemo__lang.is-active { background: var(--color-midnight-800); color: var(--fg-on-inverse); border-color: var(--color-midnight-800); }
.vdemo__lang:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.vdemo__h {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--text-lg); color: var(--fg-primary);
  letter-spacing: -0.01em; margin: 0 0 var(--space-5);
}
.vdemo__row { display: flex; align-items: center; gap: 14px; }
.vdemo__orb {
  width: 48px; height: 48px; border-radius: var(--radius-md); flex: none;
  background: var(--color-crimson-500); color: var(--fg-on-accent);
  border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: transform 70ms, background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.vdemo__orb svg { width: 19px; height: 19px; }
.vdemo__orb:hover { box-shadow: var(--shadow-crimson); }
.vdemo__orb:active { transform: scale(0.94); }
.vdemo__orb:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.vdemo.is-playing .vdemo__orb { background: var(--color-midnight-800); }
.vdemo__mid { flex: 1; min-width: 0; }
.vdemo__caption { font-size: var(--text-xs); color: var(--fg-tertiary); font-style: italic; line-height: 1.4; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdemo__caption b { font-style: normal; font-weight: var(--fw-bold); color: var(--fg-secondary); }
.vdemo__wave { display: flex; align-items: center; gap: 3px; height: 22px; }
.vdemo__wave span { width: 3px; height: 5px; background: var(--color-crimson-300); border-radius: 2px; }
.vdemo.is-playing .vdemo__wave span { animation: vdemoWave 0.95s ease-in-out infinite; background: var(--color-crimson-500); }
.vdemo__wave span:nth-child(2n){ animation-delay: .12s; } .vdemo__wave span:nth-child(3n){ animation-delay: .26s; }
.vdemo__wave span:nth-child(5n){ animation-delay: .34s; } .vdemo__wave span:nth-child(7n){ animation-delay: .18s; }
@keyframes vdemoWave { 0%,100%{ height: 5px; } 50%{ height: 22px; } }
@keyframes vdemoPulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.4;transform:scale(1.3);} }
@media (prefers-reduced-motion: reduce) {
  .vdemo.is-playing .vdemo__wave span, .vdemo.is-playing .vdemo__badge .d { animation: none; }
}

/* ---------- AI Agents section (Bigin-style dark tabs) ---------- */
.section--agents { background: var(--bg-canvas); }
.agents-panel {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-7);
  background: linear-gradient(160deg, var(--color-midnight-900) 0%, var(--color-midnight-800) 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -22px rgba(10,26,47,0.55);
}
.agents-panel::before {
  content: "";
  position: absolute;
  top: -25%; right: -8%;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(220,16,46,0.22), transparent 60%);
  pointer-events: none;
}
.agents-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.agent-tab {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--color-midnight-100);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-md);
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.agent-tab__ic {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--color-midnight-100);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.agent-tab__ic svg { width: 17px; height: 17px; }
.agent-tab__txt { flex: 1; }
.agent-tab__chev {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  display: inline-flex;
}
.agent-tab__chev svg { width: 16px; height: 16px; }
/* Entrance: tabs stagger in when the section reveals */
.agent-tab {
  opacity: 0;
  transform: translateX(-12px);
}
.agents-revealed .agent-tab {
  opacity: 1;
  transform: translateX(0);
  transition: opacity var(--dur-medium) var(--ease-out),
              transform var(--dur-medium) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.agents-revealed .agent-tab:nth-child(1) { transition-delay: 0.05s; }
.agents-revealed .agent-tab:nth-child(2) { transition-delay: 0.10s; }
.agents-revealed .agent-tab:nth-child(3) { transition-delay: 0.15s; }
.agents-revealed .agent-tab:nth-child(4) { transition-delay: 0.20s; }
.agents-revealed .agent-tab:nth-child(5) { transition-delay: 0.25s; }
.agents-revealed .agent-tab:nth-child(6) { transition-delay: 0.30s; }
.agents-revealed .agent-tab:nth-child(7) { transition-delay: 0.35s; }
.agents-revealed .agent-tab:nth-child(8) { transition-delay: 0.40s; }
/* Auto-play progress sweep along the active tab */
.agent-tab.is-active { position: relative; overflow: hidden; }
.agent-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0; height: 3px;
  width: 100%;
  background: var(--color-crimson-500);
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 3px;
}
.agents-panel.is-playing .agent-tab.is-active::after {
  animation: agentProgress 4.2s linear;
}
@keyframes agentProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .agent-tab { opacity: 1; transform: none; }
  .agent-tab.is-active::after { display: none; }
}
.agent-tab:hover {
  background: rgba(255,255,255,0.09);
  color: var(--fg-on-inverse);
}
.agent-tab.is-active {
  background: var(--bg-surface);
  border-color: var(--bg-surface);
  color: var(--fg-primary);
}
.agent-tab.is-active .agent-tab__ic {
  background: var(--color-crimson-500);
  color: #fff;
}
.agent-tab.is-active .agent-tab__chev {
  opacity: 1;
  transform: translateX(0);
  color: var(--color-crimson-500);
}

.agents-panels {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  min-height: 360px;
}
.agent-panel {
  display: none;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: stretch;
}
.agent-panel.is-active {
  display: grid;
  animation: agentFade var(--dur-medium) var(--ease-out);
}
/* Staggered reveal of copy + bullets + mock on each switch */
.agent-panel.agent-animate .agent-panel__badge,
.agent-panel.agent-animate .agent-panel__title,
.agent-panel.agent-animate .agent-panel__desc,
.agent-panel.agent-animate .agent-panel__li,
.agent-panel.agent-animate .agent-mock {
  animation: agentItemIn var(--dur-medium) var(--ease-out) both;
}
.agent-panel.agent-animate .agent-panel__badge { animation-delay: 0.02s; }
.agent-panel.agent-animate .agent-panel__title { animation-delay: 0.08s; }
.agent-panel.agent-animate .agent-panel__desc  { animation-delay: 0.13s; }
.agent-panel.agent-animate .agent-panel__li:nth-child(1) { animation-delay: 0.18s; }
.agent-panel.agent-animate .agent-panel__li:nth-child(2) { animation-delay: 0.24s; }
.agent-panel.agent-animate .agent-panel__li:nth-child(3) { animation-delay: 0.30s; }
.agent-panel.agent-animate .agent-mock { animation-delay: 0.16s; animation-name: agentMockIn; }
@keyframes agentItemIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes agentMockIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .agent-panel.agent-animate .agent-panel__badge,
  .agent-panel.agent-animate .agent-panel__title,
  .agent-panel.agent-animate .agent-panel__desc,
  .agent-panel.agent-animate .agent-panel__li,
  .agent-panel.agent-animate .agent-mock { animation: none; }
}
@keyframes agentFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.agent-panel__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 14px 6px 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-midnight-100);
  margin-bottom: var(--space-5);
}
.agent-panel__badge-ic {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-crimson-500);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.agent-panel__badge-ic svg { width: 14px; height: 14px; }
.agent-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--fg-on-inverse);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}
.agent-panel__desc {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-midnight-200);
  margin: 0 0 var(--space-6);
}
.agent-panel__list { display: flex; flex-direction: column; gap: var(--space-3); }
.agent-panel__li {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-md);
  color: var(--fg-on-inverse);
  font-weight: var(--fw-medium);
}
.agent-panel__tick {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(220,16,46,0.18);
  color: var(--color-crimson-300);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.agent-panel__tick svg { width: 13px; height: 13px; }

/* Agent mock card on the right */
.agent-mock {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px -16px rgba(0,0,0,0.4);
  overflow: hidden;
}
.agent-mock__bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-canvas);
  border-bottom: 1px solid var(--border-subtle);
}
.agent-mock__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-crimson-500);
  flex-shrink: 0;
}
.agent-mock__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  color: var(--fg-primary);
  flex: 1;
}
.agent-mock__live {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--color-success-700);
}
.agent-mock__live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-success-500);
  animation: pulse var(--dur-pulse) ease-in-out infinite;
}
.agent-mock__body { padding: var(--space-4) var(--space-5); }
.agent-mock__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
}
.agent-mock__row + .agent-mock__row { border-top: 1px solid var(--border-subtle); }
.agent-mock__k { color: var(--fg-tertiary); }
.agent-mock__v {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
}
.agent-mock--brain .agent-mock__bar { background: var(--color-midnight-900); border-bottom-color: rgba(255,255,255,0.1); }
.agent-mock--brain .agent-mock__title { color: #fff; }

@media (max-width: 1000px) {
  .agents-panel { grid-template-columns: 1fr; gap: var(--space-6); }
  .agents-tabs {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: var(--space-3);
    scrollbar-width: none;
  }
  .agents-tabs::-webkit-scrollbar { display: none; }
  .agent-tab { flex-shrink: 0; }
  .agent-tab__chev { display: none; }
  .agent-panel { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .agents-panel { padding: var(--space-5); }
  .agents-panels { padding: var(--space-6); }
  .agent-tab__txt { white-space: nowrap; }
}

/* ---------- Journey loop (Section 5) ---------- */
.journey {
  position: relative;
}
.journey__wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16/6;
  min-height: 360px;
}
.journey__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.journey__center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: 320px;
}
.journey__center-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  line-height: 1.3;
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}
.journey__center-title em {
  font-style: italic;
  font-family: 'Manrope', serif;
  color: var(--color-crimson-500);
  font-weight: var(--fw-bold);
}
.journey__chips {
  display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-5);
  flex-wrap: wrap;
}
.journey__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
  box-shadow: var(--shadow-xs);
}
.journey__chip svg { width: 14px; height: 14px; color: var(--color-crimson-500); }
.journey__node {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  width: 150px;
  margin-left: -75px;
  margin-top: -50px;
}
.journey__node-circle {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--node-bg, var(--color-crimson-50));
  border: 1px solid var(--node-border, var(--color-crimson-100));
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--node-color, var(--color-crimson-500));
  position: relative;
  transition: transform var(--dur-medium) var(--ease-out);
}
.journey__node:hover .journey__node-circle {
  transform: scale(1.08);
  box-shadow: var(--shadow-crimson);
}
.journey__node-circle svg { width: 30px; height: 30px; }
.journey__node-num {
  position: absolute;
  top: -8px; right: -4px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--node-num-bg, var(--color-crimson-500));
  color: var(--fg-on-accent);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--bg-canvas);
}

/* Per-node multi-color palette (matches Problem section semantics) */
.journey__node[data-tone="crimson"]     { --node-color: #DC102E; --node-bg: #FFE0E5; --node-border: #FFB8C0; --node-num-bg: #DC102E; }
.journey__node[data-tone="amber"]       { --node-color: #B45309; --node-bg: #FEF3C7; --node-border: #FCD78C; --node-num-bg: #D97706; }
.journey__node[data-tone="blue"]        { --node-color: #0A6EF7; --node-bg: #DBEAFE; --node-border: #93C5FD; --node-num-bg: #0A6EF7; }
.journey__node[data-tone="navy"]        { --node-color: #0A1A2F; --node-bg: #E0E5EC; --node-border: #C1C7D4; --node-num-bg: #0A1A2F; }
.journey__node[data-tone="rose"]        { --node-color: #E11D48; --node-bg: #FFE4E6; --node-border: #FCA5AC; --node-num-bg: #E11D48; }
.journey__node[data-tone="violet"]      { --node-color: #6B46C1; --node-bg: #F1ECFB; --node-border: #D6C8F0; --node-num-bg: #7A5AE0; }
.journey__node[data-tone="green"]       { --node-color: #15803D; --node-bg: #DCFCE7; --node-border: #93E5B0; --node-num-bg: #16A34A; }
.journey__node[data-tone="crimsonDeep"] { --node-color: #BE123C; --node-bg: #FFE0E5; --node-border: #FFB8C0; --node-num-bg: #BE123C; }
.journey__node-title {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  line-height: 1.2;
  text-align: center;
}
.journey__node-sub {
  margin-top: 2px;
  font-size: var(--text-2xs);
  color: var(--fg-tertiary);
  line-height: 1.35;
  text-align: center;
}
.journey__caption {
  display: flex; align-items: center; gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  max-width: max-content;
  margin-left: auto; margin-right: auto;
  font-size: var(--text-sm);
  color: var(--fg-primary);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-sm);
}
.journey__caption .brain {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-crimson-50);
  color: var(--color-crimson-500);
  display: inline-flex; align-items: center; justify-content: center;
}
.journey__caption .brain svg { width: 18px; height: 18px; }

/* ---------- Revenue drivers ---------- */
.revenue {
  background: var(--bg-surface);
  padding-bottom: var(--space-7);
}
.revenue__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-8);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}
.revenue__col { display: flex; flex-direction: column; gap: var(--space-6); }
.revenue__card {
  display: flex; gap: var(--space-5);
  padding: var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.revenue__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.revenue__icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: var(--color-crimson-50);
  color: var(--color-crimson-500);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.revenue__icon svg { width: 28px; height: 28px; }
.revenue__card[data-tone="navy"] .revenue__icon { background: rgba(10,26,47,0.06); color: var(--color-midnight-800); }
.revenue__card[data-tone="green"] .revenue__icon { background: var(--color-success-50); color: var(--color-success-700); }
.revenue__card[data-tone="blue"] .revenue__icon { background: var(--color-info-50); color: var(--color-info-700); }
.revenue__card[data-tone="warning"] .revenue__icon { background: var(--color-warning-50); color: var(--color-warning-700); }
.revenue__card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  margin: 0 0 var(--space-3);
  display: flex; align-items: center; gap: var(--space-3);
}
.revenue__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-crimson-500);
  color: var(--fg-on-accent);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
}
.revenue__card-list {
  font-size: var(--text-md);
  color: var(--fg-secondary);
  line-height: 1.7;
  margin: 0;
}
.revenue__card-list li { position: relative; padding-left: 16px; }
.revenue__card-list li::before {
  content: "•";
  position: absolute; left: 4px; top: -1px;
  color: var(--color-crimson-500);
}
.revenue__center {
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--color-crimson-50) 0%, var(--bg-surface) 70%);
  border: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.revenue__center::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px dashed var(--color-crimson-200);
  opacity: 0.5;
}
.revenue__center-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-crimson-500);
  color: var(--fg-on-accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}
.revenue__center-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  line-height: 1.25;
}
.revenue__center-text em {
  font-style: normal;
  color: var(--color-crimson-500);
  display: block;
  margin-top: 6px;
}
.revenue__center-sub {
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
  margin-top: var(--space-3);
}

/* ---------- Control (laptop+phone + 3 cards) ---------- */
.control__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-10);
  align-items: center;
}
.control__cards { display: flex; flex-direction: column; gap: var(--space-4); }
.control-card {
  display: flex; gap: var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
}
.control-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-info-50); color: var(--color-info-700);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.control-card__icon svg { width: 24px; height: 24px; }
.control-card[data-tone="red"] .control-card__icon { background: var(--color-crimson-50); color: var(--color-crimson-600); }
.control-card[data-tone="navy"] .control-card__icon { background: rgba(10,26,47,0.06); color: var(--color-midnight-800); }
.control-card h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  margin: 0 0 var(--space-3);
}
.control-card p {
  font-size: var(--text-md);
  color: var(--fg-secondary);
  margin: 0;
  line-height: 1.6;
}

/* ---------- Implementation ---------- */
.implementation__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-11);
  align-items: center;
}
.impl-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.impl-li {
  display: flex; align-items: flex-start; gap: var(--space-4);
  font-size: var(--text-md);
  color: var(--fg-primary);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}
.impl-li .check {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-crimson-500);
  color: var(--fg-on-accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.impl-li .check svg { width: 16px; height: 16px; }
.impl-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-brand);
  margin-bottom: var(--space-4);
}
.impl-title {
  font-family: var(--font-display);
  font-size: calc(clamp(26px, 3.4vw, 40px) * var(--tw-section-title-scale));
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--fg-primary);
  margin: 0 0 var(--space-5);
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}

/* ---------- Support strip ---------- */
.support__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
}
.support-visual {
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.support-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
}
.support__copy h2 {
  color: var(--fg-on-inverse);
  font-family: var(--font-display);
  font-size: calc(clamp(26px, 3.4vw, 40px) * var(--tw-section-title-scale));
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--space-5);
}
.section--navy .section-title em {
  font-style: italic;
  font-family: 'Manrope', serif;
  color: var(--color-crimson-300);
}
.section-title em {
  font-style: italic;
  color: var(--color-crimson-500);
}
.support__copy p {
  color: var(--color-midnight-200);
  font-size: var(--text-md);
  line-height: 1.6;
  margin: 0 0 var(--space-7);
  max-width: 480px;
}
.support__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5) var(--space-6);
  margin-bottom: var(--space-8);
}
.support__item {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--fg-on-inverse);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
}
.support__item .ico {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(220,16,46,0.18);
  color: var(--color-crimson-300);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.support__item .ico svg { width: 16px; height: 16px; }
.support__cta-row {
  display: flex; gap: var(--space-5); flex-wrap: wrap;
}
.support__visual {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

/* ---------- Support mockup ---------- */
.support-mockup {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  color: var(--fg-primary);
  font-family: var(--font-body);
}
.support-mockup__head {
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-canvas) 100%);
}
.support-mockup__head-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.support-mockup__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}
.support-mockup__pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--color-success-50);
  color: var(--color-success-700);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
}
.support-mockup__pill-dot {
  width: 6px; height: 6px;
  background: var(--color-success-500);
  border-radius: 50%;
  animation: pulse var(--dur-pulse) ease-in-out infinite;
}
.support-mockup__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
}
.support-mockup__chat {
  padding: var(--space-5);
  display: flex; flex-direction: column;
  gap: var(--space-4);
  background: var(--bg-canvas);
}
.support-mockup__msg {
  display: flex; align-items: flex-end; gap: 10px;
  max-width: 88%;
}
.support-mockup__msg--out {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.support-mockup__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-crimson-500);
  color: var(--fg-on-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xs);
  flex-shrink: 0;
}
.support-mockup__bubble {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--fg-primary);
  position: relative;
  border-bottom-left-radius: 4px;
}
.support-mockup__bubble--out {
  background: var(--color-midnight-800);
  color: var(--fg-on-inverse);
  border-color: var(--color-midnight-800);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 4px;
}
.support-mockup__bubble--out .support-mockup__time { color: var(--color-midnight-300); }
.support-mockup__time {
  display: block;
  margin-top: 4px;
  font-size: var(--text-2xs);
  color: var(--fg-tertiary);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}
.support-mockup__typing {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  padding: 8px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  margin-left: 40px;
}
.support-mockup__typing em {
  font-style: normal;
  font-size: var(--text-2xs);
  color: var(--fg-tertiary);
}
.support-mockup__typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-midnight-400);
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.support-mockup__typing span:nth-child(2) { animation-delay: 0.15s; }
.support-mockup__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-3px); opacity: 1; }
}
.support-mockup__foot {
  display: flex; align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}
.support-mockup__stat-num {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--color-crimson-600);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.support-mockup__stat-label {
  font-size: var(--text-2xs);
  color: var(--fg-tertiary);
  margin-top: 4px;
}
.support-mockup__channels {
  margin-left: auto;
  display: flex; gap: 6px;
}
.support-mockup__channels span {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-secondary);
}
.support-mockup__channels span svg { width: 16px; height: 16px; }

/* ---------- What Changes (2x2 image cards) ---------- */
.changes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.change-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  min-height: 0;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.change-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.change-card__body {
  padding: var(--space-6) var(--space-7);
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-3);
}
/* Hide AI prompts inside this section's placeholders to save vertical space */
.changes-grid .imgph__prompt,
.changes-grid .imgph__dim { display: none; }
.changes-grid .imgph {
  padding: var(--space-4) var(--space-5);
}
.changes-grid .imgph__desc {
  font-size: var(--text-xs);
  margin-bottom: 0;
}
/* Filled image variant — real photo fills the card cell */
.imgph--filled {
  padding: 0 !important;
  border: none !important;
  background: var(--color-midnight-50);
}
.imgph--filled::before { display: none; }
.imgph--filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.change-card .imgph--filled { border-left: none; }
.change-card__role {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--color-midnight-800);
  margin: 0;
  line-height: 1.3;
}
.change-card__role span { color: var(--color-crimson-500); }
.change-card__quote {
  font-size: var(--text-sm);
  color: var(--fg-secondary);
  line-height: 1.55;
  margin: 0;
  font-style: italic;
}
.change-card .imgph {
  border-radius: 0;
  border: none;
  border-left: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, #F4F6FA 0%, #E5E9F2 100%);
}

/* ---------- Why Choose Us · CEO + quote + 4 cards + counter ---------- */
.whyq {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-10);
  align-items: stretch;
  margin-bottom: var(--space-4);
}
.whyq__founder {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  min-height: 100%;
}
.whyq__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-2xl);
  background: linear-gradient(160deg, var(--color-midnight-900) 0%, var(--color-midnight-800) 100%);
}
.whyq__badge {
  position: absolute;
  left: var(--space-5); bottom: var(--space-5);
  z-index: 3;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-lg);
}
.whyq__badge-name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  color: var(--fg-primary);
}
.whyq__badge-role {
  font-size: var(--text-xs);
  color: var(--fg-tertiary);
  margin-top: 2px;
}
.whyq__right { display: flex; flex-direction: column; }
.whyq__title {
  text-align: left;
  max-width: none;
  margin-bottom: var(--space-2);
}
.whyq__sub {
  text-align: left;
  margin-left: 0;
  max-width: 520px;
  margin-bottom: var(--space-6);
}
.whyq__quote {
  margin: 0 0 var(--space-6);
  background: var(--color-crimson-50);
  border: 1px solid var(--color-crimson-100);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-7);
}
.whyq__qmark {
  display: block;
  font-family: Georgia, serif;
  font-size: 44px;
  line-height: 0.4;
  height: 22px;
  color: var(--color-crimson-300);
}
.whyq__qtext {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--fg-primary);
}
.whyq__qtext em { font-style: normal; color: var(--color-crimson-600); }
.whyq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.whyq-card {
  display: flex;
  gap: var(--space-4);
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.whyq-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.whyq-card__icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--color-crimson-50);
  color: var(--color-crimson-600);
}
.whyq-card__icon svg { width: 20px; height: 20px; }
.whyq-card[data-tone="green"] .whyq-card__icon { background: var(--color-success-50); color: var(--color-success-700); }
.whyq-card[data-tone="amber"] .whyq-card__icon { background: var(--color-warning-50); color: var(--color-warning-700); }
.whyq-card[data-tone="blue"]  .whyq-card__icon { background: var(--color-info-50); color: var(--color-info-700); }
.whyq-card h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  color: var(--fg-primary);
  margin: 0 0 var(--space-1);
  line-height: 1.25;
}
.whyq-card p {
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
  line-height: 1.45;
  margin: 0;
}
.whyq__counter { margin-top: var(--space-11); max-width: none; }
@media (max-width: 1000px) {
  .whyq { grid-template-columns: 1fr; gap: var(--space-7); }
  .whyq__founder { min-height: 340px; }
  .whyq__photo { position: relative; }
}
@media (max-width: 560px) {
  .whyq__grid { grid-template-columns: 1fr; }
}

/* ---------- Why Choose Us (legacy founder variant) ---------- */
/* Option A — founder cut-out + quote on left, cards 2-col right */
.why-founder {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--space-8);
  align-items: start;
  margin-bottom: var(--space-9);
}
.why-founder__left {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.why-founder__photo {
  position: relative;
  background: linear-gradient(160deg, var(--color-midnight-900) 0%, var(--color-midnight-800) 100%);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}
.why-founder__photo::before {
  content: "";
  position: absolute;
  top: -30%; right: -20%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(220,16,46,0.30), transparent 60%);
  pointer-events: none;
}
.why-founder__cut {
  position: relative;
  z-index: 1;
  aspect-ratio: 3/4;
  border: none;
  border-radius: var(--radius-2xl);
  background: transparent;
}
.why-founder__badge {
  position: absolute;
  left: var(--space-5); bottom: var(--space-5);
  z-index: 2;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-lg);
}
.why-founder__badge-name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  color: var(--fg-primary);
}
.why-founder__badge-role {
  font-size: var(--text-xs);
  color: var(--fg-tertiary);
  margin-top: 2px;
}
.why-founder__quote { position: relative; }
.why-founder__qmark {
  display: block;
  font-family: Georgia, serif;
  font-size: 56px;
  line-height: 0.5;
  height: 28px;
  color: var(--color-crimson-300);
}
.why-founder__qtext {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
  margin: var(--space-3) 0 var(--space-5);
}
.why-founder__qtext em { font-style: normal; color: var(--color-crimson-500); }
.why-founder__author { display: flex; align-items: center; gap: var(--space-4); }
.why-founder__av {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-midnight-800);
  color: var(--fg-on-inverse);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  flex-shrink: 0;
}
.why-founder__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  color: var(--fg-primary);
}
.why-founder__role { font-size: var(--text-sm); color: var(--fg-tertiary); }
.why-grid--2col { grid-template-columns: 1fr 1fr; margin-bottom: var(--space-7); }
.stats-card--inline { margin-top: 0; }
.why-compare-label {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin: var(--space-9) 0;
  padding-top: var(--space-7);
  border-top: 1px dashed var(--border-default);
}
@media (max-width: 1000px) {
  .why-founder { grid-template-columns: 1fr; gap: var(--space-8); }
  .why-founder__left { position: static; }
  .why-founder__cut { aspect-ratio: 16/10; }
}
@media (max-width: 640px) {
  .why-grid--2col { grid-template-columns: 1fr; }
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.why-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  display: flex; gap: var(--space-5);
  align-items: flex-start;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.why-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.why-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-crimson-50);
  color: var(--color-crimson-500);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.why-card__icon svg { width: 22px; height: 22px; }
.why-card h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  margin: 0 0 var(--space-3);
  line-height: 1.3;
}
.why-card p {
  font-size: var(--text-md);
  color: var(--fg-secondary);
  margin: 0;
  line-height: 1.6;
}

/* ---------- Testimonials ---------- */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
}
.testi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  position: relative;
}
.testi-card__quote-icon {
  width: 36px; height: 36px;
  color: var(--color-crimson-200);
  margin-bottom: var(--space-4);
}
.testi-card__topic {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--color-crimson-600);
  margin: 0 0 var(--space-4);
}
.testi-card__quote {
  font-size: var(--text-md);
  color: var(--fg-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-7);
  flex-grow: 1;
}

/* ---------- Testimonials · Option B (featured navy + supporting) ---------- */
.testi-compare-label {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin: var(--space-10) 0 var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px dashed var(--border-default);
}
.testiB-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
.testiB-stars { display: flex; gap: 3px; color: var(--color-warning-500); margin-bottom: var(--space-4); }
.testiB-stars svg { width: 18px; height: 18px; }
.testiB-topic {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  color: var(--color-crimson-600);
  margin: 0 0 var(--space-3);
}
.testiB-feat {
  background: linear-gradient(155deg, var(--color-midnight-900) 0%, #0A1626 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-9);
  color: var(--fg-on-inverse);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.testiB-feat::before {
  content: "";
  position: absolute;
  top: -30%; right: -8%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(220,16,46,0.26), transparent 60%);
  pointer-events: none;
}
.testiB-feat .testiB-stars { position: relative; }
.testiB-feat-q {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xl);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: var(--space-4) 0 0;
  position: relative;
}
.testiB-feat-q em { font-style: normal; color: var(--color-crimson-300); }
.testiB-feat-auth { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-7); position: relative; }
.testiB-feat-auth .testi-card__avatar { background: var(--color-crimson-500); border: 2px solid rgba(255,255,255,0.2); }
.testiB-feat-auth .testi-card__name { color: var(--fg-on-inverse); }
.testiB-feat-auth .testi-card__role { color: var(--color-midnight-200); }
.testiB-side { display: flex; flex-direction: column; gap: var(--space-6); }
.testiB-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  box-shadow: var(--shadow-sm);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.testiB-card-q {
  font-size: var(--text-md);
  color: var(--fg-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-5);
  flex: 1;
}
@media (max-width: 900px) {
  .testiB-grid { grid-template-columns: 1fr; }
}
.testi-card__author {
  display: flex; align-items: center; gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.testi-card__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-midnight-800);
  color: var(--fg-on-inverse);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  flex-shrink: 0;
}
.testi-card__avatar--photo {
  width: 52px; height: 52px;
  overflow: hidden;
  background: var(--color-midnight-100);
}
.testi-card__avatar--photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.testi-card__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  line-height: 1.3;
}
.testi-card__role {
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
}

/* ---------- FAQs ---------- */
.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-11);
  align-items: flex-start;
}
.faq__heading h2 {
  font-family: var(--font-display);
  font-size: calc(clamp(26px, 3.4vw, 40px) * var(--tw-section-title-scale));
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fg-primary);
  margin: 0 0 var(--space-7);
  text-wrap: balance;
}
.faq__contact {
  font-size: var(--text-md);
  color: var(--fg-secondary);
}
.faq__contact a {
  color: var(--color-crimson-600);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.faq__support {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-9);
  padding: var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  max-width: 360px;
}
/* Concierge card */
.faq__concierge {
  position: relative;
  margin-top: var(--space-8);
  max-width: 380px;
  padding: var(--space-7);
  border-radius: var(--radius-2xl);
  background: linear-gradient(155deg, var(--color-midnight-900) 0%, var(--color-midnight-800) 100%);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.faq__concierge-glow {
  position: absolute;
  top: -40%; right: -20%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(220,16,46,0.28), transparent 60%);
  pointer-events: none;
}
.faq__concierge-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}
.faq__concierge-avatars { display: flex; }
.faq__av {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-midnight-800);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  color: #fff;
}
.faq__av--1 { background: var(--color-crimson-500); }
.faq__av--2 { background: var(--color-info-500); margin-left: -12px; }
.faq__av--3 { background: var(--color-success-500); margin-left: -12px; }
.faq__concierge-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-midnight-100);
  background: rgba(255,255,255,0.08);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}
.faq__concierge-title {
  position: relative;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  color: #fff;
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}
.faq__concierge-desc {
  position: relative;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-midnight-200);
  margin: 0 0 var(--space-6);
}
.faq__channels {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.faq__channel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  color: #fff;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.faq__channel:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.18); }
.faq__channel-ic {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.faq__channel-ic svg { width: 17px; height: 17px; }
.faq__channel-ic[data-tone="green"] { background: rgba(22,163,74,0.18); color: #4ADE80; }
.faq__channel-ic[data-tone="crimson"] { background: rgba(220,16,46,0.18); color: var(--color-crimson-300); }
.faq__concierge-cta {
  position: relative;
  display: block;
  text-align: center;
  padding: 13px var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-crimson-500);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-md);
  box-shadow: var(--shadow-md);
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.faq__concierge-cta:hover { background: var(--color-crimson-600); box-shadow: var(--shadow-crimson); }
.faq__concierge-foot {
  position: relative;
  text-align: center;
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-midnight-300);
}
.faq__support-icon {
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--color-crimson-50);
  color: var(--color-crimson-600);
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq__support-icon svg { width: 24px; height: 24px; }
.faq__support-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  color: var(--fg-primary);
  margin-bottom: var(--space-2);
}
.faq__support-desc {
  font-size: var(--text-sm);
  color: var(--fg-secondary);
  line-height: 1.5;
  margin: 0 0 var(--space-4);
}
.faq__support-cta {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  color: var(--color-crimson-600);
}
.faq__support-cta:hover { color: var(--color-crimson-700); }
.faq__assist {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--fg-tertiary);
}
.faq__assist-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-success-500);
  animation: pulse var(--dur-pulse) ease-in-out infinite;
  flex-shrink: 0;
}
.faq__list { display: flex; flex-direction: column; }
.faq__item {
  border-bottom: 1px solid var(--border-subtle);
}
.faq__item:first-child { border-top: 1px solid var(--border-subtle); }
.faq__q {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  text-align: left;
  padding: var(--space-5) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
  gap: var(--space-5);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq__q:hover { color: var(--color-crimson-600); }
.faq__item.is-open .faq__q { color: var(--color-crimson-600); }
.faq__icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform var(--dur-medium) var(--ease-out);
}
.faq__icon::before {
  content: ""; width: 12px; height: 1.5px; background: currentColor;
}
.faq__icon::after {
  content: ""; width: 1.5px; height: 12px; background: currentColor;
  position: absolute;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-medium) var(--ease-out);
}
.faq__item.is-open .faq__icon::after { opacity: 0; transform: rotate(90deg); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-medium) var(--ease-out);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner {
  overflow: hidden;
}
.faq__a p {
  margin: 0 0 var(--space-7);
  font-size: var(--text-md);
  color: var(--fg-secondary);
  line-height: 1.65;
  max-width: 620px;
}
.faq__a ul {
  margin: 0 0 var(--space-7);
  padding-left: var(--space-6);
  font-size: var(--text-md);
  color: var(--fg-secondary);
  line-height: 1.7;
}
.faq__a li { list-style: disc; }

/* ---------- Final CTA strip ---------- */
/* Scroll-triggered "open" reveal. FAIL-SAFE: opacity is driven by STATIC class
   rules only — never by an animation/transition (those stall at currentTime 0 in
   throttled iframes, leaving content invisible). Only TRANSFORM animates; if it
   stalls, opacity is already 1 so content stays visible. Hidden state exists only
   once JS adds .cta-armed right before wiring the observer. */
.cta-reveal.cta-armed .cta-open > * { opacity: 0; }
.cta-reveal.cta-armed.is-revealed .cta-open > * {
  opacity: 1;                       /* STATIC — guarantees visibility */
  animation: ctaRiseIn 560ms cubic-bezier(0.2,0.7,0.2,1) both;
}
.cta-reveal.cta-armed.is-revealed .cta-open > *:nth-child(1) { animation-delay: 60ms; }
.cta-reveal.cta-armed.is-revealed .cta-open > *:nth-child(2) { animation-delay: 150ms; }
.cta-reveal.cta-armed.is-revealed .cta-open > *:nth-child(3) { animation-delay: 240ms; }
.cta-reveal.cta-armed.is-revealed .cta-open > *:nth-child(4) { animation-delay: 330ms; }
.cta-reveal.cta-armed.is-revealed .cta-open > *:nth-child(5) { animation-delay: 420ms; }
/* transform-only — no opacity in the keyframe, so a stall can't hide anything */
@keyframes ctaRiseIn {
  from { transform: translateY(26px) scale(0.97); }
  to   { transform: none; }
}

.cta-final {
  background: var(--bg-inverse);
  position: relative;
  overflow: hidden;
  padding: var(--tw-section-pad) 0;
}
.cta-final::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(700px 500px at 20% 30%, rgba(220,16,46,0.22), transparent 60%),
    radial-gradient(800px 500px at 80% 100%, rgba(220,16,46,0.12), transparent 60%);
}
.cta-final__inner {
  position: relative;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.cta-final h2 {
  color: var(--fg-on-inverse);
  font-family: var(--font-display);
  font-size: calc(clamp(26px, 3.4vw, 40px) * var(--tw-section-title-scale));
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--space-5);
}
.cta-final p {
  color: var(--color-midnight-200);
  font-size: var(--text-md);
  line-height: 1.6;
  margin: 0 0 var(--space-7);
}

/* Final-CTA primary button — calm Hollywood pulse + shimmer */
.cta-final__reassure {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-9) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-midnight-200);
  letter-spacing: 0.01em;
}
.cta-final__reassure svg {
  width: 16px; height: 16px;
  color: var(--color-success-400, #4ADE80);
  flex-shrink: 0;
}
.cta-final__pulse {
  position: relative;
  overflow: hidden;
  animation: ctaGlow 2.6s var(--ease-in-out) infinite;
}
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 14px 32px -8px rgba(220,16,46,0.55), 0 0 0 0 rgba(220,16,46,0.5); }
  50%      { box-shadow: 0 18px 40px -8px rgba(220,16,46,0.7), 0 0 0 10px rgba(220,16,46,0); }
}
.cta-final__pulse::after {
  content: "";
  position: absolute;
  top: 0; left: -130%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg);
  animation: ctaShimmer 3.4s var(--ease-in-out) infinite;
}
@keyframes ctaShimmer {
  0%   { left: -130%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}
.cta-final__pulse:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .cta-final__pulse { animation: none; }
  .cta-final__pulse::after { display: none; }
}
.footer-separator {
  height: 80px;
  background:
    radial-gradient(800px 200px at 50% 0%, rgba(220,16,46,0.06), transparent 70%),
    linear-gradient(180deg, var(--bg-canvas) 0%, var(--bg-surface) 100%);
  background-image:
    radial-gradient(circle, rgba(10,26,47,0.05) 1px, transparent 1px),
    radial-gradient(800px 200px at 50% 0%, rgba(220,16,46,0.06), transparent 70%),
    linear-gradient(180deg, var(--bg-canvas) 0%, var(--bg-surface) 100%);
  background-size: 28px 28px, 100% 100%, 100% 100%;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--color-midnight-900);
  color: var(--color-midnight-200);
  padding: var(--space-11) 0 var(--space-8);
  font-size: var(--text-sm);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-9);
  padding-bottom: var(--space-9);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__about p {
  color: var(--color-midnight-200);
  margin: var(--space-5) 0 var(--space-6);
  max-width: 320px;
  line-height: 1.6;
}
.footer__about .brand { margin-bottom: var(--space-2); }
.footer__about .brand__wm { font-size: 26px; }
.footer__col h5 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--fg-on-inverse);
  margin: 0 0 var(--space-5);
}
.footer__col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__col a {
  color: var(--color-midnight-200);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__col a:hover { color: var(--fg-on-inverse); }
.footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-5);
  padding-top: var(--space-7);
  color: var(--color-midnight-300);
  font-size: var(--text-sm);
}
.footer__socials { display: flex; gap: var(--space-5); }
.footer__socials a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-midnight-200);
  transition: background var(--dur-fast) var(--ease-out);
}
.footer__socials a:hover { background: var(--color-crimson-500); color: white; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .problem-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .solution-shell { grid-template-columns: 1fr; gap: var(--space-7); padding: var(--space-7); }
  .solution-tabs {
    flex-direction: row;
    overflow-x: auto;
    padding: 0 0 var(--space-5);
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    gap: 4px;
    scrollbar-width: none;
  }
  .solution-tabs::-webkit-scrollbar { display: none; }
  .solution-tab { flex-shrink: 0; min-width: 220px; }
  .solution-panel { grid-template-columns: 1fr; }
  .revenue__grid { grid-template-columns: 1fr; }
  .revenue__center { margin: 0 auto; }
  .control__grid { grid-template-columns: 1fr; gap: var(--space-9); }
  .implementation__grid { grid-template-columns: 1fr; gap: var(--space-9); }
  .support__layout { grid-template-columns: 1fr; gap: var(--space-9); }
  .changes-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .faq__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 760px) {
  :root {
    /* nothing — keep tokens fixed */
  }
  .section { padding: calc(var(--tw-section-pad) * 0.85) 0; }
  .container { padding: 0 var(--space-6); }
  .nav__links, .nav__cta .btn--secondary { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav.is-open .nav__links {
    display: flex;
    position: absolute;
    top: 92px; left: 0; right: 0;
    flex-direction: column;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-6);
    gap: var(--space-5);
    box-shadow: var(--shadow-lg);
  }
  .hero { padding: var(--space-10) 0 var(--space-11); }
  .hero__float--tl, .hero__float--br { display: none; }
  .hero__benefits { gap: var(--space-5); }
  .problem-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .stats-card { grid-template-columns: repeat(2, 1fr); padding: var(--space-7); gap: var(--space-7); }
  .stats-card__item + .stats-card__item::before { display: none; }
  .stats-card__item:nth-child(2n)::before { display: none; }
  .change-card { grid-template-columns: 1fr; min-height: auto; }
  .change-card .imgph { border-left: none; border-top: 1px solid var(--border-subtle); aspect-ratio: 16/9; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .support__items { grid-template-columns: 1fr; }
  .journey__wrap { min-height: 0; aspect-ratio: auto; }
  .journey__svg { display: none; }
  .journey-mobile { display: grid; }
  .journey__center { position: static; transform: none; margin: 0 auto var(--space-8); max-width: none; }
  .journey__nodes { display: none; }
}

/* Show mobile journey only on small screens */
.journey-mobile { display: none; }
@media (max-width: 760px) {
  .journey-mobile {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-top: var(--space-7);
  }
  .journey-mobile .journey__node {
    position: relative;
    margin: 0;
    flex-direction: row;
    width: 100%;
    align-items: center;
    text-align: left;
    gap: var(--space-5);
    padding: var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
  }
  .journey-mobile .journey__node-circle { width: 56px; height: 56px; flex-shrink: 0; }
  .journey-mobile .journey__node-circle svg { width: 24px; height: 24px; }
  .journey-mobile .journey__node-title,
  .journey-mobile .journey__node-sub { text-align: left; margin-top: 0; }
  .journey-mobile .journey__node-num { top: -6px; right: auto; left: 40px; width: 22px; height: 22px; font-size: 10px; }
}

/* ===== hero-journey.css ===== */
/* ============================================================
   Hero journey variants (Option A · dark spine, Option B · light flow strip)
   Inserted below the live hero for comparison. Design-system tokens only.
   ============================================================ */

.hero-compare-label {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-tertiary);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-7) 0;
}

.hj { --hj-c: var(--color-crimson-500); }
.hj__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-semibold);
  padding: 7px 15px; border-radius: var(--radius-pill);
}
.hj__eyebrow .d { width: 7px; height: 7px; border-radius: 50%; background: var(--color-crimson-500); animation: hjDot 1.6s ease-in-out infinite; }
@keyframes hjDot { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(1.25);} }
.hj__h1 { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: -0.025em; line-height: 1.06; margin: var(--space-5) 0 0; }
.hj__h1 em { font-style: normal; color: var(--color-crimson-500); }
.hj__sub { line-height: 1.55; margin: var(--space-4) 0 0; }
.hj__btns { display: flex; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; }

/* step pill */
.hj-step { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); position: relative; }
.hj-step__ic { width: 42px; height: 42px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--hj-c); background: color-mix(in srgb, var(--hj-c) 16%, transparent); }
.hj-step__ic svg { width: 21px; height: 21px; }
.hj-step__n { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-sm); }
.hj-step__d { font-size: var(--text-xs); margin-top: 2px; }
.hj-step__num { position: absolute; top: 9px; right: 14px; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-2xs); opacity: 0.4; }

/* ===== Option A · dark vertical connected spine ===== */
.hjA {
  background:
    radial-gradient(900px 600px at 50% 6%, rgba(220,16,46,0.16), transparent 60%),
    linear-gradient(180deg, #0B1C33, #08111F);
  padding: var(--space-12) 0;
}
.hjA__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: var(--space-11); align-items: center; }
.hjA .hj__eyebrow { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); color: #fff; }
.hjA .hj__h1 { color: #fff; font-size: clamp(30px, 3.6vw, 44px); }
.hjA .hj__sub { color: var(--color-midnight-200); font-size: var(--text-md); max-width: 400px; }
.hj-spine { position: relative; padding-left: 6px; }
.hj-spine__line { position: absolute; left: 35px; top: 30px; bottom: 30px; width: 2px; background: linear-gradient(180deg, rgba(220,16,46,0.12), rgba(220,16,46,0.5), rgba(220,16,46,0.12)); }
.hj-spine__pulse { position: absolute; left: 31px; width: 10px; height: 10px; border-radius: 50%; background: #FF5870; box-shadow: 0 0 12px 3px rgba(220,16,46,0.8); animation: hjDown 5s ease-in-out infinite; }
@keyframes hjDown { 0%{top:24px;opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{top:calc(100% - 34px);opacity:0;} }
.hjA .hj-step { background: rgba(255,255,255,0.04); border: 1px solid rgba(125,162,217,0.14); margin: 7px 0; }
.hjA .hj-step__n { color: #fff; } .hjA .hj-step__d { color: var(--color-midnight-200); } .hjA .hj-step__num { color: #fff; }

/* ===== Option B · light horizontal connected flow strip ===== */
.hjB {
  background:
    radial-gradient(800px 460px at 88% 0%, rgba(220,16,46,0.06), transparent 60%),
    var(--bg-surface);
  padding: var(--space-12) 0;
  text-align: center;
}
.hjB .hj__eyebrow { background: var(--color-crimson-50); border: 1px solid var(--color-crimson-100); color: var(--color-crimson-700); }
.hjB .hj__h1 { color: var(--fg-primary); font-size: clamp(30px, 3.6vw, 44px); }
.hjB .hj__sub { color: var(--fg-secondary); font-size: var(--text-md); max-width: 560px; margin-left: auto; margin-right: auto; }
.hjB .hj__btns { justify-content: center; }
.hj-strip { display: flex; align-items: stretch; margin-top: var(--space-9); background: var(--bg-canvas); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-3); overflow: hidden; }
.hj-strip__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-2); position: relative; }
.hj-strip__ic { width: 46px; height: 46px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--hj-c); background: color-mix(in srgb, var(--hj-c) 14%, #fff); animation: hjPop 6s ease-in-out infinite; }
.hj-strip__ic svg { width: 23px; height: 23px; }
@keyframes hjPop { 0%,84%,100%{ box-shadow:none; transform:scale(1);} 10%,74%{ box-shadow:0 0 0 5px color-mix(in srgb, var(--hj-c) 14%, transparent); transform:scale(1.06);} }
.hj-strip__n { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-xs); color: var(--fg-primary); text-align: center; line-height: 1.2; }
.hj-strip__d { font-size: var(--text-2xs); color: var(--fg-tertiary); text-align: center; line-height: 1.3; max-width: 130px; }
.hj-strip__arr { position: absolute; top: 32px; right: -9px; color: var(--color-crimson-300); z-index: 2; }
.hj-strip__arr svg { width: 16px; height: 16px; }
.hj-strip__step:last-child .hj-strip__arr { display: none; }

@media (max-width: 980px) {
  .hjA__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hj-strip { flex-wrap: wrap; gap: var(--space-4); }
  .hj-strip__step { flex: 0 0 calc(33.333% - var(--space-4)); }
  .hj-strip__arr { display: none; }
}
@media (max-width: 560px) {
  .hj-strip__step { flex: 0 0 calc(50% - var(--space-4)); }
}
@media (prefers-reduced-motion: reduce) {
  .hj-spine__pulse, .hj-strip__ic, .hj__eyebrow .d { animation: none; }
  .hj-spine__pulse { display: none; }
}

/* ===== Option B2 · premium light cards + lift/glow wave + hopping connectors + corner glows ===== */
.hjB2 {
  position: relative;
  /* Same clinic-reception photo background as the main hero, with a white wash for legibility */
  background-image:
    /* Blue-tinted white wash so the photo reads softer and the overlay is cool, not red */
    linear-gradient(180deg, rgba(238,244,255,0.74) 0%, rgba(232,240,255,0.78) 55%, rgba(226,236,253,0.84) 100%),
    radial-gradient(900px 600px at 80% -10%, rgba(37,99,235,0.14), transparent 65%),
    radial-gradient(700px 500px at 10% 110%, rgba(37,99,235,0.10), transparent 60%),
    url("assets/hero-bg.webp");
  background-size: 100% 100%, 100% 100%, 100% 100%, cover;
  background-position: 0 0, 0 0, 0 0, center top;
  background-repeat: no-repeat;
  background-color: var(--bg-surface);
  padding: var(--space-12) 0;
  text-align: center;
  overflow: hidden;
}
.hjB2__glow {
  position: absolute; width: 360px; height: 360px; border-radius: 50%;
  pointer-events: none; filter: blur(8px); z-index: 0;
}
.hjB2__glow--l {
  top: -120px; left: -100px;
  background: radial-gradient(circle, rgba(37,99,235,0.18), transparent 65%);
  animation: hjGlowL 9s ease-in-out infinite;
}
.hjB2__glow--r {
  top: -90px; right: -110px;
  background: radial-gradient(circle, rgba(37,99,235,0.14), transparent 65%);
  animation: hjGlowR 11s ease-in-out infinite;
}
@keyframes hjGlowL { 0%,100%{ transform: translate(0,0) scale(1); opacity:0.8; } 50%{ transform: translate(40px,30px) scale(1.15); opacity:1; } }
@keyframes hjGlowR { 0%,100%{ transform: translate(0,0) scale(1.1); opacity:0.7; } 50%{ transform: translate(-36px,26px) scale(0.92); opacity:1; } }
.hjB2 .container { position: relative; z-index: 2; }
.hjB2 .hj__eyebrow { background: var(--color-crimson-50); border: 1px solid var(--color-crimson-100); color: var(--color-crimson-700); }
.hjB2 .hj__h1 { color: var(--fg-primary); font-size: clamp(28px, 6.4vw, 55px); }
.hjB2 .hj__sub { color: var(--fg-secondary); font-size: var(--text-md); max-width: 560px; margin-left: auto; margin-right: auto; }
.hjB2 .hj__btns { justify-content: center; margin-top: var(--space-8); }

/* Gradient-outline AI eyebrow + sparkle */
.hjB2__ai-eyebrow {
  position: relative;
  border: 2px solid transparent !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(100deg, var(--color-midnight-900), var(--color-crimson-500) 55%, var(--color-midnight-800)) border-box !important;
  color: var(--color-crimson-700) !important;
  display: inline-flex; align-items: center; gap: 8px;
}
.hjB2__ai-eyebrow .d {
  background: var(--color-crimson-500) !important;
}
.hjB2__ai-spark {
  width: 18px; height: 18px;
  color: var(--color-crimson-500);
  filter: drop-shadow(0 0 4px rgba(220,16,46,0.5));
  animation: hjSparkle 2.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes hjSparkle {
  0%, 100% { opacity: 0.75; transform: scale(0.92) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.12) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) { .hjB2__ai-spark { animation: none; } }

.hj-conv { display: flex; align-items: stretch; margin-top: var(--space-9); }
.hj-conv__step { flex: 1 1 0; min-width: 0; display: flex; }
.hj-conv__card {
  width: 100%;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: var(--space-6) var(--space-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  box-shadow: var(--shadow-xs);
  /* one-at-a-time sequential highlight: 6 cards x 1.5s = 9s cycle */
  animation: hjLift 9s ease-in-out infinite;
  animation-delay: calc(var(--i) * 1.5s);
  will-change: transform;
}
@keyframes hjLift {
  0%, 13%, 100% { transform: translateY(0); box-shadow: var(--shadow-xs); border-color: var(--border-subtle); }
  4%, 9% { transform: translateY(-7px); box-shadow: 0 18px 36px -12px color-mix(in srgb, var(--hj-c) 55%, transparent); border-color: var(--hj-c); }
}
.hj-conv__ic { width: 54px; height: 54px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--hj-c); background: color-mix(in srgb, var(--hj-c) 13%, #fff); }
.hj-conv__ic svg { width: 26px; height: 26px; }
.hj-conv__n { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-xs); color: var(--fg-primary); text-align: center; line-height: 1.25; display: flex; align-items: center; min-height: 2.5em; }
.hj-conv__d { font-size: var(--text-2xs); color: var(--fg-tertiary); text-align: center; line-height: 1.35; display: flex; align-items: flex-start; justify-content: center; min-height: 2.7em; }
.hj-conv__conn { flex: 0 0 24px; height: 2px; align-self: flex-start; margin-top: 46px; position: relative; background: repeating-linear-gradient(90deg, var(--color-crimson-300) 0 4px, transparent 4px 9px); }
.hj-conv__conn::after { content: ""; position: absolute; top: -3px; left: -8px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-crimson-500); box-shadow: 0 0 8px 1px rgba(220,16,46,0.7); animation: hjHop 3.4s linear infinite; }
@keyframes hjHop { from{ left:-8px; opacity:0; } 20%{ opacity:1; } 80%{ opacity:1; } to{ left:24px; opacity:0; } }

@media (max-width: 980px) {
  .hj-conv { flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
  .hj-conv__step { flex: 0 0 calc(33.333% - var(--space-4)); }
  .hj-conv__conn { display: none; }
}
@media (max-width: 560px) {
  .hj-conv__step { flex: 0 0 calc(50% - var(--space-4)); }
}
@media (prefers-reduced-motion: reduce) {
  .hj-conv__card, .hj-conv__conn::after, .hjB2__glow--l, .hjB2__glow--r { animation: none; }
}

/* Hollywood CTA — pulsing glow + shimmer sweep on the B2 Request Demo button */
.hjB2__cta {
  position: relative;
  overflow: hidden;
  animation: hjCtaPulse 2.6s ease-in-out infinite;
}
.hjB2__cta::after {
  content: "";
  position: absolute;
  top: 0; left: -130%;
  width: 70%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg);
  animation: hjCtaShine 2.8s ease-in-out infinite;
}
@keyframes hjCtaPulse {
  0%, 100% { box-shadow: 0 10px 24px -6px rgba(220,16,46,0.45), 0 0 0 0 rgba(220,16,46,0.45); }
  50%      { box-shadow: 0 14px 30px -6px rgba(220,16,46,0.65), 0 0 0 7px rgba(220,16,46,0); }
}
@keyframes hjCtaShine {
  0%   { left: -130%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .hjB2__cta, .hjB2__cta::after { animation: none; }
}

/* ===== eco.css ===== */
/* ============================================================
   Warm variant — amber/cream light stage + deep-indigo card,
   stronger icon & text focus
   ============================================================ */
.section--eco-warm { background: var(--bg-surface); }
.section--eco-warm .eco-stage {
  background:
    radial-gradient(1100px 700px at 50% 4%, rgba(245,158,11,0.12), transparent 60%),
    linear-gradient(180deg, #FBF3E4 0%, #F6E7CC 100%);
  box-shadow: 0 24px 50px -24px rgba(120,80,10,0.22);
  border: 1px solid #EAD7B0;
}
.section--eco-warm .eco-star { background: rgba(79,42,4,0.16); }
/* Header — deep indigo text, amber eyebrow */
.section--eco-warm .eco-head__e { color: #B45309; }
.section--eco-warm .eco-head__t { color: #1E1B4B; }
.section--eco-warm .eco-head__t em { color: #D97706; }
.section--eco-warm .eco-head__p { color: #5B5570; }
/* Ring base */
.section--eco-warm .eco-ring__circle { stroke: rgba(30,27,75,0.12); }
.section--eco-warm .eco-ring__dash { stroke: rgba(217,119,6,0.4); }
/* Brain core → indigo→amber gradient for stronger pop */
.section--eco-warm .eco-ring__core {
  background: radial-gradient(circle at 50% 36%, #6366F1, #4338CA 55%, #312E81);
  box-shadow: 0 0 46px -4px rgba(67,56,202,0.6), inset 0 2px 10px rgba(255,255,255,0.3);
}
/* Agent nodes → solid white, bigger colored icon focus */
.section--eco-warm .eco-ring__node {
  background: #fff;
  border: 1px solid #EAD7B0;
  box-shadow: 0 8px 20px -6px rgba(120,80,10,0.28);
}
.section--eco-warm .eco-ring__node-lbl { color: #6B5B36; font-weight: var(--fw-bold); }
.section--eco-warm .eco-ring__node.is-on .eco-ring__node-lbl { color: #1E1B4B; }
/* Detail panel → deep indigo card (dark) */
.section--eco-warm .eco-detail {
  background: linear-gradient(160deg, #211C4E 0%, #16123A 100%);
  border: 1px solid rgba(165,180,252,0.2);
  box-shadow: 0 24px 50px -20px rgba(30,27,75,0.55);
}
/* Detail accent text → warm amber for focus */
.section--eco-warm .eco-detail__t { color: #fff; }
.section--eco-warm .eco-detail__p { color: #C7C3E0; }
.section--eco-warm .eco-detail__badge { background: rgba(255,255,255,0.08); color: #E9E6F8; }
/* Brighter, larger tick + amber for stronger focus */
.section--eco-warm .eco-detail__li { color: #fff; }
.section--eco-warm .eco-dot { background: rgba(30,27,75,0.16); }
.section--eco-warm .eco-dot.is-on::after { background: #D97706; }

/* ============================================================
   Light-blue variant — dark cards on a light-blue stage
   ============================================================ */
.section--eco-light { background: var(--bg-surface); }
.section--eco-light .eco-stage {
  background:
    radial-gradient(1100px 700px at 50% 4%, rgba(37,99,235,0.10), transparent 60%),
    linear-gradient(180deg, #EAF1FB 0%, #DCE8F8 100%);
  box-shadow: 0 24px 50px -24px rgba(10,26,47,0.22);
  border: 1px solid #CFE0F5;
}
/* Stars become faint navy specks on light bg */
.section--eco-light .eco-star { background: rgba(10,26,47,0.18); }
/* Header text → dark */
.section--eco-light .eco-head__e { color: var(--color-crimson-600); }
.section--eco-light .eco-head__t { color: var(--color-midnight-900); }
.section--eco-light .eco-head__t em { color: var(--color-crimson-500); }
.section--eco-light .eco-head__p { color: var(--color-midnight-600); }
/* Ring base circles → darker so they read on light */
.section--eco-light .eco-ring__circle { stroke: rgba(10,26,47,0.12); }
.section--eco-light .eco-ring__dash { stroke: rgba(220,16,46,0.28); }
/* Agent nodes → white cards w/ colored icon (was dark glass) */
.section--eco-light .eco-ring__node {
  background: #fff;
  border: 1px solid #CFE0F5;
  box-shadow: 0 6px 16px -6px rgba(10,26,47,0.25);
}
.section--eco-light .eco-ring__node-lbl { color: var(--color-midnight-500); }
.section--eco-light .eco-ring__node.is-on .eco-ring__node-lbl { color: var(--color-midnight-900); }
/* Detail panel → DARK card on the light stage */
.section--eco-light .eco-detail {
  background: linear-gradient(160deg, #0B1C33 0%, #0A1626 100%);
  border: 1px solid rgba(125,162,217,0.18);
  box-shadow: 0 24px 50px -20px rgba(10,26,47,0.5);
}
/* (detail inner text is already light — unchanged) */
/* Progress dots track → darker on light bg */
.section--eco-light .eco-dot { background: rgba(10,26,47,0.16); }

/* Full-width: let this section's stage span the viewport */
.section--eco-light > .container {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.section--eco-light .eco-stage {
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  box-shadow: none;
}
/* Align inner content with the global 1200px container so the right
   detail card lines up with the rest of the page's section cards. */
.section--eco-light .eco-head,
.section--eco-light .eco-grid,
.section--eco-light .eco-dots {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-7);
  padding-right: var(--space-7);
  box-sizing: border-box;
}

.section--eco {
  background: var(--bg-canvas);
}
.eco-stage {
  position: relative;
  border-radius: var(--radius-2xl);
  padding: var(--space-6) var(--space-8);
  overflow: hidden;
  background:
    radial-gradient(1100px 700px at 50% 4%, rgba(220,16,46,0.15), transparent 60%),
    linear-gradient(180deg, #0B1C33 0%, #08111F 100%);
  box-shadow: 0 30px 60px -22px rgba(10,26,47,0.55);
}
.eco-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.eco-star {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: rgba(255,255,255,0.45);
  animation: ecoTwinkle 3s ease-in-out infinite;
}
@keyframes ecoTwinkle { 0%,100%{opacity:0.2;} 50%{opacity:0.9;} }

.eco-head { text-align: center; margin-bottom: var(--space-5); position: relative; z-index: 5; }
.eco-head__e {
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-crimson-300);
}
.eco-head__t {
  font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); font-weight: var(--fw-bold);
  color: #fff; margin: var(--space-2) 0 0; letter-spacing: -0.025em; line-height: 1.08;
}
.eco-head__t em { font-style: normal; color: var(--color-crimson-400); }
.eco-head__p { font-size: var(--text-sm); color: var(--color-midnight-200); margin: var(--space-2) auto 0; max-width: 540px; }

/* tone vars */
.eco-tn-crimson{--ec:#DC102E;--ecs:#FF5870;} .eco-tn-blue{--ec:#2563EB;--ecs:#5B8DEF;}
.eco-tn-green{--ec:#16A34A;--ecs:#34D27F;} .eco-tn-amber{--ec:#F59E0B;--ecs:#FBBF52;}
.eco-tn-violet{--ec:#8B5CF6;--ecs:#A98BFA;} .eco-tn-navy{--ec:#7DA2D9;--ecs:#9DBBEA;}
.eco-tn-info{--ec:#3B82F6;--ecs:#5B8DEF;}

.eco-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-7);
  align-items: center;
  position: relative;
  z-index: 2;
}

/* Ring */
.eco-ring { position: relative; width: 100%; aspect-ratio: 1; max-width: 400px; margin: 0 auto; }
.eco-ring__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eco-ring__circle { fill: none; stroke: rgba(125,162,217,0.14); }
.eco-ring__dash {
  fill: none; stroke: rgba(220,16,46,0.2); stroke-dasharray: 3 6;
  animation: ecoSpin 50s linear infinite; transform-origin: center;
}
@keyframes ecoSpin { to { transform: rotate(360deg); } }
.eco-ring__beam { stroke-width: 1.5; fill: none; opacity: 0.3; transition: opacity var(--dur-medium) var(--ease-out); }
.eco-ring__beam.is-on { opacity: 1; }
.eco-ring__core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #FF5870, var(--color-crimson-600) 58%, #8B0A1E);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; z-index: 4;
  box-shadow: 0 0 46px -4px rgba(220,16,46,0.7), inset 0 2px 10px rgba(255,255,255,0.3);
  animation: ecoBreathe 3.4s ease-in-out infinite;
}
@keyframes ecoBreathe {
  0%,100% { box-shadow: 0 0 46px -4px rgba(220,16,46,0.65), inset 0 2px 10px rgba(255,255,255,0.3); }
  50%     { box-shadow: 0 0 72px 4px rgba(220,16,46,0.9), inset 0 2px 10px rgba(255,255,255,0.4); }
}
.eco-ring__core svg { width: 32px; height: 32px; }
.eco-ring__core-t { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-sm); margin-top: 3px; }
.eco-ring__core-s { font-size: var(--text-2xs); color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 1px; }
.eco-ring__node {
  position: absolute; transform: translate(-50%,-50%);
  width: 54px; height: 54px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,28,51,0.92); border: 1px solid rgba(125,162,217,0.25);
  color: var(--ec); cursor: pointer; z-index: 3;
  transition: transform var(--dur-medium) var(--ease-out), background var(--dur-medium) var(--ease-out),
              box-shadow var(--dur-medium) var(--ease-out), border-color var(--dur-medium) var(--ease-out);
}
.eco-ring__node svg { width: 25px; height: 25px; }
.eco-ring__node:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.eco-ring__node.is-on {
  background: var(--ec); color: #fff; border-color: var(--ec);
  transform: translate(-50%,-50%) scale(1.16);
  box-shadow: 0 0 28px -4px var(--ec);
}
.eco-ring__node-lbl {
  position: absolute; top: 58px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 8.5px;
  color: rgba(255,255,255,0.55); white-space: nowrap;
  transition: color var(--dur-medium) var(--ease-out);
}
.eco-ring__node.is-on .eco-ring__node-lbl { color: #fff; }

/* Detail panel */
.eco-detail {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(125,162,217,0.15);
  border-radius: var(--radius-xl); padding: var(--space-7); min-height: 0;
}
.eco-detail__badge {
  display: inline-flex; align-items: center; gap: var(--space-3);
  background: rgba(255,255,255,0.07); border-radius: var(--radius-pill);
  padding: 5px 13px 5px 5px; font-family: var(--font-display);
  font-size: var(--text-2xs); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--color-midnight-100); margin-bottom: var(--space-4);
}
.eco-detail__badge i {
  width: 24px; height: 24px; border-radius: 50%; background: var(--ec); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.eco-detail__badge i svg { width: 13px; height: 13px; }
.eco-detail__t {
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-2xl);
  color: #fff; margin: 0 0 var(--space-3);
}
.eco-detail__p { font-size: var(--text-md); color: var(--color-midnight-200); line-height: 1.6; margin: 0 0 var(--space-5); }
.eco-detail__grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: var(--space-6); align-items: start; }
.eco-detail__li {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-sm); color: #fff; padding: 3px 0;
}
.eco-detail__li i {
  width: 18px; height: 18px; border-radius: 50%;
  background: color-mix(in srgb, var(--ec) 25%, transparent); color: var(--ecs);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.eco-detail__li i svg { width: 11px; height: 11px; }
.eco-detail.is-swap { animation: ecoFade var(--dur-medium) var(--ease-out); }
@keyframes ecoFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Mock card */
.eco-mock { border-radius: var(--radius-lg); overflow: hidden; background: #fff; box-shadow: 0 24px 50px -18px rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.1); }
.eco-mock__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--bg-canvas); border-bottom: 1px solid var(--border-subtle); }
.eco-mock__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ec); }
.eco-mock__ttl { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-2xs); color: var(--fg-primary); }
.eco-mock__live { margin-left: auto; font-size: 9px; font-weight: var(--fw-bold); color: var(--color-success-700); display: inline-flex; align-items: center; gap: 4px; }
.eco-mock__live i { width: 5px; height: 5px; border-radius: 50%; background: var(--color-success-500); animation: pulse var(--dur-pulse) ease-in-out infinite; }
.eco-mock__body { padding: 13px; }
.eco-mock__row { display: flex; justify-content: space-between; padding: 6px 0; font-size: var(--text-xs); border-top: 1px solid var(--border-subtle); }
.eco-mock__row:first-child { border-top: none; }
.eco-mock__k { color: var(--fg-tertiary); }
.eco-mock__v { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); color: var(--fg-primary); }
.eco-mock__v.hl { color: var(--ec); }
.eco-mock__chip { display: inline-block; font-size: 10px; font-weight: var(--fw-bold); padding: 3px 9px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ec) 14%, #fff); color: var(--ec); margin-top: 8px; }

/* Progress dots */
.eco-dots { display: flex; gap: 7px; justify-content: center; margin-top: var(--space-7); position: relative; z-index: 2; }
.eco-dot {
  height: 5px; width: 22px; border-radius: 3px; background: rgba(125,162,217,0.3);
  cursor: pointer; overflow: hidden; position: relative;
  transition: width var(--dur-medium) var(--ease-out);
}
.eco-dot.is-on { width: 46px; }
.eco-dot.is-on::after {
  content: ""; position: absolute; inset: 0; background: var(--color-crimson-500);
  width: 0; animation: ecoFill 5.5s linear forwards;
}
@keyframes ecoFill { to { width: 100%; } }

@media (max-width: 980px) {
  .eco-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .eco-ring { max-width: 380px; }
  .eco-detail__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .eco-stage { padding: var(--space-7) var(--space-5); }
  .eco-ring__node { width: 44px; height: 44px; }
  .eco-ring__node svg { width: 20px; height: 20px; }
  .eco-ring__node-lbl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .eco-ring__core, .eco-ring__dash, .eco-star, .eco-mock__live i { animation: none; }
  .eco-dot.is-on::after { animation: none; width: 100%; }
  .eco-detail.is-swap { animation: none; }
}

/* ===== revenue-a.css ===== */
/* ============================================================
   Revenue · Option A — image + floating chips + soft-tinted cards
   ============================================================ */
.revA { background: var(--bg-canvas); }
.revA-wrap {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: var(--space-9);
  align-items: center;
}
.revA-tn-crimson { --rc: var(--color-crimson-500); --rbg: var(--color-crimson-50); --rsoft: #FFF4F6; }
.revA-tn-green   { --rc: var(--color-success-700); --rbg: var(--color-success-50); --rsoft: #F0FBF3; }
.revA-tn-amber   { --rc: var(--color-warning-700); --rbg: var(--color-warning-50); --rsoft: #FFF9EE; }
.revA-tn-blue    { --rc: var(--color-info-700); --rbg: var(--color-info-50); --rsoft: #F2F7FE; }

@keyframes revRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes revFloaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.revA-stage { position: relative; }
.revA-img {
  min-height: 420px;
  border-radius: var(--radius-2xl);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--color-midnight-50);
  display: flex; align-items: center; justify-content: center;
}
.revA-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.revA-float {
  position: absolute;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 30px -10px rgba(10,26,47,0.25);
  padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
  animation: revFloaty 6s ease-in-out infinite;
  z-index: 2;
}
.revA-float--1 { top: 24px; right: -18px; animation-delay: 0s; }
.revA-float--2 { bottom: 30px; left: -18px; animation-delay: 2s; }
.revA-float-ic {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--color-crimson-50); color: var(--color-crimson-600);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.revA-float-ic svg { width: 17px; height: 17px; }
.revA-float-n {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--text-xl); color: var(--fg-primary);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.revA-float-l { font-size: var(--text-2xs); color: var(--fg-tertiary); margin-top: 2px; }

.revA-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.revA-card {
  background: linear-gradient(160deg, var(--rsoft), var(--bg-surface));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-medium) var(--ease-out), box-shadow var(--dur-medium) var(--ease-out);
  animation: revRise 0.6s var(--ease-out) backwards;
  position: relative; overflow: hidden;
}
.revA-card::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: var(--rc); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.revA-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.revA-card:hover::after { transform: scaleX(1); }
.revA-card-ic {
  width: 46px; height: 46px; border-radius: var(--radius-md);
  background: var(--rbg); color: var(--rc);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
  transition: transform var(--dur-medium) var(--ease-out);
}
.revA-card:hover .revA-card-ic { transform: scale(1.1) rotate(-4deg); }
.revA-card-ic svg { width: 23px; height: 23px; }
.revA-card-h {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--text-md); color: var(--fg-primary); margin: 0 0 var(--space-2);
}
.revA-card-p { font-size: var(--text-sm); color: var(--fg-tertiary); line-height: 1.5; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .revA-float { animation: none; }
  .revA-card { animation: none; }
}
@media (max-width: 980px) {
  .revA-wrap { grid-template-columns: 1fr; gap: var(--space-8); }
  .revA-img { min-height: 300px; }
  .revA-float--1 { right: 12px; } .revA-float--2 { left: 12px; }
}
@media (max-width: 560px) {
  .revA-cards { grid-template-columns: 1fr; }
}

/* ===== card1-booking.css ===== */
/* ============================================================
   Card 1 — animated AI booking dashboard
   Scoped under .c1b-stage
   ============================================================ */
.c1b-stage{position:relative;width:560px;max-width:100%;margin:0 auto;}
.c1b-dash{position:relative;width:100%;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:16px;box-shadow:0 24px 50px -20px rgba(10,26,47,0.30);}
.c1b-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:var(--color-midnight-900);border-radius:16px 16px 0 0;}
.c1b-dot{width:9px;height:9px;border-radius:50%;}
.c1b-ttl{margin-left:8px;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:12px;color:#fff;}
.c1b-live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:var(--fw-semibold);color:#fff;background:rgba(220,16,46,0.9);padding:3px 9px;border-radius:999px;}
.c1b-live i{width:5px;height:5px;border-radius:50%;background:#fff;animation:c1bPulse 1.6s ease-in-out infinite;}
@keyframes c1bPulse{0%,100%{opacity:1;}50%{opacity:0.35;}}

.c1b-body{display:grid;grid-template-columns:1fr 1.35fr;gap:0;min-height:300px;border-radius:0 0 16px 16px;overflow:hidden;}
.c1b-col{padding:16px;}
.c1b-col--docs{border-right:1px solid var(--border-subtle);background:#FCFCFD;}
.c1b-lbl{font-family:var(--font-display);font-size:10px;font-weight:var(--fw-bold);letter-spacing:0.07em;text-transform:uppercase;color:var(--fg-tertiary);margin-bottom:11px;}

.c1b-doc{position:relative;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;margin-bottom:6px;transition:background .35s,box-shadow .35s;}
.c1b-av{width:34px;height:34px;border-radius:50%;background:var(--color-midnight-100);color:var(--color-midnight-700);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:12px;flex:none;transition:background .35s,color .35s;}
.c1b-dn{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:13px;color:var(--fg-primary);line-height:1.2;}
.c1b-ds{font-size:10.5px;color:var(--fg-tertiary);}
.c1b-chev{margin-left:auto;color:var(--color-crimson-500);font-weight:var(--fw-bold);opacity:0;transition:opacity .35s;}
.c1b-doc.sel{background:var(--color-crimson-50);box-shadow:inset 0 0 0 1.5px var(--color-crimson-200);}
.c1b-doc.sel .c1b-av{background:var(--color-crimson-500);color:#fff;}
.c1b-doc.sel .c1b-chev{opacity:1;}

.c1b-slots-wrap{opacity:0;transition:opacity .4s;}
.c1b-slots-wrap.show{opacity:1;}
.c1b-slots-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;}
.c1b-who{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:13.5px;color:var(--fg-primary);}
.c1b-date{font-size:10.5px;color:var(--fg-tertiary);}
.c1b-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.c1b-slot{position:relative;text-align:center;padding:10px 4px;border-radius:9px;border:1px solid var(--border-subtle);font-family:var(--font-numeric);font-variant-numeric:tabular-nums;font-weight:var(--fw-semibold);font-size:13px;color:var(--fg-primary);background:var(--bg-surface);transition:border-color .35s,box-shadow .35s,color .35s;}
.c1b-slot.full{background:var(--color-neutral-100);color:var(--fg-disabled);text-decoration:line-through;border-style:dashed;}
.c1b-slot.best{border-color:var(--color-crimson-500);color:var(--color-crimson-600);box-shadow:0 0 0 3px rgba(220,16,46,0.16);}
.c1b-slot .c1b-tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--color-crimson-500);color:#fff;font-family:var(--font-display);font-size:8px;font-weight:var(--fw-bold);letter-spacing:0.04em;padding:2px 7px;border-radius:999px;white-space:nowrap;opacity:0;transition:opacity .3s;}
.c1b-slot.best .c1b-tag{opacity:1;}

.c1b-book{margin-top:14px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--color-crimson-500);color:#fff;border:none;border-radius:10px;padding:12px;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:14px;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s,box-shadow .15s,scale .12s;}
.c1b-book.show{opacity:1;transform:none;}
.c1b-book.press{scale:0.96;box-shadow:0 0 0 4px rgba(220,16,46,0.18);}

.c1b-confirm{position:absolute;right:30px;bottom:-72px;width:212px;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:16px;padding:22px 20px 18px;box-shadow:0 28px 60px -18px rgba(10,26,47,0.40);opacity:0;transform:translateY(14px) scale(.95);transition:opacity .45s,transform .45s;z-index:20;}
.c1b-confirm.show{opacity:1;transform:none;}
.c1b-cic{position:relative;width:52px;height:52px;border-radius:50%;background:var(--color-success-50);color:var(--color-success-500);display:flex;align-items:center;justify-content:center;margin-bottom:13px;}
.c1b-cic svg{width:28px;height:28px;stroke-dasharray:30;stroke-dashoffset:30;}
.c1b-confirm.show .c1b-cic{animation:c1bTickPop .45s var(--ease-out) .15s both;}
.c1b-confirm.show .c1b-cic svg{animation:c1bTickDraw .5s var(--ease-out) .35s forwards;}
@keyframes c1bTickPop{0%{transform:scale(0);}60%{transform:scale(1.12);}100%{transform:scale(1);}}
@keyframes c1bTickDraw{to{stroke-dashoffset:0;}}
.c1b-cic::before,.c1b-cic::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;}
.c1b-cic::before{background:var(--color-warning-500);top:2px;right:0;box-shadow:16px 9px 0 -1px var(--color-success-500), -14px 5px 0 -1px var(--color-crimson-400);}
.c1b-cic::after{background:var(--color-info-500);bottom:4px;left:2px;box-shadow:12px 7px 0 -1px var(--color-warning-500);}
.c1b-ct{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:17px;line-height:1.2;color:var(--color-midnight-800);margin-bottom:13px;}
.c1b-clines{width:100%;display:flex;flex-direction:column;gap:8px;margin-bottom:15px;}
.c1b-clines span{height:7px;border-radius:999px;background:var(--color-neutral-200);}
.c1b-clines span:nth-child(1){width:88%;}
.c1b-clines span:nth-child(2){width:96%;}
.c1b-clines span:nth-child(3){width:72%;}
.c1b-cid{width:100%;background:var(--color-crimson-50);color:var(--color-crimson-700);border-radius:9px;padding:9px;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:12px;}

.c1b-cursor{position:absolute;width:20px;height:20px;z-index:30;left:0;top:0;transition:transform 0.7s cubic-bezier(0.5,0,0.2,1);pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,0.3));}

@media (max-width:560px){
  .c1b-confirm{right:-10px;bottom:-40px;width:180px;}
}
@media (prefers-reduced-motion: reduce){
  .c1b-cursor{display:none;}
}

/* ===== card2-phone.css ===== */
/* ============================================================
   Card 2 — animated iPhone with patient notifications
   Scoped under .c2p-stage to avoid collisions with site styles.
   ============================================================ */
.c2p-stage{
  position:relative; display:flex; justify-content:center;
  align-items:center; padding:8px 84px; overflow:visible;
  transform:scale(0.8); transform-origin:center;
  margin-top:-8px;
}
/* floating channel chips */
.c2p-chan{
  position:absolute; display:flex; align-items:center; gap:8px;
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:13px; padding:8px 12px 8px 9px;
  box-shadow:0 12px 26px -12px rgba(10,26,47,0.32); z-index:5;
  width:152px; box-sizing:border-box;
}
.c2p-chan__ic{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; flex:none; }
.c2p-chan__ic svg{ width:19px; height:19px; }
.c2p-chan__tx{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:15px; color:var(--color-midnight-800); line-height:1; }
.c2p-chan__tx small{ display:block; font-weight:var(--fw-medium); font-size:12px; color:var(--fg-tertiary); margin-top:3px; }
.c2p-ch-wa{ left:-18px; top:380px; animation:c2pFl1 6s ease-in-out infinite; }
.c2p-ch-sms{ left:-18px; top:495px; animation:c2pFl2 7s ease-in-out infinite; }
.c2p-ch-email{ right:-6px; top:380px; animation:c2pFl2 6.5s ease-in-out infinite; }
.c2p-ch-push{ right:-6px; top:495px; animation:c2pFl1 7.5s ease-in-out infinite; }
@keyframes c2pFl1{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-13px);} }
@keyframes c2pFl2{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(11px);} }
.c2p-bg-wa{ background:#25D366; } .c2p-bg-sms{ background:var(--color-info-500); }
.c2p-bg-email{ background:var(--color-crimson-500); } .c2p-bg-push{ background:#8B5CF6; }

/* iPhone */
.c2p-phone{
  position:relative; width:264px; height:556px; border-radius:50px; z-index:2;
  background:linear-gradient(135deg,#d8dade 0%,#a9adb4 18%,#6f747c 40%,#3c3f45 60%,#8b9097 82%,#c9cdd2 100%);
  padding:3px;
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.6) inset,
    0 0 0 6px #0a0c10,
    0 0 0 7px #1d1f24,
    0 40px 70px -26px rgba(10,26,47,0.55),
    0 14px 30px -18px rgba(10,26,47,0.5);
}
.c2p-phone::before{ content:""; position:absolute; left:-5px; top:118px; width:3px; height:30px; border-radius:3px 0 0 3px;
  background:linear-gradient(90deg,#b7bbc1,#5c6168); box-shadow:0 46px 0 0 #aeb2b9, 0 84px 0 0 #aeb2b9; }
.c2p-phone::after{ content:""; position:absolute; right:-5px; top:150px; width:3px; height:58px; border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,#5c6168,#b7bbc1); }
.c2p-bezel{ position:relative; width:100%; height:100%; border-radius:47px; background:#000; padding:2px; overflow:hidden; }
.c2p-screen{
  position:relative; width:100%; height:100%; border-radius:43px; overflow:hidden;
  background:
    radial-gradient(130% 60% at 50% -8%, rgba(220,16,46,0.16), transparent 55%),
    linear-gradient(180deg,#20304c 0%,#101d33 55%,#0a1322 100%);
}
.c2p-screen::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:43px;
  background:linear-gradient(118deg,rgba(255,255,255,0.10) 0%,transparent 20%,transparent 80%,rgba(255,255,255,0.05) 100%); }
.c2p-island{ position:absolute; top:15px; left:50%; transform:translateX(-50%); width:86px; height:26px; background:#000; border-radius:15px; z-index:6;
  display:flex; align-items:center; justify-content:flex-end; padding-right:12px; box-shadow:0 0 0 1px rgba(255,255,255,0.04); }
.c2p-island::after{ content:""; width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#39507a,#070b12 72%); }
.c2p-status{ display:flex; justify-content:space-between; align-items:center; padding:20px 28px 0; color:#fff; font-size:12px; font-weight:var(--fw-bold); font-family:var(--font-display); letter-spacing:-0.01em; }
.c2p-status .r{ display:flex; gap:5px; align-items:center; }
.c2p-status .r svg{ width:15px; height:13px; fill:#fff; }
.c2p-clock{ font-size:30px; font-weight:var(--fw-bold); font-family:var(--font-display); color:rgba(255,255,255,0.95); text-align:center; margin:24px 0 1px; letter-spacing:-0.01em; }
.c2p-date{ font-size:11px; color:rgba(255,255,255,0.68); text-align:center; }

.c2p-slot{ position:absolute; left:18px; right:18px; top:44%; transform:translateY(-50%); min-height:124px; }
.c2p-noti{ position:absolute; left:0; right:0; top:0; display:flex; gap:12px; align-items:flex-start;
  background:rgba(255,255,255,0.98); border-radius:12px; padding:15px;
  box-shadow:0 16px 34px -12px rgba(0,0,0,0.55); opacity:0; transform:scale(0.62); }
.c2p-noti.in{ animation:c2pZin 0.5s cubic-bezier(0.2,0.7,0.2,1) forwards; }
.c2p-noti.out{ animation:c2pZout 0.42s cubic-bezier(0.5,0,0.2,1) forwards; }
@keyframes c2pZin{ 0%{opacity:0;transform:scale(0.62);} 100%{opacity:1;transform:scale(1);} }
@keyframes c2pZout{ 0%{opacity:1;transform:scale(1);} 100%{opacity:0;transform:scale(1.22);} }
.c2p-noti__ic{ width:40px; height:40px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; }
.c2p-noti__ic svg{ width:21px; height:21px; }
.c2p-noti__bd{ flex:1; min-width:0; }
.c2p-noti__t{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:15.5px; color:var(--color-midnight-800); display:flex; justify-content:space-between; gap:6px; }
.c2p-noti__t span{ font-weight:var(--fw-medium); color:var(--fg-tertiary); font-size:11px; white-space:nowrap; }
.c2p-noti__m{ font-size:13px; color:var(--fg-secondary); line-height:1.4; margin-top:3px; }
.c2p-noti__stars{ display:flex; gap:3px; margin-top:7px; }
.c2p-noti__stars svg{ width:15px; height:15px; color:var(--color-warning-500); opacity:0.25; transform:scale(0.5); }
.c2p-noti.play .c2p-noti__stars svg{ animation:c2pStarPop .4s cubic-bezier(0.2,0.9,0.3,1.3) forwards; }
.c2p-noti.play .c2p-noti__stars svg:nth-child(1){animation-delay:.25s;} .c2p-noti.play .c2p-noti__stars svg:nth-child(2){animation-delay:.37s;}
.c2p-noti.play .c2p-noti__stars svg:nth-child(3){animation-delay:.49s;} .c2p-noti.play .c2p-noti__stars svg:nth-child(4){animation-delay:.61s;}
.c2p-noti.play .c2p-noti__stars svg:nth-child(5){animation-delay:.73s;}
@keyframes c2pStarPop{ to{opacity:1;transform:scale(1);} }
.c2p-noti__btn{ margin-top:9px; display:inline-flex; align-items:center; gap:6px; background:var(--color-crimson-500); color:#fff;
  font-family:var(--font-display); font-weight:var(--fw-bold); font-size:12.5px; border:none; border-radius:10px; padding:8px 13px; cursor:pointer;
  opacity:0; transform:translateY(6px); }
.c2p-noti__btn svg{ width:13px; height:13px; }
.c2p-noti.play .c2p-noti__btn{ animation:c2pBtnIn .4s .5s cubic-bezier(0.2,0.7,0.2,1) forwards; }
@keyframes c2pBtnIn{ to{opacity:1;transform:none;} }
.c2p-ic-green{ background:var(--color-success-500); } .c2p-ic-amber{ background:var(--color-warning-500); } .c2p-ic-info{ background:var(--color-info-500); }
.c2p-ic-crimson{ background:var(--color-crimson-500); } .c2p-ic-violet{ background:#8B5CF6; } .c2p-ic-navy{ background:var(--color-midnight-800); }

/* in-card icon micro-animations */
.c2p-a-check path{ stroke-dasharray:24; stroke-dashoffset:24; }
.c2p-noti.play .c2p-a-check path{ animation:c2pDraw .55s .15s cubic-bezier(0.2,0.7,0.2,1) forwards; }
@keyframes c2pDraw{ to{stroke-dashoffset:0;} }
.c2p-noti.play .c2p-a-bell{ transform-origin:50% 12%; animation:c2pRing 1.1s .1s ease-in-out; }
@keyframes c2pRing{ 0%,100%{transform:rotate(0);} 12%{transform:rotate(16deg);} 28%{transform:rotate(-13deg);} 44%{transform:rotate(9deg);} 60%{transform:rotate(-6deg);} 76%{transform:rotate(3deg);} }
.c2p-a-q rect{ transform-origin:bottom; transform:scaleY(0.2); }
.c2p-noti.play .c2p-a-q rect{ animation:c2pBars .6s .1s cubic-bezier(0.2,0.7,0.2,1) forwards; }
.c2p-noti.play .c2p-a-q rect:nth-child(2){animation-delay:.22s;} .c2p-noti.play .c2p-a-q rect:nth-child(3){animation-delay:.34s;}
@keyframes c2pBars{ to{transform:scaleY(1);} }
.c2p-noti.play .c2p-a-pulse{ animation:c2pBeat 1s .1s ease-in-out; }
@keyframes c2pBeat{ 0%,100%{transform:scale(1);} 30%{transform:scale(1.16);} 45%{transform:scale(0.96);} }
.c2p-noti.play .c2p-a-star{ transform-origin:50% 55%; animation:c2pPop .6s .1s cubic-bezier(0.2,0.9,0.3,1.2); }
@keyframes c2pPop{ 0%{transform:scale(0) rotate(-40deg);} 70%{transform:scale(1.18) rotate(6deg);} 100%{transform:scale(1) rotate(0);} }
.c2p-a-flask .fill{ transform-origin:bottom; transform:scaleY(0); }
.c2p-noti.play .c2p-a-flask .fill{ animation:c2pFill .7s .15s cubic-bezier(0.2,0.7,0.2,1) forwards; }
@keyframes c2pFill{ to{transform:scaleY(1);} }

.c2p-pips{ position:absolute; left:0; right:0; bottom:24px; display:flex; gap:6px; justify-content:center; z-index:3; }
.c2p-pips i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.28); transition:all .3s; }
.c2p-pips i.on{ background:var(--color-crimson-500); width:18px; border-radius:3px; }

@media (max-width:600px){
  .c2p-stage{ padding:20px 8px; }
  .c2p-ch-wa,.c2p-ch-sms,.c2p-ch-email,.c2p-ch-push{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .c2p-chan,.c2p-noti.in,.c2p-noti.out{ animation:none !important; }
  .c2p-noti{ opacity:1; transform:none; }
}

/* ===== more-features.css ===== */
/* ============================================================
   More Features — colored icon grid (Option B)
   ============================================================ */
.mf { background: linear-gradient(180deg, #F6F1FD 0%, #ECE3FA 100%); }
.mf__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  max-width: 1200px;
  margin: 0 auto;
}
.mf-cell {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.mf-cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mf-cell__ic {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--color-crimson-50);
  color: var(--color-crimson-600);
}
.mf-cell__ic svg { width: 18px; height: 18px; }
.mf-cell b {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 16px;
  color: var(--fg-primary);
  line-height: 1.25;
}
.mf-cell[data-tone="blue"]   .mf-cell__ic { background: var(--color-info-50);    color: var(--color-info-700); }
.mf-cell[data-tone="green"]  .mf-cell__ic { background: var(--color-success-50); color: var(--color-success-700); }
.mf-cell[data-tone="amber"]  .mf-cell__ic { background: var(--color-warning-50); color: var(--color-warning-700); }
.mf-cell[data-tone="violet"] .mf-cell__ic { background: #F1ECFB;                 color: #6B46C1; }
.mf-cell--more {
  background: linear-gradient(150deg, #4C1D95, #6B46C1);
  border-color: transparent;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  position: relative;
  overflow: hidden;
}
.mf-cell--more::after {
  content: ""; position: absolute; top: -40%; right: -10%;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,0.28), transparent 60%);
  pointer-events: none;
}
.mf-cell--more b { color: #fff; font-size: var(--text-2xl); position: relative; }
.mf-cell--more span { font-size: var(--text-xs); color: #E4D8F6; position: relative; }
@media (max-width: 900px) { .mf__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .mf__grid { grid-template-columns: 1fr; } }

/* ===== card4-eq.css ===== */
/* Card 4 — animated equalizer bars beside the heading (automated name-calling) */
.c4eq {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 10px;
  vertical-align: -1px;
  height: 22px;
}
.c4eq i {
  width: 3px;
  border-radius: 2px;
  background: var(--color-crimson-500);
  animation: c4eqBar 1s ease-in-out infinite;
}
.c4eq i:nth-child(1) { height: 9px;  animation-delay: 0s; }
.c4eq i:nth-child(2) { height: 16px; animation-delay: .15s; }
.c4eq i:nth-child(3) { height: 22px; animation-delay: .3s; }
.c4eq i:nth-child(4) { height: 13px; animation-delay: .45s; }
.c4eq i:nth-child(5) { height: 8px;  animation-delay: .6s; }
@keyframes c4eqBar { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .c4eq i { animation: none; } }

/* ===== card4-scene.css ===== */
/* ============================================================
   Card 4 — AI calling scene (tablet → speaker → voice bubble)
   Scoped under .c4scene
   ============================================================ */
.c4scene{position:relative;display:flex;align-items:center;justify-content:center;gap:0;width:100%;padding:10px 0;flex-wrap:wrap;transform:scale(0.82);transform-origin:center;}

/* AI Voice Demo capsule (above the scene) */
.c4cap{display:inline-flex;align-items:center;gap:11px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:999px;padding:9px 16px 9px 10px;box-shadow:0 10px 26px -14px rgba(10,26,47,.45);}
.c4cap__ic{width:32px;height:32px;border-radius:50%;background:rgba(220,16,46,.1);color:var(--color-crimson-500);display:flex;align-items:center;justify-content:center;flex:none;}
.c4cap__ic svg{width:17px;height:17px;}
.c4cap__txt{font-family:var(--font-display),'Manrope';font-weight:700;font-size:13px;color:var(--color-midnight-800);letter-spacing:-0.01em;}
.c4cap__wave{display:inline-flex;align-items:flex-end;gap:2.5px;height:15px;}
.c4cap__wave i{width:2.5px;background:var(--color-crimson-500);border-radius:2px;animation:c4capw .9s ease-in-out infinite;}
.c4cap__wave i:nth-child(1){height:5px}.c4cap__wave i:nth-child(2){height:12px;animation-delay:.1s}.c4cap__wave i:nth-child(3){height:7px;animation-delay:.2s}.c4cap__wave i:nth-child(4){height:14px;animation-delay:.3s}.c4cap__wave i:nth-child(5){height:6px;animation-delay:.15s}.c4cap__wave i:nth-child(6){height:11px;animation-delay:.25s}.c4cap__wave i:nth-child(7){height:5px;animation-delay:.05s}
@keyframes c4capw{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.c4cap__live{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-success-700);}
.c4cap__live .d{width:6px;height:6px;border-radius:50%;background:var(--color-success-500);animation:c4bl 1.6s ease-in-out infinite;}
/* play button + language toggle */
.c4cap__play{position:relative;width:34px;height:34px;border-radius:50%;flex:none;border:none;cursor:pointer;background:var(--color-crimson-500);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -5px rgba(220,16,46,.6);transition:transform .12s ease,background .15s ease;}
/* idle pulse ring to invite a tap */
.c4cap__play::before,.c4cap__play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--color-crimson-500);opacity:0;animation:c4ring 2.4s ease-out infinite;pointer-events:none;}
.c4cap__play::after{animation-delay:1.2s;}
@keyframes c4ring{0%{opacity:.55;transform:scale(1)}70%{opacity:0;transform:scale(1.9)}100%{opacity:0;transform:scale(1.9)}}
.c4cap__play:hover{background:var(--color-crimson-600);}
.c4cap__play:active{transform:scale(.94);}
.c4cap__play-ico{position:relative;z-index:1;width:15px;height:15px;}
/* while playing: stop the invite rings, gently breathe the navy button */
.c4cap.is-playing .c4cap__play{background:var(--color-midnight-800);animation:c4breathe 1.4s ease-in-out infinite;}
.c4cap.is-playing .c4cap__play::before,.c4cap.is-playing .c4cap__play::after{animation:none;opacity:0;}
@keyframes c4breathe{0%,100%{box-shadow:0 0 0 0 rgba(10,26,47,.35)}50%{box-shadow:0 0 0 6px rgba(10,26,47,0)}}
.c4cap__langs{display:inline-flex;gap:3px;background:var(--bg-canvas);border:1px solid var(--border-subtle);border-radius:999px;padding:2px;}
.c4cap__lang{border:none;cursor:pointer;background:transparent;font-family:var(--font-display),'Manrope';font-weight:700;font-size:11px;color:var(--fg-tertiary);padding:3px 9px;border-radius:999px;transition:all .15s ease;}
.c4cap__lang.is-active{background:var(--color-crimson-500);color:#fff;}
.c4cap__wave.is-idle i{animation-play-state:paused;opacity:.45;}
@media (prefers-reduced-motion: reduce){.c4cap__wave i,.c4cap__live .d,.c4cap__play::before,.c4cap__play::after,.c4cap.is-playing .c4cap__play{animation:none!important;}}
.c4scene *{box-sizing:border-box;}

/* tablet */
.c4t{position:relative;flex:0 0 auto;width:300px;max-width:100%;border-radius:22px;
  background:linear-gradient(155deg,#142a47,#0A1A2F);padding:9px;
  box-shadow:0 26px 50px -22px rgba(10,26,47,.6), inset 0 1px 0 rgba(255,255,255,.12);}
.c4t__scr{position:relative;background:linear-gradient(180deg,#fbfcfe,#f3f6fb);border-radius:15px;padding:14px 15px 12px;overflow:hidden;}
.c4t__scr::after{content:"";position:absolute;top:0;left:0;right:0;height:46%;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);pointer-events:none;}
.c4t__cam{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:#2a3d59;z-index:3;}
.c4t__ai{position:absolute;top:-13px;right:-13px;width:42px;height:42px;border-radius:12px;background:linear-gradient(150deg,#1fbf63,#16A34A);color:#fff;font-family:var(--font-display),'Manrope';font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px -6px rgba(22,163,74,.6);z-index:4;}
.c4t__ai::before{content:"";position:absolute;inset:-6px;border:1.5px solid rgba(22,163,74,.4);border-radius:16px;}
.c4t__hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;position:relative;}
.c4t__brand{display:flex;align-items:center;gap:7px;font-family:var(--font-display),'Manrope';font-weight:800;font-size:12px;color:var(--color-midnight-800);}
.c4t__brand .lg{width:18px;height:18px;border-radius:5px;background:var(--color-midnight-800);color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;}
.c4t__chip{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-success-700);background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.25);padding:3px 8px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;}
.c4t__chip .d{width:5px;height:5px;border-radius:50%;background:var(--color-success-500);animation:c4bl 1.6s ease-in-out infinite;}
@keyframes c4bl{0%,100%{opacity:1}50%{opacity:.3}}
.c4t__nc{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--color-crimson-500);font-family:var(--font-display),'Manrope';font-weight:700;font-size:11px;margin-bottom:8px;position:relative;text-transform:uppercase;letter-spacing:.05em;}
.c4t__nc .wv{display:inline-flex;gap:2px;align-items:flex-end;height:12px;}
.c4t__nc .wv i{width:2.5px;background:var(--color-crimson-500);border-radius:2px;animation:c4eq 1s ease-in-out infinite;}
.c4t__nc .wv i:nth-child(1){height:5px}.c4t__nc .wv i:nth-child(2){height:11px;animation-delay:.15s}.c4t__nc .wv i:nth-child(3){height:7px;animation-delay:.3s}
@keyframes c4eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

.c4t__view{position:relative;height:118px;overflow:hidden;}
.c4t__rail{display:flex;flex-direction:column;transition:transform .7s cubic-bezier(.4,0,.2,1);}
.c4call{flex:0 0 118px;height:118px;position:relative;background:#fff;border:1px solid var(--border-subtle);border-radius:13px;padding:11px 14px;box-shadow:0 8px 18px -12px rgba(10,26,47,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.c4call__av{width:40px;height:40px;border-radius:50%;margin-bottom:7px;color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display),'Manrope';font-weight:800;font-size:15px;background:linear-gradient(150deg,#1fbf63,#0e7a37);box-shadow:0 0 0 4px rgba(22,163,74,.14);}
.c4call__name{text-align:center;font-family:var(--font-display),'Manrope';font-weight:800;font-size:22px;line-height:1.1;letter-spacing:-0.01em;color:var(--color-success-700);}
.c4call__pp{text-align:center;font-size:11px;color:var(--fg-tertiary);margin-top:5px;}
.c4call__room{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display),'Manrope';font-weight:700;font-size:12.5px;color:var(--color-midnight-800);background:#F2F5FA;border-radius:8px;padding:4px 11px;margin-top:5px;}
.c4call__room svg{width:13px;height:13px;color:var(--color-crimson-500);}

.c4t__next{display:flex;align-items:center;gap:8px;margin-top:9px;padding:7px 10px;background:#F7F9FC;border-radius:9px;}
.c4t__next .nlab{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9aa6b8;}
.c4t__next .nname{font-family:var(--font-display),'Manrope';font-weight:700;font-size:11px;color:var(--color-midnight-800);}
.c4t__next .ntok{margin-left:auto;font-size:10px;font-weight:700;color:var(--fg-tertiary);background:#fff;border:1px solid var(--border-subtle);border-radius:6px;padding:2px 7px;}
.c4t__ft{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid var(--border-subtle);position:relative;}
.c4t__lang{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--fg-tertiary);}
.c4t__lang b{color:var(--color-midnight-800);font-weight:700;}
.c4t__eq{display:inline-flex;gap:2px;align-items:flex-end;height:14px;}
.c4t__eq i{width:2.5px;background:var(--color-crimson-500);border-radius:2px;animation:c4eq .9s ease-in-out infinite;}
.c4t__eq i:nth-child(1){height:5px}.c4t__eq i:nth-child(2){height:11px;animation-delay:.1s}.c4t__eq i:nth-child(3){height:7px;animation-delay:.2s}.c4t__eq i:nth-child(4){height:13px;animation-delay:.3s}.c4t__eq i:nth-child(5){height:6px;animation-delay:.15s}.c4t__eq i:nth-child(6){height:10px;animation-delay:.25s}.c4t__eq i:nth-child(7){height:5px;animation-delay:.05s}

/* connector */
.c4conn{flex:0 0 26px;min-width:26px;height:60px;position:relative;}
.c4conn svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.c4conn .dash{stroke:var(--color-success-500);stroke-width:2;stroke-dasharray:5 5;fill:none;animation:c4flow 1s linear infinite;}
@keyframes c4flow{to{stroke-dashoffset:-20}}
.c4conn2{flex:0 0 30px;min-width:30px;}

/* speaker */
.c4spk{flex:0 0 auto;position:relative;width:60px;}
.c4spk__body{position:relative;width:60px;height:78px;border-radius:16px;background:linear-gradient(150deg,#ffffff 0%,#eef1f6 55%,#dfe4ec 100%);border:1px solid #d4dae4;box-shadow:0 18px 32px -14px rgba(10,26,47,.45), inset 0 2px 4px rgba(255,255,255,.9), inset 0 -6px 12px rgba(10,26,47,.06);}
.c4spk__mesh{position:absolute;left:9px;right:9px;top:10px;bottom:22px;border-radius:9px;background:radial-gradient(circle,#b9c2d0 .9px,transparent 1.1px);background-size:5px 5px;box-shadow:inset 0 1px 2px rgba(10,26,47,.12);}
.c4spk__ring{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:conic-gradient(from 0deg,#DC102E,#ff5870,#DC102E);box-shadow:0 0 10px rgba(220,16,46,.6);display:flex;align-items:center;justify-content:center;animation:c4spin 2.4s linear infinite;}
@keyframes c4spin{to{transform:translateX(-50%) rotate(360deg)}}
.c4spk__ring::after{content:"";width:14px;height:14px;border-radius:50%;background:#fff;}
.c4spk__dot{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--color-crimson-500);z-index:2;box-shadow:0 0 7px rgba(220,16,46,.9);animation:c4bl 1s ease-in-out infinite;}
.c4spk__waves{position:absolute;right:-34px;top:42%;transform:translateY(-50%);width:34px;height:54px;}
.c4spk__waves i{position:absolute;left:0;top:50%;transform:translateY(-50%);border:3px solid var(--color-crimson-500);border-left:none;border-radius:0 50px 50px 0;opacity:0;animation:c4spkw 1.3s cubic-bezier(.3,0,.4,1) infinite;}
.c4spk__waves i:nth-child(1){width:9px;height:16px}
.c4spk__waves i:nth-child(2){width:19px;height:34px;animation-delay:.22s}
.c4spk__waves i:nth-child(3){width:30px;height:52px;animation-delay:.44s}
@keyframes c4spkw{0%{opacity:0;transform:translateY(-50%) scaleX(.6)}30%{opacity:1}100%{opacity:0;transform:translateY(-50%) scaleX(1)}}

/* voice bubble */
.c4bub{flex:0 0 auto;display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--border-subtle);border-radius:16px;padding:13px 16px;box-shadow:0 18px 34px -16px rgba(10,26,47,.42);max-width:250px;animation:c4fl 5s ease-in-out infinite;}
.c4bub__ic{width:34px;height:34px;border-radius:10px;background:rgba(220,16,46,.1);color:var(--color-crimson-500);display:flex;align-items:center;justify-content:center;flex:none;}
.c4bub__ic svg{width:18px;height:18px;}
.c4bub__t{font-family:'Noto Sans Devanagari',var(--font-display),'Manrope';font-weight:600;font-size:13px;color:var(--color-midnight-800);line-height:1.5;}
@keyframes c4fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

@media (prefers-reduced-motion: reduce){
  .c4t__rail,.c4spk__ring,.c4spk__waves i,.c4spk__dot,.c4bub,.c4conn .dash,.c4t__eq i,.c4t__nc .wv i,.c4t__chip .d{animation:none!important;transition:none!important;}
}
@media (max-width: 560px){
  .c4scene{gap:8px;}
  .c4bub{max-width:100%;}
}

/* ===== card3-checkin.css (v02.10.00 design re-sync) ===== */
/* ============================================================
   Card 3 — animated check-in journey phone + patient girl
   Scoped under .c3chk so it can't leak into the rest of the page.
   ============================================================ */
/* Flex-row composition: woman (left) + phone (right) overlapping her — no absolute
   positioning, robust at every width. */
.c3chk{position:relative;display:flex;flex-direction:row;align-items:flex-end;justify-content:center;width:100%;min-height:500px;overflow:visible;padding-right:15px;}
.c3chk img.c3chk__girl{position:relative;order:0;flex:none;height:470px !important;width:auto !important;max-width:none !important;margin-bottom:-26px;margin-right:-45px;z-index:1;pointer-events:none;}
.c3chk .ph{order:1;flex:none !important;margin-left:0;margin-bottom:24px;}

/* phone shell */
.c3chk .ph{
  position:relative;width:212px;height:448px;border-radius:42px;z-index:2;
  background:linear-gradient(135deg,#d8dade 0%,#a9adb4 18%,#6f747c 40%,#3c3f45 60%,#8b9097 82%,#c9cdd2 100%);
  padding:3px;
  box-shadow:0 0 0 0.5px rgba(255,255,255,0.6) inset,0 0 0 6px #0a0c10,0 0 0 7px #1d1f24,0 40px 70px -26px rgba(10,26,47,0.55);
}
.c3chk .ph__bz{position:relative;width:100%;height:100%;border-radius:47px;background:#000;padding:2px;overflow:hidden;}
.c3chk .ph__sc{position:relative;width:100%;height:100%;border-radius:43px;overflow:hidden;
  background:radial-gradient(130% 60% at 50% -8%,rgba(220,16,46,0.16),transparent 55%),linear-gradient(180deg,#20304c 0%,#101d33 55%,#0a1322 100%);}
.c3chk .ph__island{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:86px;height:26px;background:#000;border-radius:15px;z-index:6;}
.c3chk .ph__status{display:flex;justify-content:space-between;align-items:center;padding:18px 24px 8px;color:#fff;font-size:13px;font-weight:700;font-family:var(--font-display);position:relative;z-index:5;}
.c3chk .ph__status-r{display:flex;align-items:center;gap:6px;}

/* full-screen slot */
.c3chk .ph__slot{position:absolute;left:0;right:0;top:42px;bottom:0;}
.c3chk .scr{position:absolute;inset:0;background:var(--bg-canvas);opacity:0;transform:scale(0.92);display:flex;flex-direction:column;overflow:hidden;}
.c3chk .scr.in{animation:c3zin .5s cubic-bezier(0.2,0.7,0.2,1) forwards;}
.c3chk .scr.out{animation:c3zout .42s cubic-bezier(0.5,0,0.2,1) forwards;}
@keyframes c3zin{0%{opacity:0;transform:scale(0.92);}100%{opacity:1;transform:scale(1);}}
@keyframes c3zout{0%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(1.04);}}

/* app chrome */
.c3chk .app-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#fff;border-bottom:1px solid var(--border-subtle);}
.c3chk .app-bar__logo{width:22px;height:22px;border-radius:7px;background:var(--color-midnight-800);display:flex;align-items:center;justify-content:center;flex:none;}
.c3chk .app-bar__logo span{width:7px;height:7px;border-radius:50%;background:var(--color-crimson-500);}
.c3chk .app-bar__t{font-family:var(--font-display);font-weight:800;font-size:11px;color:var(--color-midnight-800);letter-spacing:-0.01em;flex:1;}
.c3chk .app-bar__bell{width:20px;height:20px;color:var(--fg-tertiary);position:relative;}
.c3chk .app-bar__bell svg{width:15px;height:15px;}
.c3chk .app-bar__bell::after{content:'';position:absolute;top:1px;right:2px;width:6px;height:6px;border-radius:50%;background:var(--color-crimson-500);border:1.5px solid #fff;}
.c3chk .app-body{flex:1;padding:12px;display:flex;flex-direction:column;overflow:hidden;}
.c3chk .app-nav{display:flex;background:#fff;border-top:1px solid var(--border-subtle);padding:7px 0 16px;}
.c3chk .app-nav__i{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--fg-tertiary);}
.c3chk .app-nav__i svg{width:16px;height:16px;}
.c3chk .app-nav__i span{font-size:8px;font-weight:600;font-family:var(--font-display);}
.c3chk .app-nav__i.on{color:var(--color-crimson-500);}
.c3chk .glass{background:#fff;border:1px solid var(--border-subtle);border-radius:12px;box-shadow:0 6px 18px -12px rgba(10,26,47,0.22);}

/* 1 QR */
.c3chk .qr-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;flex:1;}
.c3chk .qr-ttl{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--color-midnight-800);}
.c3chk .qr-box{width:138px;height:138px;border-radius:15px;background:#fff;border:1px solid var(--border-subtle);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px -14px rgba(10,26,47,0.32);}
.c3chk .qr-box svg{width:102px;height:102px;color:var(--color-midnight-900);}
.c3chk .qr-scan{position:absolute;left:8px;right:8px;height:3px;background:linear-gradient(90deg,transparent,var(--color-crimson-500),transparent);box-shadow:0 0 12px 3px rgba(220,16,46,0.6);top:10px;}
.c3chk .scr.in .qr-scan{animation:c3scan 1.7s 0.3s ease-in-out infinite;}
@keyframes c3scan{0%,100%{top:10px;}50%{top:124px;}}
.c3chk .qr-corner{position:absolute;width:26px;height:26px;border:3px solid var(--color-crimson-500);}
.c3chk .qr-corner.tl{top:8px;left:8px;border-right:none;border-bottom:none;border-radius:8px 0 0 0;}
.c3chk .qr-corner.tr{top:8px;right:8px;border-left:none;border-bottom:none;border-radius:0 8px 0 0;}
.c3chk .qr-corner.bl{bottom:8px;left:8px;border-right:none;border-top:none;border-radius:0 0 0 8px;}
.c3chk .qr-corner.br{bottom:8px;right:8px;border-left:none;border-top:none;border-radius:0 0 8px 0;}
.c3chk .qr-sub{font-size:11px;color:var(--fg-tertiary);text-align:center;line-height:1.5;}

/* 2 arrival */
.c3chk .ok-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;flex:1;}
.c3chk .ok-circ{width:74px;height:74px;border-radius:50%;background:var(--color-success-50);display:flex;align-items:center;justify-content:center;position:relative;}
.c3chk .ok-circ::before{content:'';position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--color-success-500);opacity:0.25;}
.c3chk .ok-circ svg{width:38px;height:38px;color:var(--color-success-500);}
.c3chk .ok-circ svg path{stroke-dasharray:30;stroke-dashoffset:30;}
.c3chk .scr.in .ok-circ svg path{animation:c3draw .6s .25s cubic-bezier(0.2,0.7,0.2,1) forwards;}
@keyframes c3draw{to{stroke-dashoffset:0;}}
.c3chk .ok-t{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--color-midnight-800);}
.c3chk .ok-s{font-size:12px;color:var(--fg-tertiary);text-align:center;line-height:1.5;}

/* rows / cards */
.c3chk .scr-c{display:flex;flex-direction:column;flex:1;gap:9px;}
.c3chk .patient-card{display:flex;align-items:center;gap:9px;padding:9px;}
.c3chk .pc-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#2563EB,#1E40AF);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:13px;flex:none;}
.c3chk .pc-t{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--color-midnight-800);}
.c3chk .pc-s{font-size:11px;color:var(--fg-tertiary);margin-top:2px;}
.c3chk .pc-tag{margin-left:auto;font-size:9px;font-weight:700;font-family:var(--font-display);color:var(--color-success-500);background:var(--color-success-50);padding:3px 8px;border-radius:999px;}
.c3chk .row__ic{width:40px;height:40px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;}
.c3chk .row__ic svg{width:21px;height:21px;}
.c3chk .bg-amber{background:var(--color-warning-500);}.c3chk .bg-navy{background:var(--color-midnight-800);}

.c3chk .queue-card{padding:13px 14px;text-align:center;background:linear-gradient(160deg,#FFF6F8,#fff);}
.c3chk .queue-lab{font-family:var(--font-display);font-weight:700;font-size:11px;color:var(--fg-tertiary);text-transform:uppercase;letter-spacing:0.06em;}
.c3chk .queue-num{font-family:var(--font-display);font-weight:800;font-size:44px;color:var(--color-crimson-500);text-align:center;line-height:1;margin:5px 0 4px;letter-spacing:-0.03em;}
.c3chk .queue-sub{font-size:11px;color:var(--fg-secondary);font-weight:600;}
.c3chk .qprog{display:flex;gap:4px;margin-top:13px;}
.c3chk .qprog i{flex:1;height:4px;border-radius:3px;background:var(--border-subtle);}
.c3chk .qprog i.done{background:var(--color-success-500);}
.c3chk .qprog i.now{background:var(--color-crimson-500);}
.c3chk .mini{display:flex;justify-content:space-between;margin-top:auto;}
.c3chk .mini div{text-align:center;flex:1;padding:8px 6px;}
.c3chk .mini b{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--color-midnight-800);display:block;}
.c3chk .mini span{font-size:9px;color:var(--fg-tertiary);}
.c3chk .wait-card{padding:13px 14px;text-align:center;}
.c3chk .wait-big{font-family:var(--font-display);font-weight:800;font-size:32px;color:var(--color-crimson-500);text-align:center;line-height:1;margin:4px 0 5px;letter-spacing:-0.02em;}
.c3chk .wait-lab{font-family:var(--font-display);font-weight:700;font-size:11px;color:var(--fg-tertiary);text-transform:uppercase;letter-spacing:0.06em;text-align:center;}
.c3chk .ontime{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--color-success-500);font-weight:700;font-family:var(--font-display);justify-content:center;background:var(--color-success-50);padding:4px 11px;border-radius:999px;margin-top:4px;}
.c3chk .ontime i{width:7px;height:7px;border-radius:50%;background:var(--color-success-500);}
.c3chk .guide-map{flex:1;border-radius:14px;background:linear-gradient(160deg,#EEF3FA,#E3EBF5);border:1px solid var(--border-subtle);position:relative;overflow:hidden;min-height:120px;}
.c3chk .guide-pin{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;}
.c3chk .guide-pin svg{width:34px;height:34px;color:var(--color-crimson-500);}
.c3chk .guide-pin b{font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--color-midnight-800);background:#fff;padding:3px 9px;border-radius:999px;box-shadow:0 4px 12px -6px rgba(10,26,47,0.3);}
.c3chk .guide-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(10,26,47,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(10,26,47,0.05) 1px,transparent 1px);background-size:22px 22px;}

.c3chk .pips{position:absolute;left:0;right:0;bottom:14px;display:flex;gap:6px;justify-content:center;z-index:7;}
.c3chk .pips i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.28);transition:all .3s;}
.c3chk .pips i.on{background:var(--color-crimson-500);width:18px;border-radius:3px;}

/* Narrow screens: keep the EXACT desktop composition (girl left, phone right,
   overlapping) and just scale the whole thing down to fit. transform scales the
   children uniformly, so the desktop margins stay correct — no repositioning.
   Starts at 1280px to cover the tablet/mobile single-column layout. */
@media (max-width:1280px){
  .c3chk{transform:scale(0.62);transform-origin:bottom center;height:312px;min-height:0;width:max-content;margin:0 auto;}
}
@media (max-width:600px){
  .c3chk{transform:scale(0.5);height:250px;}
}
@media (max-width:430px){
  .c3chk{transform:scale(0.43);height:215px;}
}
@media (prefers-reduced-motion: reduce){
  .c3chk .scr{animation:none!important;opacity:1;transform:none;}
}

/* ===== demo-modal.css (v02.10.00 design re-sync) ===== */
/* ============================================================
   Demo lead-capture modal — scoped under #demoModal
   On-brand (Manrope/Inter, crimson #DC102E, navy, system radii)
   ============================================================ */
#demoModal{
  position:fixed; inset:0; z-index:var(--z-modal,1000);
  display:none; align-items:flex-start; justify-content:center;
  padding:48px 20px;
  background:rgba(10,26,47,0.48);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  overflow-y:auto;
}
#demoModal.is-open{ display:flex; animation:demoFade .24s var(--ease-out,ease) both; }
@keyframes demoFade{ from{opacity:0;} to{opacity:1;} }
.demo-modal__panel{
  position:relative; width:100%; max-width:720px;
  background:var(--bg-surface); border-radius:var(--radius-xl,20px);
  box-shadow:var(--shadow-2xl); overflow:hidden;
  animation:demoRise .28s var(--ease-out,ease) both;
}
@keyframes demoRise{ from{opacity:0; transform:translateY(14px) scale(.98);} to{opacity:1; transform:none;} }
.demo-modal__head{
  position:relative; padding:24px 28px;
  background:linear-gradient(150deg,var(--color-midnight-900),var(--color-midnight-800));
  color:#fff; overflow:hidden;
}
.demo-modal__head::after{
  content:""; position:absolute; top:-50%; right:-6%; width:300px; height:300px;
  background:radial-gradient(circle,rgba(220,16,46,0.30),transparent 60%); pointer-events:none;
}
.demo-modal__eyebrow{
  position:relative; font-family:var(--font-display); font-size:var(--text-2xs,11px);
  font-weight:var(--fw-bold); letter-spacing:0.14em; text-transform:uppercase;
  color:var(--color-crimson-300); margin-bottom:8px;
}
.demo-modal__title{
  position:relative; font-family:var(--font-display); font-weight:var(--fw-bold);
  font-size:22px; line-height:1.2; margin:0 0 6px; letter-spacing:-0.01em;
  color:#fff;
}
.demo-modal__sub{ position:relative; font-size:13.5px; color:var(--color-midnight-100); margin:0; line-height:1.5; }
.demo-modal__close{
  position:absolute; top:16px; right:16px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.12); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast,.16s) var(--ease-out,ease);
}
.demo-modal__close:hover{ background:rgba(255,255,255,0.24); }
.demo-modal__close svg{ width:18px; height:18px; }

/* form body */
.crm-lead-form{ padding:26px 28px 30px; font-family:var(--font-body); }
.crm-lead-form .form-row{ display:flex; gap:14px; margin-bottom:14px; }
.crm-lead-form .form-group{ flex:1; min-width:0; }
.crm-lead-form .form-group.full{ flex:100%; }
.crm-lead-form label{
  display:block; margin-bottom:6px; font-family:var(--font-display);
  font-weight:var(--fw-semibold); font-size:13px; color:var(--fg-secondary);
}
.crm-lead-form label .required{ color:var(--color-crimson-500); }
.crm-lead-form input,
.crm-lead-form select,
.crm-lead-form textarea{
  width:100%; padding:11px 13px;
  border:1px solid var(--border-default); border-radius:var(--radius-sm,8px);
  font-size:14px; font-family:inherit; color:var(--fg-primary);
  background:var(--bg-surface); box-sizing:border-box;
  transition:border-color .2s, box-shadow .2s;
}
.crm-lead-form input::placeholder,
.crm-lead-form textarea::placeholder{ color:var(--fg-tertiary); }
.crm-lead-form input:focus,
.crm-lead-form select:focus,
.crm-lead-form textarea:focus{
  outline:none; border-color:var(--color-crimson-500);
  box-shadow:0 0 0 3px rgba(220,16,46,0.12);
}
.crm-lead-form .radio-group{ display:flex; flex-wrap:wrap; gap:10px 22px; padding:4px 2px; }
.crm-lead-form .radio-item{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  font-size:14px; color:var(--fg-primary); font-weight:normal; margin:0;
}
.crm-lead-form input[type="radio"]{
  width:auto; padding:0; margin:0; accent-color:var(--color-crimson-500);
  box-shadow:none; flex-shrink:0;
}
.crm-lead-form input[type="radio"]:focus{ box-shadow:0 0 0 3px rgba(220,16,46,0.2); }
.crm-lead-form textarea{ resize:vertical; min-height:84px; }
.crm-lead-form button[type="submit"]{
  width:100%; padding:14px 24px; margin-top:8px;
  background:var(--color-crimson-500); color:#fff; border:none;
  border-radius:var(--radius-sm,8px); font-family:var(--font-display);
  font-size:16px; font-weight:var(--fw-semibold); cursor:pointer;
  box-shadow:0 8px 20px -6px rgba(220,16,46,0.5);
  transition:background var(--dur-fast,.16s), transform .1s;
}
.crm-lead-form button[type="submit"]:hover{ background:var(--color-crimson-600); }
.crm-lead-form button[type="submit"]:active{ transform:scale(0.98); }
.crm-lead-form button[type="submit"]:disabled{ background:var(--color-neutral-400); cursor:not-allowed; box-shadow:none; }
.crm-lead-form .form-message{ padding:12px 16px; border-radius:var(--radius-sm,8px); margin-top:14px; font-size:14px; display:none; }
.crm-lead-form .form-message.success{ background:var(--color-success-50); color:var(--color-success-700); }
.crm-lead-form .form-message.error{ background:var(--color-danger-50); color:var(--color-danger-700); }
.crm-lead-form .hp-field{ position:absolute; left:-9999px; height:0; overflow:hidden; }

@media (max-width:600px){
  #demoModal{ padding:0; align-items:flex-start; }
  .demo-modal__panel{ max-width:none; border-radius:0; min-height:100%; }
  .crm-lead-form .form-row{ flex-direction:column; gap:0; }
  .crm-lead-form .form-group{ margin-bottom:14px; }
}

/* Guarantee the form modal scrolls on every screen (panel must not clip content) */
#demoModal{ align-items:flex-start; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.demo-modal__panel{ max-height:none; overflow:visible; }
.demo-modal__body, .crm-lead-form{ overflow:visible; }

/* ===== Video modal ===== */
#videoModal{
  position:fixed; inset:0; z-index:var(--z-modal,1000);
  display:none; align-items:center; justify-content:center; padding:24px;
  background:rgba(10,26,47,0.78);
}
#videoModal.is-open{ display:flex; animation:demoFade .24s var(--ease-out,ease) both; }
.video-modal__panel{
  position:relative; width:100%; max-width:960px;
  border-radius:var(--radius-xl,20px); overflow:hidden;
  background:#000; box-shadow:var(--shadow-2xl);
}
.video-modal__frame{ position:relative; width:100%; aspect-ratio:16/9; }
.video-modal__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-modal__close{
  position:absolute; top:-14px; right:-14px; z-index:3;
  width:40px; height:40px; border-radius:50%;
  background:var(--bg-surface); color:var(--fg-primary); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg);
  transition:transform var(--dur-fast,.16s) var(--ease-out,ease);
}
.video-modal__close:hover{ transform:scale(1.08); }
.video-modal__close svg{ width:20px; height:20px; }
@media (max-width:600px){
  #videoModal{ padding:16px; }
  .video-modal__close{ top:-12px; right:-6px; width:34px; height:34px; }
}

/* ===== responsive.css (v02.10.00 design re-sync) — loaded LAST ===== */
/* ============================================================
   Global responsive overrides — loaded LAST.
   Neutralises fixed-width inline styles + tightens every
   custom section on tablet / mobile. !important beats inline px.
   ============================================================ */

/* never allow horizontal scroll anywhere */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }
*, *::before, *::after { min-width: 0; }

/* ---------- Tablet (≤1280px) ---------- */
@media (max-width: 1280px) {
  /* --- uniformity (tablet/mobile only — desktop untouched) --- */
  .container { width: 100% !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; }
  .section, [class*="section--"] { padding-left: 0 !important; padding-right: 0 !important; }
  .section-head { max-width: 760px !important; margin: 0 auto var(--space-9) !important; padding: 0 !important; height: auto !important; text-align: center !important; }
  .section-head > .eyebrow,
  .section-head > .section-title,
  .section-head > .section-sub { margin-left: auto !important; margin-right: auto !important; }
  .section-head > .section-sub { max-width: 620px !important; }
  .love-row__copy { padding: var(--space-6) var(--space-5) !important; }

  .hj__sub { margin-left: auto !important; margin-right: auto !important; width: auto !important; max-width: 640px !important; }
  [data-screen-label="02 Clients"] .section-head { margin-left: auto !important; margin-right: auto !important; }
  .love-wide__visual { width: auto !important; }
  /* Solution rows → single column, visuals centred + uncropped, no 700px gap */
  .love-rows { grid-template-columns: 1fr !important; }
  .love-rows .love-row { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  .love-row, .love-row--reverse { flex-direction: column !important; }
  .love-row__visual {
    width: auto !important; max-width: 100% !important; height: auto !important;
    margin: var(--space-6) auto 0 !important;
    align-self: center !important;
    overflow: visible !important;
    background: transparent !important; border: none !important; box-shadow: none !important;
  }
  .love-row__visual img { max-width: 100% !important; height: auto !important; }
  .love-row__visual--cutout img { width: 100% !important; margin: 0 !important; }
  /* QR-checkin (card 3): let card3-checkin.css scale the WHOLE desktop
     composition (girl left + phone right, overlapping) down to fit.
     Do NOT reposition any piece here. */
  .love-rows > .love-row:nth-child(3) { padding-bottom: 0 !important; }
  .love-rows > .love-row:nth-child(3) .love-row__visual { margin: var(--space-3) auto -2px !important; overflow: visible !important; }
  /* phones / animated stages sit centred in normal flow */
  .c2p-stage, .c4cap, .c4t { margin-left: auto !important; margin-right: auto !important; }
  /* Card 1 (booking dashboard) — bigger image, minimal top/bottom space */
  .love-rows > .love-row:first-child { padding-bottom: var(--space-4) !important; }
  .love-rows > .love-row:first-child .love-row__copy { padding-bottom: 0 !important; }
  .love-rows > .love-row:first-child .love-row__visual { margin: 0 auto !important; height: auto !important; }
  .love-rows > .love-row:first-child .love-row__visual--cutout img { width: 100% !important; max-width: 100% !important; margin: 0 !important; }

  /* Card 2 (notifications phone) — tighter text/visual gap (chips keep their
     normal outward positioning so they straddle the phone like on desktop) */
  .love-rows > .love-row:nth-child(2) { height: auto !important; justify-content: flex-start !important; padding-bottom: var(--space-4) !important; }
  .love-rows > .love-row:nth-child(2) .love-row__copy { padding-bottom: 0 !important; }
  .love-rows > .love-row:nth-child(2) .love-row__visual { margin-top: calc(var(--space-6) * -1) !important; }
  .c2p-chan { display: flex !important; }
  /* push Email & Push chips further right, outside the phone */
  .c2p-ch-email, .c2p-ch-push { right: -64px !important; left: auto !important; }
  /* push WhatsApp & SMS chips further left, outside the phone */
  .c2p-ch-wa, .c2p-ch-sms { left: -64px !important; right: auto !important; }

  /* Card 3 (QR check-in phone) — reduce gap between text and phone */
  .love-rows > .love-row:nth-child(3) { height: auto !important; justify-content: flex-start !important; }
  .love-rows > .love-row:nth-child(3) .love-row__copy { padding-bottom: 0 !important; }
}

/* ---------- Phones (≤760px) ---------- */
@media (max-width: 760px) {
  .container { padding-left: 18px !important; padding-right: 18px !important; }
  .section, [class*="section--"] { padding-left: 0 !important; padding-right: 0 !important; }
  [style*="width: 564px"], [style*="width:564px"],
  [style*="width: 690px"], [style*="width:690px"],
  [style*="width: 600px"], [style*="width: 560px"] { width: auto !important; max-width: 100% !important; }

  /* ---- HERO ---- */
  .hj__h1 { font-size: 32px !important; line-height: 1.1 !important; }
  .hj__sub { font-size: 16px !important; max-width: 100% !important; margin-top: 16px !important; }
  .hj__btns { flex-wrap: wrap; }
  .hj__btns .btn { flex: 1 1 auto; justify-content: center; }
  /* hero step conveyor → 2-up wrap */
  .hj-conv { flex-wrap: wrap !important; gap: 10px !important; }
  .hj-conv__step { flex: 1 1 42% !important; }
  .hj-conv__conn { display: none !important; }

  /* ---- generic section heads ---- */
  .section-title, .eco-head__t, .whyq__title, .impl__title, .love-wide__title,
  .section-head h2 { font-size: clamp(24px, 6.4vw, 34px) !important; white-space: normal !important; }
  .section-head { margin-left: auto !important; margin-right: auto !important; }

  /* ---- AI ECOSYSTEM ring ---- */
  .eco-grid { grid-template-columns: 1fr !important; gap: var(--space-7) !important; }
  .eco-ring { max-width: 320px !important; margin: 0 auto !important; }
  #ecoStageLight, .eco-stage { padding-left: 14px !important; padding-right: 14px !important; }

  /* ---- SOLUTION love rows (extra mobile tightening) ---- */
  .love-row__copy { padding: var(--space-7) !important; }

  /* card 5 horizontal → stack */
  .love-wide { flex-direction: column !important; height: auto !important; }
  .love-wide__copy, .love-wide__visual { width: auto !important; height: auto !important; flex: none !important; padding: var(--space-7) !important; }
  .love-wide__visual { padding-top: 0 !important; }
  .love-wide__visual img { object-position: center !important; height: auto !important; }

  /* ---- phone mockups (card 2 & 3): keep their normal outward chip layout ---- */

  /* ---- REVENUE ---- */
  .revA-wrap, .revA-grid { grid-template-columns: 1fr !important; }
  .revA-stage { flex-direction: column !important; }
  .revA-img { width: auto !important; }
  .revA-float--1 { right: 6px !important; } .revA-float--2 { left: 6px !important; }

  /* ---- IMPLEMENTATION / WHY / CHANGES / SUPPORT / FAQ ---- */
  .impl__grid, .implementation__grid, .whyq, .changes-grid, .support__layout,
  .faq__grid, .testi-grid { grid-template-columns: 1fr !important; gap: var(--space-7) !important; }
  .whyq__founder { max-width: 360px; margin: 0 auto; }

  /* ---- MORE FEATURES ---- */
  .mf__grid { grid-template-columns: 1fr 1fr !important; }

  /* ---- FOOTER ---- */
  .footer__grid { grid-template-columns: 1fr 1fr !important; }

  /* video modal full-bleed-ish */
  .video-modal__panel { max-width: 100% !important; }
}

/* ---------- Small phones (≤460px) ---------- */
@media (max-width: 460px) {
  .container { padding-left: 14px !important; padding-right: 14px !important; }
  .hj__h1 { font-size: 28px !important; }
  .hj-conv__step { flex: 1 1 100% !important; }
  .mf__grid { grid-template-columns: 1fr !important; }
  .footer__grid { grid-template-columns: 1fr !important; }
  /* shrink the whole phone composition so phone + chips fit a small screen */
  .c2p-stage, .c3p-stage { zoom: 0.82; }
}

/* ---------- Desktop only (≥1281px) ---------- */
@media (min-width: 1281px) {
  /* keep the original card padding on desktop (mobile uses the reduced base value) */
  .love-row { padding-left: var(--space-9) !important; padding-right: var(--space-9) !important; }
  /* Card 4 (AI calling) — nudge the visual down a little */
  .love-rows > .love-row:nth-child(4) .love-row__visual { margin-top: 20px !important; }
}

/* ===== Carry-forward: AI-ecosystem touch-and-hold pause (not in design bundle) ===== */
.eco-stage.eco-paused,
.eco-stage.eco-paused * { animation-play-state: paused !important; }


/* ===== Card 3 (QR check-in) — center the girl+phone group on phones (v02.10.01) =====
   On narrow phones the unscaled composition is wider than the column, so
   margin:0 auto collapses and the scaled result drifts right. left:50% +
   translateX(-50%) centers it regardless of width. Mobile only — desktop/tablet
   (>600px) keep the design's untouched layout. */
@media (max-width: 600px){
  .love-rows > .love-row:nth-child(3) .c3chk{
    position: relative; left: 50%;
    transform: translateX(-50%) scale(0.5);
    transform-origin: center bottom;
  }
}
@media (max-width: 430px){
  .love-rows > .love-row:nth-child(3) .c3chk{
    transform: translateX(-50%) scale(0.43);
  }
}