/* ══════════════════════════════════════════════════════════════════
   AICUBIX — enhancements.css  (v3 — merged & conflict-free)
   Apply to every page:  <link rel="stylesheet" href="assets/css/enhancements.css">
   Subfolders:           <link rel="stylesheet" href="../assets/css/enhancements.css">

   MERGE NOTES (v1 → v3):
   · Shimmer: OLD used ::before + skewX(-15deg) → KEPT (more premium feel)
   · .feat-card: OLD ::after = bottom green bar. NEW ::before = green wash.
     RESOLVED → ::before = bottom green bar (cleaner, one pseudo per element)
     + background gradient on hover (no extra pseudo needed for wash)
   · .testi-card::before quote mark: OLD used Georgia, NEW used DM Serif → DM Serif KEPT (on-brand)
   · .footer-link: OLD = padding-left nudge. NEW = translateX + ::before arrow → NEW KEPT (richer)
   · .soc-link: NEW spring scale KEPT
   · Scroll reveal: NEW cubic-bezier KEPT
   · All !important flags from OLD preserved where inline styles exist
══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   1. BUTTONS
══════════════════════════════════════════════════════════════════ */

/* ── Primary green button ── */
.btn-primary {
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.3s ease, background 0.25s ease !important;
  box-shadow: 0 1px 3px rgba(0,76,61,0.18);
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.18) 50%, transparent 80%);
  transform: skewX(-15deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.btn-primary:hover {
  background: var(--green-mid) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,76,61,0.28) !important;
}
.btn-primary:hover::before { left: 140%; }
.btn-primary:active { transform: translateY(0) !important; box-shadow: none !important; }
.btn-primary svg { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.btn-primary:hover svg { transform: translateX(3px); }


/* ── Ghost button ── */
.btn-ghost {
  transition: border-color 0.25s ease, background 0.25s ease,
              color 0.25s ease, transform 0.2s ease !important;
}
.btn-ghost:hover {
  border-color: var(--green) !important;
  background: var(--green-xlight) !important;
  color: var(--green) !important;
  transform: translateY(-2px) !important;
}
.btn-ghost:active { transform: translateY(0) !important; }
.btn-ghost svg { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.btn-ghost:hover svg { transform: translateX(3px); }


/* ── White button (dark sections) ── */
.btn-white {
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.3s ease !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.btn-white::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(0,76,61,0.08) 50%, transparent 80%);
  transform: skewX(-15deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.btn-white:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.15) !important;
}
.btn-white:hover::before { left: 140%; }
.btn-white:active { transform: translateY(0) !important; }
.btn-white svg { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.btn-white:hover svg { transform: translateX(3px); }


/* ── Outline-white button (dark sections) ── */
.btn-outline-white {
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease !important;
}
.btn-outline-white:hover {
  border-color: #fff !important;
  background: rgba(255,255,255,0.12) !important;
  transform: translateY(-2px) !important;
}
.btn-outline-white:active { transform: translateY(0) !important; }
.btn-outline-white svg { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.btn-outline-white:hover svg { transform: translateX(3px); }


/* ── Nav: Get Started Free ── */
.nav-cta-start {
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.3s ease, background 0.25s ease !important;
}
.nav-cta-start::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.18) 50%, transparent 80%);
  transform: skewX(-15deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.nav-cta-start:hover {
  background: var(--green-mid) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0,76,61,0.28) !important;
}
.nav-cta-start:hover::before { left: 140%; }
.nav-cta-start:active { transform: translateY(0) !important; }


/* ── Nav: Book a Call ── */
.nav-cta-book {
  transition: border-color 0.25s ease, background 0.25s ease,
              color 0.2s ease, transform 0.2s ease !important;
}
.nav-cta-book:hover {
  border-color: var(--green) !important;
  background: var(--green-xlight) !important;
  color: var(--green) !important;
  transform: translateY(-1px) !important;
}
.nav-cta-book:active { transform: translateY(0) !important; }


/* ── Pricing fill button ── */
.plan-btn.fill {
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.3s ease, background 0.25s ease !important;
}
.plan-btn.fill::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.18) 50%, transparent 80%);
  transform: skewX(-15deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.plan-btn.fill:hover {
  background: var(--green-mid) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0,76,61,0.28) !important;
}
.plan-btn.fill:hover::before { left: 140%; }
.plan-btn.fill:active { transform: translateY(0) !important; }


/* ── Pricing outline button ── */
.plan-btn.outline {
  transition: border-color 0.25s ease, color 0.25s ease,
              background 0.25s ease, transform 0.2s ease !important;
}
.plan-btn.outline:hover {
  border-color: var(--green) !important;
  color: var(--green) !important;
  background: var(--green-xlight) !important;
  transform: translateY(-1px) !important;
}
.plan-btn.outline:active { transform: translateY(0) !important; }


