:is(.ci-lp, .auto-lp, body) {
  --ci-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ci-motion-duration: 680ms;
  --ci-motion-distance: 20px;
}

:is(.ci-lp, .auto-lp, body) .ci-motion {
  opacity: 0;
  transform: translate3d(0, var(--ci-motion-distance), 0);
  transition: opacity var(--ci-motion-duration) var(--ci-motion-ease),
    transform var(--ci-motion-duration) var(--ci-motion-ease);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

:is(.ci-lp, .auto-lp, body) .ci-motion.ci-motion-scale { transform: scale(.975) translate3d(0, 14px, 0); }
:is(.ci-lp, .auto-lp, body) .ci-motion.ci-motion-left { transform: translate3d(-18px, 0, 0); }
:is(.ci-lp, .auto-lp, body) .ci-motion.ci-motion-right { transform: translate3d(18px, 0, 0); }
:is(.ci-lp, .auto-lp, body) .ci-motion.is-visible { opacity: 1; transform: none; }

:is(.ci-lp, .auto-lp, body) .ci-hero { position: relative; isolation: isolate; }
:is(.ci-lp, .auto-lp, body) .ci-hero::before {
  content: "";
  position: absolute;
  inset: auto auto 8% 58%;
  width: min(36vw, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,55,203,.28), rgba(0,74,173,0));
  filter: blur(8px);
  pointer-events: none;
  z-index: -1;
}

:is(.ci-lp, .auto-lp, body) .ci-hero-card { position: relative; }
:is(.ci-lp, .auto-lp, body) .ci-hero-card::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 15%, rgba(181,53,188,.34), transparent 56%),
    radial-gradient(circle at 80% 85%, rgba(0,74,173,.24), transparent 58%);
  z-index: -1;
  filter: blur(10px);
  opacity: .8;
}
:is(.ci-lp, .auto-lp, body) .ci-hero-card.is-float { animation: ciFloat 6.4s ease-in-out infinite; }
@keyframes ciFloat { 0%,100%{transform: translateY(0)} 50%{transform: translateY(-8px)} }

@media (hover:hover) and (pointer:fine) {
  :is(.ci-lp, .auto-lp, body) .ci-card,
  :is(.ci-lp, .auto-lp, body) .ci-step,
  :is(.ci-lp, .auto-lp, body) .ci-feature,
  :is(.ci-lp, .auto-lp, body) .ci-segment,
  :is(.ci-lp, .auto-lp, body) .ci-faq-item,
  :is(.ci-lp, .auto-lp, body) .ci-comparison-box {
    transition: transform .32s var(--ci-motion-ease), box-shadow .32s var(--ci-motion-ease), border-color .32s ease;
  }

  :is(.ci-lp, .auto-lp, body) .ci-card:hover,
  :is(.ci-lp, .auto-lp, body) .ci-step:hover,
  :is(.ci-lp, .auto-lp, body) .ci-feature:hover,
  :is(.ci-lp, .auto-lp, body) .ci-segment:hover,
  :is(.ci-lp, .auto-lp, body) .ci-faq-item:hover,
  :is(.ci-lp, .auto-lp, body) .ci-comparison-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(36, 41, 89, 0.16);
    border-color: rgba(99, 55, 203, .35);
  }

  :is(.ci-lp, .auto-lp, body) .ci-card:hover .ci-card__icon,
  :is(.ci-lp, .auto-lp, body) .ci-feature:hover .ci-feature__icon,
  :is(.ci-lp, .auto-lp, body) .ci-step:hover .ci-step__number { transform: scale(1.06); }
}

:is(.ci-lp, .auto-lp, body) .ci-card__icon,
:is(.ci-lp, .auto-lp, body) .ci-feature__icon,
:is(.ci-lp, .auto-lp, body) .ci-step__number { transition: transform .24s ease; }

:is(.ci-lp, .auto-lp, body) .ci-comparison-box--featured {
  box-shadow: 0 20px 48px rgba(88, 43, 188, 0.2);
  background-image: radial-gradient(circle at top right, rgba(181,53,188,.16), transparent 45%);
}

:is(.ci-lp, .auto-lp, body) .ci-cta { position: relative; overflow: hidden; }
:is(.ci-lp, .auto-lp, body) .ci-cta::before {
  content: "";
  position: absolute;
  inset: -20% -30%;
  background: linear-gradient(120deg, rgba(181,53,188,.12), rgba(0,74,173,.08), rgba(181,53,188,.12));
  background-size: 200% 200%;
  animation: ciCtaShift 11s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ciCtaShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

:is(.ci-lp, .auto-lp, body) .ci-btn,
:is(.ci-lp, .auto-lp, body) .ci-btn-secondary { position: relative; overflow: hidden; }
:is(.ci-lp, .auto-lp, body) .ci-btn::after,
:is(.ci-lp, .auto-lp, body) .ci-btn-secondary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transition: left .6s ease;
}
:is(.ci-lp, .auto-lp, body) .ci-btn:hover::after,
:is(.ci-lp, .auto-lp, body) .ci-btn-secondary:hover::after { left: 140%; }
:is(.ci-lp, .auto-lp, body) .ci-btn:focus-visible,
:is(.ci-lp, .auto-lp, body) .ci-btn-secondary:focus-visible { outline: 3px solid rgba(99,55,203,.45); outline-offset: 2px; }

