/* ==========================================================
   VERTEX STUDIO — ANIMATIONS.CSS
   Animações completas para o novo index.html
========================================================== */

/* ==========================================================
   01. VARIÁVEIS DE MOVIMENTO
========================================================== */
:root {
    --anim-ease: cubic-bezier(.22, 1, .36, 1);
    --anim-soft: cubic-bezier(.25, .46, .45, .94);
    --anim-spring: cubic-bezier(.34, 1.56, .64, 1);
    --anim-expo: cubic-bezier(.16, 1, .3, 1);

    --anim-fast: 340ms;
    --anim-base: 720ms;
    --anim-slow: 1100ms;
}


/* ==========================================================
   02. PRELOADER
========================================================== */
.preloader__logo-wrapper {
    animation:
        preloaderOrbit 4.8s linear infinite,
        preloaderFloat 3s ease-in-out infinite;
}

.preloader__logo-wrapper::before {
    animation: preloaderRingOne 6s linear infinite;
}

.preloader__logo-wrapper::after {
    animation: preloaderRingTwo 4.5s linear infinite reverse;
}

.preloader__logo {
    animation: preloaderLogoGlow 2.4s ease-in-out infinite;
}

.preloader__progress {
    animation: preloaderProgress 1.5s ease-in-out infinite;
}

.preloader__text {
    animation: preloaderTextPulse 2s ease-in-out infinite;
}

@keyframes preloaderOrbit {
    to {
        rotate: 360deg;
    }
}

@keyframes preloaderFloat {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -7px;
    }
}

@keyframes preloaderRingOne {
    to {
        transform: rotate(360deg);
    }
}

@keyframes preloaderRingTwo {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes preloaderLogoGlow {
    0%,
    100% {
        filter:
            drop-shadow(0 0 14px rgba(0,145,255,.24))
            drop-shadow(0 0 24px rgba(117,60,255,.14));
    }

    50% {
        filter:
            drop-shadow(0 0 26px rgba(0,145,255,.5))
            drop-shadow(0 0 44px rgba(117,60,255,.3));
    }
}

@keyframes preloaderProgress {
    0% {
        transform: translateX(-140%);
    }

    50% {
        transform: translateX(95%);
    }

    100% {
        transform: translateX(320%);
    }
}

@keyframes preloaderTextPulse {
    0%,
    100% {
        opacity: .45;
    }

    50% {
        opacity: 1;
    }
}


/* ==========================================================
   03. ENTRADA DO HEADER
========================================================== */
.site-header {
    animation: headerEntrance 1s var(--anim-ease) both;
}

.site-logo__image {
    animation: logoBreathing 5s ease-in-out infinite;
}

.site-header.is-scrolled::after {
    animation: headerLightFlow 8s linear infinite;
}

.site-header.is-scrolled .site-header__mist-wave--one {
    animation: headerMistOne 8s ease-in-out infinite alternate;
}

.site-header.is-scrolled .site-header__mist-wave--two {
    animation: headerMistTwo 10s ease-in-out infinite alternate;
}

@keyframes headerEntrance {
    from {
        opacity: 0;
        transform: translateY(-24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes logoBreathing {
    0%,
    100% {
        filter:
            drop-shadow(0 0 8px rgba(0,141,255,.12));
    }

    50% {
        filter:
            drop-shadow(0 0 17px rgba(0,141,255,.3))
            drop-shadow(0 0 28px rgba(117,60,255,.18));
    }
}

@keyframes headerLightFlow {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 200% 50%;
    }
}

@keyframes headerMistOne {
    from {
        transform: translate3d(-8%, 0, 0) scale(.94);
        opacity: .08;
    }

    to {
        transform: translate3d(20%, 5px, 0) scale(1.18);
        opacity: .18;
    }
}

@keyframes headerMistTwo {
    from {
        transform: translate3d(8%, 0, 0) scale(1);
        opacity: .08;
    }

    to {
        transform: translate3d(-22%, -4px, 0) scale(1.2);
        opacity: .18;
    }
}


/* ==========================================================
   04. REVELAÇÃO NO SCROLL
========================================================== */
.reveal-element,
.reveal-text {
    opacity: 0;
    will-change: opacity, transform, filter;
}

.reveal-element {
    transition:
        opacity 950ms var(--anim-ease),
        transform 950ms var(--anim-ease),
        filter 950ms var(--anim-ease);
}

.reveal-element.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
    filter: blur(0);
}

.reveal-element[data-animation="fade-up"] {
    transform: translate3d(0, 70px, 0) scale(.985);
    filter: blur(7px);
}

.reveal-element[data-animation="fade-down"] {
    transform: translate3d(0, -70px, 0) scale(.985);
    filter: blur(7px);
}

.reveal-element[data-animation="fade-left"] {
    transform: translate3d(85px, 0, 0);
    filter: blur(7px);
}

.reveal-element[data-animation="fade-right"] {
    transform: translate3d(-85px, 0, 0);
    filter: blur(7px);
}

.reveal-element[data-animation="zoom-in"] {
    transform: scale(.86);
    filter: blur(10px);
}

.reveal-element[data-animation="rotate-in"] {
    transform:
        translateY(60px)
        rotate(-4deg)
        scale(.93);
    transform-origin: center bottom;
    filter: blur(7px);
}

.reveal-element[data-animation="flip-up"] {
    transform:
        perspective(1200px)
        rotateX(18deg)
        translateY(80px);
    transform-origin: center bottom;
    filter: blur(7px);
}

.reveal-element[data-animation="slide-reveal"] {
    clip-path: inset(0 100% 0 0);
    transform: translateY(16px);
    transition:
        clip-path 1.2s var(--anim-expo),
        opacity .5s ease,
        transform 1.2s var(--anim-expo);
}

.reveal-element[data-animation="slide-reveal"].is-visible {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
}

/* Stagger */
.reveal-element:nth-child(1) { transition-delay: 0ms; }
.reveal-element:nth-child(2) { transition-delay: 90ms; }
.reveal-element:nth-child(3) { transition-delay: 180ms; }
.reveal-element:nth-child(4) { transition-delay: 270ms; }
.reveal-element:nth-child(5) { transition-delay: 360ms; }
.reveal-element:nth-child(6) { transition-delay: 450ms; }
.reveal-element:nth-child(7) { transition-delay: 540ms; }
.reveal-element:nth-child(8) { transition-delay: 630ms; }


/* ==========================================================
   05. REVELAÇÃO DE TEXTO
========================================================== */
.reveal-text {
    position: relative;
    overflow: hidden;
    transform: translateY(54px);
    filter: blur(7px);
    transition:
        opacity .7s ease,
        transform 1s var(--anim-ease),
        filter 1s var(--anim-ease);
}

.reveal-text::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    background:
        linear-gradient(
            90deg,
            var(--blue-light),
            var(--blue),
            var(--purple),
            var(--purple-light)
        );
    transform: translateX(-103%);
    pointer-events: none;
}

.reveal-text.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.reveal-text.is-visible::before {
    animation: textMaskSweep 1.2s var(--anim-expo) both;
}

@keyframes textMaskSweep {
    0% {
        transform: translateX(-103%);
    }

    44% {
        transform: translateX(0%);
    }

    56% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(103%);
    }
}


