/* ============================================================
   whatsCRM Landing — Design System
   Colors: green brand + amber accent (matches CRM reference),
   neutrals, dark ink. Max 5 core colors.
   ============================================================ */
:root {
  --green-50: #ecfdf3;
  --green-100: #d1fadf;
  --green-200: #a6f4c5;
  --green-400: #32d583;
  --green-500: #12b76a;
  --green-600: #039855;
  --green-700: #027a48;
  --amber-100: #fef0c7;
  --amber-400: #fdb022;
  --amber-500: #f79009;
  --amber-600: #dc6803;

  --ink-900: #101828;
  --ink-800: #1d2939;
  --ink-700: #344054;
  --ink-600: #475467;
  --ink-500: #667085;
  --ink-400: #98a2b3;
  --ink-300: #d0d5dd;
  --ink-200: #eaecf0;
  --ink-100: #f2f4f7;
  --ink-50: #f9fafb;

  --bg: #f7f8fa;
  --surface: #ffffff;
  --border: #eaecf0;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", var(--font-sans);

  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 18px 40px -12px rgba(16, 24, 40, 0.16);
  --shadow-green: 0 16px 40px -12px rgba(3, 152, 85, 0.35);
  --max: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink-800);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--green-600); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.section { padding: 84px 0; }
@media (max-width: 640px) { .section { padding: 56px 0; } }

/* Typography helpers */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--green-700);
  background: var(--green-50); border: 1px solid var(--green-100);
  padding: 6px 14px; border-radius: 999px;
}
.section-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12; font-weight: 800; color: var(--ink-900);
  margin: 18px 0 14px; letter-spacing: -.02em; text-wrap: balance;
}
.section-head p { color: var(--ink-500); font-size: 17px; text-wrap: pretty; }
.text-green { color: var(--green-600); }
.text-amber { color: var(--amber-500); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 15px; border-radius: 12px;
  padding: 13px 22px; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green-600); color: #fff; box-shadow: var(--shadow-green); }