/* ── Global focus ring ── */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-white:focus-visible,
.btn-outline-white:focus-visible,
.nav-cta-start:focus-visible,
.nav-cta-book:focus-visible,
.plan-btn:focus-visible,
.ind-card:focus-visible,
.feat-card:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2.5px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ══════════════════════════════════════════════════════════════════
   2. NAV
══════════════════════════════════════════════════════════════════ */

.nav-link { transition: background 0.18s ease, color 0.18s ease !important; }
.nav-link.active { background: var(--green-light); color: var(--green); font-weight: 500; }

.dd-item { transition: background 0.18s ease, transform 0.18s ease !important; }
.dd-item:hover { background: var(--green-xlight) !important; transform: translateX(3px) !important; }
.dd-icon { transition: background 0.2s ease; }
.dd-item:hover .dd-icon { background: var(--green) !important; }
.dd-icon svg { transition: stroke 0.2s ease; }
.dd-item:hover .dd-icon svg { stroke: #fff !important; }
.dd-label { transition: color 0.16s ease; }
.dd-item:hover .dd-label { color: var(--green); }

.nav-loyalty {
  box-shadow: 0 0 0 0 rgba(0,76,61,0);
  transition: background 0.2s ease, box-shadow 0.3s ease !important;
}
.nav-loyalty:hover {
  background: var(--green-mid) !important;
  box-shadow: 0 0 0 4px rgba(0,76,61,0.12) !important;
}


/* ══════════════════════════════════════════════════════════════════
   3. HERO
══════════════════════════════════════════════════════════════════ */

.hero h1 em {
  background: linear-gradient(135deg, #004C3D 0%, #1A7A62 60%, #25D366 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-badge { animation: hero-badge-pulse 3s ease-in-out infinite; }
@keyframes hero-badge-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  50%      { box-shadow: 0 0 0 6px rgba(37,211,102,0.12); }
}

.stat-card { transition: box-shadow 0.25s ease, transform 0.25s ease !important; }
.stat-card:hover { box-shadow: 0 8px 32px rgba(0,76,61,0.16) !important; transform: translateY(-4px) !important; }
.sc-num { transition: color 0.2s ease; }
.stat-card:hover .sc-num { color: var(--green-mid); }

.hero-phone { transition: box-shadow 0.3s ease; }
.hero-phone:hover { box-shadow: 0 16px 56px rgba(0,76,61,0.18); }

.trust-item svg { transition: stroke 0.2s ease, transform 0.2s ease; }
.trust-item:hover svg { stroke: var(--green-mid); transform: scale(1.15); }


/* ══════════════════════════════════════════════════════════════════
   4. CLIENT LOGO MARQUEE
══════════════════════════════════════════════════════════════════ */

.logos-section { position: relative; }
.logos-section > div:last-child {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.client-logo { transition: filter 0.4s ease, opacity 0.4s ease, transform 0.3s ease !important; }
.client-logo:hover { filter: grayscale(0%) !important; opacity: 1 !important; transform: scale(1.06) !important; }


/* ══════════════════════════════════════════════════════════════════
   5. METRICS
══════════════════════════════════════════════════════════════════ */

.metric { transition: background 0.22s ease !important; cursor: default; }
.metric:hover { background: var(--green-xlight) !important; }
.metric-num {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), color 0.2s ease;
}
.metric:hover .metric-num { transform: scale(1.08); color: var(--green-mid); }
.metric-label { transition: color 0.2s ease; }
.metric:hover .metric-label { color: var(--text-2); }


/* ══════════════════════════════════════════════════════════════════
   6. COMPARE CARDS
══════════════════════════════════════════════════════════════════ */

.compare-card { transition: transform 0.25s ease, box-shadow 0.25s ease !important; }
.cmp-good:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,76,61,0.12); }
.cmp-bad:hover  { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(163,45,45,0.08); }
.cmp-tag { transition: transform 0.18s ease; }
.cmp-tag:hover { transform: scale(1.05); }


/* ══════════════════════════════════════════════════════════════════
   7. FEATURE CARDS
   ::before = bottom green bar (draws left→right)
   Background fades to subtle green wash on hover
══════════════════════════════════════════════════════════════════ */

.feat-card {
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}
.feat-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
  pointer-events: none;
  z-index: 1;
}
.feat-card:hover {
  border-color: var(--green) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0,76,61,0.1) !important;
  background: linear-gradient(to top, rgba(0,76,61,0.02), #fff) !important;
}
.feat-card:hover::before { transform: scaleX(1); }

.feat-icon { transition: background 0.3s ease; }
.feat-card:hover .feat-icon { background: var(--green) !important; }
.feat-icon svg { transition: stroke 0.3s ease; }
.feat-card:hover .feat-icon svg { stroke: #fff !important; }

.feat-title {
  position: relative;
  display: inline-block;
  transition: color 0.2s ease;
}
.feat-title::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0%; height: 1.5px;
  background: var(--green);
  transition: width 0.3s ease;
}
.feat-card:hover .feat-title { color: var(--green); }
.feat-card:hover .feat-title::after { width: 100%; }