/* ==========================================================
   06. HERO — ENTRADAS
========================================================== */
.hero__eyebrow {
    animation: heroEyebrowEnter 1s .35s var(--anim-ease) both;
}

.hero__title-line:nth-child(1) {
    transition-delay: 120ms;
}

.hero__title-line:nth-child(2) {
    transition-delay: 240ms;
}

.hero__title-line:nth-child(3) {
    transition-delay: 360ms;
}

.hero__title-line:nth-child(1)::before {
    animation-delay: 120ms;
}

.hero__title-line:nth-child(2)::before {
    animation-delay: 240ms;
}

.hero__title-line:nth-child(3)::before {
    animation-delay: 360ms;
}

.hero__description {
    animation: heroDescriptionEnter 1s .75s var(--anim-ease) both;
}

.hero__actions {
    animation: heroActionsEnter 1s .92s var(--anim-ease) both;
}

.hero__trust {
    animation: heroTrustEnter 1s 1.08s var(--anim-ease) both;
}

.hero__script-word {
    animation:
        scriptWordFloat 4.5s ease-in-out infinite,
        scriptWordGlow 3s ease-in-out infinite;
}

@keyframes heroEyebrowEnter {
    from {
        opacity: 0;
        transform: translateX(-28px);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

@keyframes heroDescriptionEnter {
    from {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes heroActionsEnter {
    from {
        opacity: 0;
        transform: translateY(34px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes heroTrustEnter {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scriptWordFloat {
    0%,
    100% {
        transform: rotate(-3deg) translateY(0);
    }

    50% {
        transform: rotate(-1deg) translateY(-5px);
    }
}

@keyframes scriptWordGlow {
    0%,
    100% {
        text-shadow:
            0 0 18px rgba(49,208,255,.24),
            0 0 34px rgba(117,60,255,.14);
    }

    50% {
        text-shadow:
            0 0 32px rgba(49,208,255,.5),
            0 0 54px rgba(117,60,255,.3);
    }
}


/* ==========================================================
   07. HERO — FEIXES E ELEMENTOS VIVOS
========================================================== */
.hero__light-beam {
    animation: heroLightBeam 6.5s ease-in-out infinite;
}

.hero__light-beam--secondary {
    animation:
        heroLightBeamSecondary 8s 1.5s ease-in-out infinite;
}

.hero__orb--one {
    animation: orbOneMove 12s ease-in-out infinite alternate;
}

.hero__orb--two {
    animation: orbTwoMove 15s ease-in-out infinite alternate;
}

.hero__orb--three {
    animation: orbThreeMove 11s ease-in-out infinite alternate;
}

.hero__magnetic-ring--one {
    animation:
        magneticRingOne 18s linear infinite,
        magneticRingPulse 5s ease-in-out infinite;
}

.hero__magnetic-ring--two {
    animation:
        magneticRingTwo 14s linear infinite reverse,
        magneticRingPulse 6s 1s ease-in-out infinite;
}

.hero__particles span {
    animation:
        particleFloat var(--particle-duration, 12s) linear infinite,
        particleGlow 3s ease-in-out infinite;
}

.scroll-indicator {
    animation: scrollIndicatorFloat 3s ease-in-out infinite;
}

.scroll-indicator__mouse span {
    animation: mouseWheel 1.8s ease-in-out infinite;
}

@keyframes heroLightBeam {
    0% {
        left: -48%;
        opacity: 0;
        transform: rotate(-8deg) scaleX(.8);
    }

    16% {
        opacity: .65;
    }

    50% {
        opacity: 1;
        transform: rotate(-5deg) scaleX(1.16);
    }

    100% {
        left: 118%;
        opacity: 0;
        transform: rotate(-2deg) scaleX(.9);
    }
}

@keyframes heroLightBeamSecondary {
    0% {
        left: -60%;
        opacity: 0;
        transform: rotate(7deg) scaleX(.8);
    }

    20% {
        opacity: .45;
    }

    52% {
        opacity: .72;
    }

    100% {
        left: 120%;
        opacity: 0;
        transform: rotate(3deg) scaleX(1.1);
    }
}

@keyframes orbOneMove {
    0% {
        transform: translate3d(-30px, 10px, 0) scale(.88);
    }

    100% {
        transform: translate3d(110px, -60px, 0) scale(1.18);
    }
}

@keyframes orbTwoMove {
    0% {
        transform: translate3d(20px, -30px, 0) scale(1);
    }

    100% {
        transform: translate3d(-120px, 80px, 0) scale(1.22);
    }
}

@keyframes orbThreeMove {
    0% {
        transform: translate3d(-30px, 10px, 0) scale(.9);
    }

    100% {
        transform: translate3d(90px, -75px, 0) scale(1.12);
    }
}

@keyframes magneticRingOne {
    to {
        transform: rotate(360deg);
    }
}

@keyframes magneticRingTwo {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes magneticRingPulse {
    0%,
    100% {
        opacity: .24;
        scale: .96;
    }

    50% {
        opacity: .5;
        scale: 1.03;
    }
}

@keyframes particleFloat {
    from {
        transform: translate3d(0, 50px, 0) scale(.6);
    }

    50% {
        transform: translate3d(14px, -60px, 0) scale(1);
    }

    to {
        transform: translate3d(-8px, -160px, 0) scale(.4);
    }
}

@keyframes particleGlow {
    0%,
    100% {
        opacity: .25;
        box-shadow: 0 0 6px rgba(0,145,255,.32);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 15px rgba(0,145,255,.9);
    }
}

@keyframes scrollIndicatorFloat {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(8px);
    }
}

@keyframes mouseWheel {
    0% {
        transform: translate(-50%, 0);
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 13px);
        opacity: 0;
    }
}


/* ==========================================================
   08. FAIXA INFINITA
========================================================== */
.technology-strip__track {
    animation: technologyMarquee 30s linear infinite;
}

.technology-strip:hover .technology-strip__track {
    animation-play-state: paused;
}

.technology-strip__separator {
    animation: separatorPulse 2.4s ease-in-out infinite;
}

@keyframes technologyMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes separatorPulse {
    0%,
    100% {
        transform: scale(.78);
        opacity: .5;
    }

    50% {
        transform: scale(1.22);
        opacity: 1;
    }
}


/* ==========================================================
   09. BOTÕES
========================================================== */
.button--primary {
    background-size: 180% 180%;
    animation: buttonGradientMove 5s ease-in-out infinite;
}

.button:hover {
    animation: buttonHoverPulse 1.8s ease-in-out infinite;
}

.magnetic-element {
    transform-style: preserve-3d;
    will-change: transform;
}

.click-ripple {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    animation: clickRippleAnimation 720ms ease-out forwards;
}

@keyframes buttonGradientMove {
    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes buttonHoverPulse {
    0%,
    100% {
        box-shadow:
            0 15px 38px rgba(0,115,255,.28),
            0 0 38px rgba(117,60,255,.15);
    }

    50% {
        box-shadow:
            0 20px 50px rgba(0,115,255,.42),
            0 0 58px rgba(117,60,255,.25);
    }
}

@keyframes clickRippleAnimation {
    to {
        transform: translate(-50%, -50%) scale(22);
        opacity: 0;
    }
}


/* ==========================================================
   10. PLANO DESTACADO
========================================================== */
.featured-plan__animated-border {
    animation: featuredBorderRotate 9s linear infinite;
}

.featured-plan__spotlight {
    animation: featuredSpotlightMove 8s ease-in-out infinite alternate;
}

.featured-plan__wave--one {
    animation: featuredWaveOne 10s ease-in-out infinite alternate;
}

.featured-plan__wave--two {
    animation: featuredWaveTwo 12s ease-in-out infinite alternate;
}

.featured-plan__badge {
    animation: badgeGlow 2.6s ease-in-out infinite;
}

.featured-plan__price strong {
    background-size: 200% 100%;
    animation: priceGradientMove 6s ease-in-out infinite;
}

.featured-plan__check {
    animation: pricingCheckPulse 3s ease-in-out infinite;
}

.featured-plan__features li:nth-child(2) .featured-plan__check {
    animation-delay: .18s;
}

.featured-plan__features li:nth-child(3) .featured-plan__check {
    animation-delay: .36s;
}

.featured-plan__features li:nth-child(4) .featured-plan__check {
    animation-delay: .54s;
}

.featured-plan__features li:nth-child(5) .featured-plan__check {
    animation-delay: .72s;
}

.featured-plan__features li:nth-child(6) .featured-plan__check {
    animation-delay: .9s;
}

.browser-mockup {
    animation: browserMockupFloat 6s ease-in-out infinite;
}

.browser-mockup__wave {
    animation: browserWaveMove 6s ease-in-out infinite alternate;
}

.browser-mockup__glow {
    animation: browserGlowMove 7s ease-in-out infinite alternate;
}

.browser-line {
    position: relative;
    overflow: hidden;
}

.browser-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.8),
            transparent
        );
    transform: translateX(-120%);
    animation: browserLineShimmer 3s ease-in-out infinite;
}

.browser-line--medium::after {
    animation-delay: .4s;
}

.browser-line--small::after {
    animation-delay: .8s;
}

.featured-plan__floating-card--one {
    animation: floatingCardOne 4.5s ease-in-out infinite;
}

.featured-plan__floating-card--two {
    animation: floatingCardTwo 5.2s ease-in-out infinite;
}

.featured-plan__floating-card--three {
    animation: floatingCardThree 4.8s ease-in-out infinite;
}

@keyframes featuredBorderRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes featuredSpotlightMove {
    from {
        transform: translate3d(-30px, 10px, 0) scale(.9);
    }

    to {
        transform: translate3d(60px, 40px, 0) scale(1.2);
    }
}

@keyframes featuredWaveOne {
    from {
        transform: rotate(-7deg) translateY(0) scaleX(1);
    }

    to {
        transform: rotate(-3deg) translateY(-24px) scaleX(1.07);
    }
}

@keyframes featuredWaveTwo {
    from {
        transform: rotate(9deg) translateY(0) scaleX(1);
    }

    to {
        transform: rotate(5deg) translateY(28px) scaleX(1.08);
    }
}

@keyframes badgeGlow {
    0%,
    100% {
        box-shadow: 0 0 14px rgba(0,145,255,.08);
    }

    50% {
        box-shadow:
            0 0 30px rgba(0,145,255,.22),
            0 0 44px rgba(117,60,255,.12);
    }
}

@keyframes priceGradientMove {
    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes pricingCheckPulse {
    0%,
    100% {
        transform: scale(.9);
        box-shadow: 0 0 8px rgba(0,145,255,.08);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 18px rgba(0,145,255,.28);
    }
}

@keyframes browserMockupFloat {
    0%,
    100% {
        transform:
            perspective(1200px)
            rotateY(-6deg)
            rotateX(2deg)
            translateY(0);
    }

    50% {
        transform:
            perspective(1200px)
            rotateY(-3deg)
            rotateX(1deg)
            translateY(-11px);
    }
}

@keyframes browserWaveMove {
    from {
        transform: rotate(-7deg) translateY(0) scaleX(1);
    }

    to {
        transform: rotate(-4deg) translateY(-16px) scaleX(1.08);
    }
}

@keyframes browserGlowMove {
    from {
        transform: translate3d(0, 0, 0) scale(.9);
        opacity: .55;
    }

    to {
        transform: translate3d(-70px, 35px, 0) scale(1.2);
        opacity: 1;
    }
}

@keyframes browserLineShimmer {
    0%,
    30% {
        transform: translateX(-120%);
    }

    75%,
    100% {
        transform: translateX(120%);
    }
}

@keyframes floatingCardOne {
    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-12px) rotate(1deg);
    }
}

@keyframes floatingCardTwo {
    0%,
    100% {
        transform: translateY(0) rotate(2deg);
    }

    50% {
        transform: translateY(-10px) rotate(-1deg);
    }
}

@keyframes floatingCardThree {
    0%,
    100% {
        transform: translateY(0) translateX(0);
    }

    50% {
        transform: translateY(-8px) translateX(5px);
    }
}


/* ==========================================================
   11. SERVIÇOS
========================================================== */
.service-card {
    transform-style: preserve-3d;
}

.service-card:hover {
    animation: serviceCardGlow 3s ease-in-out infinite;
}

.service-card__icon {
    position: relative;
    overflow: hidden;
}

.service-card__icon::after {
    content: "";
    position: absolute;
    inset: -45%;
    background:
        conic-gradient(
            transparent,
            rgba(0,145,255,.22),
            transparent,
            rgba(117,60,255,.2),
            transparent
        );
    opacity: 0;
    animation: iconRotateGlow 5s linear infinite;
    transition: opacity .3s ease;
}

.service-card:hover .service-card__icon::after {
    opacity: 1;
}

.service-card__icon svg {
    position: relative;
    z-index: 2;
}

.service-card__features li::before {
    animation: listDotPulse 2.5s ease-in-out infinite;
}

.service-card__features li:nth-child(2)::before {
    animation-delay: .2s;
}

.service-card__features li:nth-child(3)::before {
    animation-delay: .4s;
}

.service-card__features li:nth-child(4)::before {
    animation-delay: .6s;
}

.services__magnetic-wave {
    animation: servicesWaveMove 11s ease-in-out infinite alternate;
}

@keyframes serviceCardGlow {
    0%,
    100% {
        box-shadow:
            0 34px 85px rgba(0,0,0,.42),
            0 0 34px rgba(0,115,255,.08),
            0 0 56px rgba(117,60,255,.06);
    }

    50% {
        box-shadow:
            0 39px 98px rgba(0,0,0,.48),
            0 0 48px rgba(0,115,255,.14),
            0 0 70px rgba(117,60,255,.1);
    }
}

@keyframes iconRotateGlow {
    to {
        transform: rotate(360deg);
    }
}

@keyframes listDotPulse {
    0%,
    100% {
        transform: scale(.85);
        opacity: .55;
    }

    50% {
        transform: scale(1.18);
        opacity: 1;
    }
}

@keyframes servicesWaveMove {
    from {
        transform: rotate(-8deg) translateY(0) scaleX(1);
    }

    to {
        transform: rotate(-4deg) translateY(-22px) scaleX(1.08);
    }
}


/* ==========================================================
   12. PORTFÓLIO — NOTEBOOKS
========================================================== */
.portfolio__background-waves span:first-child {
    animation: portfolioWaveOne 12s ease-in-out infinite alternate;
}

.portfolio__background-waves span:nth-child(2) {
    animation: portfolioWaveTwo 14s ease-in-out infinite alternate;
}

.portfolio__background-waves span:last-child {
    animation: portfolioWaveThree 10s ease-in-out infinite alternate;
}

.portfolio-laptop__ambient-glow {
    animation: laptopAmbientGlow 4s ease-in-out infinite;
}

.portfolio-laptop__device {
    animation: laptopIdleFloat 6s ease-in-out infinite;
}

.portfolio-laptop:nth-child(even) .portfolio-laptop__device {
    animation-delay: -3s;
}

.portfolio-laptop__external-icon {
    animation: externalIconPulse 2.2s ease-in-out infinite;
}

.portfolio-laptop__shadow {
    animation: laptopShadowPulse 6s ease-in-out infinite;
}

.portfolio-laptop:hover .portfolio-laptop__device {
    animation: laptopHoverFloat 3.5s ease-in-out infinite;
}

.portfolio-laptop__technologies span {
    transition:
        transform .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.portfolio-laptop__technologies span:hover {
    transform: translateY(-3px);
    color: #fff;
    border-color: rgba(91,127,255,.42);
    box-shadow: 0 0 18px rgba(0,145,255,.08);
}

@keyframes portfolioWaveOne {
    from {
        transform: rotate(8deg) translateY(0) scaleX(1);
    }

    to {
        transform: rotate(4deg) translateY(-18px) scaleX(1.06);
    }
}

@keyframes portfolioWaveTwo {
    from {
        transform: rotate(-8deg) translateY(0) scaleX(1);
    }

    to {
        transform: rotate(-4deg) translateY(22px) scaleX(1.08);
    }
}

@keyframes portfolioWaveThree {
    from {
        transform: rotate(4deg) translateY(0);
    }

    to {
        transform: rotate(1deg) translateY(-16px);
    }
}

@keyframes laptopAmbientGlow {
    0%,
    100% {
        opacity: .38;
        transform: translateX(-50%) scale(.92);
    }

    50% {
        opacity: .72;
        transform: translateX(-50%) scale(1.08);
    }
}

@keyframes laptopIdleFloat {
    0%,
    100% {
        transform:
            rotateX(2deg)
            rotateY(-2deg)
            translateY(0);
    }

    50% {
        transform:
            rotateX(1deg)
            rotateY(1deg)
            translateY(-9px);
    }
}

@keyframes laptopHoverFloat {
    0%,
    100% {
        transform:
            rotateX(0deg)
            rotateY(0deg)
            translateY(-8px);
    }

    50% {
        transform:
            rotateX(.5deg)
            rotateY(-.5deg)
            translateY(-13px);
    }
}

@keyframes externalIconPulse {
    0%,
    100% {
        transform: translate(0, 0);
        opacity: .65;
    }

    50% {
        transform: translate(3px, -3px);
        opacity: 1;
    }
}

@keyframes laptopShadowPulse {
    0%,
    100% {
        transform: scaleX(.9);
        opacity: .52;
    }

    50% {
        transform: scaleX(1.05);
        opacity: .66;
    }
}


/* ==========================================================
   13. PROCESSO
========================================================== */
.process-step__marker {
    animation: processMarkerFloat 4s ease-in-out infinite;
}

.process-step:nth-child(even) .process-step__marker {
    animation-delay: -2s;
}

.process-step__marker span {
    animation: processNumberGlow 2.8s ease-in-out infinite;
}

.process-timeline__progress {
    position: relative;
}

.process-timeline__progress::after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--blue-light);
    box-shadow:
        0 0 12px rgba(0,145,255,.8),
        0 0 25px rgba(117,60,255,.5);
    transform: translate(50%, 50%);
    animation: timelineDotPulse 1.8s ease-in-out infinite;
}

.process-step__content {
    transition:
        transform .5s var(--anim-ease),
        border-color .3s ease,
        box-shadow .3s ease;
}

.process-step:nth-of-type(odd):hover .process-step__content {
    transform: translateX(-9px);
}

.process-step:nth-of-type(even):hover .process-step__content {
    transform: translateX(9px);
}

@keyframes processMarkerFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes processNumberGlow {
    0%,
    100% {
        text-shadow: 0 0 8px rgba(0,145,255,.24);
    }

    50% {
        text-shadow: 0 0 18px rgba(0,145,255,.75);
    }
}

@keyframes timelineDotPulse {
    0%,
    100% {
        transform: translate(50%, 50%) scale(.82);
    }

    50% {
        transform: translate(50%, 50%) scale(1.25);
    }
}


/* ==========================================================
   14. SOBRE
========================================================== */
.about-preview__waves {
    animation: aboutWaveMove 11s ease-in-out infinite alternate;
}

.about-preview__code-window {
    animation: codeWindowFloat 7s ease-in-out infinite;
}

.about-preview__code-glow {
    animation: codeGlowMove 7s ease-in-out infinite alternate;
}

.about-preview__floating-logo {
    animation: floatingLogoMovement 4.8s ease-in-out infinite;
}

.about-preview__floating-logo::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background:
        linear-gradient(
            135deg,
            rgba(0,145,255,.42),
            transparent 40%,
            rgba(117,60,255,.42)
        );
    filter: blur(8px);
    opacity: .55;
    animation: floatingLogoGlow 3s ease-in-out infinite;
}

.about-preview__experience-card {
    animation: experienceCardFloat 5s ease-in-out infinite;
}

.code-token {
    animation: codeTokenGlow 3.8s ease-in-out infinite;
}

.code-line-code:nth-child(2) .code-token {
    animation-delay: .25s;
}

.code-line-code:nth-child(3) .code-token {
    animation-delay: .5s;
}

.about-stat strong {
    background-size: 200% 100%;
    animation: statTextGradient 5s ease-in-out infinite;
}

@keyframes aboutWaveMove {
    from {
        transform: rotate(-6deg) translateY(0) scaleX(1);
    }

    to {
        transform: rotate(-3deg) translateY(-20px) scaleX(1.08);
    }
}

@keyframes codeWindowFloat {
    0%,
    100% {
        transform:
            translateY(0)
            rotateX(0)
            rotateY(0);
    }

    50% {
        transform:
            translateY(-10px)
            rotateX(.4deg)
            rotateY(-.6deg);
    }
}

@keyframes codeGlowMove {
    from {
        transform: translate3d(0, 0, 0) scale(.9);
    }

    to {
        transform: translate3d(-70px, -45px, 0) scale(1.2);
    }
}

@keyframes floatingLogoMovement {
    0%,
    100% {
        transform: translateY(0) rotate(-1deg);
    }

    50% {
        transform: translateY(-11px) rotate(1.5deg);
    }
}

@keyframes floatingLogoGlow {
    0%,
    100% {
        opacity: .3;
    }

    50% {
        opacity: .8;
    }
}

@keyframes experienceCardFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes codeTokenGlow {
    0%,
    100% {
        text-shadow: 0 0 0 transparent;
    }

    50% {
        text-shadow: 0 0 12px currentColor;
    }
}

@keyframes statTextGradient {
    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}


/* ==========================================================
   15. DIFERENCIAIS
========================================================== */
.advantage-card::before {
    content: "";
    position: absolute;
    top: -90px;
    right: -90px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(0,145,255,.14),
            transparent 70%
        );
    filter: blur(24px);
    opacity: 0;
    transition:
        opacity .4s ease,
        transform .8s var(--anim-ease);
}

.advantage-card:nth-child(even)::before {
    background:
        radial-gradient(
            circle,
            rgba(117,60,255,.14),
            transparent 70%
        );
}

.advantage-card:hover::before {
    opacity: 1;
    transform: translate(-20px, 20px) scale(1.15);
}

.advantage-card__number {
    position: relative;
    display: inline-block;
}

.advantage-card__number::after {
    content: "";
    position: absolute;
    right: -31px;
    bottom: 4px;
    width: 22px;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            var(--blue-light),
            transparent
        );
    transform-origin: left;
    animation: advantageLinePulse 2.6s ease-in-out infinite;
}