.btn-primary:hover { background: var(--green-700); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink-700); }
.btn-ghost:hover { color: var(--ink-900); }
.btn-outline { background: var(--surface); color: var(--ink-800); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.btn-outline:hover { border-color: var(--ink-300); }
.btn-lg { padding: 15px 26px; font-size: 16px; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ============================== NAVBAR ============================== */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247, 248, 250, .78);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.nav.scrolled { border-color: var(--border); background: rgba(255,255,255,.85); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
/* ==============================
   HEADER & FOOTER LOGOS
   ============================== */

.brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  flex: 0 0 auto;

  line-height: 0;
  text-decoration: none;
}

.brand-logo {
  display: block;

  width: auto;
  max-width: 100%;

  object-fit: contain;
  object-position: left center;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.brand:hover .brand-logo {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* Header logo */

.header-brand {
  min-width: 160px;
}

.header-logo {
  width: auto;
  height: 43px;
  max-width: 190px;
}

/* Footer logo */

.footer-brand {
  width: fit-content;
  margin-bottom: 17px;
}

.footer-logo {
  width: auto;
  height: 46px;
}
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a { padding: 8px 14px; border-radius: 10px; font-weight: 500; color: var(--ink-600); transition: .2s; }
.nav-links a:hover { color: var(--ink-900); background: var(--ink-100); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink-800); margin: 3px auto; border-radius: 2px; transition: .25s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-links, .nav-actions .sign { display: none; }
  .nav-toggle { display: block; }
  .nav-links.mobile {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    position: absolute; top: 72px; left: 0; right: 0; padding: 16px 20px 22px;
    background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md);
  }
  .nav-links.mobile a { padding: 12px 14px; }
  .nav-links.mobile .btn { margin-top: 8px; }
}

/* ============================== HERO ============================== */
.hero { position: relative; padding: 60px 0 40px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(18,183,106,.10), transparent 70%),
    radial-gradient(48% 48% at 8% 6%, rgba(253,176,34,.10), transparent 70%);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600;
  color: var(--ink-700); background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 8px 7px 16px; box-shadow: var(--shadow-sm);
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber-400); box-shadow: 0 0 0 4px rgba(253,176,34,.2); }
.hero-badge .tag { background: var(--amber-400); color: #6b3e00; font-weight: 800; font-size: 11px; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; }
.hero h1 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(40px, 6.2vw, 68px); line-height: 1.02; color: var(--ink-900); margin: 22px 0 0;
}
.hero h1 .pill {
  display: inline-flex; align-items: center; gap: 12px; margin: 8px 0;
  background: linear-gradient(180deg, #fff6e6, #fdecc8);
  border: 1px solid #f7d98a; color: var(--amber-600);
  padding: 4px 20px 8px; border-radius: 16px; box-shadow: 0 8px 24px -10px rgba(247,144,9,.5);
}
.hero h1 .pill .ico { width: 40px; height: 40px; border-radius: 11px; background: var(--amber-400); color: #6b3e00; display: grid; place-items: center; }
.hero h1 .muted { color: var(--ink-500); }
.hero-sub { margin-top: 22px; font-size: 18px; color: var(--ink-500); max-width: 460px; text-wrap: pretty; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.chip { font-size: 13px; font-weight: 600; color: var(--ink-700); background: var(--surface); border: 1px solid var(--border); padding: 7px 14px; border-radius: 10px; box-shadow: var(--shadow-sm); }
.hero-cta { display: flex; align-items: center; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.play { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink-700); }
.play .pbtn { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: .2s; }
.play:hover .pbtn { transform: scale(1.06); color: var(--green-600); }
.hero-trust { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.avatars { display: flex; }
.avatars span {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: #fff; border: 2px solid var(--bg); margin-left: -10px;
}
.avatars span:first-child { margin-left: 0; }
.stars { color: var(--amber-400); letter-spacing: 2px; }
.hero-trust small { color: var(--ink-500); font-size: 13.5px; }
.hero-trust small b { color: var(--ink-800); }

.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: flex; gap: 12px; align-items: center; box-shadow: var(--shadow-sm); }
.stat .si { width: 40px; height: 40px; border-radius: 11px; background: var(--green-50); color: var(--green-600); display: grid; place-items: center; flex-shrink: 0; }
.stat .amber { background: var(--amber-100); color: var(--amber-600); }
.stat h3 { font-size: 22px; font-weight: 800; color: var(--ink-900); font-family: var(--font-display); line-height: 1; }
.stat p { font-size: 12.5px; color: var(--ink-500); margin-top: 3px; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) { .hero-stats { grid-template-columns: 1fr 1fr; gap: 12px; } .stat { padding: 13px; } }

/* ===================== HERO LIVE DASHBOARD WIDGET ===================== */
.hero-visual { position: relative; }
.hv-float {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--ink-800); box-shadow: var(--shadow-md);
  animation: floaty 5s ease-in-out infinite;
}
.hv-float .ci { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: #fff; }
.hv-wa { top: -14px; left: 6%; }
.hv-ig { top: 30px; right: -6px; animation-delay: .8s; }
.hv-tg { bottom: -14px; left: 12%; animation-delay: 1.6s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.dash {
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.dash-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--ink-50); }
.dash-bar .dots { display: flex; gap: 6px; }
.dash-bar .dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.dash-bar .dots i:nth-child(1){ background:#ff5f57;} .dash-bar .dots i:nth-child(2){ background:#febc2e;} .dash-bar .dots i:nth-child(3){ background:#28c840;}
.dash-bar .title { font-size: 12.5px; font-weight: 600; color: var(--ink-500); display: flex; align-items: center; gap: 7px; }
.dash-bar .title::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); }
.dash-body { display: grid; grid-template-columns: 1.15fr 0.95fr; }
.inbox { border-right: 1px solid var(--border); }
.inbox-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 8px; }
.inbox-head h4 { font-size: 14px; font-weight: 800; color: var(--ink-900); }
.live-pill { font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--green-700); background: var(--green-50); border: 1px solid var(--green-100); padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.live-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--green-500); animation: blink 1.4s infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.25;} }
.conv { display: flex; gap: 11px; padding: 11px 16px; border-top: 1px solid var(--ink-100); transition: background .2s; }
.conv:hover { background: var(--ink-50); }
.conv.new { animation: convIn .5s ease; }
@keyframes convIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.conv .ava { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; }
.conv .cbody { flex: 1; min-width: 0; }
.conv .crow { display: flex; justify-content: space-between; align-items: center; }
.conv .cname { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.conv .ctime { font-size: 10.5px; color: var(--ink-400); }
.conv .cmsg { font-size: 12px; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .cchan { font-size: 10.5px; color: var(--ink-400); display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
.conv .cchan::before { content:""; width: 5px; height: 5px; border-radius: 50%; background: var(--green-500); }
.conv .badge { width: 19px; height: 19px; border-radius: 50%; background: var(--green-600); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }

.autopanel { padding: 14px 16px; background: linear-gradient(180deg, #fff, var(--green-50)); }
.autopanel .ah { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.autopanel .ah .ai { width: 30px; height: 30px; border-radius: 9px; background: var(--green-600); color: #fff; display: grid; place-items: center; }
.autopanel .ah b { font-size: 13.5px; color: var(--ink-900); display: block; }
.autopanel .ah span { font-size: 11px; color: var(--ink-500); }
.astep { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(3,152,85,.1); }
.astep .sic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.astep .stxt { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--ink-800); }
.astep .bar { height: 5px; border-radius: 999px; background: var(--ink-200); overflow: hidden; margin-top: 5px; }
.astep .bar i { display: block; height: 100%; width: 0; background: var(--green-500); border-radius: 999px; transition: width 1s ease; }
.astep .chk { color: var(--green-600); opacity: 0; transform: scale(.6); transition: .35s; }
.astep.done .chk { opacity: 1; transform: scale(1); }
.astep.done .bar i { width: 100% !important; }
.aout { margin-top: 12px; background: var(--surface); border: 1px solid var(--green-100); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; box-shadow: var(--shadow-sm); }
.aout .oi { width: 30px; height: 30px; border-radius: 8px; background: var(--green-600); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.aout b { font-size: 13px; color: var(--ink-900); display: block; } .aout span { font-size: 11px; color: var(--ink-500); }

@media (max-width: 560px) { .dash-body { grid-template-columns: 1fr; } .inbox { border-right: none; border-bottom: 1px solid var(--border);} .hv-ig { right: 8px; } }

/* ===================== LOGO MARQUEE ===================== */
.marquee-sec { padding: 30px 0 8px; }
.marquee-lead { text-align: center; color: var(--ink-500); font-size: 14px; font-weight: 600; margin-bottom: 24px; }
.marquee-lead b { color: var(--green-600); }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: scrollx 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scrollx { to { transform: translateX(-50%); } }
.logo-card { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 20px; font-weight: 700; color: var(--ink-600); box-shadow: var(--shadow-sm); white-space: nowrap; }
.logo-card .lm { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: #fff; }

/* ===================== INSIGHT FEATURE LIST ===================== */

.feat-list {
  margin-top: 26px;
  display: grid;
  gap: 12px;
}

.feat-item {
  display: flex;
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.feat-item:hover {
  border-color: var(--green-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.feat-item .fi {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--green-50);
  color: var(--green-600);
}

.feat-item h4 {
  color: var(--ink-900);
  font-size: 15px;
  font-weight: 700;
}

.feat-item p {
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 13.5px;
}

/* ===================== FEATURE TABS ===================== */

.feature-tabs-section {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 10% 15%,
      rgba(18, 183, 106, 0.09),
      transparent 30%
    ),
    radial-gradient(
      circle at 92% 82%,
      rgba(247, 144, 9, 0.07),
      transparent 26%
    );
}

.feature-tabs-section::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    radial-gradient(
      rgba(16, 24, 40, 0.07) 0.8px,
      transparent 0.8px
    );

  background-size: 22px 22px;
  opacity: 0.18;
}

.feature-tabs-section .wrap {
  position: relative;
  z-index: 1;
}

/* Main tab container */

.feature-tabs-shell {
  display: grid;

  grid-template-columns:
    300px
    minmax(0, 1fr);

  min-height: 590px;

  overflow: hidden;

  border:
    1px solid
    rgba(16, 24, 40, 0.08);

  border-radius: 28px;

  background:
    rgba(255, 255, 255, 0.94);

  box-shadow:
    0 28px 70px -34px
    rgba(16, 24, 40, 0.32);

  backdrop-filter: blur(16px);
}

/* Left-side tab navigation */

.feature-tab-nav {
  display: flex;
  flex-direction: column;

  gap: 10px;

  padding: 18px;

  background:
    linear-gradient(
      160deg,
      #0f382c 0%,
      #0b251e 54%,
      #071b16 100%
    );
}

.feature-tab-button {
  width: 100%;
  min-height: 92px;

  display: grid;

  grid-template-columns:
    42px
    minmax(0, 1fr)
    22px;

  align-items: center;

  gap: 12px;

  padding: 15px 14px;

  border:
    1px solid transparent;

  border-radius: 17px;

  color:
    rgba(255, 255, 255, 0.7);

  text-align: left;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.feature-tab-button:hover {
  color: #ffffff;

  background:
    rgba(255, 255, 255, 0.075);

  transform:
    translateX(3px);
}

.feature-tab-button.active {
  color: var(--ink-900);

  border-color:
    rgba(255, 255, 255, 0.75);

  background: #ffffff;

  box-shadow:
    0 18px 32px -20px
    rgba(0, 0, 0, 0.55);

  transform: none;
}

/* Tab number */

.feature-tab-number {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(255, 255, 255, 0.14);

  border-radius: 13px;

  background:
    rgba(255, 255, 255, 0.08);

  color:
    rgba(255, 255, 255, 0.9);

  font-family:
    var(--font-display);

  font-size: 13px;
  font-weight: 800;
}

.feature-tab-button.active
.feature-tab-number {
  border-color:
    var(--green-100);

  background:
    var(--green-50);

  color:
    var(--green-700);
}

/* Tab text */

.feature-tab-label {
  min-width: 0;

  display: flex;
  flex-direction: column;

  line-height: 1.25;
}

.feature-tab-label b {
  font-size: 15px;
  font-weight: 750;
}

.feature-tab-label small {
  margin-top: 5px;

  overflow: hidden;

  color: currentColor;

  font-size: 11px;
  opacity: 0.68;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.feature-tab-arrow {
  display: grid;
  place-items: center;

  opacity: 0.35;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.feature-tab-button.active
.feature-tab-arrow {
  color:
    var(--green-600);

  opacity: 1;

  transform:
    translateX(3px);
}
/* =========================================================
   MODERN VERTICAL AUTO-CHANGING FEATURE TABS
   ========================================================= */

.feature-tabs-shell {
  --feature-tab-duration: 6200ms;

  display: grid;
  grid-template-columns: 275px minmax(0, 1fr);
  align-items: start;
  gap: 22px;

  min-height: 0;
  overflow: visible;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* =========================================================
   SECTION HEADING ABOVE TABS
   ========================================================= */

.feature-tabs-heading {
  max-width: 780px;
  margin: 0 auto 38px;
  text-align: center;
}

.feature-tabs-heading h2 {
  max-width: 780px;
  margin-inline: auto;
}

.feature-tabs-heading p {
  max-width: 700px;
  margin-inline: auto;
}

/* =========================================================
   LEFT-SIDE VERTICAL TAB NAVIGATION
   ========================================================= */

.feature-tab-nav {
  position: relative;

  display: flex;
  flex-direction: column;
  gap: 9px;

  width: 100%;
  height: auto;

  margin: 0;
  padding: 11px;

  overflow: hidden;

  border: 1px solid rgba(16, 24, 40, 0.09);
  border-radius: 21px;

  background:
    radial-gradient(
      circle at 10% 5%,
      rgba(18, 183, 106, 0.09),
      transparent 34%
    ),
    rgba(255, 255, 255, 0.94);

  box-shadow:
    0 22px 50px -36px rgba(16, 24, 40, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(16px);
}

/* Different accent for every tab */

.feature-tab-button:nth-child(1) {
  --tab-accent: #12b76a;
  --tab-accent-rgb: 18, 183, 106;
}

.feature-tab-button:nth-child(2) {
  --tab-accent: #0ba88f;
  --tab-accent-rgb: 11, 168, 143;
}

.feature-tab-button:nth-child(3) {
  --tab-accent: #f79009;
  --tab-accent-rgb: 247, 144, 9;
}

.feature-tab-button:nth-child(4) {
  --tab-accent: #3b82f6;
  --tab-accent-rgb: 59, 130, 246;
}

/* Individual tab */

.feature-tab-button {
  position: relative;

  width: 100%;
  min-width: 0;
  min-height: 74px;

  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 11px;

  padding: 11px 12px 14px;

  overflow: hidden;

  border: 1px solid transparent;
  border-radius: 15px;

  background: transparent;
  color: var(--ink-500);

  text-align: left;
  cursor: pointer;

  transition:
    color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.feature-tab-button:hover {
  color: var(--ink-800);

  border-color:
    rgba(var(--tab-accent-rgb), 0.16);

  background:
    rgba(var(--tab-accent-rgb), 0.045);

  transform: translateX(3px);
}

.feature-tab-button.active {
  color: var(--ink-900);

  border-color:
    rgba(var(--tab-accent-rgb), 0.32);

  background:
    linear-gradient(
      120deg,
      rgba(var(--tab-accent-rgb), 0.14),
      rgba(var(--tab-accent-rgb), 0.035)
    );

  box-shadow:
    0 15px 28px -22px
    rgba(var(--tab-accent-rgb), 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);

  transform: none;
}

/* Tab icon */

.feature-tab-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: var(--ink-100);
  color: var(--ink-400);

  transition:
    color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.feature-tab-button:hover .feature-tab-icon {
  color: var(--tab-accent);

  background:
    rgba(var(--tab-accent-rgb), 0.1);
}

.feature-tab-button.active .feature-tab-icon {
  color: var(--tab-accent);

  background:
    rgba(var(--tab-accent-rgb), 0.15);

  box-shadow:
    0 10px 20px -15px
    rgba(var(--tab-accent-rgb), 0.95);

  transform: scale(1.04);
}

/* Number and label */

.feature-tab-label {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  line-height: 1.18;
}

.feature-tab-label small {
  margin-bottom: 4px;

  color: var(--ink-400);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;

  transition: color 0.3s ease;
}

.feature-tab-button.active .feature-tab-label small {
  color: var(--tab-accent);
}

.feature-tab-label b {
  max-width: 100%;

  overflow: hidden;

  color: currentColor;

  font-size: 13px;
  font-weight: 760;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Arrow on right */

.feature-tab-button::after {
  content: "→";

  display: grid;
  place-items: center;

  width: 22px;
  height: 22px;

  color: var(--ink-300);

  font-size: 16px;
  font-weight: 800;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.feature-tab-button.active::after {
  color: var(--tab-accent);
  transform: translateX(2px);
}

/* Bottom progress line */

.feature-tab-progress {
  position: absolute;

  right: 12px;
  bottom: 5px;
  left: 12px;

  height: 3px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(var(--tab-accent-rgb), 0.13);

  opacity: 0;

  transition: opacity 0.25s ease;
}

.feature-tab-button.active .feature-tab-progress {
  opacity: 1;
}

.feature-tab-progress i {
  display: block;

  width: 100%;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--tab-accent),
      rgba(var(--tab-accent-rgb), 0.55)
    );

  box-shadow:
    0 0 10px
    rgba(var(--tab-accent-rgb), 0.4);

  transform: scaleX(0);
  transform-origin: left center;
}

.feature-tab-button.active.is-progressing
.feature-tab-progress i {
  animation:
    featureTabProgress
    var(--feature-tab-duration)
    linear
    forwards;
}

@keyframes featureTabProgress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* Old unused tab elements */

.feature-tab-number,
.feature-tab-arrow {
  display: none;
}

/* =========================================================
   RIGHT-SIDE TAB CONTENT
   ========================================================= */

.feature-tab-stage {
  min-width: 0;
  min-height: 0;

  padding: 30px;

  overflow: hidden;

  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 23px;

  background:
    radial-gradient(
      circle at 94% 6%,
      rgba(18, 183, 106, 0.08),
      transparent 30%
    ),
    rgba(255, 255, 255, 0.94);

  box-shadow:
    0 25px 60px -40px
    rgba(16, 24, 40, 0.46);

  backdrop-filter: blur(15px);
}

/*
 * Purani CSS mein min-height 510px tha,
 * jiski wajah se extra blank space aa sakti thi.
 */

.feature-panel-grid {
  min-height: 0;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(315px, 0.88fr);

  align-items: center;
  gap: 30px;
}

.feature-tab-panel {
  min-height: 0;
}

.feature-tab-panel[hidden] {
  display: none;
}

.feature-tab-panel.tab-enter {
  animation:
    featurePanelEnter
    0.48s
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

@keyframes featurePanelEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Content adjustments to prevent unnecessary height */

.feature-panel-copy h3 {
  font-size:
    clamp(28px, 3vw, 39px);
}

.feature-panel-copy > p {
  margin-top: 14px;
}

.feature-point-list {
  margin-top: 21px;
  gap: 8px;
}

.feature-point-list li {
  min-height: 48px;
  padding: 10px;
}

.feature-demo {
  min-height: 370px;
}

/* =========================================================
   MEDIUM DESKTOP
   ========================================================= */

@media (max-width: 1080px) {
  .feature-tabs-shell {
    grid-template-columns:
      250px minmax(0, 1fr);

    gap: 18px;
  }

  .feature-tab-stage {
    padding: 26px;
  }

  .feature-panel-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(285px, 0.85fr);

    gap: 23px;
  }

  .feature-tab-button {
    grid-template-columns:
      38px minmax(0, 1fr) 20px;

    gap: 9px;

    padding-inline: 10px;
  }

  .feature-tab-icon {
    width: 38px;
    height: 38px;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .feature-tabs-shell {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 15px;
  }

  .feature-tab-nav {
    gap: 7px;
    padding: 9px;
  }

  .feature-tab-button {
    min-height: 67px;

    grid-template-columns:
      35px minmax(0, 1fr);

    padding:
      9px 9px 13px;
  }

  .feature-tab-button::after {
    display: none;
  }

  .feature-tab-icon {
    width: 35px;
    height: 35px;
  }

  .feature-tab-label b {
    font-size: 11.5px;
  }

  .feature-tab-stage {
    padding: 23px;
  }

  .feature-panel-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .feature-demo {
    min-height: 350px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {
  .feature-tabs-heading {
    margin-bottom: 28px;
  }

  .feature-tabs-shell {
    grid-template-columns: 1fr;
    gap: 17px;
  }

  /*
   * Mobile par vertical tab list hi rahegi,
   * lekin 2-column compact layout mein,
   * taake zyada height aur blank space na bane.
   */

  .feature-tab-nav {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 8px;

    width: 100%;

    overflow: visible;

    border-radius: 18px;
  }

  .feature-tab-button {
    min-width: 0;
    min-height: 68px;

    grid-template-columns:
      34px minmax(0, 1fr);

    padding:
      9px 9px 13px;

    scroll-snap-align: initial;
  }

  .feature-tab-button:hover {
    transform: none;
  }

  .feature-tab-icon {
    width: 34px;
    height: 34px;

    border-radius: 10px;
  }

  .feature-tab-label small {
    font-size: 8.5px;
  }

  .feature-tab-label b {
    font-size: 11px;
    white-space: normal;
  }

  .feature-tab-stage {
    padding:
      23px 17px;

    border-radius: 20px;
  }

  .feature-panel-grid {
    gap: 21px;
  }

  .feature-panel-copy h3 {
    font-size:
      clamp(27px, 8.5vw, 34px);
  }

  .feature-panel-copy > p {
    font-size: 14px;
  }

  .feature-demo {
    min-height: 340px;
  }
}

/* Very small screens */

@media (max-width: 420px) {
  .feature-tab-nav {
    grid-template-columns: 1fr;
  }

  .feature-tab-button {
    min-height: 64px;
  }

  .feature-tab-label b {
    white-space: nowrap;
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .feature-tab-button.active.is-progressing
  .feature-tab-progress i {
    animation: none !important;
    transform: scaleX(1);
  }

  .feature-tab-panel.tab-enter {
    animation: none !important;
  }
}

/* Right-side content */

.feature-tab-stage {
  min-width: 0;

  padding: 38px;
}

.feature-tab-panel[hidden] {
  display: none;
}

.feature-tab-panel.tab-enter {
  animation:
    featureTabIn
    0.5s
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

@keyframes featureTabIn {
  from {
    opacity: 0;

    transform:
      translateY(14px);

    filter:
      blur(4px);
  }

  to {
    opacity: 1;

    transform: none;

    filter:
      blur(0);
  }
}

.feature-panel-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(330px, 0.92fr);

  align-items: center;

  gap: 38px;

  min-height: 510px;
}

/* Number and category */

.feature-panel-meta {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-bottom: 18px;
}

.feature-panel-meta span,
.feature-panel-meta b {
  min-height: 31px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 0.035em;

  text-transform: uppercase;
}

.feature-panel-meta span {
  min-width: 43px;

  padding: 0 11px;

  background:
    var(--ink-900);

  color: #ffffff;
}

.feature-panel-meta b {
  padding: 0 13px;

  border:
    1px solid
    var(--green-100);

  background:
    var(--green-50);

  color:
    var(--green-700);
}

/* Main feature title */

.feature-panel-copy h3 {
  max-width: 620px;

  color:
    var(--ink-900);

  font-family:
    var(--font-display);

  font-size:
    clamp(29px, 3.4vw, 42px);

  font-weight: 800;

  letter-spacing:
    -0.035em;

  line-height: 1.08;

  text-wrap: balance;
}

.feature-panel-copy > p {
  max-width: 610px;

  margin-top: 17px;

  color:
    var(--ink-500);

  font-size: 15.5px;

  line-height: 1.75;

  text-wrap: pretty;
}

/* Feature bullet list */

.feature-point-list {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;

  margin-top: 25px;
}

.feature-point-list li {
  min-height: 52px;

  display: flex;
  align-items: flex-start;

  gap: 10px;

  padding: 12px;

  border:
    1px solid
    var(--border);

  border-radius: 13px;

  background:
    var(--ink-50);
}

.feature-point-list li > span {
  width: 25px;
  height: 25px;

  flex: 0 0 25px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  background:
    var(--green-100);

  color:
    var(--green-700);
}

.feature-point-list li b {
  color:
    var(--ink-700);

  font-size: 12.5px;
  font-weight: 650;

  line-height: 1.42;
}

/* Shared right-side demo */

.feature-demo {
  position: relative;

  min-height: 410px;

  overflow: hidden;

  border:
    1px solid
    rgba(18, 183, 106, 0.17);

  border-radius: 23px;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(18, 183, 106, 0.16),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #f9fffc,
      #effaf5
    );

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.9),
    0 24px 48px -30px
    rgba(3, 152, 85, 0.45);
}

.feature-demo::after {
  content: "";

  position: absolute;

  width: 210px;
  height: 210px;

  right: -85px;
  bottom: -100px;

  border-radius: 50%;

  background:
    rgba(247, 144, 9, 0.09);
}

/* Demo header */

.feature-demo-head {
  position: relative;
  z-index: 2;

  min-height: 62px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  padding: 0 18px;

  border-bottom:
    1px solid
    rgba(16, 24, 40, 0.07);

  background:
    rgba(255, 255, 255, 0.76);

  backdrop-filter:
    blur(10px);
}

.feature-demo-head >
div:not(.demo-head-icon) {
  min-width: 0;

  display: flex;
  flex: 1;
  flex-direction: column;
}

.feature-demo-head small {
  color:
    var(--ink-400);

  font-size: 9px;
}

.feature-demo-head b {
  overflow: hidden;

  color:
    var(--ink-900);

  font-size: 13px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-head-icon {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background:
    var(--green-50);

  color:
    var(--green-700);
}

.demo-status {
  padding: 5px 9px;

  border-radius: 999px;

  background:
    var(--green-50);

  color:
    var(--green-700);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.04em;

  text-transform: uppercase;
}

/* Shared demo footer */

.demo-footer {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin:
    0 18px 18px;

  padding: 12px 13px;

  border:
    1px solid
    var(--green-100);

  border-radius: 13px;

  background:
    rgba(236, 253, 243, 0.9);
}

.demo-footer span {
  display: flex;
  align-items: center;

  gap: 6px;

  color:
    var(--green-700);

  font-size: 10px;
  font-weight: 800;
}

.demo-footer b {
  color:
    var(--ink-700);

  font-size: 10px;
}

.live-dot i {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
    var(--green-500);

  box-shadow:
    0 0 0 4px
    rgba(18, 183, 106, 0.12);
}

/* Why us visual */

.workflow-list {
  position: relative;
  z-index: 2;

  padding:
    24px 22px 17px;
}

.workflow-row {
  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    22px;

  align-items: center;

  gap: 11px;

  padding: 12px;

  border:
    1px solid
    var(--border);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.92);

  box-shadow:
    var(--shadow-sm);
}

.workflow-row.active {
  border-color:
    var(--green-200);
}

.workflow-row > span,
.flow-node > span,
.integration-grid >
div > span {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background:
    var(--green-50);

  color:
    var(--green-700);
}

.workflow-row div,
.flow-node div {
  min-width: 0;
}

.workflow-row b,
.flow-node b {
  display: block;

  overflow: hidden;

  color:
    var(--ink-800);

  font-size: 12px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-row small,
.flow-node small {
  display: block;

  margin-top: 2px;

  color:
    var(--ink-400);

  font-size: 10px;
}

.workflow-row > i {
  width: 22px;
  height: 22px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    var(--green-100);

  color:
    var(--green-700);
}

.workflow-list > u {
  display: block;

  width: 2px;
  height: 15px;

  margin-left: 30px;

  background:
    var(--green-200);

  text-decoration: none;
}

.workspace-stats {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 8px;

  padding:
    0 22px 22px;
}

.workspace-stats > div {
  padding: 12px 9px;

  border:
    1px solid
    rgba(16, 24, 40, 0.07);

  border-radius: 13px;

  background:
    rgba(255, 255, 255, 0.82);

  text-align: center;
}

.workspace-stats span {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  margin:
    0 auto 7px;

  border-radius: 9px;

  background:
    var(--green-50);

  color:
    var(--green-700);
}

.workspace-stats b,
.workspace-stats small {
  display: block;
}

.workspace-stats b {
  color:
    var(--ink-900);

  font-size: 14px;
}

.workspace-stats small {
  margin-top: 2px;

  color:
    var(--ink-400);

  font-size: 9px;
}

/* Campaign visual */

.demo-metrics {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 8px;

  padding:
    20px 18px 14px;
}

.demo-metrics > div {
  padding: 12px;

  border:
    1px solid
    var(--border);

  border-radius: 13px;

  background:
    rgba(255, 255, 255, 0.86);
}

.demo-metrics small,
.demo-metrics b,
.demo-metrics em {
  display: block;
}

.demo-metrics small {
  color:
    var(--ink-400);

  font-size: 9px;
}

.demo-metrics b {
  margin-top: 3px;

  color:
    var(--ink-900);

  font-size: 15px;
}

.demo-metrics em {
  margin-top: 2px;

  color:
    var(--green-600);

  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.demo-progress-list {
  position: relative;
  z-index: 2;

  display: grid;

  gap: 12px;

  padding:
    7px 20px 18px;
}

.demo-progress-list >
div > span {
  display: flex;
  justify-content: space-between;

  margin-bottom: 6px;

  color:
    var(--ink-600);

  font-size: 10px;
}

.demo-progress-list em {
  font-style: normal;
  font-weight: 800;
}

.demo-progress-list i {
  display: block;

  height: 8px;

  overflow: hidden;

  border-radius: 999px;

  background:
    var(--ink-100);
}

.demo-progress-list u {
  display: block;

  width:
    var(--progress);

  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--green-500),
      var(--green-400)
    );

  text-decoration: none;

  transform-origin: left;

  animation:
    demoBar
    0.8s
    ease
    both;
}

@keyframes demoBar {
  from {
    transform:
      scaleX(0);
  }

  to {
    transform:
      scaleX(1);
  }
}

/* Automation visual */

.flow-canvas {
  position: relative;
  z-index: 2;

  min-height: 285px;

  padding:
    24px 22px;
}

.flow-node {
  position: relative;
  z-index: 2;

  width: 80%;

  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr);

  align-items: center;

  gap: 10px;

  margin: 0 auto;

  padding: 11px;

  border:
    1px solid
    var(--border);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.95);

  box-shadow:
    var(--shadow-sm);
}

.flow-node.blue {
  border-color:
    #bfdbfe;
}

.flow-node.blue > span {
  background:
    #eff6ff;

  color:
    #3b82f6;
}

.flow-node.amber > span {
  background:
    var(--amber-100);

  color:
    var(--amber-600);
}

.flow-link {
  display: block;

  width: 2px;
  height: 25px;

  margin: 0 auto;

  background:
    var(--green-200);
}

.flow-link.split {
  height: 35px;
}

.flow-link.split::before,
.flow-link.split::after {
  content: "";

  position: absolute;

  width: 76px;
  height: 2px;

  margin-top: 33px;

  background:
    var(--green-200);
}

.flow-link.split::before {
  transform:
    translateX(-76px);
}

.flow-branches {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;

  margin-top: 4px;
}

.flow-branches .flow-node {
  width: 100%;
}

/* AI and integrations visual */

.demo-chat {
  position: relative;
  z-index: 2;

  display: grid;

  gap: 10px;

  padding:
    23px 19px 17px;
}

.demo-chat p {
  max-width: 88%;

  padding: 11px 12px;

  border-radius: 14px;

  font-size: 10px;

  line-height: 1.5;
}

.customer-message {
  justify-self: end;

  border-bottom-right-radius:
    5px !important;

  background:
    var(--green-600);

  color: #ffffff;
}

.ai-message {
  display: flex;
  align-items: flex-start;

  gap: 8px;

  border:
    1px solid
    var(--border);

  border-bottom-left-radius:
    5px !important;

  background:
    rgba(255, 255, 255, 0.92);

  color:
    var(--ink-600);
}

.ai-message > span {
  width: 27px;
  height: 27px;

  flex: 0 0 27px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  background:
    var(--green-50);

  color:
    var(--green-700);
}

.integration-grid {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 9px;

  padding:
    0 19px 19px;
}

.integration-grid > div {
  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr);

  column-gap: 9px;

  align-items: center;

  padding: 11px;

  border:
    1px solid
    var(--border);

  border-radius: 13px;

  background:
    rgba(255, 255, 255, 0.88);
}

.integration-grid >
div > span {
  grid-row: 1 / 3;

  width: 34px;
  height: 34px;

  border-radius: 10px;
}

.integration-grid b,
.integration-grid small {
  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-grid b {
  color:
    var(--ink-800);

  font-size: 10px;
}

.integration-grid small {
  color:
    var(--ink-400);

  font-size: 8.5px;
}

/* Tablet */

@media (max-width: 1060px) {
  .feature-panel-grid {
    grid-template-columns:
      1fr;

    gap: 28px;
  }

  .feature-demo {
    min-height: 380px;
  }
}

@media (max-width: 900px) {
  .feature-tabs-shell {
    grid-template-columns:
      1fr;

    min-height: 0;
  }

  .feature-tab-nav {
    flex-direction: row;

    overflow-x: auto;

    padding: 12px;

    scrollbar-width: thin;
  }

  .feature-tab-button {
    min-width: 220px;
    min-height: 78px;
  }

  .feature-tab-button:hover {
    transform:
      translateY(-2px);
  }

  .feature-tab-stage {
    padding: 32px;
  }

  .feature-panel-grid {
    min-height: 0;
  }
}

/* Mobile */

@media (max-width: 640px) {
  .feature-tabs-shell {
    border-radius: 20px;
  }

  .feature-tab-button {
    min-width: 194px;

    grid-template-columns:
      36px
      minmax(0, 1fr)
      18px;

    gap: 9px;

    padding: 12px;
  }

  .feature-tab-number {
    width: 36px;
    height: 36px;

    border-radius: 11px;
  }

  .feature-tab-stage {
    padding:
      24px 18px 20px;
  }

  .feature-panel-copy h3 {
    font-size:
      clamp(
        27px,
        9vw,
        35px
      );
  }

  .feature-panel-copy > p {
    font-size: 14.5px;
  }

  .feature-point-list {
    grid-template-columns:
      1fr;
  }

  .feature-demo {
    min-height: 355px;

    border-radius: 18px;
  }

  .demo-metrics {
    grid-template-columns:
      1fr 1fr;
  }

  .demo-metrics >
  div:last-child {
    grid-column:
      1 / -1;
  }

  .flow-node {
    width: 92%;
  }

  .flow-branches {
    grid-template-columns:
      1fr;

    margin-top: 15px;
  }

  .flow-link.split::before,
  .flow-link.split::after {
    display: none;
  }
}

@media (max-width: 430px) {
  .workspace-stats,
  .integration-grid {
    grid-template-columns:
      1fr;
  }

  .workflow-list,
  .workspace-stats,
  .integration-grid {
    padding-inline: 14px;
  }

  .demo-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Accessibility */

@media (
  prefers-reduced-motion:
  reduce
) {
  .feature-tab-panel.tab-enter,
  .demo-progress-list u {
    animation:
      none !important;
  }
}

/* =========================================================
   CAMPAIGN ANALYTICS — FINAL CLEAN CANVAS VERSION
   ========================================================= */

.ca-section {
  position: relative;
  isolation: isolate;
  overflow: visible;

  background:
    radial-gradient(
      circle at 5% 15%,
      rgba(18, 183, 106, 0.09),
      transparent 28%
    ),
    radial-gradient(
      circle at 95% 82%,
      rgba(59, 130, 246, 0.06),
      transparent 27%
    ),
    #f8faf9;
}

.ca-section::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: -1;

  pointer-events: none;

  background-image:
    radial-gradient(
      rgba(16, 24, 40, 0.06) 0.7px,
      transparent 0.7px
    );

  background-size: 24px 24px;
  opacity: 0.13;
}

.ca-wrap {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 1220px;
}

/* =========================================================
   SECTION HEADING
   ========================================================= */

.ca-heading {
  max-width: 780px;
  margin: 0 auto 42px;

  text-align: center;
}

.ca-heading .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;
}

.ca-heading h2 {
  max-width: 780px;
  margin-inline: auto;
}

.ca-heading p {
  max-width: 680px;
  margin-inline: auto;
}

/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.ca-layout {
  display: grid;

  grid-template-columns:
    310px
    minmax(0, 1fr);

  align-items: start;
  gap: 28px;

  width: 100%;
}

/* =========================================================
   LEFT INTRO CONTENT
   ========================================================= */

.ca-intro {
  position: sticky;
  top: 105px;

  align-self: start;
  min-width: 0;
}

.ca-intro-badge {
  display: grid;

  grid-template-columns:
    40px
    minmax(0, 1fr)
    8px;

  align-items: center;
  gap: 10px;

  width: 100%;
  padding: 11px;

  border:
    1px solid
    rgba(16, 24, 40, 0.08);

  border-radius: 16px;

  background:
    rgba(255, 255, 255, 0.9);

  box-shadow:
    0 20px 42px -34px
    rgba(16, 24, 40, 0.55);

  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
}

.ca-intro-badge > span {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      var(--green-50),
      var(--green-100)
    );

  color:
    var(--green-700);
}

.ca-intro-badge > div {
  min-width: 0;
}

.ca-intro-badge small {
  display: block;

  color:
    var(--ink-400);

  font-size: 8px;
  font-weight: 750;

  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.ca-intro-badge b {
  display: block;

  overflow: hidden;

  margin-top: 4px;

  color:
    var(--ink-800);

  font-size: 11px;
  font-weight: 760;

  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca-intro-badge > i {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
    var(--green-500);

  box-shadow:
    0 0 0 5px
    rgba(18, 183, 106, 0.12);

  animation:
    caLivePulse 1.8s ease
    infinite;
}

@keyframes caLivePulse {
  50% {
    box-shadow:
      0 0 0 9px
      rgba(18, 183, 106, 0);
  }
}

.ca-intro > h3 {
  margin: 23px 0 0;

  color:
    var(--ink-900);

  font-family:
    var(--font-display);

  font-size:
    clamp(29px, 3vw, 39px);

  font-weight: 820;

  line-height: 1.08;
  letter-spacing: -0.04em;
}

.ca-intro > p {
  margin-top: 14px;

  color:
    var(--ink-500);

  font-size: 13.5px;
  line-height: 1.7;
}

.ca-benefit-list {
  display: grid;
  gap: 9px;

  margin-top: 23px;
}

.ca-benefit-list article {
  display: grid;

  grid-template-columns:
    40px
    minmax(0, 1fr);

  align-items: start;
  gap: 11px;

  min-width: 0;
  padding: 12px;

  border:
    1px solid
    rgba(16, 24, 40, 0.075);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.84);

  box-shadow:
    0 15px 30px -29px
    rgba(16, 24, 40, 0.48);
}

.ca-benefit-list article > span {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background:
    var(--green-50);

  color:
    var(--green-700);
}

.ca-benefit-list article > span.blue {
  background: #eff6ff;
  color: #3b82f6;
}

.ca-benefit-list article > span.amber {
  background: #fff7e8;
  color: #f79009;
}

.ca-benefit-list article > div {
  min-width: 0;
}

.ca-benefit-list b {
  display: block;

  color:
    var(--ink-800);

  font-size: 11px;
  font-weight: 750;

  line-height: 1.35;
}

.ca-benefit-list p {
  margin-top: 4px;

  color:
    var(--ink-400);

  font-size: 9.5px;
  line-height: 1.5;
}

.ca-sync-note {
  display: grid;

  grid-template-columns:
    32px
    minmax(0, 1fr);

  align-items: center;
  gap: 9px;

  margin-top: 17px;
  padding: 10px;

  border:
    1px dashed
    rgba(18, 183, 106, 0.27);

  border-radius: 13px;

  background:
    rgba(236, 253, 243, 0.55);
}

.ca-sync-note > span {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  background:
    var(--green-100);

  color:
    var(--green-700);
}

.ca-sync-note p {
  color:
    var(--ink-500);

  font-size: 9px;
  line-height: 1.45;
}

/* =========================================================
   DASHBOARD CONTAINER
   ========================================================= */

.ca-dashboard {
  min-width: 0;
  width: 100%;

  padding: 22px;

  overflow: visible;

  border:
    1px solid
    rgba(16, 24, 40, 0.08);

  border-radius: 26px;

  background:
    rgba(255, 255, 255, 0.95);

  box-shadow:
    0 36px 78px -50px
    rgba(16, 24, 40, 0.58);

  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

.ca-dashboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  padding-bottom: 18px;

  border-bottom:
    1px solid
    rgba(16, 24, 40, 0.07);
}

.ca-dashboard-head > div:first-child {
  min-width: 0;
}

.ca-live-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;
}

.ca-live-status {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  min-height: 24px;
  padding: 0 9px;

  border-radius: 999px;

  background:
    var(--green-50);

  color:
    var(--green-700);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.ca-live-status i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--green-500);
}

.ca-live-row > small {
  color:
    var(--ink-400);

  font-size: 9px;
  font-weight: 650;
}

.ca-dashboard-head h3 {
  margin-top: 10px;

  color:
    var(--ink-900);

  font-family:
    var(--font-display);

  font-size: 21px;
  font-weight: 800;

  line-height: 1.2;
  letter-spacing: -0.035em;
}

.ca-dashboard-head p {
  margin-top: 4px;

  color:
    var(--ink-400);

  font-size: 10px;
  line-height: 1.5;
}

/* =========================================================
   PERIOD BUTTONS
   ========================================================= */

.ca-period-tabs {
  display: inline-flex;
  flex: 0 0 auto;

  padding: 4px;

  border:
    1px solid
    rgba(16, 24, 40, 0.07);

  border-radius: 12px;

  background:
    var(--ink-50);
}

.ca-period-tabs button {
  min-width: 44px;
  height: 32px;

  padding: 0 10px;

  border: 0;
  border-radius: 9px;

  background: transparent;

  color:
    var(--ink-400);

  font-family: inherit;
  font-size: 10px;
  font-weight: 750;

  cursor: pointer;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.ca-period-tabs button:hover {
  color:
    var(--ink-700);
}

.ca-period-tabs button.active {
  background: #ffffff;

  color:
    var(--green-700);

  box-shadow:
    0 9px 20px -15px
    rgba(16, 24, 40, 0.72);
}

.ca-period-tabs button:focus-visible {
  outline:
    3px solid
    rgba(18, 183, 106, 0.2);

  outline-offset: 2px;
}

/* =========================================================
   KPI CARDS
   ========================================================= */

.ca-kpi-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 10px;

  margin-top: 17px;
}

.ca-kpi-card {
  min-width: 0;
  padding: 13px;

  border:
    1px solid
    rgba(18, 183, 106, 0.13);

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      rgba(236, 253, 243, 0.4)
    );

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.ca-kpi-card:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(18, 183, 106, 0.26);

  box-shadow:
    0 17px 34px -27px
    rgba(16, 24, 40, 0.45);
}

.ca-kpi-card.blue {
  border-color:
    rgba(59, 130, 246, 0.14);

  background:
    linear-gradient(
      145deg,
      #ffffff,
      rgba(239, 246, 255, 0.55)
    );
}

.ca-kpi-card.amber {
  border-color:
    rgba(247, 144, 9, 0.15);

  background:
    linear-gradient(
      145deg,
      #ffffff,
      rgba(255, 247, 232, 0.58)
    );
}

.ca-kpi-card.purple {
  border-color:
    rgba(139, 92, 246, 0.14);

  background:
    linear-gradient(
      145deg,
      #ffffff,
      rgba(245, 243, 255, 0.58)
    );
}

.ca-kpi-top {
  display: flex;
  align-items: center;

  gap: 7px;
}

.ca-kpi-top > span {
  width: 28px;
  height: 28px;

  flex: 0 0 28px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  background:
    var(--green-50);

  color:
    var(--green-700);
}

.ca-kpi-card.blue .ca-kpi-top > span {
  background: #eff6ff;
  color: #3b82f6;
}

.ca-kpi-card.amber .ca-kpi-top > span {
  background: #fff7e8;
  color: #f79009;
}

.ca-kpi-card.purple .ca-kpi-top > span {
  background: #f5f3ff;
  color: #8b5cf6;
}

.ca-kpi-top small {
  overflow: hidden;

  color:
    var(--ink-400);

  font-size: 8.5px;
  font-weight: 700;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca-kpi-card strong {
  display: block;

  margin-top: 12px;

  color:
    var(--ink-900);

  font-family:
    var(--font-display);

  font-size: 23px;
  font-weight: 800;

  line-height: 1;
  letter-spacing: -0.04em;
}

.ca-kpi-card em {
  display: block;

  margin-top: 8px;

  color:
    var(--ink-400);

  font-size: 7.5px;
  font-style: normal;
  line-height: 1.4;
}

.ca-kpi-card em span {
  margin-right: 3px;

  color:
    var(--green-700);

  font-weight: 800;
}

/* =========================================================
   CHART + OUTCOME LAYOUT
   ========================================================= */

.ca-main-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    225px;

  align-items: stretch;
  gap: 11px;

  margin-top: 11px;
}

.ca-chart-card,
.ca-outcome-card,
.ca-recent-card {
  min-width: 0;

  border:
    1px solid
    rgba(16, 24, 40, 0.07);

  border-radius: 18px;

  background:
    rgba(250, 252, 251, 0.9);
}

.ca-chart-card,
.ca-outcome-card {
  padding: 16px;
}

.ca-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 14px;
}

.ca-card-heading > div:first-child {
  min-width: 0;
}

.ca-card-heading h4 {
  color:
    var(--ink-800);

  font-size: 12px;
  font-weight: 750;
}

.ca-card-heading p {
  margin-top: 3px;

  color:
    var(--ink-400);

  font-size: 8.5px;
  line-height: 1.45;
}

/* =========================================================
   CHART LEGEND
   ========================================================= */

.ca-chart-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;

  gap: 9px;
}

.ca-chart-legend span {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  color:
    var(--ink-400);

  font-size: 8px;
  font-weight: 650;

  white-space: nowrap;
}

.ca-chart-legend i,
.ca-chart-tooltip i {
  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  border-radius: 3px;
}

.ca-chart-legend i.delivery,
.ca-chart-tooltip i.delivery {
  background: #12b76a;
}

.ca-chart-legend i.read,
.ca-chart-tooltip i.read {
  background: #3b82f6;
}

.ca-chart-legend i.reply,
.ca-chart-tooltip i.reply {
  background: #f79009;
}

/* =========================================================
   CANVAS
   ========================================================= */

.ca-canvas-wrap {
  position: relative;

  width: 100%;
  height: 300px;

  margin-top: 10px;

  overflow: visible;
}

#campaignCanvas {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;

  cursor: crosshair;
  touch-action: pan-y;
}

/* =========================================================
   CHART TOOLTIP
   ========================================================= */

.ca-chart-tooltip {
  position: absolute;
  top: 12px;
  z-index: 20;

  min-width: 135px;

  padding: 10px;

  border:
    1px solid
    rgba(16, 24, 40, 0.09);

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.97);

  box-shadow:
    0 16px 34px -21px
    rgba(16, 24, 40, 0.58);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transform:
    translateX(-50%)
    translateY(-5px);

  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}

.ca-chart-tooltip.show {
  opacity: 1;
  visibility: visible;

  transform:
    translateX(-50%)
    translateY(0);
}

.ca-chart-tooltip > b {
  display: block;

  margin-bottom: 7px;

  color:
    var(--ink-800);

  font-size: 10px;
  font-weight: 800;
}

.ca-chart-tooltip > span {
  display: grid;

  grid-template-columns:
    8px
    minmax(0, 1fr)
    auto;

  align-items: center;
  gap: 6px;

  margin-top: 5px;

  color:
    var(--ink-400);

  font-size: 8.5px;
}

.ca-chart-tooltip strong {
  color:
    var(--ink-700);

  font-size: 8.5px;
  font-weight: 750;
}

/* =========================================================
   DONUT
   ========================================================= */

.ca-donut-wrap {
  display: grid;
  place-items: center;

  margin-top: 20px;
}

.ca-donut {
  position: relative;

  width: 128px;
  height: 128px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    conic-gradient(
      #12b76a 0deg 140.4deg,
      #3b82f6 140.4deg 298.8deg,
      #f79009 298.8deg 360deg
    );

  box-shadow:
    0 20px 38px -27px
    rgba(16, 24, 40, 0.5);

  transition:
    background 0.35s ease,
    transform 0.3s ease;
}

.ca-donut:hover {
  transform:
    scale(1.025);
}

.ca-donut::before {
  content: "";

  position: absolute;

  width: 78px;
  height: 78px;

  border-radius: 50%;

  background: #ffffff;

  box-shadow:
    inset 0 0 0 1px
    rgba(16, 24, 40, 0.045);
}

.ca-donut > div {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.ca-donut strong {
  color:
    var(--ink-900);

  font-family:
    var(--font-display);

  font-size: 20px;
  font-weight: 800;

  line-height: 1;
}

.ca-donut small {
  margin-top: 4px;

  color:
    var(--ink-400);

  font-size: 7.5px;
  font-weight: 650;
}

/* =========================================================
   OUTCOME LIST
   ========================================================= */

.ca-outcome-list {
  display: grid;
  gap: 9px;

  margin-top: 19px;
}

.ca-outcome-list > div {
  display: grid;

  grid-template-columns:
    8px
    minmax(0, 1fr)
    auto;

  align-items: center;
  gap: 8px;
}

.ca-outcome-list > div > span {
  width: 8px;
  height: 8px;

  border-radius: 3px;
}

.ca-outcome-list span.converted {
  background: #12b76a;
}

.ca-outcome-list span.engaged {
  background: #3b82f6;
}

.ca-outcome-list span.pending {
  background: #f79009;
}

.ca-outcome-list p {
  color:
    var(--ink-500);

  font-size: 9px;
}

.ca-outcome-list b {
  color:
    var(--ink-800);

  font-size: 9px;
  font-weight: 750;
}

/* =========================================================
   BEST TIME BOX
   ========================================================= */

.ca-best-time {
  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr);

  align-items: center;
  gap: 9px;

  margin-top: 17px;
  padding: 9px;

  border:
    1px solid
    rgba(247, 144, 9, 0.15);

  border-radius: 12px;

  background:
    rgba(255, 247, 232, 0.74);
}

.ca-best-time > span {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background: #fff1d6;
  color: #f79009;
}

.ca-best-time small {
  display: block;

  color:
    var(--ink-400);

  font-size: 7px;
}

.ca-best-time b {
  display: block;

  margin-top: 3px;

  color:
    var(--ink-700);

  font-size: 8.5px;
  font-weight: 750;

  line-height: 1.35;
}

/* =========================================================
   RECENT CAMPAIGNS
   ========================================================= */

.ca-recent-card {
  margin-top: 11px;
  padding: 16px;
}

.ca-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding-bottom: 12px;

  border-bottom:
    1px solid
    rgba(16, 24, 40, 0.06);
}

.ca-recent-head h4 {
  color:
    var(--ink-800);

  font-size: 12px;
  font-weight: 750;
}

.ca-recent-head p {
  margin-top: 3px;

  color:
    var(--ink-400);

  font-size: 8.5px;
}

.ca-recent-head a {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  color:
    var(--green-700);

  font-size: 8.5px;
  font-weight: 750;

  text-decoration: none;
  white-space: nowrap;
}

.ca-recent-head a:hover {
  color:
    var(--green-600);
}

.ca-campaign-list {
  display: grid;
}

.ca-campaign-list article {
  display: grid;

  grid-template-columns:
    36px
    minmax(140px, 1fr)
    minmax(70px, auto)
    minmax(65px, auto)
    auto;

  align-items: center;
  gap: 10px;

  min-width: 0;
  padding: 10px 0;

  border-bottom:
    1px solid
    rgba(16, 24, 40, 0.055);
}

.ca-campaign-list article:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.ca-campaign-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 10px;
}

.ca-campaign-icon.green {
  background: var(--green-50);
  color: var(--green-700);
}

.ca-campaign-icon.blue {
  background: #eff6ff;
  color: #3b82f6;
}

.ca-campaign-icon.amber {
  background: #fff7e8;
  color: #f79009;
}

.ca-campaign-name {
  min-width: 0;
}

.ca-campaign-name b {
  display: block;

  overflow: hidden;

  color:
    var(--ink-800);

  font-size: 10px;
  font-weight: 750;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca-campaign-name small,
.ca-campaign-stat small {
  display: block;

  margin-top: 3px;

  color:
    var(--ink-400);

  font-size: 7.5px;
}

.ca-campaign-stat b {
  display: block;

  color:
    var(--ink-700);

  font-size: 9px;
  font-weight: 750;
}

.ca-campaign-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 24px;
  padding: 0 8px;

  border-radius: 8px;

  font-size: 7.5px;
  font-weight: 800;

  white-space: nowrap;
}

.ca-campaign-status.active {
  background: var(--green-50);
  color: var(--green-700);
}

.ca-campaign-status.completed {
  background: #eff6ff;
  color: #2563eb;
}

.ca-campaign-status.scheduled {
  background: #fff7e8;
  color: #d97706;
}

/* =========================================================
   RESPONSIVE — LAPTOP
   ========================================================= */

@media (max-width: 1100px) {
  .ca-layout {
    grid-template-columns:
      280px
      minmax(0, 1fr);

    gap: 20px;
  }

  .ca-dashboard {
    padding: 18px;
  }

  .ca-main-grid {
    grid-template-columns:
      minmax(0, 1fr)
      205px;
  }

  .ca-kpi-card strong {
    font-size: 20px;
  }

  .ca-canvas-wrap {
    height: 285px;
  }
}

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 900px) {
  .ca-heading {
    margin-bottom: 34px;
  }

  .ca-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .ca-intro {
    position: relative;
    top: auto;

    max-width: 740px;
    margin-inline: auto;
  }

  .ca-intro > h3,
  .ca-intro > p {
    max-width: 650px;
  }

  .ca-benefit-list {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .ca-benefit-list article {
    grid-template-columns: 1fr;
  }

  .ca-benefit-list article > span {
    margin-bottom: 2px;
  }

  .ca-sync-note {
    max-width: 480px;
  }

  .ca-main-grid {
    grid-template-columns:
      minmax(0, 1fr)
      220px;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 700px) {
  .ca-heading {
    margin-bottom: 28px;
  }

  .ca-dashboard {
    padding: 15px;

    border-radius: 21px;
  }

  .ca-dashboard-head {
    flex-direction: column;
  }

  .ca-period-tabs {
    width: 100%;
  }

  .ca-period-tabs button {
    flex: 1;
  }

  .ca-kpi-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .ca-main-grid {
    grid-template-columns: 1fr;
  }

  .ca-benefit-list {
    grid-template-columns: 1fr;
  }

  .ca-benefit-list article {
    grid-template-columns:
      40px
      minmax(0, 1fr);
  }

  .ca-card-heading {
    flex-direction: column;
  }

  .ca-chart-legend {
    justify-content: flex-start;
  }

  .ca-canvas-wrap {
    height: 270px;
  }

  .ca-campaign-list article {
    grid-template-columns:
      36px
      minmax(0, 1fr)
      auto;
  }

  .ca-campaign-stat {
    display: none;
  }
}

/* =========================================================
   RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
  .ca-heading h2 {
    font-size:
      clamp(31px, 9.5vw, 41px);
  }

  .ca-dashboard {
    padding: 13px;
  }

  .ca-kpi-card {
    padding: 11px;
  }

  .ca-kpi-card strong {
    font-size: 18px;
  }

  .ca-chart-card,
  .ca-outcome-card,
  .ca-recent-card {
    padding: 13px;
  }

  .ca-canvas-wrap {
    height: 240px;
  }

  .ca-recent-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ca-campaign-list article {
    gap: 8px;
  }

  .ca-campaign-status {
    font-size: 7px;
  }
}

@media (max-width: 370px) {
  .ca-kpi-grid {
    grid-template-columns: 1fr;
  }

  .ca-canvas-wrap {
    height: 225px;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .ca-intro-badge > i {
    animation: none;
  }

  .ca-kpi-card,
  .ca-donut,
  .ca-period-tabs button {
    transition: none;
  }
}

/* ===================== TESTIMONIALS CAROUSEL ===================== */

.testimonials-section {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 8% 20%,
      rgba(18, 183, 106, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 75%,
      rgba(59, 130, 246, 0.055),
      transparent 25%
    );
}

.testimonials-section::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    radial-gradient(
      rgba(16, 24, 40, 0.06) 0.7px,
      transparent 0.7px
    );

  background-size: 23px 23px;
  opacity: 0.16;
}

.testimonials-wrap {
  position: relative;
  z-index: 1;

  max-width: 1180px;
}

/* =====================
   HEADING AND CONTROLS
   ===================== */

.testimonials-header {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: end;
  gap: 40px;

  margin-bottom: 35px;
}

.testimonials-heading {
  max-width: 720px;
  margin: 0;

  text-align: left;
}

.testimonials-heading h2 {
  max-width: 720px;
}

.testimonials-heading p {
  max-width: 650px;
}

.testimonials-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 15px;
}

/* Customer rating */

.testimonials-rating {
  display: flex;
  align-items: center;

  gap: 13px;

  padding: 11px 14px;

  border:
    1px solid
    rgba(16, 24, 40, 0.08);

  border-radius: 15px;

  background:
    rgba(255, 255, 255, 0.86);

  box-shadow:
    0 15px 32px -26px
    rgba(16, 24, 40, 0.5);

  backdrop-filter: blur(12px);
}

.testimonials-rating > strong {
  color: var(--ink-900);

  font-family: var(--font-display);
  font-size: 29px;
  font-weight: 800;

  letter-spacing: -0.045em;
  line-height: 1;
}

.testimonials-rating > div {
  display: flex;
  flex-direction: column;
}

.testimonials-rating .stars {
  color: var(--amber-400);

  font-size: 13px;
  letter-spacing: 2px;
}

.testimonials-rating small {
  margin-top: 2px;

  color: var(--ink-400);

  font-size: 10px;
  font-weight: 600;
}

/* Navigation */

.tst-nav {
  display: flex;
  align-items: center;

  gap: 9px;
  margin: 0;
}

.tst-nav-label {
  padding-inline: 5px;

  color: var(--ink-400);

  font-size: 11px;
  font-weight: 650;
}

.tst-nav button {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(16, 24, 40, 0.1);

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.9);

  color: var(--ink-700);

  box-shadow:
    0 12px 25px -20px
    rgba(16, 24, 40, 0.7);

  cursor: pointer;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.tst-nav button:hover {
  border-color: var(--green-600);

  background: var(--green-600);
  color: #ffffff;

  box-shadow:
    0 14px 25px -18px
    rgba(3, 152, 85, 0.8);

  transform: translateY(-2px);
}

.tst-nav button:active {
  transform: translateY(0);
}

/* =====================
   CAROUSEL CONTAINER
   ===================== */

.tst-carousel-shell {
  position: relative;

  width: 100%;

  overflow: hidden;

  border:
    1px solid
    rgba(16, 24, 40, 0.075);

  border-radius: 25px;

  background:
    rgba(255, 255, 255, 0.58);

  box-shadow:
    0 26px 60px -42px
    rgba(16, 24, 40, 0.5);

  backdrop-filter: blur(15px);
}

/*
 * Soft edges carousel ko abruptly cut
 * hone se bachate hain.
 */

.tst-carousel-shell::before,
.tst-carousel-shell::after {
  content: "";

  position: absolute;
  z-index: 3;

  top: 0;
  bottom: 0;

  width: 45px;

  pointer-events: none;
}

.tst-carousel-shell::before {
  left: 0;

  background:
    linear-gradient(
      90deg,
      rgba(247, 250, 249, 0.96),
      transparent
    );
}

.tst-carousel-shell::after {
  right: 0;

  background:
    linear-gradient(
      -90deg,
      rgba(247, 250, 249, 0.96),
      transparent
    );
}

.tst-viewport {
  width: 100%;

  overflow: hidden;

  padding: 22px 24px;

  cursor: grab;

  -webkit-user-select: none;
  user-select: none;

  touch-action: pan-y;
}

.tst-viewport.dragging {
  cursor: grabbing;
}

.tst-track {
  display: flex;
  align-items: stretch;

  gap: 18px;

  width: max-content;

  will-change: transform;
}

/* =====================
   TESTIMONIAL CARD
   ===================== */

.tst-card {
  position: relative;

  width: 500px;
  min-height: 300px;

  flex: 0 0 500px;

  display: flex;
  flex-direction: column;

  padding: 25px;

  overflow: hidden;

  border:
    1px solid
    rgba(16, 24, 40, 0.085);

  border-radius: 19px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(250, 253, 252, 0.95)
    );

  box-shadow:
    0 20px 40px -32px
    rgba(16, 24, 40, 0.56);

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.tst-card::before {
  content: "";

  position: absolute;

  width: 145px;
  height: 145px;

  top: -85px;
  right: -65px;

  border-radius: 50%;

  background:
    rgba(18, 183, 106, 0.075);

  pointer-events: none;
}

.tst-card:hover {
  border-color:
    rgba(18, 183, 106, 0.25);

  box-shadow:
    0 25px 48px -31px
    rgba(3, 152, 85, 0.35);

  transform: translateY(-3px);
}

/* Card top row */

.tst-card-top {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;
}

.tst-verified {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  color: var(--green-700);

  font-size: 10px;
  font-weight: 750;
}

.tst-verified i {
  width: 23px;
  height: 23px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  background: var(--green-50);
  color: var(--green-700);

  font-style: normal;
}

.tst-card .stars {
  color: var(--amber-400);

  font-size: 13px;
  letter-spacing: 2px;

  white-space: nowrap;
}

/* Quote */

.tst-quote-mark {
  position: relative;
  z-index: 1;

  height: 37px;

  margin-top: 22px;

  color: var(--green-200);

  font-family: Georgia, serif;
  font-size: 65px;
  font-weight: 700;

  line-height: 0.82;
}

.tst-card blockquote {
  position: relative;
  z-index: 1;

  flex: 1;

  margin: 6px 0 22px;

  color: var(--ink-700);

  font-size: 15px;
  font-weight: 500;

  line-height: 1.7;

  text-wrap: pretty;
}

.tst-divider {
  position: relative;
  z-index: 1;

  width: 100%;
  height: 1px;

  margin-bottom: 18px;

  background:
    linear-gradient(
      90deg,
      var(--border),
      transparent
    );
}

/* Customer details */

.tst-card .who {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    46px
    minmax(0, 1fr)
    34px;

  align-items: center;

  gap: 12px;
}

.tst-card .who .ava {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border:
    3px solid
    rgba(255, 255, 255, 0.88);

  border-radius: 14px;

  background:
    var(--avatar-color);

  color: #ffffff;

  box-shadow:
    0 11px 20px -15px
    var(--avatar-color);

  font-size: 13px;
  font-weight: 800;

  letter-spacing: 0.02em;
}

.tst-person {
  min-width: 0;
}

.tst-person b {
  display: block;

  overflow: hidden;

  color: var(--ink-900);

  font-size: 13.5px;
  font-weight: 750;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.tst-person span {
  display: block;

  overflow: hidden;

  margin-top: 3px;

  color: var(--ink-400);

  font-size: 11px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.tst-brand-mark {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border:
    1px solid
    var(--green-100);

  border-radius: 11px;

  background: var(--green-50);
  color: var(--green-700);

  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
}

/* =====================
   RESPONSIVE
   ===================== */

@media (max-width: 1120px) {
  .tst-card {
    width: 440px;
    flex-basis: 440px;
  }
}

@media (max-width: 900px) {
  .testimonials-header {
    grid-template-columns: 1fr;
    align-items: start;

    gap: 24px;
  }

  .testimonials-heading {
    max-width: 720px;
  }

  .testimonials-meta {
    width: 100%;

    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
  }

  .tst-card {
    width: 410px;
    flex-basis: 410px;
  }
}

@media (max-width: 640px) {
  .testimonials-header {
    margin-bottom: 27px;
  }

  .testimonials-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .testimonials-rating {
    width: 100%;
  }

  .tst-nav {
    width: 100%;
    justify-content: flex-start;
  }

  .tst-carousel-shell {
    border-radius: 20px;
  }

  .tst-carousel-shell::before,
  .tst-carousel-shell::after {
    width: 18px;
  }

  .tst-viewport {
    padding: 16px;
  }

  .tst-track {
    gap: 13px;
  }

  .tst-card {
    width: calc(100vw - 72px);
    min-height: 290px;

    flex-basis: calc(100vw - 72px);

    padding: 21px;

    border-radius: 17px;
  }

  .tst-card blockquote {
    font-size: 14px;
  }
}

@media (max-width: 390px) {
  .tst-nav-label {
    display: none;
  }

  .tst-card {
    width: calc(100vw - 64px);
    flex-basis: calc(100vw - 64px);
  }
}



/* ===================== PRICING ===================== */
.price-toggle { display: inline-flex; align-items: center; gap: 4px; background: var(--ink-100); border-radius: 12px; padding: 4px; margin: 0 auto 40px; }
.price-toggle button { font-size: 14px; font-weight: 600; color: var(--ink-500); padding: 9px 20px; border-radius: 9px; transition: .2s; }
.price-toggle button.active { background: var(--surface); color: var(--ink-900); box-shadow: var(--shadow-sm); }
.price-toggle .save { font-size: 11px; color: var(--green-700); background: var(--green-50); padding: 2px 7px; border-radius: 999px; margin-left: 6px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.pcard { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 28px; box-shadow: var(--shadow-sm); transition: .28s; }
.pcard:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.pcard.pop { border: 2px solid var(--green-500); box-shadow: var(--shadow-green); position: relative; transform: translateY(-8px); }
.pcard.pop .poptag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--green-600); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .05em; padding: 5px 14px; border-radius: 999px; }
.pcard h3 { font-size: 18px; font-weight: 800; color: var(--ink-900); font-family: var(--font-display); }
.pcard .pdesc { font-size: 13px; color: var(--ink-500); margin-top: 6px; min-height: 38px; }
.pcard .amt { display: flex; align-items: baseline; gap: 4px; margin: 16px 0 4px; }
.pcard .amt .cur { font-size: 20px; font-weight: 700; color: var(--ink-900); }
.pcard .amt .num { font-size: 44px; font-weight: 800; color: var(--ink-900); font-family: var(--font-display); letter-spacing: -.02em; }
.pcard .amt .per { font-size: 14px; color: var(--ink-500); }
.pcard .trial { font-size: 12px; font-weight: 700; color: var(--green-700); background: var(--green-50); display: inline-block; padding: 4px 11px; border-radius: 8px; margin-bottom: 18px; }
.pcard .btn { width: 100%; margin-bottom: 22px; }
.pcard .plist { display: grid; gap: 11px; }
.pcard .plist li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-600); }
.pcard .plist li .ck { color: var(--green-600); flex-shrink: 0; margin-top: 1px; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } .pcard.pop { transform: none; } }

/* ===================== CTA BANNER ===================== */
.cta-banner { background: linear-gradient(135deg, var(--green-700), var(--green-500)); border-radius: 24px; padding: 52px 40px; text-align: center; color: #fff; box-shadow: var(--shadow-green); position: relative; overflow: hidden; }
.cta-banner::before { content:""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 100% 0%, rgba(255,255,255,.16), transparent 60%); }
.cta-banner h2 { font-family: var(--font-display); font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -.02em; position: relative; }
.cta-banner p { margin: 12px auto 26px; max-width: 520px; opacity: .92; position: relative; }
.cta-banner .btn-primary { background: #fff; color: var(--green-700); box-shadow: 0 12px 30px -8px rgba(0,0,0,.3); position: relative; }
.cta-banner .btn-primary:hover { background: var(--ink-50); }
.cta-mini {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 12px 22px;

  width: 100%;
  margin: 0 0 22px;

  font-size: 13px;
  opacity: 0.94;
}
.cta-mini span { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 640px) {
  .cta-mini {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 21px;
  }

  .cta-mini span {
    justify-content: center;
  }
}

/* ===================== MODERN FAQ SECTION ===================== */

.faq-section {
  position: relative;

  overflow: visible;

  background:
    radial-gradient(
      circle at 8% 16%,
      rgba(18, 183, 106, 0.08),
      transparent 27%
    ),
    radial-gradient(
      circle at 95% 85%,
      rgba(59, 130, 246, 0.045),
      transparent 25%
    );
}

.faq-section::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    radial-gradient(
      rgba(16, 24, 40, 0.065) 0.7px,
      transparent 0.7px
    );

  background-size: 23px 23px;
  opacity: 0.15;
}

.faq-wrap {
  position: relative;
  z-index: 1;

  max-width: 1160px;
}

/* Main FAQ layout */

.faq-shell {
  display: grid;

  grid-template-columns:
    350px
    minmax(0, 1fr);

  align-items: start;

  gap: 48px;
}

/* =====================
   LEFT INTRODUCTION
   ===================== */

.faq-intro {
  position: sticky;
  top: 105px;

  align-self: start;
}

.faq-heading {
  max-width: none;
  margin: 0;

  text-align: left;
}

.faq-heading h2 {
  max-width: 350px;

  margin-inline: 0;

  font-size:
    clamp(35px, 4vw, 50px);

  line-height: 1.06;
  letter-spacing: -0.04em;
}

.faq-heading p {
  max-width: 335px;

  margin-inline: 0;

  font-size: 15px;
  line-height: 1.7;
}

/* Topic tags */

.faq-topics {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin-top: 23px;
}

.faq-topics span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 30px;

  padding: 0 12px;

  border:
    1px solid
    rgba(18, 183, 106, 0.17);

  border-radius: 999px;

  background:
    rgba(236, 253, 243, 0.72);

  color:
    var(--green-700);

  font-size: 10px;
  font-weight: 750;

  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Small support information card */

.faq-intro-card {
  display: grid;

  grid-template-columns:
    43px
    minmax(0, 1fr);

  align-items: start;

  gap: 13px;

  margin-top: 25px;
  padding: 17px;

  border:
    1px solid
    rgba(16, 24, 40, 0.08);

  border-radius: 17px;

  background:
    rgba(255, 255, 255, 0.82);

  box-shadow:
    0 20px 42px -32px
    rgba(16, 24, 40, 0.46);

  backdrop-filter: blur(13px);
}

.faq-intro-icon {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      var(--green-50),
      var(--green-100)
    );

  color:
    var(--green-700);
}

