/* ==========================================================================
   LionVoice — premium visual refresh (2026-09-24)
   Loaded LAST on the homepage. Scoped to body.body-v-three so other pages
   (tour, app, docs) keep their existing styling.
   Palette: indigo #4f46e5 → cyan #06b6d4 on a calm, soft mesh background.
   ========================================================================== */

:root{
  --lvp-ink:#0f172a;
  --lvp-ink-soft:#475569;
  --lvp-muted:#5b6577;
  --lvp-line:rgba(15,23,42,.09);
  --lvp-line-strong:rgba(15,23,42,.14);
  --lvp-surface:rgba(255,255,255,.80);
  --lvp-primary:#4f46e5;
  --lvp-cyan:#06b6d4;
  --lvp-violet:#7c3aed;
  --lvp-grad:linear-gradient(135deg,#4f46e5 0%,#0891b2 58%,#22d3ee 100%);
  --lvp-grad-soft:linear-gradient(135deg,rgba(79,70,229,.10),rgba(34,211,238,.10));
  --lvp-radius:22px;

  /* retune template base tokens (light theme only — dark theme overrides win) */
  --lightColor:#0f172a;
  --lightColorMedium:#5b6577;
  --lightBgMedium:#f5f7fc;
}

/* ---------- Background: ambient, slowly flowing mesh ---------- */
body.body-v-three{
  background-color:#f4f7fc !important;
}
/* Same proven logic as the dashboard (/app/?page=overview): corner→corner jump,
   NO background shorthand with !important (that would lock background-position and
   freeze the animation). Only longhands — image + size — are forced. */
body.body-v-three::after{
  inset:-8% !important;
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(79,70,229,.80), transparent 62%),
    radial-gradient(ellipse 65% 50% at 50% 50%, rgba(6,182,212,.72), transparent 60%),
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(124,58,237,.66), transparent 58%),
    radial-gradient(ellipse 55% 50% at 50% 50%, rgba(34,211,238,.60), transparent 58%) !important;
  background-size:160% 160%, 170% 150%, 150% 170%, 165% 160% !important;
  background-repeat:no-repeat !important;
  animation:lvAuroraGrad 30s ease-in-out infinite !important;
  filter:saturate(1.28) !important;
  opacity:.95 !important;
  will-change:background-position, opacity, transform;
}
body.body-v-three::before{
  opacity:.12 !important;
  background-image:radial-gradient(rgba(79,70,229,.5) 1px, transparent 1px) !important;
  background-size:24px 24px !important;
}
@media (prefers-reduced-motion:reduce){
  body.body-v-three::after{
    animation:none !important;
    background-position:10% 20%, 90% 15%, 80% 85%, 15% 80% !important;
  }
}

html[data-template='dark'] body.body-v-three{
  background-color:#070b16 !important;
}
html[data-template='dark'] body.body-v-three::after{
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(99,102,241,.72), transparent 62%),
    radial-gradient(ellipse 65% 50% at 50% 50%, rgba(6,182,212,.58), transparent 60%),
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(139,92,246,.62), transparent 58%),
    radial-gradient(ellipse 55% 50% at 50% 50%, rgba(34,211,238,.5), transparent 58%) !important;
}
html[data-template='dark'] body.body-v-three::before{opacity:.08 !important}

/* ---------- Header: clean translucent bar (no backdrop-filter — it would
   turn the header into the containing block for fixed nav children) ---------- */
#header.header-v-three{
  background:rgba(255,255,255,.94) !important;
  border-bottom:1px solid rgba(15,23,42,.07);
  box-shadow:0 10px 34px -26px rgba(15,23,42,.45);
}
html[data-template='dark'] #header.header-v-three{
  background:rgba(9,13,25,.94) !important;
  border-bottom-color:rgba(255,255,255,.08);
}

/* desktop vertical rail is styled inside the min-width:992px block below
   (mobile keeps the template's own bottom bar untouched) */