@keyframes advantageLinePulse {
    0%,
    100% {
        transform: scaleX(.45);
        opacity: .3;
    }

    50% {
        transform: scaleX(1);
        opacity: 1;
    }
}


/* ==========================================================
   16. DEPOIMENTOS
========================================================== */
.testimonial-card {
    transition:
        transform .5s var(--anim-ease),
        border-color .3s ease,
        box-shadow .3s ease;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    border-color: rgba(79,119,255,.28);
    box-shadow:
        0 32px 80px rgba(0,0,0,.38),
        0 0 28px rgba(0,132,255,.055);
}

.testimonial-card__stars {
    animation: starGlow 3s ease-in-out infinite;
}

.testimonial-card__quote {
    animation: quoteFloat 4s ease-in-out infinite;
}

@keyframes starGlow {
    0%,
    100% {
        text-shadow: 0 0 8px rgba(0,145,255,.25);
    }

    50% {
        text-shadow: 0 0 20px rgba(0,145,255,.8);
    }
}

@keyframes quoteFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-6px) rotate(2deg);
    }
}


/* ==========================================================
   17. CTA FINAL
========================================================== */
.final-cta__waves::before {
    animation: finalWaveOne 9s ease-in-out infinite alternate;
}

.final-cta__waves::after {
    animation: finalWaveTwo 11s ease-in-out infinite alternate;
}