.faq-intro-card b {
  display: block;

  color:
    var(--ink-900);

  font-size: 13px;
  font-weight: 750;
}

.faq-intro-card p {
  margin-top: 4px;

  color:
    var(--ink-500);

  font-size: 11.5px;
  line-height: 1.55;
}

/* =====================
   FAQ ACCORDION
   ===================== */

.faq-grid {
  display: grid;

  gap: 12px;

  width: 100%;
  max-width: none;

  margin: 0;
}

.faq-item {
  position: relative;

  overflow: hidden;

  border:
    1px solid
    rgba(16, 24, 40, 0.085);

  border-radius: 18px;

  background:
    rgba(255, 255, 255, 0.93);

  box-shadow:
    0 16px 36px -32px
    rgba(16, 24, 40, 0.55);

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease,
    background 0.3s ease;
}

/* Active green accent */

.faq-item::before {
  content: "";

  position: absolute;

  top: 14px;
  bottom: 14px;
  left: 0;

  width: 4px;

  border-radius:
    0 999px 999px 0;

  background:
    linear-gradient(
      180deg,
      var(--green-400),
      var(--green-700)
    );

  opacity: 0;

  transform:
    scaleY(0.3);

  transform-origin:
    center;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.faq-item:hover {
  border-color:
    rgba(18, 183, 106, 0.2);

  transform:
    translateY(-2px);

  box-shadow:
    0 22px 42px -31px
    rgba(16, 24, 40, 0.35);
}

.faq-item.open {
  border-color:
    rgba(18, 183, 106, 0.3);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.98),
      rgba(246, 254, 250, 0.98)
    );

  box-shadow:
    0 24px 48px -32px
    rgba(3, 152, 85, 0.36);

  transform: none;
}