.feat-arrow { transition: gap 0.25s ease, letter-spacing 0.25s ease; }
.feat-card:hover .feat-arrow { gap: 8px !important; letter-spacing: 0.2px; }


/* ══════════════════════════════════════════════════════════════════
   8. FEATURE ROWS
══════════════════════════════════════════════════════════════════ */

.feat-visual { transition: box-shadow 0.3s ease, transform 0.3s ease; }
.feat-row:hover .feat-visual { box-shadow: 0 8px 40px rgba(0,76,61,0.09); transform: translateY(-3px); }

.mini-tbl tbody tr { transition: background 0.15s ease; }
.mini-tbl tbody tr:hover td { background: var(--green-xlight); }

.badge-sent { animation: badge-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes badge-pop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.chat-bbl { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.chat-bbl:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }


/* ══════════════════════════════════════════════════════════════════
   9. AI SECTION
══════════════════════════════════════════════════════════════════ */

.ai-node { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.ai-node:hover { transform: translateX(4px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }

.ai-check-item { transition: transform 0.2s ease; }
.ai-check-item:hover { transform: translateX(4px); }
.ai-check-icon { transition: background 0.2s ease; }
.ai-check-item:hover .ai-check-icon { background: rgba(37,211,102,0.3); }


/* ══════════════════════════════════════════════════════════════════
   10. INDUSTRY CARDS
══════════════════════════════════════════════════════════════════ */

.ind-card {
  transition: border-color 0.25s ease, background 0.25s ease,
              transform 0.25s ease, box-shadow 0.25s ease !important;
}
.ind-card:hover {
  border-color: var(--green) !important;
  background: var(--green-xlight) !important;
  transform: translateX(5px) !important;
  box-shadow: 0 4px 16px rgba(0,76,61,0.08) !important;
}
.ind-icon { transition: background 0.25s ease; }
.ind-card:hover .ind-icon { background: var(--green) !important; }
.ind-icon svg { transition: stroke 0.25s ease; }
.ind-card:hover .ind-icon svg { stroke: #fff !important; }
.ind-name { transition: color 0.2s ease; }
.ind-card:hover .ind-name { color: var(--green); }


/* ══════════════════════════════════════════════════════════════════
   11. TESTIMONIAL CARDS
══════════════════════════════════════════════════════════════════ */

.testi-card {
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}
.testi-card::before {
  content: '\201C';
  position: absolute;
  top: 12px; right: 18px;
  font-size: 72px;
  line-height: 1;
  font-family: 'DM Serif Display', serif;
  color: var(--green-light);
  pointer-events: none;
  transition: color 0.3s ease, transform 0.3s ease;
  transform: translateY(4px);
}
.testi-card:hover {
  border-color: var(--green) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 30px rgba(0,76,61,0.1) !important;
}
.testi-card:hover::before {
  color: #b8dfd6;
  transform: translateY(0) scale(1.05) rotate(-3deg);
}
.testi-stars { display: inline-block; transition: transform 0.2s ease; }
.testi-card:hover .testi-stars { transform: scale(1.08); }
.testi-ava { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.testi-card:hover .testi-ava { box-shadow: 0 0 0 3px rgba(0,76,61,0.25); transform: scale(1.06); }


/* ══════════════════════════════════════════════════════════════════
   12. PRICING
══════════════════════════════════════════════════════════════════ */

.plan { transition: box-shadow 0.3s ease, transform 0.25s ease !important; }
.plan:hover { box-shadow: 0 14px 40px rgba(0,76,61,0.1) !important; transform: translateY(-5px) !important; }
.plan.featured { box-shadow: 0 4px 24px rgba(0,76,61,0.15); }
.plan.featured:hover { box-shadow: 0 16px 48px rgba(0,76,61,0.2) !important; transform: translateY(-6px) !important; }

.plan-price { display: inline-block; transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.plan:hover .plan-price { transform: scale(1.05); }

.plan-feats li { transition: color 0.18s ease, transform 0.18s ease; }
.plan-feats li:hover { color: var(--text); transform: translateX(3px); }


/* ══════════════════════════════════════════════════════════════════
   13. CTA SECTION — z-index bleed fix
══════════════════════════════════════════════════════════════════ */

.cta-section { isolation: isolate; }
.cta-section::before,
.cta-section::after { z-index: 0; pointer-events: none; }


/* ══════════════════════════════════════════════════════════════════
   14. FOOTER
══════════════════════════════════════════════════════════════════ */

footer { position: relative; z-index: 1; }

.footer-col-title {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
  margin-bottom: 18px;
}
.footer-col-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 20px; height: 2px;
  background: var(--green-mid);
  border-radius: 1px;
}

.footer-link {
  position: relative;
  display: inline-block;
  transition: color 0.2s ease, transform 0.18s ease !important;
  padding-left: 0 !important;
}
.footer-link::before {
  content: '→';
  position: absolute;
  left: -16px;
  opacity: 0;
  font-size: 11px;
  color: var(--green-mid);
  transition: opacity 0.18s ease, left 0.18s ease;
}
.footer-link:hover::before { opacity: 1; left: -14px; }
.footer-link:hover { color: #fff !important; transform: translateX(4px); }

.soc-link {
  position: relative;
  z-index: 2;
  transition: border-color 0.2s ease, color 0.2s ease,
              background 0.2s ease,
              transform 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.soc-link:hover {
  border-color: var(--green-mid) !important;
  color: #fff !important;
  background: rgba(255,255,255,0.06) !important;
  transform: translateY(-3px) scale(1.08) !important;
}

.footer-logo img { transition: opacity 0.2s ease; }
.footer-logo:hover img { opacity: 1; }


/* ══════════════════════════════════════════════════════════════════
   15. SCROLL REVEAL
══════════════════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.rd1 { transition-delay: 0.08s; }
.rd2 { transition-delay: 0.16s; }
.rd3 { transition-delay: 0.24s; }
.rd4 { transition-delay: 0.32s; }


/* ══════════════════════════════════════════════════════════════════
   16. MISC
══════════════════════════════════════════════════════════════════ */

section.section-alt { position: relative; }
section.section-alt::before {
  content: '';
  position: absolute;
  top: 0; left: 5%; right: 5%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border), transparent);
  pointer-events: none;
}

.eyebrow { letter-spacing: 0.8px; }
.eyebrow-dot { animation: blink 2.2s ease-in-out infinite; }

.check-list li { transition: transform 0.18s ease, color 0.18s ease; }
.check-list li:hover { transform: translateX(3px); color: var(--text); }


/* ══════════════════════════════════════════════════════════════════
   17. WIDGET — pointer-events fix
══════════════════════════════════════════════════════════════════ */

#ac-widget-wrap            { pointer-events: none !important; }
#ac-toggle-btn             { pointer-events: auto !important; }
#ac-chat-window.ac-visible { pointer-events: auto !important; }


/* ══════════════════════════════════════════════════════════════════
   18. RESPONSIVE
══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .mob-link    { padding: 15px 0; font-size: 15px; }
  .mob-sublink { padding: 11px 0; font-size: 14px; }
  .mob-btn     { padding: 15px; border-radius: 10px; font-size: 15px; font-weight: 600; }
  .hero-btns   { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero-btns .btn { width: 100%; justify-content: center; }
  .hero-trust  { gap: 10px; }
  .metrics-grid { border-radius: 12px; }
  .feat-row    { gap: 32px; }
  .feat-visual { order: -1; }
  .pricing-grid { gap: 20px; }
  .cta-section { padding: 64px 0; }
  .footer-bottom { gap: 20px; }
}

@media (max-width: 600px) {
  .ind-card    { padding: 16px; }
  .compare-grid { gap: 14px; }
  .testi-grid  { gap: 14px; }
  .plan        { border-radius: 14px; }
  .footer-link { padding: 3px 0 !important; margin-bottom: 11px; display: block; }
  .footer-link::before { display: none; }
  .soc-link    { width: 40px; height: 40px; font-size: 13px; }
  .nav-inner   { height: 60px; }
}


/* ══════════════════════════════════════════════════════════════════
   END — AICUBIX enhancements.css v3
══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   GOD MODE ADDITIONS — v4 (appended to v3)
   All rules below are NET NEW — zero overlap with v3 above.
══════════════════════════════════════════════════════════════════ */

/* ─── NAV: logo scale, scrolled border, dropdown blur ─── */
.nav-logo img {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.nav-logo:hover img { transform: scale(1.04); }

nav.scrolled { border-bottom-color: rgba(0,76,61,0.14) !important; }

.dropdown {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ─── HERO: entrance animations ─── */
.hero h1 {
  animation: gm-fade-up 0.8s cubic-bezier(0.25,0.46,0.45,0.94) both;
}
.hero-badge {
  animation: gm-fade-up 0.6s cubic-bezier(0.25,0.46,0.45,0.94) both,
             hero-badge-pulse 3s ease-in-out 0.8s infinite;
}
.hero-sub  { animation: gm-fade-up 0.8s cubic-bezier(0.25,0.46,0.45,0.94) 0.18s both; }
.hero-btns { animation: gm-fade-up 0.8s cubic-bezier(0.25,0.46,0.45,0.94) 0.32s both; }
.hero-trust{ animation: gm-fade-up 0.8s cubic-bezier(0.25,0.46,0.45,0.94) 0.44s both; }
@keyframes gm-fade-up {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0);    }
}

/* Hero phone chat bubbles animate in */
.bbl-in       { animation: gm-bbl 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.3s both; }
.bbl-out      { animation: gm-bbl 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.6s both; }
.bbl-btn-wrap { animation: gm-bbl 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.9s both; }
@keyframes gm-bbl {
  from { opacity:0; transform:scale(0.88) translateY(8px); }
  to   { opacity:1; transform:scale(1) translateY(0);      }
}

/* Stat card icon fill on hover */
.sc-icon { transition: background 0.25s ease; }
.stat-card:hover .sc-icon { background: var(--green); }
.sc-icon svg { transition: stroke 0.25s ease; }
.stat-card:hover .sc-icon svg { stroke: #fff; }

/* ─── LOGOS: label line separators ─── */
.logos-label {
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}
.logos-label::before,
.logos-label::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 44px; height: 1px;
  background: var(--border);
}
.logos-label::before { right: calc(100% + 10px); }
.logos-label::after  { left:  calc(100% + 10px); }

/* ─── METRICS: rainbow top border + count pop ─── */
.metrics-grid { position: relative; }
.metrics-grid::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-light), var(--green), var(--wa), var(--green), var(--green-light));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  pointer-events: none;
  z-index: 1;
}
.metrics-grid.visible .metric:nth-child(1) .metric-num { animation: gm-count-pop 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.05s both; }
.metrics-grid.visible .metric:nth-child(2) .metric-num { animation: gm-count-pop 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.15s both; }
.metrics-grid.visible .metric:nth-child(3) .metric-num { animation: gm-count-pop 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.25s both; }
.metrics-grid.visible .metric:nth-child(4) .metric-num { animation: gm-count-pop 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.35s both; }
@keyframes gm-count-pop {
  0%   { opacity:0; transform:scale(0.7) translateY(12px); }
  70%  { transform:scale(1.06) translateY(-2px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}

/* ─── COMPARE: slide in from sides ─── */
.compare-grid .reveal.rd1.visible { animation: gm-slide-left  0.6s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.compare-grid .reveal.rd2.visible { animation: gm-slide-right 0.6s cubic-bezier(0.25,0.46,0.45,0.94) 0.1s both; }
@keyframes gm-slide-left  { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:translateX(0)} }
@keyframes gm-slide-right { from{opacity:0;transform:translateX(24px)}  to{opacity:1;transform:translateX(0)} }

/* ─── FEATURE CARDS: stagger rise ─── */
.cards-grid .feat-card.rd1.visible { animation: gm-card-rise 0.55s cubic-bezier(0.25,0.46,0.45,0.94) 0.05s both; }
.cards-grid .feat-card.rd2.visible { animation: gm-card-rise 0.55s cubic-bezier(0.25,0.46,0.45,0.94) 0.12s both; }
.cards-grid .feat-card.rd3.visible { animation: gm-card-rise 0.55s cubic-bezier(0.25,0.46,0.45,0.94) 0.19s both; }
.cards-grid .feat-card.rd4.visible { animation: gm-card-rise 0.55s cubic-bezier(0.25,0.46,0.45,0.94) 0.26s both; }
@keyframes gm-card-rise {
  from { opacity:0; transform:translateY(20px) scale(0.97); }
  to   { opacity:1; transform:translateY(0)    scale(1);    }
}

/* feat-desc subtle colour on hover */
.feat-desc { transition: color 0.2s ease; }
.feat-card:hover .feat-desc { color: var(--text-2); }

/* eyebrow tracking on feat-row hover */
.feat-text .eyebrow { transition: letter-spacing 0.3s ease; }
.feat-row:hover .feat-text .eyebrow { letter-spacing: 1px; }

/* Analytics table row highlight */
.analytics-tbl tbody tr { transition: background 0.15s ease; }
.analytics-tbl tbody tr:hover td { background: var(--green-xlight); }

/* Booking slot hover */
.slot { transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.slot-free:hover { border-color: var(--green); background: var(--green-xlight); transform: translateX(3px); }

/* vis-label tracking */
.vis-label { letter-spacing: 0.9px; }

/* ─── AI SECTION: animated dashes + orb drift ─── */
.ai-connector-line {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.35) 0px,
    rgba(255,255,255,0.35) 6px,
    transparent 6px,
    transparent 14px
  );
  background-size: 200% 1px;
  animation: gm-dash-march 2.5s linear infinite;
  height: 1px;
  border: none;
  flex: 1;
}
@keyframes gm-dash-march {
  from { background-position: 0 0; }
  to   { background-position: -200% 0; }
}
.ai-section::before {
  animation: gm-orb-drift 14s ease-in-out infinite alternate;
}
@keyframes gm-orb-drift {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-28px) scale(1.05); }
}

/* AI flow nodes stagger */
.ai-visual.visible .ai-node:nth-child(1) { animation: gm-node-in 0.45s cubic-bezier(0.25,0.46,0.45,0.94) 0.05s both; }
.ai-visual.visible .ai-node:nth-child(3) { animation: gm-node-in 0.45s cubic-bezier(0.25,0.46,0.45,0.94) 0.18s both; }
.ai-visual.visible .ai-node:nth-child(5) { animation: gm-node-in 0.45s cubic-bezier(0.25,0.46,0.45,0.94) 0.31s both; }
.ai-visual.visible .ai-node:nth-child(7) { animation: gm-node-in 0.45s cubic-bezier(0.25,0.46,0.45,0.94) 0.44s both; }
@keyframes gm-node-in {
  from { opacity:0; transform:translateX(14px); }
  to   { opacity:1; transform:translateX(0);    }
}

/* ─── INDUSTRY: stagger ─── */
.industries-grid .ind-card.rd1.visible { animation: gm-card-rise 0.45s cubic-bezier(0.25,0.46,0.45,0.94) 0.03s both; }
.industries-grid .ind-card.rd2.visible { animation: gm-card-rise 0.45s cubic-bezier(0.25,0.46,0.45,0.94) 0.09s both; }
.industries-grid .ind-card.rd3.visible { animation: gm-card-rise 0.45s cubic-bezier(0.25,0.46,0.45,0.94) 0.15s both; }
.industries-grid .ind-card.rd4.visible { animation: gm-card-rise 0.45s cubic-bezier(0.25,0.46,0.45,0.94) 0.21s both; }

/* ─── TESTIMONIALS: extra hover polish ─── */
.testi-text  { transition: color 0.25s ease; }
.testi-card:hover .testi-text { color: var(--text); }
.testi-role  { transition: color 0.2s ease; }
.testi-card:hover .testi-role { color: var(--green); }
.testi-name  { transition: color 0.2s ease; }
.testi-card:hover .testi-name { color: var(--green); }

/* ─── PRICING: plan badge + featured glow pulse ─── */
.plan-badge { animation: gm-badge-drop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.4s both; }
@keyframes gm-badge-drop {
  from { opacity:0; transform:translateX(-50%) translateY(-8px) scale(0.8); }
  to   { opacity:1; transform:translateX(-50%) translateY(0)    scale(1);   }
}
.plan.featured {
  animation: gm-plan-glow 3s ease-in-out infinite;
}
@keyframes gm-plan-glow {
  0%,100% { box-shadow: 0 4px 24px rgba(0,76,61,0.15); }
  50%      { box-shadow: 0 4px 36px rgba(0,76,61,0.3); }
}
.plan.featured:hover { animation: none !important; }
.plan-name { letter-spacing: 0.9px; }
.plan-desc { transition: color 0.2s ease; }
.plan:hover .plan-desc { color: var(--text-2); }

/* ─── CTA SECTION: mesh + text shadow ─── */
.cta-section {
  background-image:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(255,255,255,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 80% 30%, rgba(37,211,102,0.06) 0%, transparent 70%);
}
.cta-section h2 { text-shadow: 0 2px 20px rgba(0,0,0,0.15); }
.cta-note { letter-spacing: 0.3px; }

/* ─── FOOTER: top rainbow line, WA badge pulse, col underline expand ─── */
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0,76,61,0.7), rgba(37,211,102,0.45), rgba(0,76,61,0.7), transparent);
  pointer-events: none;
}
.wa-dot { animation: gm-wa-pulse 2.5s ease-in-out infinite; }
@keyframes gm-wa-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.55); }
  50%      { box-shadow: 0 0 0 4px rgba(37,211,102,0); }
}
.footer-col-title::after { transition: width 0.3s ease; }
.footer-grid > div:hover .footer-col-title::after { width: 40px; }
.footer-logo img { transition: opacity 0.2s ease, transform 0.3s ease; }
.footer-logo:hover img { opacity: 1; transform: scale(1.03); }
.footer-copy { transition: color 0.2s ease; }
.footer-bottom:hover .footer-copy { color: rgba(255,255,255,0.48); }