.final-cta__beam {
    animation: finalBeamSweep 7s ease-in-out infinite;
}

.final-cta__script {
    animation:
        finalScriptFloat 4.5s ease-in-out infinite,
        scriptWordGlow 3s ease-in-out infinite;
}

@keyframes finalWaveOne {
    from {
        transform:
            rotate(-6deg)
            translateY(0)
            scaleX(1);
    }

    to {
        transform:
            rotate(-3deg)
            translateY(-18px)
            scaleX(1.05);
    }
}

@keyframes finalWaveTwo {
    from {
        transform:
            rotate(7deg)
            translateY(0)
            scaleX(1);
    }

    to {
        transform:
            rotate(4deg)
            translateY(20px)
            scaleX(1.06);
    }
}

@keyframes finalBeamSweep {
    0% {
        left: -42%;
        opacity: 0;
    }

    18% {
        opacity: .7;
    }

    52% {
        opacity: 1;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}

@keyframes finalScriptFloat {
    0%,
    100% {
        transform: rotate(-2deg) translateY(0);
    }

    50% {
        transform: rotate(0deg) translateY(-6px);
    }
}


/* ==========================================================
   18. FOOTER E ELEMENTOS FLUTUANTES
========================================================== */
.site-footer__glow {
    animation: footerGlowPulse 5s ease-in-out infinite;
}

.site-footer__social a {
    transition:
        transform .3s ease,
        color .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.site-footer__social a:hover {
    transform: translateY(-4px);
    border-color: rgba(76,127,255,.4);
    background:
        linear-gradient(
            145deg,
            rgba(0,145,255,.1),
            rgba(117,60,255,.07)
        );
    color: #fff;
    box-shadow:
        0 12px 28px rgba(0,0,0,.22),
        0 0 22px rgba(0,145,255,.07);
}

.floating-whatsapp {
    animation: floatingWhatsApp 4s ease-in-out infinite;
}

.floating-whatsapp:hover {
    animation: floatingWhatsAppHover 1.5s ease-in-out infinite;
}

.floating-whatsapp__pulse {
    animation: whatsappPulse 2s ease-out infinite;
}

.back-to-top:hover {
    animation: backToTopPulse 1.6s ease-in-out infinite;
}

@keyframes footerGlowPulse {
    0%,
    100% {
        opacity: .45;
        transform: translateX(-50%) scale(.9);
    }

    50% {
        opacity: .85;
        transform: translateX(-50%) scale(1.08);
    }
}

@keyframes floatingWhatsApp {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes floatingWhatsAppHover {
    0%,
    100% {
        transform:
            translateY(-5px)
            scale(1);
    }

    50% {
        transform:
            translateY(-8px)
            scale(1.025);
    }
}

@keyframes whatsappPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(53,230,155,.52);
    }

    70% {
        box-shadow: 0 0 0 11px rgba(53,230,155,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(53,230,155,0);
    }
}

@keyframes backToTopPulse {
    0%,
    100% {
        box-shadow:
            0 14px 40px rgba(0,0,0,.34),
            0 0 15px rgba(0,145,255,.05);
    }

    50% {
        box-shadow:
            0 18px 48px rgba(0,0,0,.42),
            0 0 28px rgba(0,145,255,.16);
    }
}


/* ==========================================================
   19. FUNDO GLOBAL
========================================================== */
.site-background__glow--blue {
    animation: backgroundGlowBlue 14s ease-in-out infinite alternate;
}

.site-background__glow--purple {
    animation: backgroundGlowPurple 17s ease-in-out infinite alternate;
}

.site-background__mist--one {
    animation: backgroundMistOne 16s ease-in-out infinite alternate;
}

.site-background__mist--two {
    animation: backgroundMistTwo 19s ease-in-out infinite alternate;
}

@keyframes backgroundGlowBlue {
    from {
        transform: translate3d(-40px, 0, 0) scale(.9);
    }

    to {
        transform: translate3d(150px, 80px, 0) scale(1.22);
    }
}

@keyframes backgroundGlowPurple {
    from {
        transform: translate3d(40px, 0, 0) scale(.95);
    }

    to {
        transform: translate3d(-140px, -90px, 0) scale(1.2);
    }
}

@keyframes backgroundMistOne {
    from {
        transform: rotate(-9deg) translate3d(-5%, 0, 0) scaleX(.9);
        opacity: .035;
    }

    to {
        transform: rotate(-5deg) translate3d(18%, -40px, 0) scaleX(1.2);
        opacity: .09;
    }
}

@keyframes backgroundMistTwo {
    from {
        transform: rotate(8deg) translate3d(6%, 0, 0) scaleX(.95);
        opacity: .035;
    }

    to {
        transform: rotate(3deg) translate3d(-20%, 45px, 0) scaleX(1.18);
        opacity: .09;
    }
}


/* ==========================================================
   20. ANIMAÇÕES UTILITÁRIAS
========================================================== */
.float-animation {
    animation: utilityFloat 5s ease-in-out infinite;
}

.pulse-animation {
    animation: utilityPulse 2.5s ease-in-out infinite;
}

.rotate-animation {
    animation: utilityRotate 12s linear infinite;
}

.fade-animation {
    animation: utilityFade 3s ease-in-out infinite;
}

.animate-in {
    animation: animateIn 750ms var(--anim-ease) both;
}

.animate-out {
    animation: animateOut 500ms ease both;
}

@keyframes utilityFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes utilityPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: .85;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes utilityRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes utilityFade {
    0%,
    100% {
        opacity: .5;
    }

    50% {
        opacity: 1;
    }
}

@keyframes animateIn {
    from {
        opacity: 0;
        transform:
            translateY(25px)
            scale(.98);
        filter: blur(4px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
        filter: blur(0);
    }
}

@keyframes animateOut {
    from {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }

    to {
        opacity: 0;
        transform:
            translateY(-16px)
            scale(.98);
    }
}


/* ==========================================================
   21. MOBILE E TOUCH
========================================================== */
@media (max-width: 1080px) {
    .browser-mockup {
        animation-duration: 7s;
    }

    .featured-plan__animated-border {
        animation-duration: 12s;
    }
}

@media (max-width: 768px) {
    .browser-mockup,
    .featured-plan__floating-card,
    .portfolio-laptop__device,
    .about-preview__code-window,
    .floating-whatsapp {
        animation: none;
    }

    .service-card:hover,
    .portfolio-laptop:hover .portfolio-laptop__device {
        animation: none;
    }

    .reveal-element {
        transition-duration: 720ms;
    }

    .reveal-element[data-animation="fade-left"],
    .reveal-element[data-animation="fade-right"] {
        transform: translate3d(0, 45px, 0);
    }

    .reveal-element[data-animation="fade-left"].is-visible,
    .reveal-element[data-animation="fade-right"].is-visible {
        transform: translate3d(0, 0, 0);
    }

    .hero__light-beam {
        animation-duration: 8s;
    }

    .technology-strip__track {
        animation-duration: 24s;
    }
}

@media (max-width: 540px) {
    .reveal-element {
        transition-duration: 620ms;
    }

    .reveal-element:nth-child(n) {
        transition-delay: 0ms;
    }

    .hero__title-line:nth-child(n) {
        transition-delay: 0ms;
    }

    .hero__title-line:nth-child(n)::before {
        animation-delay: 0ms;
    }

    .gradient-text,
    .featured-plan__price strong,
    .about-stat strong {
        animation-duration: 9s;
    }

    .technology-strip__track {
        animation-duration: 20s;
    }
}

@media (hover: none) and (pointer: coarse) {
    .button:hover,
    .service-card:hover,
    .advantage-card:hover,
    .testimonial-card:hover,
    .floating-whatsapp:hover,
    .portfolio-laptop:hover .portfolio-laptop__device {
        animation: none;
    }

    .service-card:hover,
    .advantage-card:hover,
    .testimonial-card:hover,
    .portfolio-laptop:hover .portfolio-laptop__device {
        transform: none;
    }

    .portfolio-laptop__reflection {
        display: none;
    }

    .portfolio-laptop__visit {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}


/* ==========================================================
   22. REDUÇÃO DE MOVIMENTO
========================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .reveal-element,
    .reveal-text {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }

    .reveal-text::before {
        display: none !important;
    }

    .technology-strip__track {
        animation: none !important;
        transform: none !important;
    }

    .hero__light-beam,
    .hero__orb,
    .hero__magnetic-ring,
    .site-background__glow,
    .site-background__mist,
    .featured-plan__animated-border,
    .browser-mockup,
    .portfolio-laptop__device,
    .about-preview__code-window,
    .floating-whatsapp {
        animation: none !important;
    }
}

/* ==========================================================
   CORREÇÃO FINAL — REMOVER DESFOQUE APÓS REVELAÇÃO
========================================================== */

.reveal-element.is-visible,
.reveal-element.is-revealed,
.reveal-element.reveal-ready.is-visible,
.reveal-element.reveal-ready.is-revealed {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg) !important;
    filter: none !important;
    clip-path: inset(0 0 0 0) !important;
}

.reveal-text.is-visible,
.reveal-text.is-revealed,
.reveal-text.reveal-ready.is-visible,
.reveal-text.reveal-ready.is-revealed {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    filter: none !important;
}

.reveal-element.is-visible *,
.reveal-element.is-revealed *,
.reveal-text.is-visible *,
.reveal-text.is-revealed * {
    filter: none;
}






/* ==========================================================
   MENU INVISÍVEL NO TOPO + NUVEM AO DESLIZAR
========================================================== */

.site-header {
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9999 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    transition:
        height 0.5s ease,
        background 0.5s ease,
        box-shadow 0.5s ease,
        backdrop-filter 0.5s ease,
        transform 0.5s ease !important;
}

/* Nuvem magnética que aparece depois de deslizar */
.site-header.is-scrolled {
    background:
        radial-gradient(
            ellipse at 25% 50%,
            rgba(0, 145, 255, 0.15),
            transparent 42%
        ),
        radial-gradient(
            ellipse at 75% 40%,
            rgba(117, 60, 255, 0.16),
            transparent 45%
        ),
        linear-gradient(
            90deg,
            rgba(3, 6, 15, 0.86),
            rgba(7, 8, 24, 0.78),
            rgba(3, 6, 15, 0.86)
        ) !important;

    border: none !important;

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.28),
        0 30px 75px rgba(0, 0, 0, 0.18),
        0 12px 40px rgba(0, 145, 255, 0.06),
        0 16px 45px rgba(117, 60, 255, 0.06) !important;

    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

/* Remove qualquer linha inferior */
.site-header::after {
    border: none !important;
}

/* Névoa interna animada */
.site-header.is-scrolled .site-header__mist {
    opacity: 1;
}

.site-header__mist {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* Evita que títulos fiquem escondidos pelo menu */
section[id] {
    scroll-margin-top: 100px;
}









/* IMPEDIR CORTE DO CARTÃO 100% */
.about-preview__visual {
    padding-left: 40px;
}

.about-preview__experience-card {
    left: 0 !important;
    max-width: calc(100% - 20px);
}

@media (max-width: 767px) {
    .about-preview__visual {
        padding-left: 0;
    }

    .about-preview__experience-card {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100%;
        margin-top: 16px;
    }
}




/* Esconde o menu enquanto o preloader estiver ativo */
body.is-loading .site-header,
body.loading .site-header,
body.preloader-active .site-header {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Mostra após o carregamento */
body:not(.is-loading):not(.loading):not(.preloader-active) .site-header {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 0.6s ease,
        visibility 0.6s ease,
        background 0.5s ease,
        box-shadow 0.5s ease,
        backdrop-filter 0.5s ease;
}






/* ==========================================================
   CORREÇÃO DEFINITIVA DO MENU VERTEX
========================================================== */

/* Menu transparente no início */
.site-header,
.site-header.is-scrolled {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 9999 !important;

    background: transparent !important;
    border: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    animation: none !important;

    transition:
        opacity 0.6s ease,
        visibility 0.6s ease,
        height 0.5s ease !important;
}

/* Esconde enquanto o preloader existir */
.preloader:not(.preloader-hidden) ~ .site-header {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Mostra somente depois do carregamento */
.preloader.preloader-hidden ~ .site-header {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Camada que recebe a nuvem */
.site-header::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    inset: -35px -10% -45px -10% !important;

    background:
        radial-gradient(
            ellipse at 25% 45%,
            rgba(0, 174, 255, 0.28) 0%,
            rgba(0, 145, 255, 0.11) 24%,
            transparent 55%
        ),
        radial-gradient(
            ellipse at 75% 50%,
            rgba(135, 62, 255, 0.28) 0%,
            rgba(117, 60, 255, 0.11) 25%,
            transparent 58%
        ),
        linear-gradient(
            90deg,
            rgba(2, 5, 14, 0.93),
            rgba(7, 9, 25, 0.84),
            rgba(2, 5, 14, 0.93)
        ) !important;

    opacity: 0 !important;
    filter: blur(20px) !important;
    transform: translate3d(-6%, -15px, 0) scale(1.05);
    pointer-events: none !important;

    transition:
        opacity 0.7s ease,
        transform 0.7s ease !important;
}

/* LED que atravessa a nuvem */
.site-header::after {
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;

    top: 12px !important;
    bottom: 5px !important;
    left: -35% !important;
    width: 34% !important;
    height: auto !important;

    border: 0 !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 174, 255, 0.08) 20%,
        rgba(45, 207, 255, 0.72) 48%,
        rgba(137, 70, 255, 0.7) 68%,
        transparent 100%
    ) !important;

    opacity: 0 !important;
    filter: blur(22px) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

/* Nuvem aparece somente depois de deslizar */
.site-header.is-scrolled::before {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1.05);
    animation: vertexCloudMove 9s ease-in-out infinite alternate !important;
}

.site-header.is-scrolled::after {
    opacity: 0.9 !important;
    animation: vertexLedMove 7s ease-in-out infinite !important;
}

/* Mantém o conteúdo acima da nuvem */
.site-header__container {
    position: relative !important;
    z-index: 3 !important;
}

/* Desativa as linhas e ondas antigas */
.site-header__mist {
    display: none !important;
}

@keyframes vertexCloudMove {
    0% {
        transform: translate3d(-5%, -3px, 0) scale(1.05);
    }

    50% {
        transform: translate3d(4%, 3px, 0) scale(1.1);
    }

    100% {
        transform: translate3d(-2%, 0, 0) scale(1.06);
    }
}

@keyframes vertexLedMove {
    0% {
        left: -35%;
        transform: scaleX(0.8);
    }

    50% {
        left: 52%;
        transform: scaleX(1.35);
    }

    100% {
        left: 105%;
        transform: scaleX(0.8);
    }
}

section[id] {
    scroll-margin-top: 100px;
}

/* ==========================================================
   CORREÇÃO DO MENU MOBILE
========================================================== */

.mobile-menu.mobile-navigation-active,
.mobile-menu.is-open,
html.mobile-menu-open .mobile-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.mobile-menu {
    pointer-events: none;
}

html.mobile-menu-open,
body.navigation-open {
    overflow: hidden !important;
}

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 9997;
    visibility: hidden;
    opacity: 0;
    background: rgba(0, 0, 0, 0.6);
    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}

.mobile-menu-overlay.mobile-menu-overlay-active {
    visibility: visible;
    opacity: 1;
}

.mobile-menu {
    z-index: 9998 !important;
}

.site-header {
    z-index: 9999 !important;
}

.mobile-menu__close {
    cursor: pointer;
}

/* ==========================================================
   RODAPÉ CENTRALIZADO NO CELULAR
========================================================== */

@media (max-width: 767px) {
    .site-footer {
        width: 100%;
        overflow: hidden;
        padding-top: 60px;
    }

    .site-footer .container {
        width: calc(100% - 36px);
        margin-inline: auto;
    }

    .site-footer__main {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        width: 100%;
        text-align: center;
    }

    .site-footer__brand,
    .site-footer__column {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
    }

    .site-footer__logo {
        margin-inline: auto;
    }

    .site-footer__brand p {
        margin-inline: auto;
    }

    .site-footer__social {
        justify-content: center;
    }

    .site-footer__column ul {
        align-items: center;
    }

    .site-footer__bottom {
        align-items: center !important;
        text-align: center;
    }

    .site-footer__legal {
        align-items: center;
    }
}

/* ==========================================================
   CORREÇÕES GLOBAIS — MENU MOBILE E HERO PRINCIPAL
========================================================== */


/* ==========================================================
   01. MENU MOBILE ACIMA DO CABEÇALHO
========================================================== */

@media (max-width: 1080px) {
    .mobile-menu {
        z-index: 11000 !important;
    }

    .mobile-menu-overlay {
        z-index: 10999 !important;
    }

    .mobile-menu__content,
    .mobile-menu__header,
    .mobile-menu__logo,
    .mobile-menu__close {
        position: relative;
        z-index: 5;
    }

    /* Esconde a barra original enquanto o menu está aberto */
    html.mobile-menu-open .site-header {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Exibe somente a logo e o botão pertencentes ao menu */
    html.mobile-menu-open .mobile-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}


/* ==========================================================
   02. HERO PRINCIPAL MAIS NÍTIDO
========================================================== */

.hero {
    background:
        radial-gradient(
            circle at 16% 34%,
            rgba(0, 145, 255, 0.075),
            transparent 30%
        ),
        radial-gradient(
            circle at 84% 42%,
            rgba(117, 60, 255, 0.09),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(2, 4, 10, 0.98),
            rgba(4, 6, 16, 0.99)
        ) !important;
}

/* Grade definida semelhante à página de portfólio */
.hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -4 !important;

    opacity: 0.2 !important;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px
        ) !important;

    background-size: 64px 64px !important;

    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.85),
        transparent 95%
    );

    pointer-events: none;
}

