@keyframes slideInLeft{from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes slideInUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.animate-left{animation:slideInLeft 1s ease-out forwards}.animate-right{animation:slideInRight 1s ease-out forwards}.animate-up{animation:slideInUp 1s ease-out forwards}.Section_3_item{opacity:0}.scifi-eyebrow{position:relative;overflow:hidden}.scifi-eyebrow::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient( 90deg,transparent 0%,rgba(55,99,244,.55) 40%,rgba(255,255,255,.7) 50%,rgba(55,99,244,.55) 60%,transparent 100% );transform:skewX(-15deg);pointer-events:none;opacity:0}.scifi-eyebrow.scifi-beam-active::after{animation:scifiBeam .9s cubic-bezier(.4,0,.2,1) forwards}@keyframes scifiBeam{0%{left:-100%;opacity:1}100%{left:160%;opacity:1}}.scifi-neon{transition:text-shadow .3s ease}.scifi-neon.scifi-neon-active{animation:neonPulse 2.4s ease-out forwards}@keyframes neonPulse{0%{text-shadow:none}25%{text-shadow:0 0 6px rgba(34,197,94,.9),0 0 14px rgba(34,197,94,.7),0 0 30px rgba(34,197,94,.4)}60%{text-shadow:0 0 4px rgba(34,197,94,.8),0 0 10px rgba(34,197,94,.5),0 0 22px rgba(34,197,94,.3)}100%{text-shadow:0 0 3px rgba(34,197,94,.6),0 0 8px rgba(34,197,94,.3)}}.cs-card.scifi-card-hidden{opacity:0;clip-path:inset(0 100% 0 0)}.hero-stat-value.scifi-counted{animation:statFlash .4s ease-out}@keyframes statFlash{0%{color:#3763f4}50%{color:#fff}100%{color:inherit}}.case-studies-section{position:relative}.case-studies-section::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(55,99,244,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(55,99,244,.04) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;z-index:0;animation:gridPulse 6s ease-in-out infinite}@keyframes gridPulse{0%,100%{opacity:.5}50%{opacity:1}}.case-studies-section .cs-inner{position:relative;z-index:1}@media (prefers-reduced-motion:reduce){.scifi-eyebrow::after,.scifi-neon.scifi-neon-active,.case-studies-section::before{animation:none !important}}.cs-main-home-banner::after{content:'';position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(55,99,244,.13) 0%,transparent 65%);bottom:-200px;right:-150px;pointer-events:none;z-index:0;will-change:transform;animation:heroOrbDrift 22s ease-in-out infinite}@keyframes heroOrbDrift{0%,100%{transform:translate(0,0) scale(1)}35%{transform:translate(-50px,-35px) scale(1.07)}68%{transform:translate(30px,25px) scale(.95)}}.hero-lead-form-section{animation:heroFadeUp .85s ease .82s both}.hero-cta-secondary-row{animation:heroFadeUp .7s ease .71s both}.hero-btn-primary{position:relative;overflow:hidden}.hero-btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient( 110deg,transparent 28%,rgba(255,255,255,.2) 50%,transparent 72% );transform:translateX(-100%);animation:btnShimmer 4.5s ease-in-out 2.5s infinite;pointer-events:none}@keyframes btnShimmer{0%{transform:translateX(-100%)}22%,100%{transform:translateX(240%)}}.service-card{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease}.service-card:hover{transform:translateY(-10px) scale(1.025);box-shadow:0 28px 56px rgba(55,99,244,.2),0 0 0 1px rgba(55,99,244,.38),inset 0 1px 0 rgba(255,255,255,.07)}.hiw-connector{position:relative;overflow:hidden;background:rgba(99,102,241,.18) !important;opacity:1 !important}.hiw-connector::after{content:'';position:absolute;top:0;left:-80%;width:80%;height:100%;background:linear-gradient(90deg,transparent,rgba(99,102,241,1),transparent);animation:connectorFlow 3.2s ease-in-out infinite}@keyframes connectorFlow{0%{left:-80%}100%{left:160%}}.hiw-step{transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease}.hiw-step:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(99,102,241,.2);border-color:rgba(99,102,241,.38) !important}.hiw-step-num{transition:text-shadow .26s ease}.hiw-step:hover .hiw-step-num{text-shadow:0 0 24px rgba(99,102,241,.75)}.wa-float{isolation:isolate}.wa-float::before{content:'';position:absolute;inset:-4px;border-radius:inherit;border:2px solid rgba(37,211,102,.75);animation:waPulseRing 2.8s ease-out 3s infinite;pointer-events:none;z-index:-1}@keyframes waPulseRing{0%{transform:scale(1);opacity:.85}70%{transform:scale(1.28);opacity:0}100%{transform:scale(1.28);opacity:0}}.lm-doc-preview{animation:lmDocFloat 5.5s ease-in-out 1s infinite}@keyframes lmDocFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-13px) rotate(.4deg)}}@keyframes floatBtnGlow{0%,100%{box-shadow:0 4px 30px rgba(0,0,0,.5),0 0 0 1px rgba(55,99,244,.3)}50%{box-shadow:0 4px 30px rgba(0,0,0,.5),0 0 0 2px rgba(55,99,244,.75),0 0 26px rgba(55,99,244,.28)}}#container-float-button{animation:floatBtnGlow 3.8s ease-in-out 1.5s infinite}@media (prefers-reduced-motion:reduce){.cs-main-home-banner::after,.hero-lead-form-section,.hero-cta-secondary-row,.hero-btn-primary::before,.hiw-connector::after,.wa-float::before,.lm-doc-preview,#container-float-button{animation:none !important}.service-card,.hiw-step{transition:none !important}}

/* ============================================================
   FRAMER-STYLE ANIMATIONS v2.1 — pure CSS + tiny JS hooks
   ============================================================ */

/* ---- SCROLL PROGRESS BAR ---- */
@keyframes scrollProgressAnim { from{transform:scaleX(0)} to{transform:scaleX(1)} }
#sa-scroll-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #3763f4 0%, #6366f1 50%, #fe5000 100%);
    transform-origin: left center;
    transform: scaleX(0);
    z-index: 10000;
    pointer-events: none;
    animation: scrollProgressAnim linear both;
    animation-timeline: scroll(root);
}

/* ---- CURSOR GLOW (fixed, follows mouse via JS --cx/--cy) ---- */
#sa-cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 680px;
    height: 680px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(55,99,244,0.07) 0%, transparent 62%);
    transform: translate(calc(var(--cx,-9999px) - 340px), calc(var(--cy,-9999px) - 340px));
    pointer-events: none;
    z-index: 1;
    will-change: transform;
    transition: transform 0.14s ease-out;
}