/* ---------- Section titles ---------- */
body.body-v-three .section-title h6{
  display:inline-flex !important;
  align-items:center;
  font-family:"Inter",sans-serif !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
  color:var(--lvp-primary) !important;
  background:rgba(79,70,229,.09);
  border:1px solid rgba(79,70,229,.18);
  border-radius:999px;
  padding:6px 14px !important;
  margin:0 0 16px !important;
}
body.body-v-three .section-title h2{
  font-family:"Inter",sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-.035em !important;
  line-height:1.05 !important;
  color:var(--lvp-ink) !important;
  font-size:clamp(1.8rem,3.1vw,2.85rem) !important;
}
body.body-v-three .section-title h2 small{
  display:block !important;
  float:none !important;
  text-align:left !important;
  font-size:.5em !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
  color:var(--lvp-muted) !important;
  margin-top:.5em !important;
  line-height:1.2 !important;
}
body.body-v-three .section-title h2::after{
  background-image:var(--lvp-grad) !important;
  background-color:transparent !important;
  height:4px !important;
  width:64px !important;
  border-radius:6px !important;
}
body.body-v-three .section-title p{
  color:var(--lvp-ink-soft) !important;
  font-size:1rem;
  line-height:1.7;
  max-width:34rem;
  margin:14px 0 30px 0 !important;
}
html[data-template='dark'] body.body-v-three .section-title h2{color:#eef2f8 !important}
html[data-template='dark'] body.body-v-three .section-title h6{
  color:#9db4ff !important;background:rgba(120,150,255,.12);border-color:rgba(120,150,255,.25)
}
html[data-template='dark'] body.body-v-three .section-title p{color:#a9b4c6 !important}

/* contact-section title blocks use h6/h4 without .section-title */
body.body-v-three #contact .contact-about h6{
  display:inline-flex !important;align-items:center;
  font-family:"Inter",sans-serif !important;font-size:12px !important;font-weight:800 !important;
  letter-spacing:.16em !important;text-transform:uppercase;color:var(--lvp-primary) !important;
  background:rgba(79,70,229,.09);border:1px solid rgba(79,70,229,.18);border-radius:999px;
  padding:6px 14px !important;margin:0 0 16px !important;
}
body.body-v-three #contact .contact-about h4,
body.body-v-three #contact .contact-about h3{
  font-family:"Inter",sans-serif !important;font-weight:800 !important;
  letter-spacing:-.03em !important;color:var(--lvp-ink) !important;
}
body.body-v-three #contact .contact-about p{color:var(--lvp-ink-soft) !important}

/* ---------- Buttons ---------- */
body.body-v-three .btn-get-started-solid,
body.body-v-three .lv-btn-solid,
body.body-v-three button.btn-get-started-solid,
body.body-v-three .php-email-form button[type="submit"]{
  background-image:var(--lvp-grad) !important;
  background-color:transparent !important;
  background-color:transparent !important;
  color:#fff !important;
  border:0 !important;
  border-radius:999px !important;
  box-shadow:0 16px 34px -14px rgba(79,70,229,.8) !important;
  font-family:"Inter",sans-serif !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
body.body-v-three .btn-get-started-solid:hover,
body.body-v-three .lv-btn-solid:hover,
body.body-v-three .php-email-form button[type="submit"]:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 22px 46px -16px rgba(79,70,229,.92) !important;
  filter:brightness(1.06);
  color:#fff !important;
}
body.body-v-three .lv-btn-ghost{
  border:1px solid var(--lvp-line-strong) !important;
  background:rgba(255,255,255,.72) !important;
  color:var(--lvp-ink) !important;
  border-radius:999px !important;
  font-weight:700 !important;
}
body.body-v-three .lv-btn-ghost:hover{border-color:var(--lvp-primary) !important;color:var(--lvp-primary) !important}
html[data-template='dark'] body.body-v-three .lv-btn-ghost{
  background:rgba(17,24,39,.7) !important;color:#e6ebf5 !important;border-color:rgba(255,255,255,.14) !important;
}