/* Reduz a névoa excessiva */
.hero__orb {
    opacity: 0.48 !important;
    filter: blur(48px) !important;
}

/* Luz azul mais definida */
.hero__orb--one {
    width: 220px !important;
    height: 220px !important;
    background: rgba(0, 145, 255, 0.13) !important;
}

/* Luz roxa mais controlada */
.hero__orb--two {
    width: 320px !important;
    height: 320px !important;
    background: rgba(117, 60, 255, 0.14) !important;
}

/* Luz inferior menos espalhada */
.hero__orb--three {
    width: 230px !important;
    height: 230px !important;
    background: rgba(0, 208, 255, 0.07) !important;
}

/* Feixe com menos desfoque */
.hero__light-beam {
    height: 150px !important;
    filter: blur(22px) !important;
}

.hero__light-beam--secondary {
    height: 90px !important;
    filter: blur(18px) !important;
}

/* Anéis mais visíveis e definidos */
.hero__magnetic-ring {
    border-color: rgba(83, 126, 255, 0.14) !important;
    box-shadow:
        inset 0 0 35px rgba(0, 145, 255, 0.018),
        0 0 28px rgba(117, 60, 255, 0.025);
}

/* Ondas sem aparência embaçada */
.hero__waves-canvas {
    opacity: 0.72;
    filter: none !important;
}

/* Mantém todo o conteúdo perfeitamente nítido */
.hero__container,
.hero__content,
.hero__title,
.hero__description,
.hero__actions,
.hero__trust {
    filter: none !important;
}


/* ==========================================================
   03. AJUSTES DO HERO NO TELEMÓVEL
========================================================== */

@media (max-width: 767px) {
    .hero::before {
        background-size: 42px 42px !important;
    }

    .hero__orb {
        opacity: 0.34 !important;
        filter: blur(38px) !important;
    }

    .hero__light-beam {
        height: 105px !important;
        filter: blur(18px) !important;
    }

    .hero__magnetic-ring {
        opacity: 0.65;
    }
}