/* ═════════════════════════════════════════════════════════════════
   BRAND LAYER (2026-10-10) — loaded AFTER style.css, wins over the
   2026-05-14 "light aesthetic" overrides. Brings the site in line with
   the blog banners: indigo → cyan gradient actions, navy bands with a
   soft glow, cards with depth on hover, motion that respects
   prefers-reduced-motion. Tokens only here; no per-page CSS.
   ═════════════════════════════════════════════════════════════════ */
:root {
  --brand-purple: #625da9;           /* logo purple */
  --brand-indigo: #4f46e5;
  --brand-violet: #7c6cf0;
  --brand-cyan:   #06b6d4;
  --brand-navy:   #0d1220;
  --brand-grad:   linear-gradient(135deg, #4f46e5 0%, #6d5ff2 48%, #06b6d4 100%);
  --brand-grad-soft: linear-gradient(135deg, #eef2ff 0%, #ecfeff 100%);
  --brand-glow:   0 10px 30px -10px rgba(79, 70, 229, .55), 0 2px 8px -2px rgba(6, 182, 212, .25);
  --brand-glow-lg: 0 18px 44px -12px rgba(79, 70, 229, .6), 0 4px 14px -4px rgba(6, 182, 212, .35);
  --lift: 0 14px 34px -14px rgba(13, 18, 32, .22), 0 2px 6px rgba(13, 18, 32, .05);
}

/* ── Buttons: gradient primary with glow + shine, tinted ghost ────── */
.btn { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }
.btn-primary, .btn-accent {
  background: var(--brand-grad) !important; background-size: 160% 160% !important; background-position: 0% 50% !important;
  color: #fff !important; border: 0 !important; box-shadow: var(--brand-glow) !important;
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-primary::after, .btn-accent::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .55s ease;
}
.btn-primary:hover, .btn-accent:hover { background-position: 100% 50% !important; transform: translateY(-2px) !important; box-shadow: var(--brand-glow-lg) !important; }
.btn-primary:hover::after, .btn-accent:hover::after { transform: translateX(130%); }
.btn-primary:active, .btn-accent:active { transform: translateY(0) !important; }
.btn-ghost {
  background: rgba(255,255,255,.6) !important; color: var(--brand-indigo) !important;
  border: 1px solid rgba(79, 70, 229, .28) !important; backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: var(--accent-soft) !important; border-color: rgba(79, 70, 229, .55) !important; transform: translateY(-2px); box-shadow: 0 8px 20px -12px rgba(79,70,229,.45); }
.btn .arrow, .btn-link .arrow { display: inline-block; transition: transform .18s ease; }
.btn:hover .arrow, .arrow-link:hover .arrow { transform: translateX(4px); }
.btn-lg { padding: 15px 28px !important; font-size: 15.5px !important; }
/* dark surfaces keep a white primary for contrast */
.section-bg-dark .btn-primary, .lf-cta .btn-primary, .footer .btn-primary {
  background: #fff !important; color: var(--brand-navy) !important; box-shadow: 0 10px 30px -12px rgba(255,255,255,.35) !important;
}
.section-bg-dark .btn-ghost, .lf-cta .btn-ghost { background: rgba(255,255,255,.06) !important; color: #fff !important; border-color: rgba(255,255,255,.28) !important; }

/* ── Topbar: glassy, gradient CTA, gradient active underline ──────── */
.topbar { background: rgba(255,255,255,.78) !important; backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(13,18,32,.06); transition: box-shadow .2s ease, border-color .2s ease; }
.topbar.is-scrolled { box-shadow: 0 10px 30px -18px rgba(13,18,32,.25); border-color: rgba(13,18,32,.1); }
.nav-item, .nav-group-trigger { position: relative; }
.nav-item::after, .nav-group-trigger::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--brand-grad); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.nav-item:hover::after, .nav-item.active::after, .nav-group-trigger:hover::after, .nav-group-trigger.active::after { transform: scaleX(1); }

/* ── Type accents ─────────────────────────────────────────────────── */
.text-gradient { background-image: var(--brand-grad) !important; background-color: transparent !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent; color: transparent !important; }
.eyebrow { color: var(--brand-indigo) !important; letter-spacing: .08em !important; }
.eyebrow .dot { background: var(--brand-grad) !important; width: 7px !important; height: 7px !important; box-shadow: 0 0 0 4px rgba(79,70,229,.12); }
.section-bg-dark .eyebrow { color: #7dd3fc !important; }

/* ── Cards: depth on hover, gradient hairline, tinted icon tiles ─── */
.surface, .surface.card-fancy, .post-card, .feature-card, .card-fancy, .feature-card-fancy, .pricing-card, .industry-card, .lf-card {
  position: relative; background: #fff; border: 1px solid rgba(13,18,32,.08) !important; border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(13,18,32,.04) !important;
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .22s ease !important;
}
.card-link:hover .surface, .card-link:hover .feature-card, .surface:hover, .feature-card:hover, .card-fancy:hover, .post-card:hover, .industry-card:hover, .lf-card:hover {
  transform: translateY(-4px) !important; box-shadow: var(--lift) !important; border-color: rgba(79,70,229,.35) !important;
}
.feature-card::before, .card-fancy::before, .industry-card::before, .lf-card::before {
  content: ''; position: absolute; left: 16px; right: 16px; top: -1px; height: 2px; border-radius: 2px;
  background: var(--brand-grad); opacity: 0; transition: opacity .22s ease; pointer-events: none;
}
.card-link:hover .feature-card::before, .feature-card:hover::before, .card-fancy:hover::before, .industry-card:hover::before, .lf-card:hover::before { opacity: 1; }
.card-icon, .nav-mega-icon, .feature-icon {
  background: var(--brand-grad-soft) !important; color: var(--brand-indigo) !important;
  border: 1px solid rgba(79,70,229,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  transition: transform .22s ease, box-shadow .22s ease;
}
.card-link:hover .card-icon, .feature-card:hover .card-icon { transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 18px -10px rgba(79,70,229,.5); }
.feature-card .arrow, .card .arrow { color: var(--brand-indigo); font-weight: 600; transition: transform .18s ease; display: inline-block; }
.card-link:hover .arrow { transform: translateX(4px); }

/* ── Sections: subtle tints + navy band with glow ──────────────── */
.section-bg-soft { background: linear-gradient(180deg, #fafbfe 0%, #f5f6fb 100%) !important; border-top: 1px solid rgba(13,18,32,.05); border-bottom: 1px solid rgba(13,18,32,.05); }
.section-bg-tint { background: linear-gradient(135deg, #f3f4ff 0%, #effcfe 100%) !important; }
.section-bg-dark {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(900px 420px at 80% 0%, rgba(79,70,229,.45), transparent 60%),
              radial-gradient(700px 380px at 10% 100%, rgba(6,182,212,.28), transparent 60%),
              var(--brand-navy) !important;
}
.section-bg-dark::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .18;
  background-image: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px); background-size: 26px 26px; }
.lf-cta, .cta-card-dark { background: radial-gradient(700px 300px at 85% 0%, rgba(79,70,229,.5), transparent 60%), var(--brand-navy) !important; }

/* ── Hero: dotted field + living glows + floating product frame ──── */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(rgba(79,70,229,.16) 1px, transparent 1px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%); }
.hero .orb { display: block !important; filter: blur(70px); opacity: .55; z-index: -1; pointer-events: none; }
.hero .orb-purple { opacity: .3; }
.product-frame { box-shadow: 0 30px 70px -30px rgba(13,18,32,.35), 0 0 0 1px rgba(13,18,32,.06) !important; border-radius: 18px !important; transition: transform .25s ease, box-shadow .25s ease; will-change: transform; }
.product-frame[data-tilt] { transform-style: preserve-3d; }
.hero .product-frame { animation: brandFloat 7s ease-in-out infinite; }
@keyframes brandFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero-meta { border: 1px solid rgba(79,70,229,.18) !important; box-shadow: 0 4px 14px -8px rgba(79,70,229,.35); }
.lang-pill { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.lang-pill:hover { transform: translateY(-2px); border-color: rgba(79,70,229,.45); box-shadow: 0 6px 14px -10px rgba(79,70,229,.5); }

/* ── Stats strip (replaces the logo strip) ─────────────────────── */
.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.stat { padding: 22px 24px; border-radius: 16px; background: #fff; border: 1px solid rgba(13,18,32,.08); position: relative; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease; }
.stat::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brand-grad); opacity: .9; }
.stat:hover { transform: translateY(-3px); box-shadow: var(--lift); }
.stat-n { font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.stat-n .sfx { font-size: 20px; font-weight: 700; color: var(--brand-indigo); margin-left: 2px; }
.stat-l { margin-top: 8px; font-size: 13.5px; color: var(--text-muted); }

/* ── Marquee (languages / integrations) ────────────────────────── */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: brandMarquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes brandMarquee { to { transform: translateX(-50%); } }

/* ── Waveform (hero / voice sections) ──────────────────────────── */
.wave { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.wave i { display: block; width: 3px; border-radius: 2px; background: var(--brand-grad); height: 30%; animation: brandWave 1.1s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: .1s } .wave i:nth-child(3) { animation-delay: .2s } .wave i:nth-child(4) { animation-delay: .3s } .wave i:nth-child(5) { animation-delay: .4s } .wave i:nth-child(6) { animation-delay: .5s } .wave i:nth-child(7) { animation-delay: .6s }
@keyframes brandWave { 0%, 100% { height: 25%; } 50% { height: 100%; } }

/* ── Pricing: highlighted plan glows ───────────────────────────── */
.pricing-card.featured, .pricing-card.popular, .plan-featured { border-color: rgba(79,70,229,.5) !important; box-shadow: var(--brand-glow) !important; }
.pricing-badge, .badge-popular, .most-popular { background: var(--brand-grad) !important; color: #fff !important; }

/* ── Footer: gradient hairline, brand-tinted links ─────────────── */
.footer { position: relative; background: var(--brand-navy) !important; }
.footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand-grad); }
.footer a:hover { color: #a5b4fc !important; }

/* ── Tables / FAQ: brand accents ───────────────────────────────── */
.faq-item[open] summary, details[open] > summary { color: var(--brand-indigo); }
.data-table th { background: var(--brand-grad-soft) !important; }

/* ── Reading progress (longform) ───────────────────────────────── */
.read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--brand-grad); z-index: 1000; transition: width .1s linear; }

/* ── Motion safety ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero .product-frame, .marquee-track, .wave i { animation: none !important; }
  .btn, .surface, .feature-card, .stat, .lf-card { transition: none !important; }
}
@media (max-width: 960px) { .stat-strip { grid-template-columns: repeat(2, minmax(0,1fr)); } .stat-n { font-size: 28px; } }
@media (max-width: 640px) { .stat-strip { gap: 10px; } .stat { padding: 16px; } }

/* ── Home brand moments (2026-10-10) ───────────────────────────── */
/* product band: glass cards on navy */
.band-product .h2, .band-product .h4, .band-product h3 { color: #fff; }
.band-product .lead { color: #c3c7d4; }
.band-product .feature-card { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.12) !important; backdrop-filter: blur(8px); color: #e5e7ef; }
.band-product .feature-card p { color: #b7bccb; }
.band-product .card-link:hover .feature-card { background: rgba(255,255,255,.08) !important; border-color: rgba(125,211,252,.55) !important; box-shadow: 0 20px 50px -20px rgba(6,182,212,.45) !important; }
.band-product .card-icon { background: var(--brand-grad) !important; color: #fff !important; border: 0; box-shadow: 0 8px 20px -10px rgba(79,70,229,.8); }
.band-product .feature-card .arrow { color: #7dd3fc; }
/* 7th module card spans the row so there is no orphan */
.band-product .fgrid > .card-link:nth-child(7):last-child { grid-column: 1 / -1; }
.band-product .fgrid > .card-link:nth-child(7):last-child .feature-card { flex-direction: row; align-items: center; gap: 22px; }
.band-product .fgrid > .card-link:nth-child(7):last-child .feature-card p { flex: 1; margin: 0; }
.band-product .fgrid > .card-link:nth-child(7):last-child .feature-card h3 { margin: 0; min-width: 200px; }

/* rotating word in the hero */
.rotate-word { display: inline-block; position: relative; color: var(--brand-indigo); white-space: nowrap; border-bottom: 3px solid rgba(79,70,229,.25); line-height: 1; }
.rotate-word.is-out { animation: brandWordOut .28s ease forwards; }
.rotate-word.is-in { animation: brandWordIn .32s ease forwards; }
@keyframes brandWordOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes brandWordIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* how-it-works steps */
.steps { position: relative; }
.step { position: relative; overflow: visible !important; }
.step-n { position: absolute; top: -14px; left: 22px; width: 30px; height: 30px; border-radius: 999px; background: var(--brand-grad); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; box-shadow: var(--brand-glow); }
@media (min-width: 961px) { .steps::before { content: ''; position: absolute; left: 6%; right: 6%; top: 1px; height: 2px; background: linear-gradient(90deg, rgba(79,70,229,.1), rgba(79,70,229,.6), rgba(6,182,212,.6), rgba(6,182,212,.1)); } }

/* integration marquee chips */
.int-chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 9px 10px; border-radius: 999px; background: #fff; border: 1px solid rgba(13,18,32,.08); font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.int-chip img { width: 20px; height: 20px; border-radius: 5px; object-fit: contain; }
.int-chip:hover { border-color: rgba(79,70,229,.45); box-shadow: 0 8px 18px -12px rgba(79,70,229,.5); transform: translateY(-2px); }
.marquee-rev .marquee-track { animation-direction: reverse; animation-duration: 46s; }

/* closing CTA glow card */
.cta-glow { position: relative; overflow: hidden; border: 1px solid rgba(79,70,229,.25) !important; box-shadow: var(--brand-glow-lg) !important;
  background: radial-gradient(600px 240px at 50% 0%, rgba(79,70,229,.14), transparent 70%), #fff !important; }
.cta-glow::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--brand-grad); }

/* ── 2026-10-10 fixes: footer contrast on navy, demo widget, table scroll hint ── */
.footer, .footer p, .footer .mini, .footer-bot { color: #c8ccd6 !important; }
.footer h4 { color: #ffffff !important; }
.footer ul a, .footer-bot a, .footer-legal a, .footer-brand, .footer-location { color: #d7dbe6 !important; }
.footer ul a:hover, .footer-bot a:hover, .footer-legal a:hover { color: #a5b4fc !important; }
.footer-bot { border-top-color: rgba(255,255,255,.1) !important; }
.footer p.mini { color: #9aa1b5 !important; }
.footer .btn-primary { background: #fff !important; color: var(--brand-navy) !important; }

/* demo-call launcher: brand gradient, bigger, pulsing ring */
#dcw #dcw-launch { background: var(--brand-grad) !important; background-size: 160% 160%; color: #fff !important; font-size: 16px !important; font-weight: 700 !important;
  padding: 15px 24px 15px 18px !important; box-shadow: 0 16px 40px -12px rgba(79,70,229,.75), 0 0 0 1px rgba(255,255,255,.25) inset !important; position: relative; }
#dcw #dcw-launch::before { content: ''; position: absolute; inset: -6px; border-radius: 999px; border: 2px solid rgba(79,70,229,.45); animation: dcwRing 2.2s ease-out infinite; pointer-events: none; }
@keyframes dcwRing { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
#dcw #dcw-launch .dot { width: 30px !important; height: 30px !important; border-radius: 999px !important; background: #fff !important; box-shadow: none !important; animation: none !important;
  display: grid; place-items: center; }
#dcw #dcw-launch .dot::after { content: '📞'; font-size: 15px; animation: dcwShake 2.2s ease-in-out infinite; }
@keyframes dcwShake { 0%, 60%, 100% { transform: rotate(0); } 65% { transform: rotate(-14deg); } 70% { transform: rotate(12deg); } 75% { transform: rotate(-10deg); } 80% { transform: rotate(8deg); } 85% { transform: rotate(0); } }
#dcw #dcw-launch:hover { transform: translateY(-3px) !important; background-position: 100% 50% !important; box-shadow: 0 22px 50px -14px rgba(79,70,229,.9) !important; }
#dcw .dcw-btn:not(.ghost) { background: var(--brand-grad) !important; box-shadow: var(--brand-glow); }
#dcw #dcw-card { border: 1px solid rgba(79,70,229,.25) !important; box-shadow: 0 30px 70px -20px rgba(13,18,32,.45) !important; }
@media (max-width: 640px) { #dcw #dcw-launch { font-size: 14.5px !important; padding: 13px 18px 13px 14px !important; } }
@media (prefers-reduced-motion: reduce) { #dcw #dcw-launch::before, #dcw #dcw-launch .dot::after { animation: none !important; } }

/* wide tables: visible scrollbar, edge fade + hint while scrollable */
.table-wrap { position: relative; scrollbar-width: thin; scrollbar-color: rgba(79,70,229,.6) rgba(13,18,32,.06); }
.table-wrap::-webkit-scrollbar { height: 9px; }
.table-wrap::-webkit-scrollbar-track { background: rgba(13,18,32,.05); border-radius: 6px; }
.table-wrap::-webkit-scrollbar-thumb { background: rgba(79,70,229,.55); border-radius: 6px; }
.table-scroll { position: relative; }
.table-scroll::after { content: 'scroll →'; position: absolute; top: 8px; right: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--brand-grad); padding: 4px 9px; border-radius: 999px; box-shadow: var(--brand-glow); pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 2; }
.table-scroll.is-scrollable::after { opacity: 1; }
.table-scroll.is-scrollable::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 56px; pointer-events: none; z-index: 1; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95)); border-radius: 0 10px 10px 0; }
@media (min-width: 1025px) { .lf-prose .table-scroll { width: calc(100% + 116px); } }
/* Mobile: style.css turns <table> into display:block scroller; inside .table-wrap keep the wrapper as the single scroller so the hint works */
@media (max-width: 760px) { .table-wrap > table { display: table !important; overflow: visible !important; width: 100%; } }
/* Footer wordmark on navy */
.footer .brand-text, .footer .footer-brand span { color: #fff !important; }

/* ── Hero art (2026-10-10: conceptual 3D visual instead of the dashboard mockup) ── */
.hero-art { position: relative; max-width: 560px; margin: 0 auto; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.hero-art img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(79,70,229,.18)); animation: hero-art-float 7s ease-in-out infinite; }
.hero-art::after { content: ""; position: absolute; inset: 14% 8% 2% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(6,182,212,.22), rgba(79,70,229,.10) 55%, transparent 72%); z-index: -1; filter: blur(12px); }
@keyframes hero-art-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@media (max-width: 760px) { .hero-art { max-width: 86vw; margin-top: 28px; } .hero-art img { animation: none; } }
@media (prefers-reduced-motion: reduce) { .hero-art img { animation: none; } }

/* 2026-10-15 (Ravi, screenshot of /pages/solutions/ai-voice-agent.html): the "See it on your own leads" banner at the
   end of 41 landing pages (solutions, use cases, industries, about, pricing…) is a .surface-elev with an inline gradient.
   style.css's monochrome pass forces `.surface-elev { background:#fff !important }`, so the banner went white and its
   white heading and white button vanished. Render it the way the blog article footer (.lf-cta) looks: dark panel,
   white heading, soft body text, white button — one look for every "book a demo" close on the site. */
.surface-elev[style*="linear-gradient"] { background: var(--bg-dark, #0a0c12) !important; border: 0 !important; color: #fff !important; }
.surface-elev[style*="linear-gradient"] .h2 { color: #fff !important; }
.surface-elev[style*="linear-gradient"] p { color: #c3c7d4 !important; }
.surface-elev[style*="linear-gradient"] .btn { background: #fff !important; color: var(--text, #0d1220) !important; border: 1px solid #fff !important; box-shadow: none !important; }