/* ---- ANIMATED GRADIENT BORDER — hero stats row ---- */
@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes borderSpin { to { --border-angle: 360deg; } }

.hero-stats-row {
    border: 1px solid transparent !important;
    background:
        rgba(255,255,255,0.05) padding-box,
        conic-gradient(from var(--border-angle,0deg), #3763f4 0%, #6366f1 25%, rgba(254,80,0,0.65) 50%, #6366f1 75%, #3763f4 100%) border-box !important;
    animation: borderSpin 5s linear infinite, heroFadeUp 0.85s ease 0.48s both;
}

/* ---- WORD REVEAL — headings ---- */
.word-reveal-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    line-height: 1.3;
}
.word-reveal-inner {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition: transform 0.72s cubic-bezier(0.22,1,0.36,1), opacity 0.55s ease;
}
.word-reveal-inner.revealed {
    transform: translateY(0);
    opacity: 1;
}

/* ---- HEADING ACCENT LINE ---- */
.hiw-heading,
.faq-heading,
.wwb-heading,
.cs-heading,
.hp_service_sec-heading {
    position: relative;
}
.hiw-heading::after,
.faq-heading::after,
.wwb-heading::after,
.cs-heading::after,
.hp_service_sec-heading::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%) scaleX(0);
    width: 72px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #3763f4, #6366f1, #fe5000);
    transition: transform 0.75s cubic-bezier(0.22,1,0.36,1) 0.25s;
    pointer-events: none;
}
.heading-revealed::after {
    transform: translateX(-50%) scaleX(1);
}

/* ---- CARD SPOTLIGHT (mouse-follow highlight via JS --sx/--sy) ---- */
.service-card,
.wwb-card,
.cs-card,
.hiw-step {
    --sx: 50%;
    --sy: 50%;
}
.service-card.has-spotlight,
.wwb-card.has-spotlight,
.cs-card.has-spotlight,
.hiw-step.has-spotlight {
    background-image: radial-gradient(200px circle at var(--sx) var(--sy), rgba(99,102,241,0.14) 0%, transparent 100%);
}

/* ---- MAGNETIC BUTTON — smooth JS-driven translate (base transition) ---- */
.hero-btn-primary,
.hiw-cta,
.cq-btn,
.footer-btn {
    transition: transform 0.25s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.22s ease;
}

/* ---- SECTION FADE-UP REVEAL (JS adds .section-visible) ---- */
.section-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22,1,0.36,1);
}
.section-reveal.section-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- GLOWING SECTION SEPARATOR ---- */
.home-grp-section-1 > section + section {
    border-top: 1px solid rgba(255,255,255,0.05);
    position: relative;
}
.home-grp-section-1 > section + section::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #3763f4, transparent);
    animation: sepGlow 4s ease-in-out infinite;
}
@keyframes sepGlow {
    0%, 100% { width: 80px; opacity: 0.5; }
    50%       { width: 200px; opacity: 1; }
}

/* ---- REDUCED MOTION ADDITIONS ---- */
@media (prefers-reduced-motion: reduce) {
    #sa-scroll-bar,
    #sa-cursor-glow,
    .hiw-heading::after,
    .faq-heading::after,
    .wwb-heading::after,
    .cs-heading::after,
    .hp_service_sec-heading::after,
    .home-grp-section-1 > section + section::before { animation: none !important; }

    .hero-stats-row {
        border: 1px solid rgba(255,255,255,0.12) !important;
        background: rgba(255,255,255,0.05) !important;
        animation: heroFadeUp 0.85s ease 0.48s both !important;
    }

    .word-reveal-inner {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }

    .hero-btn-primary,
    .hiw-cta,
    .cq-btn,
    .footer-btn,
    .section-reveal { transition: none !important; }

    .section-reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .heading-revealed::after {
        transform: translateX(-50%) scaleX(1) !important;
    }
}