@media (max-width: 767px) {
  :is(.ci-lp, .auto-lp, body) { --ci-motion-distance: 12px; --ci-motion-duration: 520ms; }
  :is(.ci-lp, .auto-lp, body) .ci-hero::before { width: 220px; inset: auto auto 4% 52%; opacity: .75; }
  :is(.ci-lp, .auto-lp, body) .ci-hero-card::after { opacity: .65; filter: blur(8px); }
}

@media (prefers-reduced-motion: reduce) {
  :is(.ci-lp, .auto-lp, body) .ci-motion { opacity: 1 !important; transform: none !important; transition: none !important; }
  :is(.ci-lp, .auto-lp, body) .ci-hero-card.is-float,
  :is(.ci-lp, .auto-lp, body) .ci-cta::before { animation: none !important; }
  :is(.ci-lp, .auto-lp, body) .ci-btn::after,
  :is(.ci-lp, .auto-lp, body) .ci-btn-secondary::after { display: none; }
}

/* aliases para landing pages com prefixo auto- */
:is(.ci-lp, .auto-lp, body) .auto-hero { position: relative; isolation: isolate; }
:is(.ci-lp, .auto-lp, body) .auto-hero::before {
  content: ""; position: absolute; inset: auto auto 8% 58%; width: min(36vw, 360px); aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle, rgba(99,55,203,.28), rgba(0,74,173,0)); filter: blur(8px); z-index: -1;
}
:is(.ci-lp, .auto-lp, body) .auto-hero-card { position: relative; }
:is(.ci-lp, .auto-lp, body) .auto-hero-card::after {
  content:""; position:absolute; inset:-12px; border-radius:inherit; z-index:-1; filter:blur(10px); opacity:.8;
  background: radial-gradient(circle at 30% 15%, rgba(181,53,188,.34), transparent 56%), radial-gradient(circle at 80% 85%, rgba(0,74,173,.24), transparent 58%);
}
@media (hover:hover) and (pointer:fine) {
  :is(.ci-lp, .auto-lp, body) .auto-card,
  :is(.ci-lp, .auto-lp, body) .auto-step,
  :is(.ci-lp, .auto-lp, body) .auto-feature,
  :is(.ci-lp, .auto-lp, body) .auto-segment,
  :is(.ci-lp, .auto-lp, body) .auto-faq-item,
  :is(.ci-lp, .auto-lp, body) .auto-comparison-box { transition: transform .32s var(--ci-motion-ease), box-shadow .32s var(--ci-motion-ease), border-color .32s ease; }
  :is(.ci-lp, .auto-lp, body) .auto-card:hover,
  :is(.ci-lp, .auto-lp, body) .auto-step:hover,
  :is(.ci-lp, .auto-lp, body) .auto-feature:hover,
  :is(.ci-lp, .auto-lp, body) .auto-segment:hover,
  :is(.ci-lp, .auto-lp, body) .auto-faq-item:hover,
  :is(.ci-lp, .auto-lp, body) .auto-comparison-box:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(36,41,89,.16); border-color: rgba(99,55,203,.35); }
}
:is(.ci-lp, .auto-lp, body) .auto-comparison-box--featured { box-shadow: 0 20px 48px rgba(88,43,188,.2); background-image: radial-gradient(circle at top right, rgba(181,53,188,.16), transparent 45%); }
:is(.ci-lp, .auto-lp, body) .auto-cta { position: relative; overflow: hidden; }
:is(.ci-lp, .auto-lp, body) .auto-cta::before {
  content:""; position:absolute; inset:-20% -30%; pointer-events:none;
  background: linear-gradient(120deg, rgba(181,53,188,.12), rgba(0,74,173,.08), rgba(181,53,188,.12));
  background-size:200% 200%; animation:ciCtaShift 11s ease-in-out infinite;
}
:is(.ci-lp, .auto-lp, body) .auto-btn { position: relative; overflow: hidden; }
:is(.ci-lp, .auto-lp, body) .auto-btn::after {
  content:""; position:absolute; top:0; left:-130%; width:60%; height:100%; transform:skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transition:left .6s ease;
}
:is(.ci-lp, .auto-lp, body) .auto-btn:hover::after { left:140%; }
:is(.ci-lp, .auto-lp, body) .auto-btn:focus-visible { outline: 3px solid rgba(99,55,203,.45); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  :is(.ci-lp, .auto-lp, body) .auto-hero-card.is-float,
  :is(.ci-lp, .auto-lp, body) .auto-cta::before { animation: none !important; }
  :is(.ci-lp, .auto-lp, body) .auto-btn::after { display:none; }
}