/* ─── GLOBAL: selection colour ─── */
::selection { background: rgba(0,76,61,0.18); color: var(--green); }

/* ─── GLOBAL: custom scrollbar ─── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--green-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--green-mid); }

/* ─── GLOBAL: scroll progress bar (requires JS below) ─── */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: calc(var(--scroll-pct, 0) * 1%);
  background: linear-gradient(90deg, var(--green), var(--wa));
  z-index: 99999;
  pointer-events: none;
  transition: width 0.08s linear;
}

/* ─── GLOBAL: section header h2 green on hover ─── */
.section-header { cursor: default; }
.section-header h2 { transition: color 0.25s ease; }
.section-header:hover h2 { color: var(--green); }

/* ─── MOBILE: disable heavy animations for performance ─── */
@media (max-width: 900px) {
  .hero h1, .hero-sub, .hero-btns, .hero-trust, .hero-badge,
  .bbl-in, .bbl-out, .bbl-btn-wrap {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  body::before { display: none; }
  .ai-section::before { animation: none; }
  .plan.featured { animation: none; }
}

@media (max-width: 600px) {
  .metrics-grid::before { display: none; }
}

/* ─── REDUCED MOTION: respect user preference ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   AICUBIX — enhancements-v5-additions.css
   APPEND these rules to the bottom of your existing enhancements.css
   Every rule here is net-new — no conflicts with v3/v4.
══════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────
   1. HERO — trust items + sub text
───────────────────────────────────────── */

/* Keep trust items on one line, don't wrap */
.hero-trust {
  flex-wrap: nowrap;
  white-space: nowrap;
}
.trust-item {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Tighter max-width on hero paragraph */
.hero-sub {
  max-width: 520px;
}

/* Stat cards always above phone */
.stat-card { z-index: 3; }


/* ─────────────────────────────────────────
   2. METRICS — star colour + spacing
───────────────────────────────────────── */

/* Tighten the gap between marquee and metrics */
.metrics-wrap { padding: 44px 0; }

/* Make 4.5★ star gold/amber */
.metric-num {
  /* Targets the ★ inside metric-num via inherited color */
}
/* Target the specific metric that has a star */
.metrics-grid .metric:nth-child(3) .metric-num {
  color: #F59E0B; /* amber — looks like a real rating */
}
.metrics-grid .metric:nth-child(3):hover .metric-num {
  color: #D97706;
}


/* ─────────────────────────────────────────
   3. COMPARE CARDS — contrast boost
───────────────────────────────────────── */

.cmp-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.cmp-good .cmp-label { color: var(--green); }
.cmp-bad  .cmp-label { color: #A32D2D; }

/* Good card — subtle outer glow */
.cmp-good {
  border: 1.5px solid #A8DCCB;
  box-shadow: 0 0 0 3px rgba(0,76,61,0.05);
}


/* ─────────────────────────────────────────
   4. FEATURE CARDS — equal height + arrow baseline
───────────────────────────────────────── */

.feat-card {
  display: flex;
  flex-direction: column;
}
.feat-arrow {
  margin-top: auto; /* pushes arrow to bottom of every card */
  padding-top: 14px;
}


/* ─────────────────────────────────────────
   5. AI SECTION — stronger CTA button
───────────────────────────────────────── */

/* "See AI in Action" btn — more presence on dark bg */
.ai-section .btn-white {
  padding: 13px 30px;
  font-weight: 600;
  letter-spacing: 0.1px;
}


/* ─────────────────────────────────────────
   6. INDUSTRY CARDS — arrow affordance
───────────────────────────────────────── */

.ind-card {
  justify-content: flex-start; /* keep icon + name left */
  min-height: 62px;
}
/* Arrow hint on right */
.ind-name::after {
  content: '→';
  position: absolute;
  right: 20px;
  opacity: 0;
  color: var(--green);
  font-size: 13px;
  transition: opacity 0.2s ease, right 0.2s ease;
}
.ind-card { position: relative; } /* needed for ::after */
.ind-card:hover .ind-name::after {
  opacity: 1;
  right: 16px;
}


/* ─────────────────────────────────────────
   7. TESTIMONIALS — quote mark + height fix
───────────────────────────────────────── */

/* More visible quote mark */
.testi-card::before {
  color: rgba(0,76,61,0.1) !important; /* override v4's --green-light */
}
.testi-card:hover::before {
  color: rgba(0,76,61,0.18) !important;
}

/* Equal height cards — author strip always at bottom */
.testi-grid {
  align-items: stretch;
}
.testi-card {
  display: flex;
  flex-direction: column;
}
.testi-text {
  flex: 1; /* takes all available space, pushing author to bottom */
}
.testi-author {
  margin-top: auto;
}


/* ─────────────────────────────────────────
   8. PRICING — button borders + consistency
───────────────────────────────────────── */

/* Ensure outline button always has a visible border */
.plan-btn.outline {
  border: 1.5px solid var(--border) !important;
}
.plan-btn.outline:hover {
  border-color: var(--green) !important;
}

/* Equal height plan cards */
.pricing-grid {
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
}
.plan-btn {
  margin-top: auto; /* button always at bottom of each plan */
}

/* Enterprise price — make intentional difference clear */
.plan:last-child .plan-price {
  font-size: 36px !important;
  padding-top: 4px;
  color: var(--text);
}

/* Plan feature ✓ — make consistent colour */
.plan-feats li::before {
  color: var(--green);
  font-size: 14px;
}


/* ─────────────────────────────────────────
   9. CTA SECTION — better button hierarchy
───────────────────────────────────────── */

.cta-btns {
  gap: 16px;
}

/* Primary CTA in CTA section — bigger */
.cta-section .btn-white {
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 600;
}

/* Ghost CTA — secondary presence */
.cta-section .btn-outline-white {
  padding: 13px 26px;
  font-size: 15px;
}

/* Subtle WA watermark in CTA background */
.cta-section::after {
  content: '';
  position: absolute;
  bottom: -40px;
  right: 5%;
  width: 320px;
  height: 320px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.149-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413zM12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2 22l4.978-1.304A9.955 9.955 0 0012 22c5.523 0 10-4.477 10-10S17.523 2 12 2z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-15deg);
}


/* ─────────────────────────────────────────
   10. FOOTER — logo opacity + social size
───────────────────────────────────────── */

/* Logo fully visible */
.footer-logo img {
  opacity: 1 !important;
}

/* Social icons — clearer labels, bigger hit area */
.soc-link {
  width: 36px !important;
  height: 36px !important;
  font-size: 13px !important;
}

/* Footer desc — slightly brighter */
.footer-desc {
  color: rgba(255,255,255,0.5);
}

/* Address — slightly brighter */
.footer-addr {
  color: rgba(255,255,255,0.38);
}


/* ─────────────────────────────────────────
   11. GLOBAL — a few finishing touches
───────────────────────────────────────── */

/* Section sub text — slightly larger for readability */
.section-sub {
  font-size: 16px;
  line-height: 1.7;
}

/* Eyebrow — slightly more spacing from heading */
.eyebrow {
  margin-bottom: 16px !important;
}

/* h3 in feature rows — slightly tighter spacing */
.feat-text h3 {
  margin-bottom: 12px;
}

/* Smooth all anchor tags */
a {
  transition: color 0.18s ease, opacity 0.18s ease;
}

/* Better paragraph spacing inside feature text */
.feat-text > p {
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-2);
}

/* Mini stat numbers in feat-visual — bolder */
.feat-visual [style*="font-size:20px"] {
  font-family: 'DM Serif Display', serif;
}

/* Booking flow — "yes" button more prominent */
.slot-sel {
  font-weight: 600;
  letter-spacing: 0.1px;
}

/* Compare msg bubble — tighter line height */
.cmp-msg {
  line-height: 1.6;
  font-size: 13.5px;
}

/* ─────────────────────────────────────────
   12. MOBILE FIXES
───────────────────────────────────────── */

@media (max-width: 900px) {
  /* Hero trust — allow wrapping on very small screens only */
  .hero-trust { flex-wrap: wrap; }
  .trust-sep  { display: none; } /* hide separating dots on mobile */

  /* Metrics spacing */
  .metrics-wrap { padding: 32px 0; }

  /* CTA buttons stack nicely */
  .cta-btns { flex-direction: column; align-items: center; }
  .cta-section .btn-white,
  .cta-section .btn-outline-white { width: 100%; max-width: 320px; justify-content: center; }

  /* Industry cards — no arrow on mobile (too tight) */
  .ind-name::after { display: none; }

  /* Footer logo full opacity always */
  .footer-logo img { opacity: 1 !important; }

  /* Pricing cards equal height off on mobile */
  .pricing-grid { align-items: start; }
}

@media (max-width: 600px) {
  /* Testimonial cards — equal height off on mobile */
  .testi-grid { align-items: start; }

  /* Feature cards — arrow baseline off on single column */
  .feat-arrow { margin-top: 14px; padding-top: 0; }

  /* Section sub text */
  .section-sub { font-size: 15px; }
}

/* ── DROPDOWN HOVER GAP FIX ──────────────────────── */
.nav-item::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}