/* ---------- Cards ---------- */
body.body-v-three .icon-box.icon-box-v-three,
body.body-v-three .lv-plus,
body.body-v-three .lv-panel,
body.body-v-three .lv-call-mock,
body.body-v-three .lv-plan{
  background:var(--lvp-surface) !important;
  border:1px solid var(--lvp-line) !important;
  border-radius:var(--lvp-radius) !important;
  box-shadow:0 18px 44px -26px rgba(15,23,42,.5) !important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease !important;
}
body.body-v-three .icon-box.icon-box-v-three:hover,
body.body-v-three .lv-plus:hover,
body.body-v-three .lv-plan:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 30px 62px -28px rgba(79,70,229,.55) !important;
  border-color:rgba(79,70,229,.28) !important;
}
body.body-v-three .icon-box-v-three .icon i{
  background-image:var(--lvp-grad) !important;
  background-color:transparent !important;
  background-color:transparent !important;
  color:#fff !important;
  border-radius:16px !important;
  box-shadow:0 16px 32px -14px rgba(79,70,229,.75) !important;
}
body.body-v-three .lv-call-mock-head{background-image:var(--lvp-grad) !important;background-color:transparent !important;color:#fff !important}
body.body-v-three .lv-call-mock-head .lv-dot{background:#4ade80 !important;box-shadow:0 0 0 3px rgba(74,222,128,.25) !important}
body.body-v-three .lv-plus.featured,
body.body-v-three .lv-plus.lv-integ-plus{
  background:linear-gradient(135deg,rgba(79,70,229,.14),rgba(34,211,238,.12)) !important;
  border-color:rgba(79,70,229,.30) !important;
}
body.body-v-three .lv-plus-kicker{color:var(--lvp-primary) !important}
body.body-v-three .lv-plus h3,
body.body-v-three .lv-panel h3,
body.body-v-three .icon-box-v-three .title a{color:var(--lvp-ink) !important}
body.body-v-three .lv-plus p,
body.body-v-three .lv-panel p{color:var(--lvp-ink-soft) !important}

html[data-template='dark'] body.body-v-three .icon-box.icon-box-v-three,
html[data-template='dark'] body.body-v-three .lv-plus,
html[data-template='dark'] body.body-v-three .lv-panel,
html[data-template='dark'] body.body-v-three .lv-call-mock,
html[data-template='dark'] body.body-v-three .lv-plan{
  background:rgba(17,24,39,.72) !important;
  border-color:rgba(255,255,255,.09) !important;
}
html[data-template='dark'] body.body-v-three .lv-plus h3,
html[data-template='dark'] body.body-v-three .lv-panel h3,
html[data-template='dark'] body.body-v-three .icon-box-v-three .title a{color:#eef2f8 !important}
html[data-template='dark'] body.body-v-three .lv-plus p,
html[data-template='dark'] body.body-v-three .lv-panel p{color:#a9b4c6 !important}

/* ---------- "How it works" rows as cards ---------- */
body.body-v-three .experience .experience-item{
  background:var(--lvp-surface) !important;
  border:1px solid var(--lvp-line) !important;
  border-radius:18px !important;
  padding:18px 20px !important;
  margin-bottom:14px !important;
  box-shadow:0 16px 38px -26px rgba(15,23,42,.5) !important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
body.body-v-three .experience .experience-item h6{color:var(--lvp-primary) !important;font-weight:800 !important;letter-spacing:.12em}
body.body-v-three .experience .experience-item h4{color:var(--lvp-ink) !important}
body.body-v-three .experience .experience-item i{color:var(--lvp-primary) !important}
html[data-template='dark'] body.body-v-three .experience .experience-item{
  background:rgba(17,24,39,.72) !important;border-color:rgba(255,255,255,.09) !important;
}
html[data-template='dark'] body.body-v-three .experience .experience-item h4{color:#eef2f8 !important}

/* ---------- Pricing pills ---------- */
body.body-v-three .lv-mod-pill{
  border:1px solid rgba(79,70,229,.2) !important;
  background:rgba(79,70,229,.06) !important;
  border-radius:999px !important;
  font-weight:700;
}
body.body-v-three .lv-mod-pill--hot{
  background-image:var(--lvp-grad) !important;
  background-color:transparent !important;color:#fff !important;border:0 !important;
}

/* Pricing constructor: neutral glass surface + palette-matched glow */
body.body-v-three #section5 .lv-pc-col::before{
  background:
    radial-gradient(circle at 30% 30%, rgba(79,70,229,.30), transparent 58%),
    radial-gradient(circle at 78% 70%, rgba(6,182,212,.24), transparent 52%) !important;
  filter:blur(34px) !important;
}
body.body-v-three #section5 .lv-pc-card,
body.body-v-three .lv-pc-card{
  background:rgba(255,255,255,.74) !important;
  border:1px solid var(--lvp-line) !important;
  box-shadow:0 26px 64px -32px rgba(15,23,42,.5) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  backdrop-filter:blur(14px) !important;
}
html[data-template='dark'] body.body-v-three .lv-pc-card{
  background:rgba(17,24,39,.72) !important;
  border-color:rgba(255,255,255,.09) !important;
}

/* Try section: drop the template's teal block background */
body.body-v-three #section7,
body.body-v-three #workspace,
body.body-v-three .blognews-v-three,
body.body-v-three .blog-news{
  background-color:transparent !important;
  background-image:none !important;
}

/* ---------- Hero visual: live-people slider with the ambient mesh flowing through ---------- */
@media only screen and (min-width:768px){
  body.body-v-three #hero .img-cover-v-three .placeholder{min-height:100vh}
}
body.body-v-three #hero .img-cover-v-three .placeholder{
  border-radius:30px !important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 44px 96px -44px rgba(11,16,32,.95) !important;
  background:#0b1020;
}
body.body-v-three .lv-hero-slider{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  background:url('/assets/img/hero-ai-voice.svg') center/cover no-repeat;
}
body.body-v-three .lv-hero-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.07);
  transition:opacity 1.1s ease, transform 7s ease;
  will-change:opacity, transform;
}
body.body-v-three .lv-hero-slide.is-on{opacity:1;transform:scale(1)}
/* (.lv-hero-mesh base is defined once, below, with the fog animation) */
body.body-v-three .lv-hero-scrim{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,12,24,.08) 0%, rgba(8,12,24,.02) 42%, rgba(8,12,24,.74) 100%),
    linear-gradient(90deg, rgba(8,12,24,.40) 0%, rgba(8,12,24,0) 34%);
}
body.body-v-three .lv-hero-dots{
  position:absolute;left:26px;right:auto;bottom:22px;z-index:6;
  transform:none;
  display:flex;gap:8px;justify-content:center;align-items:center;
  padding:8px 14px;border-radius:999px;
  background:rgba(8,12,24,.42);
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
body.body-v-three .lv-hero-dots button{
  width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.5);transition:width .25s ease, background .25s ease;
}
body.body-v-three .lv-hero-dots button.is-on{background:#fff;width:26px;border-radius:999px}
body.body-v-three .lv-hero-dots button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* status label → horizontal chip, top-left of the panel (below the fixed header) */
body.body-v-three #hero .img-cover-v-three .placeholder .status{
  left:26px !important;
  top:104px !important;
  transform:none !important;
  z-index:6 !important;
  background:rgba(255,255,255,.16) !important;
  color:#f2f7ff !important;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  padding:9px 15px;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;font-size:11px;
  line-height:1.2;
  max-width:70%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (prefers-reduced-motion:reduce){
  body.body-v-three .lv-hero-slide{transition:opacity .3s ease}
}
body.body-v-three #hero .img-cover-v-three .placeholder .btn-get-started-v-three{
  background-image:var(--lvp-grad) !important;
  background-color:transparent !important;
  color:#fff !important;
  box-shadow:0 22px 48px -20px rgba(79,70,229,.9) !important;
}
body.body-v-three #hero .img-cover-v-three .placeholder .btn-get-started-v-three:hover{
  background-image:var(--lvp-grad) !important;
  filter:brightness(1.08);
}