.faq-item.open::before {
  opacity: 1;

  transform:
    scaleY(1);
}

/* FAQ question button */

.faq-q {
  width: 100%;
  min-height: 76px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding:
    15px 17px 15px 18px;

  border: 0;

  background: transparent;

  color:
    var(--ink-900);

  text-align: left;

  cursor: pointer;
}

.faq-q-main {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 14px;
}

/* FAQ number */

.faq-q .fnum {
  width: 43px;
  height: 43px;

  flex: 0 0 43px;

  display: grid;
  place-items: center;

  margin: 0;

  border:
    1px solid
    var(--border);

  border-radius: 13px;

  background:
    var(--ink-50);

  color:
    var(--ink-400);

  font-family:
    var(--font-display);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.04em;

  transition:
    color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.faq-item.open .fnum {
  border-color:
    var(--green-100);

  background:
    var(--green-50);

  color:
    var(--green-700);

  box-shadow:
    0 10px 20px -16px
    rgba(3, 152, 85, 0.8);
}

/* Question text */

.faq-q-text {
  display: block;

  color:
    var(--ink-800);

  font-size: 15px;
  font-weight: 680;

  line-height: 1.45;

  transition:
    color 0.3s ease;
}

.faq-item.open .faq-q-text {
  color:
    var(--ink-900);
}

/* Plus icon */

.faq-q .ficon {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(18, 183, 106, 0.15);

  border-radius: 12px;

  background:
    var(--green-50);

  color:
    var(--green-700);

  box-shadow:
    0 9px 20px -17px
    rgba(3, 152, 85, 0.85);

  transition:
    color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.35s
      cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-q:hover .ficon {
  border-color:
    var(--green-200);

  background:
    var(--green-100);
}

.faq-item.open .faq-q .ficon {
  border-color:
    var(--green-600);

  background:
    var(--green-600);

  color: #ffffff;

  transform:
    rotate(45deg);
}

/* Answer animation */

.faq-a {
  max-height: 0;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(236, 253, 243, 0.48),
      transparent 78%
    );

  transition:
    max-height 0.42s
    cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-answer-inner {
  display: grid;

  grid-template-columns:
    29px
    minmax(0, 1fr);

  align-items: start;

  gap: 11px;

  padding:
    0 70px 22px 75px;

  opacity: 0;

  transform:
    translateY(-7px);

  transition:
    opacity 0.3s ease,
    transform 0.35s ease;
}

.faq-item.open
.faq-answer-inner {
  opacity: 1;

  transform:
    translateY(0);
}

.faq-answer-icon {
  width: 29px;
  height: 29px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  background:
    var(--green-100);

  color:
    var(--green-700);
}

.faq-answer-inner p {
  padding: 2px 0 0;
  margin: 0;

  color:
    var(--ink-500);

  font-size: 14px;
  line-height: 1.7;
}

/* Keyboard accessibility */

.faq-q:focus-visible {
  outline:
    3px solid
    rgba(18, 183, 106, 0.2);

  outline-offset: -3px;
}

/* =====================
   TABLET
   ===================== */

@media (max-width: 900px) {
  .faq-shell {
    grid-template-columns:
      1fr;

    gap: 33px;
  }

  .faq-intro {
    position: relative;
    top: auto;

    max-width: 700px;

    margin-inline: auto;

    text-align: center;
  }

  .faq-heading {
    text-align: center;
  }

  .faq-heading h2,
  .faq-heading p {
    max-width: 700px;

    margin-inline: auto;
  }

  .faq-topics {
    justify-content: center;
  }

  .faq-intro-card {
    max-width: 470px;

    margin-inline: auto;

    text-align: left;
  }

  .faq-grid {
    max-width: 760px;

    margin-inline: auto;
  }
}

/* =====================
   MOBILE
   ===================== */

@media (max-width: 640px) {
  .faq-shell {
    gap: 27px;
  }

  .faq-heading h2 {
    font-size:
      clamp(32px, 10vw, 42px);
  }

  .faq-intro-card {
    padding: 14px;
  }

  .faq-item {
    border-radius: 15px;
  }

  .faq-q {
    min-height: 69px;

    gap: 12px;

    padding:
      12px 13px;
  }

  .faq-q-main {
    gap: 10px;
  }

  .faq-q .fnum {
    width: 36px;
    height: 36px;

    flex-basis: 36px;

    border-radius: 10px;

    font-size: 10px;
  }

  .faq-q-text {
    font-size: 13.5px;
  }

  .faq-q .ficon {
    width: 34px;
    height: 34px;

    flex-basis: 34px;

    border-radius: 10px;
  }

  .faq-answer-inner {
    grid-template-columns:
      26px
      minmax(0, 1fr);

    gap: 9px;

    padding:
      0 15px 18px 59px;
  }

  .faq-answer-icon {
    width: 26px;
    height: 26px;
  }

  .faq-answer-inner p {
    font-size: 13.5px;
  }
}


/* ===================== FOOTER ===================== */
.footer { background: var(--ink-900); color: var(--ink-300); padding: 60px 0 26px; margin-top: 20px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.footer .footer-brand {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 17px;
}
.footer p.ftext { font-size: 14px; color: var(--ink-400); max-width: 300px; }
.footer h5 { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px; }
.footer .fcol a { display: block; font-size: 14px; color: var(--ink-400); padding: 5px 0; transition: .2s; }
.footer .fcol a:hover { color: var(--green-400); }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a { width: 38px; height: 38px; border-radius: 10px; background: var(--ink-800); display: grid; place-items: center; color: var(--ink-300); transition: .2s; }
.footer-social a:hover { background: var(--green-600); color: #fff; }
.footer-bottom { border-top: 1px solid var(--ink-800); margin-top: 40px; padding-top: 22px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-500); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
/* ==============================
   RESPONSIVE BRAND LOGOS
   ============================== */

@media (max-width: 900px) {
  .header-brand {
    min-width: 145px;
  }

  .header-logo {
    height: 39px;
    max-width: 170px;
  }
}

@media (max-width: 640px) {
  .header-brand {
    min-width: 128px;
  }

  .header-logo {
    height: 35px;
    max-width: 150px;
  }

  .footer-logo {
    height: 42px;
    max-width: 185px;
  }
}

@media (max-width: 360px) {
  .header-brand {
    min-width: 115px;
  }

  .header-logo {
    height: 32px;
    max-width: 136px;
  }
}
/* Extra-small screen hardening */
.mobile-nav-cta { display: none !important; }
.hero-grid > *,
.an-grid > * {
  min-width: 0;
}

@media (max-width: 900px) {
  .nav-links.mobile .mobile-nav-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    color: #fff;
    background: var(--green-600);
    box-shadow: var(--shadow-green);
  }
}

@media (max-width: 360px) {
  .nav-actions > .btn-primary { display: none; }
  .nav-inner { gap: 10px; }
  .nav-actions { margin-left: auto; }
  .hero { padding-top: 42px; }
  .hero-badge {
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;
    border-radius: 16px;
    padding: 9px 11px;
    line-height: 1.35;
  }
  .hero-badge .tag { margin-left: auto; }
  .hero h1 { font-size: 37px; }
  .hero h1 .pill { padding-inline: 12px; gap: 8px; }
  .hero h1 .pill .ico { width: 36px; height: 36px; }
  .hv-float { font-size: 11px; padding: 7px 10px; }
  .hv-ig { right: 4px; }
  .an-card { padding: 15px; }
  .an-head { align-items: flex-start; gap: 10px; }
  .an-seg button { padding-inline: 8px; }
  .an-kpis { gap: 12px; flex-wrap: wrap; }
  .donut-wrap { align-items: flex-start; gap: 12px; }
  .donut { width: 88px; height: 88px; flex: 0 0 88px; }
  .tst-card {
  width: calc(100vw - 64px);
  flex-basis: calc(100vw - 64px);
}
}

/* =========================================================
   NEW DYNAMIC HERO HEADING
   ========================================================= */

.hero-copy {
  --hero-accent: #12b76a;
  --hero-accent-rgb: 18, 183, 106;
  min-width: 0;
}

/* Hero top badge */

.hero-badge {
  gap: 8px;
  max-width: 100%;
  padding: 6px 7px 6px 10px;

  border-color:
    rgba(var(--hero-accent-rgb), 0.34);

  background:
    rgba(var(--hero-accent-rgb), 0.055);

  color: var(--ink-500);

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.035em;
  white-space: nowrap;

  transition:
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.hero-badge .dot {
  background: var(--hero-accent);

  box-shadow:
    0 0 0 4px
    rgba(var(--hero-accent-rgb), 0.14);

  transition:
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.hero-badge .tag {
  margin-left: 2px;
  padding: 4px 7px;

  border-radius: 5px;

  background: var(--hero-accent);
  color: #ffffff;

  font-size: 10px;

  transition:
    background 0.35s ease;
}

/* Main heading */

.hero h1.hero-dynamic-title {
  margin-top: 18px;

  color: var(--ink-900);

  font-family: var(--font-display);
  font-size: initial;
  font-weight: initial;

  letter-spacing: -0.045em;
  line-height: 0.98;
}

.hero-title-top,
.hero-rotator-line {
  display: block;
}

.hero-title-top {
  font-size:
    clamp(52px, 5.8vw, 76px);

  font-weight: 800;
}

/* Rotating heading holder */

.hero-rotator-line {
  min-height: 76px;
  margin: 7px 0 4px;
}

.hero-rotator {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  max-width: 100%;
  min-height: 62px;

  padding:
    5px 15px 7px 9px;

  overflow: hidden;

  border:
    1px solid
    rgba(var(--hero-accent-rgb), 0.32);

  border-radius: 17px;

  background:
    linear-gradient(
      115deg,
      rgba(var(--hero-accent-rgb), 0.12),
      rgba(var(--hero-accent-rgb), 0.035)
    );

  color: var(--hero-accent);

  box-shadow:
    0 14px 30px -23px
    rgba(var(--hero-accent-rgb), 0.85);

  font-size:
    clamp(34px, 4vw, 52px);

  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;

  transform-origin: left center;

  will-change:
    transform,
    opacity,
    filter;

  transition:
    color 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}

/* Long headings get slightly smaller */

.hero-rotator[data-size="long"] {
  font-size:
    clamp(30px, 3.55vw, 47px);
}

/* Dynamic icon */

.hero-rotator-icon {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: var(--hero-accent);
  color: #ffffff;

  box-shadow:
    0 10px 20px -14px
    rgba(var(--hero-accent-rgb), 0.9);

  transition:
    background 0.35s ease,
    box-shadow 0.35s ease;

  will-change:
    transform,
    opacity;
}

.hero-rotator-text {
  display: flex;
  align-items: baseline;

  min-width: 0;

  white-space: nowrap;
}

.hero-letter {
  display: inline-block;

  will-change:
    transform,
    opacity,
    filter;
}

/* Heading entrance */

.hero-rotator.is-in {
  animation:
    heroPillIn
    0.52s
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

.hero-rotator.is-in
.hero-rotator-icon {
  animation:
    heroIconIn
    0.52s
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

.hero-rotator.is-in
.hero-letter {
  animation:
    heroLetterIn
    0.44s
    cubic-bezier(0.22, 1, 0.36, 1)
    both;

  animation-delay:
    calc(
      70ms +
      (var(--i) * 24ms)
    );
}

/* Current heading exit */

.hero-rotator.is-out {
  animation:
    heroPillOut
    0.38s
    cubic-bezier(0.55, 0, 1, 0.45)
    both;
}

@keyframes heroPillIn {
  from {
    opacity: 0;

    transform:
      translateY(22px)
      scale(0.97);

    filter: blur(10px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);

    filter: blur(0);
  }
}

@keyframes heroPillOut {
  from {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);

    filter: blur(0);
  }

  to {
    opacity: 0;

    transform:
      translateY(-20px)
      scale(0.98);

    filter: blur(9px);
  }
}

@keyframes heroIconIn {
  from {
    opacity: 0;

    transform:
      scale(0.55)
      rotate(-18deg);
  }

  to {
    opacity: 1;

    transform:
      scale(1)
      rotate(0);
  }
}

@keyframes heroLetterIn {
  from {
    opacity: 0;

    transform:
      translateY(24px);

    filter: blur(7px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);

    filter: blur(0);
  }
}

/* Growth platform line */


.hero-sub {
  max-width: 500px;
  margin-top: 18px;

  font-size: 17px;
}

/* Hero feature chips */

.hero-chips {
  gap: 7px;
  margin-top: 18px;
}

.hero-chips .chip {
  padding: 5px 10px;

  border-color:
    rgba(18, 183, 106, 0.18);

  background:
    rgba(18, 183, 106, 0.055);

  font-size: 11px;

  box-shadow: none;
}

/* WhatsApp and Facebook customer circles */

.channel-avatars .wa-avatar {
  background:
    #12b76a !important;
}

.channel-avatars .ms-avatar {
  background:
    #1877f2 !important;
}

/* Right-side floating labels */

.hv-ms {
  top: 30px;
  right: -6px;

  animation-delay: 0.8s;
}

.hv-ai {
  bottom: -14px;
  left: 12%;

  animation-delay: 1.6s;
}

/* Channel dot now uses actual channel color */

.conv .cchan::before {
  background:
    var(--c, var(--green-500));
}

/* Medium desktop */

@media (max-width: 1080px) {
  .hero-rotator[data-size="long"] {
    font-size:
      clamp(27px, 3.3vw, 39px);
  }
}

/* Tablet */

@media (max-width: 980px) {
  .hero-rotator[data-size="long"] {
    font-size:
      clamp(30px, 5.7vw, 47px);
  }
}

/* Mobile */

@media (max-width: 640px) {
  .hero-badge {
    flex-wrap: wrap;

    border-radius: 15px;

    white-space: normal;
  }

  .hero-badge .tag {
    margin-left: auto;
  }

  .hero-title-top {
    font-size:
      clamp(45px, 14vw, 62px);
  }

  .hero-rotator-line {
    min-height: 60px;
    margin: 6px 0;
  }

  .hero-rotator {
    min-height: 52px;

    gap: 7px;

    padding:
      5px 10px 6px 7px;

    border-radius: 14px;

    font-size:
      clamp(25px, 8vw, 36px);
  }

  .hero-rotator[data-size="long"] {
    font-size:
      clamp(21px, 6.5vw, 29px);
  }

  .hero-rotator-icon {
    width: 36px;
    height: 36px;

    flex-basis: 36px;

    border-radius: 10px;
  }



  .hero-sub {
    font-size: 15px;
  }

  .hv-ms {
    right: 8px;
  }
}

/* Extra small mobile */

@media (max-width: 350px) {
  .hero-rotator {
    font-size: 24px;
  }

  .hero-rotator[data-size="long"] {
    font-size: 19px;
  }

  .hero-rotator-icon {
    width: 32px;
    height: 32px;

    flex-basis: 32px;
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .hero-rotator,
  .hero-rotator-icon,
  .hero-letter {
    animation: none !important;

    opacity: 1 !important;

    transform: none !important;

    filter: none !important;
  }
}

/* =========================================================
   FINAL FEATURE SECTION WIDTH + STICKY TABS FIX
   ========================================================= */

/*
 * Section ke andar sticky element ko properly
 * work karwane ke liye overflow visible hona zaroori hai.
 */
.feature-tabs-section {
  overflow: visible;
}

/*
 * Section ko full browser width lene se rokta hai.
 * Content centered aur controlled width mein rahega.
 */
.feature-tabs-section > .wrap {
  max-width: 1220px;
}

/* Section heading tabs ke upar centered rahegi */

.feature-tabs-heading {
  max-width: 780px;
  margin: 0 auto 36px;
  text-align: center;
}

.feature-tabs-heading h2 {
  max-width: 780px;
  margin-inline: auto;
}

.feature-tabs-heading p {
  max-width: 700px;
  margin-inline: auto;
}

/* Main tabs and panel layout */

.feature-tabs-shell {
  width: 100%;
  max-width: 1140px;

  display: grid;
  grid-template-columns:
    245px
    minmax(0, 1fr);

  align-items: start;
  gap: 20px;

  margin-inline: auto;

  overflow: visible;
}

/* =========================================================
   STICKY LEFT-SIDE TABS
   ========================================================= */

.feature-tab-nav {
  position: sticky;
  top: 92px;

  align-self: start;

  width: 100%;
  height: max-content;

  margin: 0;

  /*
   * Tab card ke andar ka design clipped rahega,
   * lekin parent shell overflow visible hai,
   * isliye sticky properly work karega.
   */
  overflow: hidden;
}

/*
 * Left tabs feature section ke end tak sticky rahenge.
 * Section khatam hote hi naturally ruk jayenge.
 */

/* =========================================================
   RIGHT-SIDE CONTENT CARD
   ========================================================= */

.feature-tab-stage {
  min-width: 0;
  min-height: 0;

  padding: 27px 28px;

  border-radius: 22px;
}

/*
 * Copy ko visual ke muqable mein zyada width di gayi hai.
 * Isse long heading kam lines mein properly adjust hogi.
 */
.feature-panel-grid {
  min-height: 0;

  display: grid;
  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(320px, 0.8fr);

  align-items: start;
  gap: 26px;
}

.feature-tab-panel {
  min-height: 0;
}

.feature-tab-panel[hidden] {
  display: none;
}

/* =========================================================
   LONG HEADING SPACING FIX
   ========================================================= */

.feature-panel-copy {
  min-width: 0;
  padding-top: 3px;
}

/*
 * Font size kam nahi ki gayi.
 * Sirf line-height aur available width set ki gayi hai.
 */
.feature-panel-copy h3 {
  width: 100%;
  max-width: none;

  font-size:
    clamp(29px, 3.4vw, 32px);

  line-height: 1.1;
  letter-spacing: -0.045em;

  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.feature-panel-copy > p {
  max-width: 610px;

  margin-top: 14px;

  line-height: 1.65;
}

/* Bullet cards compact but readable */

.feature-point-list {
  margin-top: 20px;
  gap: 9px;
}

.feature-point-list li {
  min-height: 49px;
  padding: 10px 11px;
}

/* Right-side visual unnecessary height nahi lega */

.feature-demo {
  width: 100%;
  min-height: 350px;
  height: auto;
}

/* Why Us visual */

.workflow-list {
  padding-top: 20px;
  padding-bottom: 14px;
}

/* Campaigns visual */

.demo-metrics {
  padding-top: 17px;
}

/* Automation visual */

.flow-canvas {
  min-height: 270px;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* AI integration visual */

.demo-chat {
  padding-top: 19px;
}

/* =========================================================
   MEDIUM DESKTOP
   ========================================================= */

@media (max-width: 1100px) {
  .feature-tabs-shell {
    max-width: 100%;

    grid-template-columns:
      230px
      minmax(0, 1fr);

    gap: 17px;
  }

  .feature-tab-stage {
    padding: 24px;
  }

  .feature-panel-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(290px, 0.82fr);

    gap: 22px;
  }

  .feature-panel-copy h3 {
    line-height: 1.04;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .feature-tabs-shell {
    grid-template-columns:
      215px
      minmax(0, 1fr);

    gap: 15px;
  }

  .feature-tab-nav {
    top: 82px;
  }

  /*
   * Tablet par panel ka content vertically stack hoga,
   * lekin tabs left side par hi rahenge.
   */
  .feature-panel-grid {
    grid-template-columns: 1fr;
    gap: 23px;
  }

  .feature-tab-stage {
    padding: 22px;
  }

  .feature-demo {
    min-height: 335px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {
  .feature-tabs-heading {
    margin-bottom: 28px;
  }

  .feature-tabs-shell {
    grid-template-columns: 1fr;
    gap: 17px;
  }

  /*
   * Mobile par sticky disable hai kyun ke tabs
   * content ke upar aa jate hain.
   */
  .feature-tab-nav {
    position: relative;
    top: auto;

    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    overflow: visible;
  }

  .feature-tab-stage {
    padding: 22px 17px;
  }

  .feature-panel-copy h3 {
    font-size:
      clamp(28px, 8.6vw, 36px);

    line-height: 1.04;
  }

  .feature-panel-copy > p {
    font-size: 14px;
  }

  .feature-demo {
    min-height: 330px;
  }
}

/* Very small mobile */

@media (max-width: 430px) {
  .feature-tab-nav {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   CLEAN BUSINESS MESSAGING HERO
   ========================================================= */

.hero-copy,
.hero-dynamic-title,
.hero-rotator-line,
.hero-rotator,
.hero-rotator-text {
  overflow: visible !important;
}

/* =========================
   Top platform pill
   ========================= */

.hero-platform-pill {
  display: inline-grid;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  max-width: 620px;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid rgba(16, 24, 40, 0.09);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 36px -29px rgba(16, 24, 40, 0.48);
  backdrop-filter: blur(13px);
  box-sizing: border-box;
}

.hero-platform-icon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--green-50), var(--green-100));
  color: var(--green-700);
}

.hero-platform-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.hero-platform-copy small {
  color: var(--ink-400);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.hero-platform-copy b {
  margin-top: 3px;
  color: var(--ink-700);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.3;
  white-space: normal;
}

.hero-platform-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 29px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--green-600);
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* =========================
   Hero heading
   ========================= */

.hero-copy .hero-dynamic-title {
  display: grid;
  gap: 10px;
  width: 100%;
  margin: 22px 0 0;
  padding: 0;
}

.hero-copy .hero-title-top {
  display: block;
  max-width: 620px;
  color: var(--ink-900);
  font-size: clamp(28px, 3.15vw, 45px);
  font-weight: 820;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.hero-copy .hero-rotator-line {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0;
  padding: 0;
}

.hero-copy .hero-rotator {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  padding: 14px 18px;
  box-sizing: border-box;
  border: 1px solid rgba(var(--hero-accent-rgb), 0.28);
  border-radius: 22px;
  background: linear-gradient(
    135deg,
    rgba(var(--hero-accent-rgb), 0.10),
    rgba(var(--hero-accent-rgb), 0.04)
  );
  box-shadow: 0 18px 35px -28px rgba(var(--hero-accent-rgb), 0.55);
}

.hero-copy .hero-rotator-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(var(--hero-accent-rgb), 0.12);
  color: var(--hero-accent);
  flex: 0 0 48px;
}

.hero-copy .hero-rotator-text {
  display: block;
  min-width: 0;
  max-width: 100%;
  color: var(--hero-accent);
  font-size: clamp(30px, 4.2vw, 54px);
  font-weight: 850;
  line-height: 1.06 !important;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.hero-copy .hero-rotator[data-size="long"] .hero-rotator-text {
  font-size: clamp(20px, 2.7vw, 36px) !important;
  letter-spacing: -0.035em;
}

.hero-copy .hero-letter {
  display: inline-block;
  line-height: inherit;
}



/* =========================
   Content spacing
   ========================= */

.hero-copy .hero-sub {
  max-width: 620px;
  margin-top: 20px;
  line-height: 1.7;
}

.hero-copy .hero-cta {
  margin-top: 26px;
}

/* =========================
   Provider card
   ========================= */

.hero-provider-proof {
  position: relative;
  display: grid;
  grid-template-columns: 41px minmax(0, 1fr) 1px auto;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 620px;
  margin-top: 24px;
  padding: 11px 14px 11px 10px;
  border: 1px solid rgba(16, 24, 40, 0.085);
  border-radius: 17px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.96),
    rgba(246, 253, 249, 0.94)
  );
  box-shadow: 0 20px 42px -32px rgba(16, 24, 40, 0.48);
  backdrop-filter: blur(14px);
  box-sizing: border-box;
  overflow: hidden;
}

.hero-provider-proof::before {
  content: "";
  position: absolute;
  top: -48px;
  right: 70px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(18, 183, 106, 0.06);
  pointer-events: none;
}

.provider-status-icon {
  position: relative;
  z-index: 1;
  width: 41px;
  height: 41px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--green-50), var(--green-100));
  color: var(--green-700);
}

.provider-status-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.provider-status-copy small {
  color: var(--ink-400);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.provider-status-copy b {
  margin-top: 4px;
  color: var(--ink-800);
  font-size: 11.5px;
  font-weight: 760;
  line-height: 1.3;
  white-space: normal;
}

.provider-separator {
  position: relative;
  z-index: 1;
  width: 1px;
  height: 34px;
  background: linear-gradient(
    transparent,
    rgba(16, 24, 40, 0.15),
    transparent
  );
}

.provider-meta-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.provider-meta-image {
  display: block;
  max-width: 170px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* =========================
   Mobile
   ========================= */

@media (max-width: 900px) {
  .hero-copy .hero-rotator {
    max-width: 520px;
  }

  .hero-copy .hero-rotator-text {
    font-size: clamp(28px, 4.8vw, 46px);
  }

  .hero-copy .hero-rotator[data-size="long"] .hero-rotator-text {
    font-size: clamp(18px, 2.9vw, 30px) !important;
  }
}

@media (max-width: 700px) {
  .hero-platform-pill {
    grid-template-columns: 33px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .hero-platform-icon {
    width: 33px;
    height: 33px;
  }

  .hero-platform-copy b {
    font-size: 10px;
  }

  .hero-platform-tag {
    font-size: 8px;
    padding-inline: 8px;
  }

  .hero-copy .hero-title-top {
    font-size: clamp(27px, 8vw, 38px);
  }

  .hero-copy .hero-rotator-line,
  .hero-copy .hero-rotator {
    max-width: 100%;
  }

  .hero-copy .hero-rotator {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
  }

  .hero-copy .hero-rotator-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex-basis: 40px;
  }

  .hero-copy .hero-rotator-text {
    font-size: clamp(25px, 6.5vw, 36px);
  }

  .hero-copy .hero-rotator[data-size="long"] .hero-rotator-text {
    font-size: clamp(16px, 4.3vw, 24px) !important;
  }



  .hero-provider-proof {
    width: 100%;
    grid-template-columns: 39px minmax(0, 1fr) 1px auto;
    gap: 9px;
    padding: 10px;
  }

  .provider-status-icon {
    width: 39px;
    height: 39px;
  }

  .provider-status-copy b {
    font-size: 10px;
  }

  .provider-meta-image {
    max-width: 140px;
  }
}

@media (max-width: 520px) {
  .hero-platform-pill {
    grid-template-columns: 33px minmax(0, 1fr);
  }

  .hero-platform-tag {
    grid-column: 1 / -1;
    width: fit-content;
    margin-left: 43px;
    margin-top: 2px;
  }

  .hero-provider-proof {
    grid-template-columns: 39px minmax(0, 1fr);
  }

  .provider-separator {
    display: none;
  }

  .provider-meta-brand {
    grid-column: 1 / -1;
    margin-left: 48px;
    padding-top: 10px;
    border-top: 1px solid rgba(16, 24, 40, 0.07);
  }

  .provider-meta-image {
    max-width: 150px;
  }

  .hero-copy .hero-rotator[data-size="long"] .hero-rotator-text {
    font-size: clamp(15px, 4.7vw, 20px) !important;
  }
}

@media (max-width: 390px) {
  .hero-copy .hero-rotator {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    padding: 11px 12px;
  }

  .hero-copy .hero-rotator-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-basis: 34px;
  }

  .hero-copy .hero-rotator-text {
    font-size: 22px;
  }

  .hero-copy .hero-rotator[data-size="long"] .hero-rotator-text {
    font-size: 14px !important;
  }
}

/* =========================================================
   COMPACT OMNICHANNEL WORKSPACE
   Unique cx-omni-* namespace
   ========================================================= */

.cx-omni-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding: 92px 22px;

  background:
    radial-gradient(
      circle at 84% 35%,
      rgba(18, 183, 106, 0.075),
      transparent 27%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fbf9 100%
    );
}

.cx-omni-section::before {
  content: "";

  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;

  width: min(1180px, calc(100% - 40px));
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(16, 24, 40, 0.09),
      transparent
    );

  transform: translateX(-50%);
}

.cx-omni-section::after {
  content: "";

  position: absolute;
  right: -120px;
  bottom: -180px;
  z-index: -2;

  width: 430px;
  height: 430px;

  border-radius: 50%;

  background:
    rgba(18, 183, 106, 0.06);

  filter: blur(75px);
}

.cx-omni-shell {
  width: 100%;
  max-width: 1180px;

  display: grid;

  grid-template-columns:
    minmax(0, 0.82fr)
    minmax(530px, 1.18fr);

  align-items: center;
  gap: 58px;

  margin-inline: auto;
}

/* =========================================================
   LEFT COPY
   ========================================================= */

.cx-omni-copy {
  min-width: 0;
}

.cx-omni-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  min-height: 31px;

  padding: 0 11px;

  border:
    1px solid
    rgba(18, 183, 106, 0.18);

  border-radius: 999px;

  background:
    rgba(236, 253, 243, 0.78);

  color:
    var(--green-700, #027a48);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.cx-omni-copy h2 {
  max-width: 530px;

  margin: 18px 0 0;

  color:
    var(--ink-900, #101828);

  font-family:
    var(--font-display, inherit);

  font-size:
    clamp(37px, 4.1vw, 53px);

  font-weight: 830;

  line-height: 1.04;
  letter-spacing: -0.047em;
}

.cx-omni-copy h2 span {
  display: block;

  margin-top: 3px;

  color:
    var(--green-600, #039855);
}

.cx-omni-description {
  max-width: 540px;

  margin-top: 18px;

  color:
    var(--ink-500, #667085);

  font-size: 14px;
  line-height: 1.7;
}

.cx-omni-points {
  display: grid;
  gap: 13px;

  margin-top: 25px;
}

.cx-omni-point {
  display: grid;

  grid-template-columns:
    27px
    minmax(0, 1fr);

  align-items: start;
  gap: 10px;
}

.cx-omni-point > span {
  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  margin-top: 1px;

  border-radius: 9px;

  background:
    var(--green-50, #ecfdf3);

  color:
    var(--green-700, #027a48);
}

.cx-omni-point b {
  display: block;

  color:
    var(--ink-800, #1d2939);

  font-size: 12px;
  font-weight: 760;

  line-height: 1.35;
}

.cx-omni-point p {
  max-width: 450px;

  margin-top: 3px;

  color:
    var(--ink-400, #98a2b3);

  font-size: 10px;
  line-height: 1.55;
}

.cx-omni-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 14px;

  margin-top: 27px;
}

.cx-omni-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 44px;

  padding: 0 17px;

  border-radius: 12px;

  background:
    var(--green-600, #039855);

  color: #ffffff;

  box-shadow:
    0 16px 30px -21px
    rgba(3, 152, 85, 0.72);

  font-size: 11px;
  font-weight: 760;

  text-decoration: none;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.cx-omni-primary:hover {
  background:
    var(--green-700, #027a48);

  transform:
    translateY(-2px);

  box-shadow:
    0 20px 35px -20px
    rgba(3, 152, 85, 0.75);
}

.cx-omni-primary svg {
  transition:
    transform 0.25s ease;
}

.cx-omni-primary:hover svg {
  transform:
    translateX(3px);
}

.cx-omni-security {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  color:
    var(--ink-400, #98a2b3);

  font-size: 9px;
  font-weight: 650;
}

/* =========================================================
   BOARD WRAPPER
   ========================================================= */

.cx-omni-visual {
  min-width: 0;
}

.cx-omni-board {
  position: relative;

  width: 100%;

  overflow: hidden;

  border:
    1px solid
    rgba(16, 24, 40, 0.085);

  border-radius: 23px;

  background:
    rgba(255, 255, 255, 0.96);

  box-shadow:
    0 34px 75px -49px
    rgba(16, 24, 40, 0.58);
}

.cx-omni-board::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(18, 183, 106, 0.065),
      transparent 34%
    );
}

/* =========================================================
   BOARD HEADER
   ========================================================= */

.cx-board-head {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding: 15px 17px;

  border-bottom:
    1px solid
    rgba(16, 24, 40, 0.065);

  background:
    rgba(250, 252, 251, 0.78);
}

.cx-board-title {
  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 0;
}

.cx-board-logo {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background:
    var(--green-50, #ecfdf3);

  color:
    var(--green-700, #027a48);
}

.cx-board-title > div {
  min-width: 0;
}

.cx-board-title b {
  display: block;

  color:
    var(--ink-800, #1d2939);

  font-size: 11px;
  font-weight: 770;
}

.cx-board-title small {
  display: block;

  margin-top: 3px;

  color:
    var(--ink-400, #98a2b3);

  font-size: 8px;
}

.cx-board-live {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  min-height: 25px;

  padding: 0 9px;

  border-radius: 999px;

  background:
    var(--green-50, #ecfdf3);

  color:
    var(--green-700, #027a48);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cx-board-live i,
.cx-hub-status i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--green-500, #12b76a);

  box-shadow:
    0 0 0 4px
    rgba(18, 183, 106, 0.1);
}

/* =========================================================
   BOARD BODY
   ========================================================= */

.cx-board-body {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(145px, 1fr)
    155px
    minmax(145px, 1fr);

  align-items: center;
  gap: 15px;

  min-height: 315px;

  padding: 22px 18px;
}

.cx-channel-column {
  display: grid;
  gap: 10px;
}

.cx-channel-card {
  display: grid;

  grid-template-columns:
    37px
    minmax(0, 1fr)
    7px;

  align-items: center;
  gap: 9px;

  min-width: 0;

  padding: 9px;

  border:
    1px solid
    rgba(16, 24, 40, 0.07);

  border-radius: 13px;

  background:
    rgba(255, 255, 255, 0.92);

  box-shadow:
    0 13px 28px -27px
    rgba(16, 24, 40, 0.55);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.cx-channel-card:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(18, 183, 106, 0.2);

  box-shadow:
    0 18px 32px -24px
    rgba(16, 24, 40, 0.48);
}

.cx-channel-icon {
  width: 37px;
  height: 37px;

  display: grid;
  place-items: center;

  border-radius: 11px;
}

.cx-facebook {
  background: #eff6ff;
  color: #1877f2;
}

.cx-instagram {
  background: #fff1f5;
  color: #e1306c;
}

.cx-webchat {
  background: #f0fdfa;
  color: #0f9f85;
}

.cx-messenger {
  background: #f5f3ff;
  color: #7c3aed;
}

.cx-ads {
  background: #fff7e8;
  color: #e47b05;
}

.cx-calls {
  background: var(--green-50, #ecfdf3);
  color: var(--green-700, #027a48);
}

.cx-channel-card > div {
  min-width: 0;
}

.cx-channel-card b {
  display: block;

  overflow: hidden;

  color:
    var(--ink-700, #344054);

  font-size: 9px;
  font-weight: 750;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.cx-channel-card small {
  display: block;

  overflow: hidden;

  margin-top: 3px;

  color:
    var(--ink-400, #98a2b3);

  font-size: 7px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.cx-channel-active {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--green-500, #12b76a);

  box-shadow:
    0 0 0 4px
    rgba(18, 183, 106, 0.08);
}

/* =========================================================
   WHATSAPP HUB
   ========================================================= */

.cx-hub-area {
  position: relative;

  min-height: 220px;

  display: grid;
  place-items: center;
}

.cx-hub-rings {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  pointer-events: none;
}

.cx-hub-rings span {
  position: absolute;

  border:
    1px solid
    rgba(18, 183, 106, 0.13);

  border-radius: 50%;
}

.cx-hub-rings span:first-child {
  width: 145px;
  height: 145px;
}

.cx-hub-rings span:last-child {
  width: 185px;
  height: 185px;

  border-style: dashed;

  animation:
    cxHubRotate
    28s linear infinite;
}

.cx-whatsapp-hub {
  position: relative;
  z-index: 4;

  width: 132px;
  min-height: 154px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 15px;

  border:
    1px solid
    rgba(18, 183, 106, 0.22);

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.99),
      rgba(236, 253, 243, 0.92)
    );

  box-shadow:
    0 24px 48px -29px
    rgba(3, 152, 85, 0.55);
}

.cx-hub-label {
  color:
    var(--green-700, #027a48);

  font-size: 6.5px;
  font-weight: 800;

  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cx-whatsapp-mark {
  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  margin-top: 9px;

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      #dffbea,
      #bdeed0
    );

  color: #12b76a;

  box-shadow:
    0 18px 30px -21px
    rgba(18, 183, 106, 0.66);

  animation:
    cxHubPulse
    3s ease-in-out
    infinite;
}

.cx-whatsapp-hub > strong {
  margin-top: 9px;

  color:
    var(--ink-900, #101828);

  font-family:
    var(--font-display, inherit);

  font-size: 14px;
  font-weight: 820;

  letter-spacing: -0.02em;
}

.cx-whatsapp-hub > small {
  margin-top: 2px;

  color:
    var(--ink-400, #98a2b3);

  font-size: 7px;
}

.cx-hub-status {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  min-height: 23px;

  margin-top: 10px;
  padding: 0 8px;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.88);

  color:
    var(--green-700, #027a48);

  font-size: 6.5px;
  font-weight: 750;
}

/* =========================================================
   FLOW LINES
   ========================================================= */

.cx-flow-line {
  position: absolute;
  top: 50%;

  width: 50px;
  height: 1px;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(18, 183, 106, 0.62),
      transparent
    );
}

.cx-flow-line-left {
  right: calc(50% + 65px);
}

.cx-flow-line-right {
  left: calc(50% + 65px);
}

.cx-flow-line i {
  position: absolute;
  top: -2px;
  left: 0;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--green-500, #12b76a);

  animation:
    cxFlowMove
    2.2s linear infinite;
}

.cx-flow-line-right i {
  animation-delay: -1.1s;
}

/* =========================================================
   BOARD FOOTER
   ========================================================= */

.cx-board-footer {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    auto;

  align-items: center;
  gap: 20px;

  padding: 13px 17px;

  border-top:
    1px solid
    rgba(16, 24, 40, 0.065);

  background:
    rgba(250, 252, 251, 0.8);
}

.cx-footer-agents {
  display: flex;
  align-items: center;

  min-width: 0;
}

.cx-footer-agents > span {
  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  margin-right: -7px;

  border:
    2px solid
    #ffffff;

  border-radius: 50%;

  background:
    var(--green-100, #d1fadf);

  color:
    var(--green-700, #027a48);

  font-size: 6.5px;
  font-weight: 800;
}

.cx-footer-agents > span:nth-child(2) {
  background: #dbeafe;
  color: #2563eb;
}

.cx-footer-agents > span:nth-child(3) {
  background: #fef3c7;
  color: #d97706;
}

.cx-footer-agents p {
  margin-left: 14px;

  color:
    var(--ink-400, #98a2b3);

  font-size: 7.5px;
}

.cx-footer-agents p b {
  color:
    var(--ink-700, #344054);

  font-weight: 750;
}

.cx-footer-metric {
  text-align: right;
}

.cx-footer-metric small {
  display: block;

  color:
    var(--ink-400, #98a2b3);

  font-size: 7px;
}

.cx-footer-metric b {
  display: block;

  margin-top: 3px;

  color:
    var(--ink-800, #1d2939);

  font-size: 10px;
  font-weight: 800;
}

/* =========================================================
   NOTE BELOW BOARD
   ========================================================= */

.cx-omni-note {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  max-width: 390px;

  margin: 12px auto 0;

  color:
    var(--ink-400, #98a2b3);

  font-size: 8px;
  font-weight: 650;

  text-align: center;
}

.cx-omni-note > span {
  width: 22px;
  height: 22px;

  flex: 0 0 22px;

  display: grid;
  place-items: center;

  border-radius: 7px;

  background:
    var(--green-50, #ecfdf3);

  color:
    var(--green-700, #027a48);
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes cxHubRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes cxHubPulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.045);
  }
}

@keyframes cxFlowMove {
  from {
    left: 0;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  to {
    left: 100%;
    opacity: 0;
  }
}

/* =========================================================
   RESPONSIVE — LAPTOP
   ========================================================= */

@media (max-width: 1080px) {
  .cx-omni-shell {
    grid-template-columns:
      minmax(0, 0.78fr)
      minmax(500px, 1.22fr);

    gap: 38px;
  }

  .cx-omni-copy h2 {
    font-size:
      clamp(35px, 3.8vw, 47px);
  }

  .cx-board-body {
    grid-template-columns:
      minmax(135px, 1fr)
      140px
      minmax(135px, 1fr);

    gap: 10px;

    padding-inline: 14px;
  }

  .cx-whatsapp-hub {
    width: 122px;
  }
}

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 900px) {
  .cx-omni-section {
    padding: 80px 20px;
  }

  .cx-omni-shell {
    grid-template-columns: 1fr;

    gap: 48px;
  }

  .cx-omni-copy {
    max-width: 700px;

    margin-inline: auto;

    text-align: center;
  }

  .cx-omni-copy h2,
  .cx-omni-description {
    max-width: 700px;

    margin-inline: auto;
  }

  .cx-omni-points {
    max-width: 560px;

    margin-inline: auto;
    margin-top: 25px;

    text-align: left;
  }

  .cx-omni-actions {
    justify-content: center;
  }

  .cx-omni-visual {
    max-width: 690px;

    margin-inline: auto;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 650px) {
  .cx-omni-section {
    padding: 68px 16px;
  }

  .cx-omni-copy h2 {
    font-size:
      clamp(33px, 9vw, 43px);
  }

  .cx-omni-description {
    font-size: 13px;
  }

  .cx-board-body {
    grid-template-columns:
      1fr
      128px
      1fr;

    min-height: 290px;

    gap: 8px;

    padding: 18px 10px;
  }

  .cx-channel-card {
    grid-template-columns:
      34px
      minmax(0, 1fr);

    padding: 7px;
  }

  .cx-channel-active {
    display: none;
  }

  .cx-channel-icon {
    width: 34px;
    height: 34px;
  }

  .cx-channel-card b {
    font-size: 8px;
  }

  .cx-channel-card small {
    font-size: 6.5px;
  }

  .cx-whatsapp-hub {
    width: 112px;
    min-height: 144px;

    padding: 12px;
  }

  .cx-whatsapp-mark {
    width: 52px;
    height: 52px;
  }

  .cx-whatsapp-mark svg {
    width: 34px;
    height: 34px;
  }

  .cx-hub-rings span:first-child {
    width: 130px;
    height: 130px;
  }

  .cx-hub-rings span:last-child {
    width: 158px;
    height: 158px;
  }

  .cx-flow-line {
    width: 32px;
  }

  .cx-flow-line-left {
    right: calc(50% + 55px);
  }

  .cx-flow-line-right {
    left: calc(50% + 55px);
  }

  .cx-board-footer {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    gap: 12px;
  }

  .cx-footer-metric:last-child {
    display: none;
  }
}

/* =========================================================
   RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
  .cx-omni-section {
    padding: 60px 14px;
  }

  .cx-omni-copy h2 {
    font-size:
      clamp(31px, 9.5vw, 39px);
  }

  .cx-omni-actions {
    flex-direction: column;
  }

  .cx-omni-security {
    justify-content: center;
  }

  .cx-omni-board {
    border-radius: 18px;
  }

  .cx-board-head {
    padding: 12px;
  }

  .cx-board-title small {
    display: none;
  }

  .cx-board-body {
    grid-template-columns:
      1fr
      104px
      1fr;

    min-height: 265px;

    gap: 6px;

    padding: 14px 7px;
  }

  .cx-channel-column {
    gap: 7px;
  }

  .cx-channel-card {
    display: flex;
    justify-content: center;

    padding: 6px;
  }

  .cx-channel-card > div {
    display: none;
  }

  .cx-channel-icon {
    width: 38px;
    height: 38px;
  }

  .cx-whatsapp-hub {
    width: 96px;
    min-height: 127px;

    border-radius: 18px;
  }

  .cx-hub-label {
    display: none;
  }

  .cx-whatsapp-mark {
    width: 46px;
    height: 46px;

    margin-top: 0;

    border-radius: 15px;
  }

  .cx-whatsapp-mark svg {
    width: 30px;
    height: 30px;
  }

  .cx-whatsapp-hub > strong {
    font-size: 12px;
  }

  .cx-whatsapp-hub > small {
    font-size: 6px;
  }

  .cx-hub-rings span:first-child {
    width: 110px;
    height: 110px;
  }

  .cx-hub-rings span:last-child {
    width: 138px;
    height: 138px;
  }

  .cx-hub-status {
    margin-top: 7px;

    font-size: 6px;
  }

  .cx-flow-line {
    display: none;
  }

  .cx-board-footer {
    padding: 11px 12px;
  }

  .cx-footer-metric {
    display: none;
  }

  .cx-footer-agents {
    justify-content: center;
  }

  .cx-footer-agents p {
    font-size: 7px;
  }
}

@media (max-width: 360px) {
  .cx-board-body {
    grid-template-columns:
      1fr
      92px
      1fr;
  }

  .cx-whatsapp-hub {
    width: 88px;
  }

  .cx-channel-icon {
    width: 34px;
    height: 34px;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .cx-hub-rings span:last-child,
  .cx-whatsapp-mark,
  .cx-flow-line i {
    animation: none;
  }

  .cx-channel-card,
  .cx-omni-primary {
    transition: none;
  }
}
/* =========================================================
   AI WORKFORCE SECTION
   Unique aiw-* namespace prevents conflicts
   ========================================================= */

.aiw-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding: 96px 22px;

  background:
    radial-gradient(
      circle at 12% 25%,
      rgba(190, 80, 255, 0.07),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 27%,
      rgba(59, 130, 246, 0.075),
      transparent 29%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fafbfc 100%
    );
}

.aiw-section::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: -2;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(16, 24, 40, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(16, 24, 40, 0.025) 1px,
      transparent 1px
    );

  background-size: 42px 42px;

  opacity: 0.55;
}

.aiw-section::after {
  content: "";

  position: absolute;
  left: 50%;
  bottom: -210px;
  z-index: -1;

  width: 850px;
  height: 320px;

  border-radius: 50%;

  background:
    rgba(18, 183, 106, 0.055);

  filter: blur(85px);

  transform: translateX(-50%);
}

.aiw-shell {
  width: 100%;
  max-width: 1180px;

  margin-inline: auto;
}

/* =========================================================
   SECTION HEADING
   ========================================================= */

.aiw-heading {
  max-width: 820px;

  margin: 0 auto 40px;

  text-align: center;
}

.aiw-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  min-height: 32px;

  padding: 0 12px 0 7px;

  border:
    1px solid
    rgba(18, 183, 106, 0.19);

  border-radius: 999px;

  background:
    rgba(236, 253, 243, 0.82);

  color:
    var(--green-700, #027a48);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aiw-eyebrow-icon {
  width: 24px;
  height: 24px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(18, 183, 106, 0.13);
}

.aiw-heading h2 {
  max-width: 800px;

  margin: 18px auto 0;

  color:
    var(--ink-900, #101828);

  font-family:
    var(--font-display, inherit);

  font-size:
    clamp(38px, 4.7vw, 57px);

  font-weight: 840;

  line-height: 1.04;
  letter-spacing: -0.05em;
}

.aiw-heading h2 span {
  color:
    var(--green-600, #039855);
}

.aiw-heading > p {
  max-width: 700px;

  margin: 17px auto 0;

  color:
    var(--ink-500, #667085);

  font-size: 14px;
  line-height: 1.7;
}

.aiw-heading-points {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 9px;

  margin-top: 19px;
}

.aiw-heading-points span {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  min-height: 29px;

  padding: 0 10px;

  border:
    1px solid
    rgba(16, 24, 40, 0.07);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.85);

  color:
    var(--ink-500, #667085);

  font-size: 8.5px;
  font-weight: 700;
}

.aiw-heading-points i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--green-500, #12b76a);

  box-shadow:
    0 0 0 4px
    rgba(18, 183, 106, 0.09);
}

/* =========================================================
   AGENT GRID
   ========================================================= */

.aiw-agent-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  align-items: stretch;
  gap: 22px;
}

/* =========================================================
   AGENT CARD
   ========================================================= */

.aiw-agent-card {
  position: relative;

  min-width: 0;

  padding: 18px;

  overflow: hidden;

  border:
    1px solid
    rgba(16, 24, 40, 0.08);

  border-radius: 27px;

  background:
    rgba(255, 255, 255, 0.94);

  box-shadow:
    0 34px 72px -51px
    rgba(16, 24, 40, 0.65);

  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

.aiw-agent-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 40px 82px -48px
    rgba(16, 24, 40, 0.62);
}

.aiw-agent-card--revenue:hover {
  border-color:
    rgba(190, 80, 255, 0.24);
}

.aiw-agent-card--support:hover {
  border-color:
    rgba(59, 130, 246, 0.25);
}

.aiw-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  height: 4px;
}

.aiw-agent-card--revenue .aiw-card-accent {
  background:
    linear-gradient(
      90deg,
      #c550ff,
      #f0a5ff,
      transparent
    );
}

.aiw-agent-card--support .aiw-card-accent {
  background:
    linear-gradient(
      90deg,
      #36a9ff,
      #63ddff,
      transparent
    );
}

/* =========================================================
   CARD HEADER
   ========================================================= */

.aiw-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;
}

.aiw-agent-identity {
  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 0;
}

.aiw-agent-icon {
  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  display: grid;
  place-items: center;

  border-radius: 12px;
}

.aiw-agent-icon--revenue {
  background:
    linear-gradient(
      145deg,
      #faefff,
      #f2d9ff
    );

  color: #a938d9;
}

.aiw-agent-icon--support {
  background:
    linear-gradient(
      145deg,
      #eff8ff,
      #d8f1ff
    );

  color: #168bd2;
}

.aiw-agent-identity > div {
  min-width: 0;
}

.aiw-agent-identity small {
  display: block;

  color:
    var(--ink-400, #98a2b3);

  font-size: 7.5px;
  font-weight: 750;

  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aiw-agent-identity b {
  display: block;

  overflow: hidden;

  margin-top: 4px;

  color:
    var(--ink-800, #1d2939);

  font-size: 12px;
  font-weight: 780;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiw-agent-status {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  min-height: 26px;

  padding: 0 9px;

  border:
    1px solid
    rgba(18, 183, 106, 0.14);

  border-radius: 999px;

  background:
    var(--green-50, #ecfdf3);

  color:
    var(--green-700, #027a48);

  font-size: 7.5px;
  font-weight: 800;

  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.aiw-agent-status i,
.aiw-processing i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--green-500, #12b76a);

  box-shadow:
    0 0 0 4px
    rgba(18, 183, 106, 0.09);

  animation:
    aiwStatusPulse 1.8s ease infinite;
}

/* =========================================================
   METRIC BAND
   ========================================================= */

.aiw-metric-band {
  display: grid;

  grid-template-columns:
    minmax(125px, 1.08fr)
    repeat(2, minmax(0, 0.96fr));

  gap: 8px;

  margin-top: 16px;
  padding: 9px;

  border-radius: 17px;
}

.aiw-metric-band--revenue {
  border:
    1px solid
    rgba(190, 80, 255, 0.16);

  background:
    linear-gradient(
      135deg,
      rgba(250, 239, 255, 0.9),
      rgba(255, 255, 255, 0.9)
    );
}

.aiw-metric-band--support {
  border:
    1px solid
    rgba(54, 169, 255, 0.17);

  background:
    linear-gradient(
      135deg,
      rgba(239, 248, 255, 0.95),
      rgba(255, 255, 255, 0.9)
    );
}

.aiw-primary-metric,
.aiw-secondary-metric {
  min-width: 0;

  padding: 10px;

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.72);
}

.aiw-primary-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.aiw-primary-metric strong {
  display: block;

  font-family:
    var(--font-display, inherit);

  font-size: 40px;
  font-weight: 850;

  line-height: 0.95;
  letter-spacing: -0.055em;
}

.aiw-agent-card--revenue
.aiw-primary-metric strong {
  color: #bc4be3;
}

.aiw-agent-card--support
.aiw-primary-metric strong {
  color: #269ee7;
}

.aiw-primary-metric span {
  display: block;

  margin-top: 7px;

  color:
    var(--ink-500, #667085);

  font-size: 8px;
  font-weight: 700;

  line-height: 1.35;
}

.aiw-secondary-metric {
  border:
    1px solid
    rgba(16, 24, 40, 0.055);
}

.aiw-secondary-metric small {
  display: block;

  min-height: 22px;

  color:
    var(--ink-400, #98a2b3);

  font-size: 7px;
  font-weight: 650;

  line-height: 1.4;
}

.aiw-secondary-metric b {
  display: block;

  margin-top: 6px;

  color:
    var(--ink-900, #101828);

  font-family:
    var(--font-display, inherit);

  font-size: 20px;
  font-weight: 820;

  line-height: 1;
  letter-spacing: -0.035em;
}

.aiw-secondary-metric span {
  display: block;

  margin-top: 5px;

  color:
    var(--ink-400, #98a2b3);

  font-size: 6.5px;
}

/* =========================================================
   DEMO WINDOW
   ========================================================= */

.aiw-demo-window {
  margin-top: 11px;
  padding: 13px;

  overflow: hidden;

  border:
    1px solid
    rgba(16, 24, 40, 0.07);

  border-radius: 19px;
}

.aiw-demo-window--revenue {
  background:
    linear-gradient(
      180deg,
      rgba(253, 246, 255, 0.98),
      rgba(250, 241, 255, 0.65)
    );
}

.aiw-demo-window--support {
  background:
    linear-gradient(
      180deg,
      rgba(242, 250, 255, 0.98),
      rgba(232, 247, 255, 0.68)
    );
}

.aiw-demo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  padding-bottom: 11px;

  border-bottom:
    1px solid
    rgba(16, 24, 40, 0.06);
}

.aiw-demo-title {
  display: flex;
  align-items: center;

  gap: 8px;

  min-width: 0;
}

.aiw-demo-app-icon {
  width: 29px;
  height: 29px;

  flex: 0 0 29px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  background:
    rgba(255, 255, 255, 0.85);

  color:
    var(--green-700, #027a48);
}

.aiw-demo-title > div {
  min-width: 0;
}

.aiw-demo-title b {
  display: block;

  overflow: hidden;

  color:
    var(--ink-700, #344054);

  font-size: 8.5px;
  font-weight: 750;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiw-demo-title small {
  display: block;

  margin-top: 3px;

  color:
    var(--ink-400, #98a2b3);

  font-size: 6.5px;
}

.aiw-processing {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  color:
    var(--green-700, #027a48);

  font-size: 6.5px;
  font-weight: 750;

  white-space: nowrap;
}

/* =========================================================
   CHAT MESSAGES
   ========================================================= */

.aiw-chat-area {
  display: grid;
  gap: 9px;

  margin-top: 13px;
}

.aiw-chat-row {
  display: flex;
  align-items: flex-end;

  gap: 7px;
}

.aiw-chat-row--agent {
  justify-content: flex-end;
}

.aiw-chat-avatar,
.aiw-agent-avatar {
  width: 27px;
  height: 27px;

  flex: 0 0 27px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  font-size: 6.5px;
  font-weight: 800;
}

.aiw-chat-avatar {
  background:
    #ffffff;

  color:
    var(--ink-600, #475467);

  box-shadow:
    0 8px 18px -14px
    rgba(16, 24, 40, 0.55);
}

.aiw-agent-avatar {
  background:
    var(--green-100, #d1fadf);

  color:
    var(--green-700, #027a48);
}

.aiw-message {
  max-width: 81%;

  padding: 9px 10px;

  border-radius: 12px;

  color:
    var(--ink-700, #344054);

  font-size: 8.5px;
  line-height: 1.5;

  box-shadow:
    0 10px 22px -18px
    rgba(16, 24, 40, 0.55);
}

.aiw-message--customer {
  border:
    1px solid
    rgba(16, 24, 40, 0.07);

  border-bottom-left-radius: 4px;

  background:
    rgba(255, 255, 255, 0.94);
}

.aiw-message--agent {
  border:
    1px solid
    rgba(18, 183, 106, 0.2);

  border-bottom-right-radius: 4px;

  background:
    rgba(223, 251, 234, 0.94);
}

/* =========================================================
   LEAD INTELLIGENCE CARD
   ========================================================= */

.aiw-intelligence-card {
  margin-top: 13px;
  padding: 11px;

  border:
    1px solid
    rgba(190, 80, 255, 0.18);

  border-radius: 15px;

  background:
    rgba(255, 255, 255, 0.9);

  box-shadow:
    0 15px 32px -27px
    rgba(80, 24, 104, 0.42);
}

.aiw-intelligence-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;
}

.aiw-lead-profile {
  display: flex;
  align-items: center;

  gap: 8px;

  min-width: 0;
}

.aiw-lead-avatar {
  width: 35px;
  height: 35px;

  flex: 0 0 35px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background:
    linear-gradient(
      145deg,
      #f9e8ff,
      #efd0ff
    );

  color: #a938d9;

  font-size: 8px;
  font-weight: 850;
}

.aiw-lead-profile > div {
  min-width: 0;
}

.aiw-lead-profile b,
.aiw-lead-profile small,
.aiw-lead-profile span {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiw-lead-profile b {
  color:
    var(--ink-800, #1d2939);

  font-size: 9px;
  font-weight: 780;
}

.aiw-lead-profile small {
  margin-top: 2px;

  color:
    var(--ink-500, #667085);

  font-size: 7px;
  font-weight: 650;
}

.aiw-lead-profile span {
  margin-top: 2px;

  color:
    var(--ink-400, #98a2b3);

  font-size: 6.5px;
}

.aiw-lead-score {
  flex: 0 0 auto;

  text-align: right;
}

.aiw-lead-score small {
  display: block;

  color:
    var(--ink-400, #98a2b3);

  font-size: 6.5px;
}

.aiw-lead-score strong {
  display: inline-block;

  margin-top: 3px;

  color:
    var(--ink-900, #101828);

  font-size: 19px;
  font-weight: 830;

  line-height: 1;
}

.aiw-lead-score span {
  display: inline-flex;

  margin-left: 4px;
  padding: 3px 6px;

  border-radius: 999px;

  background:
    #fff1f2;

  color:
    #e11d48;

  font-size: 6px;
  font-weight: 800;

  text-transform: uppercase;
}

.aiw-intelligence-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 5px;

  margin-top: 10px;
}

.aiw-intelligence-tags span {
  padding: 4px 6px;

  border-radius: 999px;

  background:
    var(--ink-900, #101828);

  color: #ffffff;

  font-size: 5.7px;
  font-weight: 700;
}

.aiw-intelligence-details {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 6px;

  margin-top: 10px;
}

.aiw-intelligence-details > div {
  min-width: 0;

  padding: 7px;

  border-radius: 9px;

  background:
    rgba(248, 250, 252, 0.9);
}

.aiw-intelligence-details small,
.aiw-intelligence-details b {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiw-intelligence-details small {
  color:
    var(--ink-400, #98a2b3);

  font-size: 5.7px;
}

.aiw-intelligence-details b {
  margin-top: 3px;

  color:
    var(--ink-700, #344054);

  font-size: 6.5px;
  font-weight: 750;
}

/* =========================================================
   SUPPORT RESOLUTION CARD
   ========================================================= */

.aiw-resolution-card {
  display: grid;

  grid-template-columns:
    36px
    minmax(0, 1fr)
    auto;

  align-items: center;
  gap: 9px;

  margin-top: 13px;
  padding: 10px;

  border:
    1px solid
    rgba(54, 169, 255, 0.17);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.9);

  box-shadow:
    0 15px 30px -27px
    rgba(26, 104, 151, 0.42);
}

.aiw-resolution-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background:
    var(--green-50, #ecfdf3);

  color:
    var(--green-700, #027a48);
}

.aiw-resolution-copy {
  min-width: 0;
}

.aiw-resolution-copy small,
.aiw-resolution-copy b,
.aiw-resolution-copy span {
  display: block;
}

.aiw-resolution-copy small {
  color:
    var(--ink-400, #98a2b3);

  font-size: 6px;
}

.aiw-resolution-copy b {
  margin-top: 3px;

  color:
    var(--ink-800, #1d2939);

  font-size: 8.5px;
  font-weight: 780;
}

.aiw-resolution-copy span {
  overflow: hidden;

  margin-top: 3px;

  color:
    var(--ink-400, #98a2b3);

  font-size: 6px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiw-resolution-time {
  text-align: right;
}

.aiw-resolution-time small {
  display: block;

  color:
    var(--ink-400, #98a2b3);

  font-size: 6px;
}

.aiw-resolution-time b {
  display: block;

  margin-top: 3px;

  color:
    var(--green-700, #027a48);

  font-size: 8px;
  font-weight: 800;
}

/* =========================================================
   CARD BOTTOM COPY
   ========================================================= */

.aiw-agent-copy {
  padding: 17px 4px 3px;

  text-align: center;
}

.aiw-agent-copy h3 {
  max-width: 460px;

  margin-inline: auto;

  color:
    var(--ink-900, #101828);

  font-family:
    var(--font-display, inherit);

  font-size: 20px;
  font-weight: 810;

  line-height: 1.2;
  letter-spacing: -0.035em;
}

.aiw-agent-copy > p {
  max-width: 465px;

  margin: 9px auto 0;

  color:
    var(--ink-500, #667085);

  font-size: 10px;
  line-height: 1.65;
}

.aiw-capability-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 6px;

  margin-top: 13px;
}

.aiw-capability-list span {
  display: inline-flex;
  align-items: center;

  gap: 4px;

  min-height: 25px;

  padding: 0 8px;

  border:
    1px solid
    rgba(16, 24, 40, 0.065);

  border-radius: 999px;

  background:
    rgba(248, 250, 252, 0.85);

  color:
    var(--ink-500, #667085);

  font-size: 7px;
  font-weight: 700;
}

.aiw-capability-list svg {
  color:
    var(--green-600, #039855);
}

.aiw-agent-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  min-height: 41px;

  margin-top: 15px;
  padding: 0 15px;

  border:
    1px solid
    rgba(16, 24, 40, 0.11);

  border-radius: 11px;

  background:
    var(--ink-900, #101828);

  color: #ffffff;

  box-shadow:
    0 15px 28px -21px
    rgba(16, 24, 40, 0.68);

  font-size: 9.5px;
  font-weight: 760;

  text-decoration: none;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.aiw-agent-action:hover {
  transform:
    translateY(-2px);

  background:
    var(--green-700, #027a48);

  box-shadow:
    0 20px 34px -20px
    rgba(3, 152, 85, 0.58);
}

.aiw-agent-action svg {
  transition:
    transform 0.25s ease;
}

.aiw-agent-action:hover svg {
  transform:
    translateX(3px);
}

/* =========================================================
   SHARED CONTEXT STRIP
   ========================================================= */

.aiw-shared-context {
  display: grid;

  grid-template-columns:
    50px
    minmax(0, 1fr)
    minmax(280px, auto);

  align-items: center;
  gap: 16px;

  margin-top: 22px;
  padding: 17px;

  border:
    1px solid
    rgba(18, 183, 106, 0.13);

  border-radius: 19px;

  background:
    linear-gradient(
      135deg,
      rgba(236, 253, 243, 0.8),
      rgba(255, 255, 255, 0.95)
    );

  box-shadow:
    0 22px 45px -38px
    rgba(16, 24, 40, 0.55);
}

.aiw-shared-icon {
  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  background:
    var(--green-100, #d1fadf);

  color:
    var(--green-700, #027a48);
}

.aiw-shared-copy {
  min-width: 0;
}

.aiw-shared-copy small {
  display: block;

  color:
    var(--green-700, #027a48);

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aiw-shared-copy h3 {
  margin-top: 4px;

  color:
    var(--ink-800, #1d2939);

  font-size: 13px;
  font-weight: 780;

  line-height: 1.35;
}

.aiw-shared-copy p {
  max-width: 580px;

  margin-top: 4px;

  color:
    var(--ink-400, #98a2b3);

  font-size: 8px;
  line-height: 1.5;
}

.aiw-shared-tags {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;

  gap: 6px;
}

.aiw-shared-tags span {
  min-height: 26px;

  display: inline-flex;
  align-items: center;

  padding: 0 8px;

  border:
    1px solid
    rgba(18, 183, 106, 0.13);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.9);

  color:
    var(--green-700, #027a48);

  font-size: 6.5px;
  font-weight: 750;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes aiwStatusPulse {
  50% {
    box-shadow:
      0 0 0 7px
      rgba(18, 183, 106, 0);
  }
}

/* =========================================================
   RESPONSIVE — LAPTOP
   ========================================================= */

@media (max-width: 1050px) {
  .aiw-agent-grid {
    gap: 16px;
  }

  .aiw-agent-card {
    padding: 15px;
  }

  .aiw-primary-metric strong {
    font-size: 35px;
  }

  .aiw-metric-band {
    grid-template-columns:
      1fr
      1fr;
  }

  .aiw-primary-metric {
    grid-column:
      1 / -1;

    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
  }

  .aiw-primary-metric span {
    max-width: 120px;

    margin-top: 0;

    text-align: right;
  }

  .aiw-shared-context {
    grid-template-columns:
      50px
      minmax(0, 1fr);
  }

  .aiw-shared-tags {
    grid-column:
      1 / -1;

    justify-content: flex-start;

    padding-left: 66px;
  }
}

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 820px) {
  .aiw-section {
    padding: 80px 20px;
  }

  .aiw-heading {
    margin-bottom: 33px;
  }

  .aiw-heading h2 {
    font-size:
      clamp(35px, 7vw, 49px);
  }

  .aiw-agent-grid {
    grid-template-columns: 1fr;

    max-width: 650px;

    margin-inline: auto;
  }

  .aiw-agent-card {
    padding: 18px;
  }

  .aiw-metric-band {
    grid-template-columns:
      minmax(130px, 1.08fr)
      repeat(2, minmax(0, 0.96fr));
  }

  .aiw-primary-metric {
    grid-column: auto;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 0;
  }

  .aiw-primary-metric span {
    margin-top: 7px;

    text-align: left;
  }

  .aiw-shared-context {
    max-width: 650px;

    margin-inline: auto;
    margin-top: 20px;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .aiw-section {
    padding: 68px 16px;
  }

  .aiw-heading h2 {
    font-size:
      clamp(32px, 9vw, 42px);
  }

  .aiw-heading > p {
    font-size: 13px;
  }

  .aiw-heading-points {
    gap: 6px;
  }

  .aiw-agent-card {
    padding: 14px;

    border-radius: 22px;
  }

  .aiw-metric-band {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .aiw-primary-metric {
    grid-column:
      1 / -1;

    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    gap: 14px;
  }

  .aiw-primary-metric span {
    max-width: 130px;

    margin-top: 0;

    text-align: right;
  }

  .aiw-primary-metric strong {
    font-size: 34px;
  }

  .aiw-demo-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .aiw-message {
    max-width: 88%;
  }

  .aiw-intelligence-details {
    grid-template-columns: 1fr;
  }

  .aiw-intelligence-details small,
  .aiw-intelligence-details b {
    white-space: normal;
  }

  .aiw-resolution-card {
    grid-template-columns:
      36px
      minmax(0, 1fr);
  }

  .aiw-resolution-time {
    grid-column:
      2;

    text-align: left;
  }

  .aiw-shared-context {
    grid-template-columns:
      44px
      minmax(0, 1fr);

    padding: 14px;
  }

  .aiw-shared-icon {
    width: 44px;
    height: 44px;

    border-radius: 13px;
  }

  .aiw-shared-tags {
    padding-left: 0;
  }
}

/* =========================================================
   RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {
  .aiw-section {
    padding: 60px 13px;
  }

  .aiw-heading h2 {
    font-size:
      clamp(30px, 9.5vw, 38px);
  }

  .aiw-card-header {
    align-items: flex-start;
  }

  .aiw-agent-status {
    min-height: 23px;

    padding-inline: 7px;

    font-size: 6.5px;
  }

  .aiw-secondary-metric {
    padding: 8px;
  }

  .aiw-secondary-metric b {
    font-size: 17px;
  }

  .aiw-message {
    font-size: 8px;
  }

  .aiw-intelligence-head {
    flex-direction: column;
  }

  .aiw-lead-score {
    width: 100%;

    text-align: left;
  }

  .aiw-agent-copy h3 {
    font-size: 18px;
  }

  .aiw-shared-context {
    grid-template-columns: 1fr;

    text-align: center;
  }

  .aiw-shared-icon {
    margin-inline: auto;
  }

  .aiw-shared-tags {
    justify-content: center;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .aiw-agent-status i,
  .aiw-processing i {
    animation: none;
  }

  .aiw-agent-card,
  .aiw-agent-action {
    transition: none;
  }
}