.dropdown {
  top: 100% !important;
  padding-top: 10px !important;
  margin-top: 0 !important;
}

/* ── BY INDUSTRY 2-COLUMN GRID ───────────────────── */
.nav-industries .dropdown {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  min-width: 460px;
  padding: 10px 6px 6px;
}
.nav-industries:hover .dropdown {
  display: grid !important;
}

/* ── HERO QR CODE ── */
.hero-qr-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-qr-wrap #hero-qr-box {
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-qr-wrap #hero-qr-box canvas,
.hero-qr-wrap #hero-qr-box img {
  width: 48px !important;
  height: 48px !important;
}
.hero-qr-label {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.4;
  max-width: 90px;
}





/* ══ END v5 additions ══ */


/*
  ╔══════════════════════════════════════════════════════╗
  ║  ADD THIS SCRIPT before </body> on EVERY page:      ║
  ║                                                      ║
  ║  <script>                                            ║
  ║  // Scroll progress bar                              ║
  ║  window.addEventListener('scroll', () => {           ║
  ║    const t = document.documentElement;               ║
  ║    const pct = (window.scrollY /                     ║
  ║      (t.scrollHeight - t.clientHeight)) * 100;      ║
  ║    t.style.setProperty('--scroll-pct', pct);        ║
  ║  }, { passive: true });                              ║
  ║  // Lazy image fade-in                               ║
  ║  document.querySelectorAll('img[loading="lazy"]')    ║
  ║    .forEach(img => {                                 ║
  ║      if (img.complete) img.classList.add('loaded');  ║
  ║      else img.addEventListener('load', () =>         ║
  ║        img.classList.add('loaded'));                 ║
  ║    });                                               ║
  ║  </script>                                           ║
  ╚══════════════════════════════════════════════════════╝
*/

/* ══ END GOD MODE v4 ══ */