/* Hero wordmark + secondary "watch tour / demo" CTA: keep on one canvas */
body.body-v-three #hero .name-headline-v-three h2,
body.body-v-three #hero .name-headline-v-three h2.lv-hero-brand{
  font-size:clamp(2.5rem,4.9vw,4.6rem) !important;
  line-height:1 !important;
  letter-spacing:-.05em !important;
  left:clamp(.25rem,2.5vw,3rem) !important;
  white-space:nowrap !important;
}
body.body-v-three #hero .name-headline-v-three h4{
  font-family:"Inter",sans-serif !important;
  font-weight:700 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase;
  color:var(--lvp-primary) !important;
}
body.body-v-three #hero .title-hero h4::before{display:none !important}
body.body-v-three #hero .btn-video-solid{
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
body.body-v-three #hero .btn-video-solid i{
  background-image:var(--lvp-grad) !important;
  background-color:transparent !important;
  box-shadow:0 18px 36px -14px rgba(79,70,229,.8) !important;
}
body.body-v-three #hero .btn-video-solid span{
  color:var(--lvp-ink) !important;
  font-family:"Inter",sans-serif !important;
  font-weight:800 !important;
}
html[data-template='dark'] body.body-v-three #hero .btn-video-solid span{color:#eef2f8 !important}

/* Desktop: slim, fully visible vertical rail (no clipping, no bottom collision) */
@media only screen and (min-width:1200px){
  #header.header-v-three .social-links.lv-header-links{
    position:fixed !important;
    left:8px !important;
    right:auto !important;
    top:50vh !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:3px;
    margin:0 !important;
    padding:12px 8px !important;
    background:rgba(255,255,255,.9);
    border:1px solid var(--lvp-line);
    border-radius:22px;
    box-shadow:0 22px 52px -26px rgba(15,23,42,.55);
    z-index:997;
  }
  #header.header-v-three .social-links.lv-header-links::before{display:none !important}
  #header.header-v-three .social-links.lv-header-links a{
    display:block !important;
    height:auto !important;
    line-height:1.2 !important;
    margin:0 !important;
    padding:8px 12px !important;
    border-radius:999px !important;
    color:#334155 !important;
    font-size:12px !important;
    font-weight:800 !important;
    text-align:left !important;
    transition:background .18s ease, color .18s ease;
  }
  #header.header-v-three .social-links.lv-header-links a:hover{
    background:rgba(79,70,229,.12) !important;
    color:var(--lvp-primary) !important;
  }
  #header.header-v-three .social-links.lv-header-links a::after{display:none !important}
  #header.header-v-three .social-links.lv-header-links .lv-lang-wrap,
  #header.header-v-three .social-links.lv-header-links .lv-fx-wrap{margin:0 0 6px !important}
}
html[data-template='dark'] #header.header-v-three .social-links.lv-header-links{
  background:rgba(14,19,34,.9);border-color:rgba(255,255,255,.1);
}
html[data-template='dark'] #header.header-v-three .social-links.lv-header-links a{color:#c3ccdd !important}

