/* AI look: animated hero, reveal-on-scroll, cards */
.hero-ai { position: relative; overflow: hidden; background: linear-gradient(120deg, #060b2a, #0a3d91 55%, #6d28d9); background-size: 200% 200%; animation: heroShift 14s ease-in-out infinite; }
@keyframes heroShift { 0%, 100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
#heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; animation: orb 12s ease-in-out infinite; }
.orb-a { width: 340px; height: 340px; background: #22d3ee; top: -90px; right: 8%; }
.orb-b { width: 300px; height: 300px; background: #a855f7; bottom: -120px; left: 4%; animation-delay: -6s; }
@keyframes orb { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, 40px); } }
.ai-badge { display: inline-block; padding: .35rem .9rem; margin-bottom: 1rem; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(6px); font-size: .85rem; }
.rotator { display: block; position: relative; height: 1.6em; overflow: hidden; line-height: 1.5; }
.rotator span { position: absolute; left: 0; top: 0; white-space: nowrap; visibility: hidden; opacity: 0; transform: translateY(100%); transition: opacity .6s ease, transform .6s ease, visibility .6s; background: linear-gradient(90deg, #67e8f9, #c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rotator span.on { visibility: visible; opacity: 1; transform: none; }
.btn-glow { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); animation: glow 2.4s infinite; }
@keyframes glow { 70% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }

.ai-card { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(12px); border-radius: 1.2rem; padding: 1.2rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.ai-card-dots i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .5); margin-right: 6px; }
.ai-line { margin: .8rem 0 .6rem; font-weight: 600; }
.ai-bubble { background: rgba(255, 255, 255, .92); color: #1f2937; border-radius: .8rem; padding: .7rem .9rem; font-size: .9rem; }
.ai-typing { margin-top: .7rem; }
.ai-typing span { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: #67e8f9; animation: blink 1.2s infinite; }
.ai-typing span:nth-child(2) { animation-delay: .2s; }
.ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
.float-y { animation: floatY 5s ease-in-out infinite; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.stats-strip { background: #fff; padding: 1.8rem 0; border-bottom: 1px solid #e5e7eb; }
.stat-num { font-size: 2rem; font-weight: 700; background: linear-gradient(90deg, var(--brand), #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }

.ai-feature, .step-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1.4rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ai-feature:hover, .step-card:hover { transform: translateY(-6px); border-color: var(--brand); box-shadow: 0 .9rem 1.8rem rgba(13, 110, 253, .15); }
.ai-feature .feature-icon { transition: transform .3s; }
.ai-feature:hover .feature-icon { transform: rotate(-8deg) scale(1.1); }
.steps-section { background: linear-gradient(180deg, #eef2ff, #f8f9fb); }
.step-no { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: .8rem; background: linear-gradient(135deg, var(--brand), #7c3aed); color: #fff; font-weight: 700; }

.cta { background: linear-gradient(120deg, #0a3d91, #6d28d9, #0d6efd); background-size: 200% 200%; animation: heroShift 10s ease-in-out infinite; }

/* reveal on scroll (hidden only while JS is running) */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease var(--d, 0s), transform .7s ease var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.topbar { background: #0b1230; color: #fff; font-size: .88rem; padding: .35rem 0; }
.topbar a { color: #fff; }
.topbar-wa { background: #25d366; padding: .15rem .75rem; border-radius: 999px; font-weight: 600; transition: filter .2s; }
.topbar-wa:hover { filter: brightness(1.1); color: #fff; }
.whatsapp-btn { animation: glow 2.4s infinite; }
.site-nav { transition: box-shadow .25s ease; }
.site-nav.scrolled { box-shadow: 0 4px 18px rgba(0, 0, 0, .08); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js .reveal { opacity: 1; transform: none; }
}