/* Keep left-anchored section titles truly left-aligned (kicker + h2 on the same edge) */
body.body-v-three .section-title{text-align:left !important}
body.body-v-three .section-title h6,
body.body-v-three .section-title h2{text-align:left !important}

/* Reserve room for the left rail so section content never slides under it */
@media only screen and (min-width:1200px){
  body.body-v-three .section:not(#section1) .container,
  body.body-v-three .section:not(#section1) .container-fluid{
    padding-left:clamp(120px,10.5vw,175px) !important;
  }
}

/* Demo dashboard lives in the nav rail; hidden in the crowded mobile bottom bar */
#header.header-v-three .social-links .lv-nav-demo{display:block;margin:0}
#header.header-v-three .social-links .lv-nav-demo a{display:block !important}
@media only screen and (max-width:767px){
  #header.header-v-three .social-links .lv-nav-demo{display:none !important}
}

/* ---------- Contact: no random stock photo, glass cards ---------- */
body.body-v-three #contact.contact-v-three,
body.body-v-three #section8{
  background-image:none !important;
  background:transparent !important;
}
body.body-v-three #contact.contact-v-three::after{display:none !important}
body.body-v-three #contact .info{
  background:var(--lvp-surface) !important;
  border:1px solid var(--lvp-line) !important;
  border-radius:var(--lvp-radius) !important;
  box-shadow:0 20px 48px -28px rgba(15,23,42,.5) !important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  padding:26px !important;
}
body.body-v-three #contact .info h4{color:var(--lvp-ink) !important}
body.body-v-three #contact .info i{color:var(--lvp-primary) !important}
body.body-v-three #contact .info p,
body.body-v-three #contact .info a{color:var(--lvp-ink-soft) !important}
body.body-v-three #contact input,
body.body-v-three #contact textarea{
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(15,23,42,.14) !important;
  border-radius:14px !important;
  color:var(--lvp-ink) !important;
  padding:12px 14px !important;
}
body.body-v-three #contact input:focus,
body.body-v-three #contact textarea:focus{
  outline:none !important;
  border-color:var(--lvp-primary) !important;
  box-shadow:0 0 0 4px rgba(79,70,229,.15) !important;
}
body.body-v-three #contact label{color:var(--lvp-ink-soft) !important;font-weight:700}
html[data-template='dark'] body.body-v-three #contact .info{
  background:rgba(17,24,39,.72) !important;border-color:rgba(255,255,255,.09) !important;
}
html[data-template='dark'] body.body-v-three #contact .info h4{color:#eef2f8 !important}

/* ---------- misc polish ---------- */
body.body-v-three .lv-flow-strip{color:var(--lvp-ink) !important}
body.body-v-three .lv-flow-strip i{color:var(--lvp-primary) !important}
body.body-v-three .lv-live-badge{
  border-color:rgba(79,70,229,.30) !important;
  background:rgba(255,255,255,.7) !important;
  color:var(--lvp-ink) !important;
  border-radius:999px !important;
}
body.body-v-three .lv-live-badge:hover{border-color:var(--lvp-primary) !important;color:var(--lvp-primary) !important}
html[data-template='dark'] body.body-v-three .lv-live-badge{
  background:rgba(17,24,39,.7) !important;color:#e6ebf5 !important;
}

/* ==========================================================================
   Fog drifting over the hero photos (slider)
   ========================================================================== */
body.body-v-three .lv-hero-mesh{
  position:absolute;inset:-25%;z-index:2;pointer-events:none;
  background:
    radial-gradient(46% 42% at 20% 26%, rgba(199,210,254,.80), transparent 66%),
    radial-gradient(50% 46% at 78% 34%, rgba(165,243,252,.66), transparent 68%),
    radial-gradient(52% 48% at 70% 82%, rgba(216,180,254,.72), transparent 68%),
    radial-gradient(46% 42% at 22% 78%, rgba(255,255,255,.5), transparent 66%),
    radial-gradient(60% 50% at 50% 50%, rgba(255,255,255,.26), transparent 72%);
  background-size:220% 220%;
  filter:blur(30px) saturate(1.16);
  mix-blend-mode:screen;
  opacity:.6;
  animation:lvpFogA 17s ease-in-out infinite alternate;
  will-change:background-position, transform;
}
body.body-v-three .lv-hero-mesh::before,
body.body-v-three .lv-hero-mesh::after{
  content:"";position:absolute;inset:-15%;pointer-events:none;
  background:
    radial-gradient(30% 46% at 28% 42%, rgba(255,255,255,.55), transparent 62%),
    radial-gradient(34% 42% at 72% 58%, rgba(199,210,254,.55), transparent 64%);
  background-size:170% 170%;
  filter:blur(24px);
  mix-blend-mode:screen;
  opacity:.5;
}
body.body-v-three .lv-hero-mesh::before{animation:lvpFogB 20s linear infinite}
body.body-v-three .lv-hero-mesh::after{animation:lvpFogC 30s linear infinite;opacity:.42}
@keyframes lvpFogA{
  0%{background-position:0% 0%;transform:translate3d(-3%,-2%,0) scale(1.05)}
  50%{background-position:68% 42%;transform:translate3d(2%,1%,0) scale(1.09)}
  100%{background-position:100% 100%;transform:translate3d(4%,3%,0) scale(1.05)}
}
@keyframes lvpFogB{
  0%{background-position:0% 50%;transform:translate3d(0,0,0)}
  100%{background-position:200% 50%;transform:translate3d(-6%,-3%,0)}
}
@keyframes lvpFogC{
  0%{background-position:100% 50%;transform:translate3d(0,0,0)}
  100%{background-position:-100% 50%;transform:translate3d(6%,4%,0)}
}
body.body-v-three .lv-hero-scrim{
  background:
    linear-gradient(180deg, rgba(8,12,24,.10) 0%, rgba(8,12,24,.02) 40%, rgba(8,12,24,.66) 100%),
    linear-gradient(90deg, rgba(8,12,24,.34) 0%, rgba(8,12,24,0) 38%);
}

/* ==========================================================================
   Fixed ambient fog — visibly drifting blobs behind the whole homepage
   ========================================================================== */
#pagepiling{position:relative;z-index:1}
body.body-v-three .lv-ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
body.body-v-three .lv-ambient i{
  position:absolute;display:block;border-radius:50%;filter:blur(58px);opacity:.66;
}
body.body-v-three .lv-ambient i:nth-child(1){
  width:58vmax;height:58vmax;left:-14vmax;top:-18vmax;
  background:radial-gradient(circle at 50% 50%,rgba(79,70,229,.72),rgba(79,70,229,0) 68%);
  animation:lvAmbA 19s ease-in-out infinite alternate;
}
body.body-v-three .lv-ambient i:nth-child(2){
  width:54vmax;height:54vmax;right:-16vmax;top:-8vmax;
  background:radial-gradient(circle at 50% 50%,rgba(6,182,212,.66),rgba(6,182,212,0) 68%);
  animation:lvAmbB 25s ease-in-out infinite alternate;
}
body.body-v-three .lv-ambient i:nth-child(3){
  width:62vmax;height:62vmax;left:12vmax;bottom:-28vmax;
  background:radial-gradient(circle at 50% 50%,rgba(124,58,237,.6),rgba(124,58,237,0) 68%);
  animation:lvAmbC 22s ease-in-out infinite alternate;
}
@keyframes lvAmbA{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(12vmax,8vmax,0) scale(1.16)}}
@keyframes lvAmbB{0%{transform:translate3d(0,0,0) scale(1.12)}100%{transform:translate3d(-10vmax,10vmax,0) scale(.94)}}
@keyframes lvAmbC{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(8vmax,-10vmax,0) scale(1.13)}}
html[data-template='dark'] body.body-v-three .lv-ambient i{opacity:.62}
@media (prefers-reduced-motion:reduce){
  body.body-v-three .lv-ambient i{animation:none !important}
}
@media only screen and (max-width:767px){
  body.body-v-three .lv-ambient{display:none}
}

/* ==========================================================================
   Ambient gradient on every button (slowly changing)
   ========================================================================== */
body.body-v-three .lv-btn-solid,
body.body-v-three .btn-get-started-solid,
body.body-v-three .php-email-form button[type="submit"],
body.body-v-three #hero .btn-get-started-v-three,
body.body-v-three .lv-mod-pill--hot,
body.body-v-three .lv-phone-call,
body.body-v-three .lv-chat-mock-fab,
body.body-v-three .lv-pc-cta,
body.body-v-three .lv-sp-btn:not(.is-hang){
  background-image:linear-gradient(115deg,#4338ca 0%,#06b6d4 22%,#8b5cf6 45%,#22d3ee 62%,#6d28d9 82%,#4338ca 100%) !important;
  background-size:400% 400% !important;
  animation:lvpBtnFlow 12s ease-in-out infinite !important;
}
body.body-v-three .lv-btn-solid:hover,
body.body-v-three .btn-get-started-solid:hover,
body.body-v-three #hero .btn-get-started-v-three:hover,
body.body-v-three .lv-phone-call:hover{
  animation-duration:4s !important;
}
@keyframes lvpBtnFlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
/* secondary / ghost buttons: a gentle flowing glass gradient instead of flat */
body.body-v-three .lv-btn-ghost,
body.body-v-three .lv-live-badge,
body.body-v-three .lv-phone-chip{
  background-image:linear-gradient(120deg,rgba(79,70,229,.10),rgba(6,182,212,.12),rgba(124,58,237,.10),rgba(79,70,229,.10)) !important;
  background-size:260% 260% !important;
  animation:lvpBtnFlow 13s ease-in-out infinite !important;
}
body.body-v-three .lv-phone-chip.is-on{background-image:var(--lvp-grad) !important;color:#fff !important}
body.body-v-three .lv-mock-replay{
  background-image:linear-gradient(120deg,rgba(255,255,255,.30),rgba(255,255,255,.12),rgba(255,255,255,.30)) !important;
  background-size:240% 240% !important;
  animation:lvpBtnFlow 10s ease-in-out infinite !important;
}
body.body-v-three .lv-hero-dots button.is-on{
  background-image:var(--lvp-grad) !important;
  background-size:220% 220% !important;
  animation:lvpBtnFlow 8s ease-in-out infinite !important;
}
@media (prefers-reduced-motion:reduce){
  body.body-v-three .lv-hero-mesh,
  body.body-v-three .lv-hero-mesh::before,
  body.body-v-three .lv-hero-mesh::after{animation:none !important}
  body.body-v-three .lv-btn-solid,
  body.body-v-three .btn-get-started-solid,
  body.body-v-three .php-email-form button[type="submit"],
  body.body-v-three #hero .btn-get-started-v-three,
  body.body-v-three .lv-mod-pill--hot,
  body.body-v-three .lv-phone-call,
  body.body-v-three .lv-chat-mock-fab,
  body.body-v-three .lv-pc-cta,
  body.body-v-three .lv-sp-btn:not(.is-hang),
  body.body-v-three .lv-btn-ghost,
  body.body-v-three .lv-live-badge,
  body.body-v-three .lv-phone-chip,
  body.body-v-three .lv-mock-replay,
  body.body-v-three .lv-hero-dots button.is-on{animation:none !important}
}

/* ==========================================================================
   Page 2 (Product): compact live-call transcript, no big gaps
   ========================================================================== */
body.body-v-three #we-do .row{align-items:center}
body.body-v-three .lv-call-mock{
  max-width:100% !important;margin:16px 0 0 !important;border-radius:18px !important;
}
body.body-v-three .lv-call-mock-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px !important;font-size:10.5px !important;letter-spacing:.05em;
}
body.body-v-three .lv-call-mock-id{
  display:inline-flex;align-items:center;gap:5px;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
body.body-v-three .lv-call-mock-meta{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;font-weight:800}
body.body-v-three .lv-call-mock-body{
  padding:12px !important;display:flex;flex-direction:column;gap:8px;
}
body.body-v-three .lv-call-mock-body p{
  margin:0 !important;padding:8px 12px;border-radius:14px;max-width:100%;
  font-size:12.5px;line-height:1.45;
  background:rgba(255,255,255,.92);border:1px solid rgba(15,23,42,.08);
  color:var(--lvp-ink);box-shadow:0 8px 18px -16px rgba(15,23,42,.6);
}
body.body-v-three .lv-call-mock-body p b{
  display:block;font-size:9.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:3px;opacity:.85;
}
body.body-v-three .lv-call-mock-body p.ai{
  align-self:flex-start;
  background:linear-gradient(135deg,rgba(79,70,229,.12),rgba(34,211,238,.14));
  border-color:rgba(79,70,229,.24);
}
body.body-v-three .lv-call-mock-body p.ai b{color:var(--lvp-primary)}
body.body-v-three .lv-call-mock-body p.cu{align-self:flex-end;background:rgba(241,245,249,.96)}
body.body-v-three .lv-call-mock-body p.cu b{color:#8b5cf6}
body.body-v-three .lv-call-mock-body p.tool{
  align-self:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;color:#0e7490;background:rgba(6,182,212,.10);
  border:1px dashed rgba(6,182,212,.5);border-radius:999px;padding:4px 12px;
  box-shadow:none;
}
body.body-v-three .lv-mock-replay{
  position:static !important;right:auto !important;bottom:auto !important;
  padding:.24rem .58rem !important;font-size:10px !important;
  color:#fff !important;border:1px solid rgba(255,255,255,.4) !important;
  border-radius:999px;
}
html[data-template='dark'] body.body-v-three .lv-call-mock-body p{
  background:rgba(30,41,59,.85);border-color:rgba(255,255,255,.08);color:#e6ebf5;
}
html[data-template='dark'] body.body-v-three .lv-call-mock-body p.cu{background:rgba(30,41,59,.95)}

/* ---------- Email AI: the Inbox → Lion-AI → Branded reply flow (visible + animated) */
body.body-v-three .lv-flow-mock{gap:14px;min-height:auto;padding:24px 0}
body.body-v-three .lv-flow-step{
  min-width:138px;padding:24px 18px;border-radius:18px;
  color:#fff !important;font-weight:800;letter-spacing:.01em;
  background-image:linear-gradient(125deg,#4f46e5,#06b6d4,#7c3aed,#4f46e5) !important;
  background-size:300% 300% !important;
  border:0 !important;
  box-shadow:0 18px 42px -18px rgba(79,70,229,.85) !important;
  animation:lvpBtnFlow 14s ease-in-out infinite, lvFlowFloat 3.2s ease-in-out infinite !important;
  will-change:background-position, transform;
}
body.body-v-three .lv-flow-step.lv-flow-ai{
  background-image:linear-gradient(125deg,#7c3aed,#22d3ee,#4f46e5,#7c3aed) !important;
  animation-delay:-2.3s, -1.1s !important;
}
body.body-v-three .lv-flow-step.lv-flow-out{
  background-image:linear-gradient(125deg,#06b6d4,#8b5cf6,#22d3ee,#06b6d4) !important;
  animation-delay:-4.6s, -2.2s !important;
}
@keyframes lvFlowFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
body.body-v-three .lv-flow-arrow{
  width:46px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,#4f46e5,#06b6d4,transparent) !important;
  animation:lvFlowDash 1.1s linear infinite !important;
}
body.body-v-three .lv-flow-arrow:after{border-left-color:#4f46e5 !important}
@media (prefers-reduced-motion:reduce){
  body.body-v-three .lv-flow-step,
  body.body-v-three .lv-flow-arrow{animation:none !important}
}

/* Page 2: bullet-proof 2×2 card grid (no more overlapping cards) */
@media only screen and (min-width:768px){
  body.body-v-three #we-do .icon-boxes{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    align-items:stretch;
  }
  body.body-v-three #we-do .icon-boxes > [class*="col-"]{
    width:auto !important;max-width:none !important;flex:0 0 auto !important;
    margin:0 !important;padding:0 !important;display:flex !important;
  }
  body.body-v-three #we-do .icon-boxes > .w-100{display:none !important}
  body.body-v-three #we-do .icon-box{
    width:100%;padding:26px 24px !important;display:flex;flex-direction:column;
    justify-content:flex-start;
  }
  body.body-v-three #we-do .icon-box .description-nest{flex:1 1 auto;display:flex;flex-direction:column}
  body.body-v-three #we-do .icon-box .icon{margin-bottom:16px !important}
  body.body-v-three #we-do .icon-box a.learn-more{margin-top:auto !important}
  body.body-v-three #we-do .icon-box:hover{transform:translateY(-4px) scale(1) !important}
}

/* ---------- Typing reveal (used sparingly) ---------- */
.lv-type{position:relative;display:block}
.lv-type-ghost{visibility:hidden}
.lv-type-live{position:absolute;left:0;top:0;right:0;display:block;white-space:pre-wrap}
.lv-type-live::after{
  content:"▍";margin-left:1px;color:var(--lvp-primary);
  animation:lvTypeCaret .8s steps(1) infinite;
}
@keyframes lvTypeCaret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .lv-type-live::after{display:none}
}

/* ---------- Mobile: keep it light (no animated aurora, no heavy blur) ---------- */
@media only screen and (max-width:767px){
  body.body-v-three::after{
    animation:none !important;
    transform:none !important;
    opacity:.6 !important;
    background:
      radial-gradient(80% 55% at 50% 10%, rgba(79,70,229,.25), transparent 65%),
      radial-gradient(75% 55% at 82% 88%, rgba(6,182,212,.22), transparent 62%) !important;
  }
  body.body-v-three #hero .img-cover-v-three .placeholder::before{animation:none !important}
  body.body-v-three .icon-box.icon-box-v-three,
  body.body-v-three .lv-plus,
  body.body-v-three .lv-panel,
  body.body-v-three .lv-plan,
  body.body-v-three #contact .info,
  body.body-v-three #header.header-v-three{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
}
/* Keep the decorative chat-mock pill away from the fixed phone button corner */
body.body-v-three .lv-chat-mock-fab{
  left:18px !important;right:auto !important;bottom:14px !important;
}
@media only screen and (max-width:991px){
  body.body-v-three .lv-chat-mock-fab{position:static !important;margin:10px 0 0 !important;display:inline-flex}
}