:root{
    --black:#050505;
    --dark:#0a0a0a;
    --gray-900:#111111;
    --gray-800:#1a1a1a;
    --gray-700:#262626;
    --gray-600:#404040;
    --gray-500:#525252;
    --gray-400:#737373;
    --gray-300:#a3a3a3;
    --gray-200:#d4d4d4;
    --gray-100:#f5f5f5;
    --white:#fafafa;
    --pure-white:#ffffff;
    --emerald:#10b981;
    --emerald-light:#34d399;
    --emerald-dark:#059669;
    --emerald-glow:rgba(16,185,129,0.2);
    --emerald-intense:rgba(16,185,129,0.5);
    --font-display:'Palatino','Palatino Linotype','Book Antiqua',serif;
    --font-mono:'Palatino','Palatino Linotype','Book Antiqua',serif;
    --font-body:'Palatino','Palatino Linotype','Book Antiqua',serif;
    --section-padding:clamp(100px,15vh,200px);
    --container-width:1400px;
    --container-padding:clamp(24px,6vw,80px);
    --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
    --ease-out-quint:cubic-bezier(0.22,1,0.36,1);
    --ease-in-out-circ:cubic-bezier(0.85,0,0.15,1);
    --ease-elastic:cubic-bezier(0.68,-0.55,0.265,1.55)
}

*,*::before,*::after{
    margin:0;
    padding:0;
    box-sizing:border-box
}

html{
    font-size:16px;
    scroll-behavior:auto;
    width: 100%;
    height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch
}

body{
    font-family:var(--font-body);
    font-weight:700;
    line-height:1.6;
    color:var(--gray-200);
    background-color:var(--black);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    width: 100%;
    min-height: 100vh;
    position: relative;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch
}

/* Cursor customizado apenas em desktop */
@media (min-width: 769px) {
    body {
        cursor: none;
    }

    a, button {
        cursor: none;
    }
}

body.no-scroll{
    overflow:hidden
}

::selection{
    background:var(--emerald);
    color:var(--black)
}

a{
    color:inherit;
    text-decoration:none
}

button{
    background:none;
    border:none;
    font:inherit
}

img{
    max-width:100%;
    height:auto;
    display:block
}

.section-container{
    max-width:var(--container-width);
    margin:0 auto;
    padding:0 var(--container-padding)
}

.cursor-follower{
    pointer-events:none;
    position:fixed;
    z-index:9999
}

.cursor-dot{
    position:fixed;
    top:0;
    left:0;
    width:8px;
    height:8px;
    background:var(--emerald);
    border-radius:50%;
    transform:translate(-50%,-50%);
    transition:transform 0.1s,width 0.3s,height 0.3s,background 0.3s;
    mix-blend-mode:difference
}

.cursor-ring{
    position:fixed;
    top:0;
    left:0;
    width:40px;
    height:40px;
    border:1px solid var(--emerald);
    border-radius:50%;
    transform:translate(-50%,-50%);
    transition:transform 0.15s var(--ease-out-expo),width 0.3s,height 0.3s,border-color 0.3s;
    opacity:0.5
}

body:has(.magnetic:hover) .cursor-dot{
    width:60px;
    height:60px;
    background:var(--emerald-glow)
}

body:has(.magnetic:hover) .cursor-ring{
    width:80px;
    height:80px;
    border-color:transparent
}

.scroll-top-btn{
    position:fixed;
    bottom:40px;
    left:40px;
    z-index:9998;
    display:flex;
    align-items:center;
    justify-content:center;
    width:60px;
    height:60px;
    background:rgba(5,5,5,0.9);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:50%;
    opacity:0;
    pointer-events:none;
    transition:all 0.3s var(--ease-out-expo);
    cursor:pointer
}

.scroll-top-btn.visible{
    opacity:1;
    pointer-events:auto
}

.scroll-top-btn:hover{
    background:rgba(16,185,129,0.15);
    border-color:var(--emerald);
    transform:translateY(-3px)
}

.scroll-top-btn svg{
    width:24px;
    height:24px;
    color:var(--gray-300);
    transition:color 0.3s ease
}

.scroll-top-btn:hover svg{
    color:var(--emerald)
}

.preloader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:var(--black);
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center
}

.preloader-content{
    text-align:center
}

.preloader-logo{
    display:flex;
    margin-bottom:0px;
    justify-content:center
}

.preloader-logo-img{
    width:clamp(200px,40vw,400px);
    height:auto;
    opacity:0;
    transform:scale(0.8);
    filter:brightness(0) invert(1)
}

.preloader-bar{
    width:200px;
    height:2px;
    background:var(--gray-800);
    border-radius:2px;
    overflow:hidden;
    margin:0 auto;
    margin-top:-10px
}

.preloader-progress{
    width:0%;
    height:100%;
    background:var(--emerald)
}

.navbar{
    display:none !important
}

.navbar.scrolled{
    padding:16px 0
}

.nav-container{
    max-width:var(--container-width);
    margin:0 auto;
    padding:0 var(--container-padding);
    display:flex;
    align-items:center;
    justify-content:space-between
}

.logo-img{
    height:52px;
    filter:invert(1);
    transition:transform 0.5s var(--ease-out-expo)
}

.logo:hover .logo-img{
    transform:scale(1.1) rotate(-5deg)
}

.nav-links{
    display:flex;
    gap:48px
}

.nav-link{
    font-family:var(--font-mono);
    font-size:0.75rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--white);
    position:relative;
    overflow:hidden
}

.nav-link::before{
    content:attr(data-pt);
    position:absolute;
    top:100%;
    left:0;
    transition:transform 0.4s var(--ease-out-expo)
}

.nav-link:hover{
    color:var(--emerald-light)
}

.nav-link span,.nav-link:hover::before{
    display:block;
    transition:transform 0.4s var(--ease-out-expo)
}

.nav-link:hover span{
    transform:translateY(-100%)
}

.nav-link:hover::before{
    transform:translateY(-100%)
}

.nav-cta{
    font-family:var(--font-mono);
    font-size:0.75rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--black);
    background:var(--white);
    padding:14px 28px;
    border-radius:100px;
    transition:all 0.4s var(--ease-out-expo)
}

.nav-cta:hover{
    background:var(--emerald);
    transform:scale(1.05)
}

.mobile-menu-btn{
    display:none;
    flex-direction:column;
    gap:6px;
    padding:10px;
    background:none;
    border:none
}

.mobile-menu-btn span{
    width:28px;
    height:2px;
    background:var(--white);
    transition:all 0.4s var(--ease-out-expo);
    transform-origin:center
}

.mobile-menu-btn.active span:nth-child(1){
    transform:rotate(45deg) translate(5px,6px)
}

.mobile-menu-btn.active span:nth-child(2){
    opacity:0;
    transform:scaleX(0)
}

.mobile-menu-btn.active span:nth-child(3){
    transform:rotate(-45deg) translate(5px,-6px)
}

/* Menu Overlay - Subtle */
.mobile-menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.3);
    backdrop-filter:blur(2px);
    z-index:998;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.4s var(--ease-out-expo)
}

.mobile-menu-overlay.active{
    opacity:1;
    pointer-events:auto
}

/* Compact Dropdown Menu */
.mobile-menu{
    position:fixed;
    bottom:100px;
    right:32px;
    width:280px;
    background:rgba(10,10,10,0.98);
    backdrop-filter:blur(20px);
    border:1px solid var(--gray-800);
    border-radius:16px;
    z-index:999;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:16px;
    opacity:0;
    transform:translateY(20px) scale(0.95);
    pointer-events:none;
    transition:all 0.4s var(--ease-out-expo);
    box-shadow:0 16px 48px rgba(0,0,0,0.6),
               0 0 0 1px rgba(255,255,255,0.05) inset
}

.mobile-menu.active{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto
}

.mobile-link{
    font-family:var(--font-mono);
    font-size:0.875rem;
    font-weight:500;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--gray-400);
    text-decoration:none;
    padding:14px 18px;
    border-radius:10px;
    transition:all 0.3s var(--ease-out-expo);
    position:relative;
    overflow:hidden
}

.mobile-link::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, var(--emerald-dark), var(--emerald));
    opacity:0;
    transition:opacity 0.3s var(--ease-out-expo)
}

.mobile-link:hover{
    color:var(--white);
    background:rgba(255,255,255,0.05);
    transform:translateX(4px)
}

.mobile-link:hover::before{
    opacity:0.1
}

.mobile-link.active{
    color:var(--emerald)
}

.mobile-link span{
    position:relative;
    z-index:1
}

/* Language Switch in Mobile Menu - TOPO */
.mobile-lang-switch {
    display: flex;
    gap: 8px;
    padding: 4px 8px 12px 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lang-option {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-500);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--gray-800);
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.3s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
}

.lang-option::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--emerald-dark), var(--emerald));
    opacity: 0;
    transition: opacity 0.3s var(--ease-out-expo);
}

.lang-option:hover {
    color: var(--white);
    border-color: var(--emerald);
    transform: translateY(-2px);
}

.lang-option:hover::before {
    opacity: 0.15;
}

.lang-option.active {
    color: var(--white);
    background: var(--emerald);
    border-color: var(--emerald);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.lang-option.active::before {
    opacity: 0;
}

/* Close Button - Hidden (menu auto-closes) */
.mobile-menu-close{
    display:none
}

.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:120px var(--container-padding)
}

.hero-bg{
    position:absolute;
    inset:0;
    z-index:-2
}

.gradient-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
    opacity:0.4;
    will-change:transform
}

.orb-1{
    width:800px;
    height:800px;
    background:radial-gradient(circle,var(--emerald-glow) 0%,transparent 70%);
    top:-300px;
    right:-200px
}

.orb-2{
    width:600px;
    height:600px;
    background:radial-gradient(circle,var(--emerald-intense) 0%,transparent 70%);
    bottom:-200px;
    left:-150px
}

.orb-3{
    width:400px;
    height:400px;
    background:radial-gradient(circle,rgba(16,185,129,0.3) 0%,transparent 70%);
    top:40%;
    left:30%
}

.grid-overlay{
    position:absolute;
    inset:0;
    background-image:linear-gradient(rgba(255,255,255,0.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.015) 1px,transparent 1px);
    background-size:100px 100px;
    mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent)
}

.noise{
    position:absolute;
    inset:0;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:0.025;
    pointer-events:none
}

.hero-bg-text{
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    z-index:-1;
    width:100%;
    overflow:hidden;
    pointer-events:none
}

.bg-text-line{
    display:flex;
    white-space:nowrap;
    font-family:var(--font-display);
    font-size:clamp(8rem,25vw,20rem);
    font-weight:700;
    color:transparent;
    -webkit-text-stroke:1px var(--gray-800);
    text-transform:uppercase;
    line-height:0.85;
    opacity:0.4;
    will-change:transform
}

.bg-text-line span{
    padding:0 40px
}

.bg-text-1{
    animation:scrollLeft 40s linear infinite
}

.bg-text-2{
    animation:scrollRight 35s linear infinite;
    margin-top:-20px
}

@keyframes scrollLeft{
    0%{
    transform:translateX(0)
}

100%{
    transform:translateX(-50%)
}
}

@keyframes scrollRight{
    0%{
    transform:translateX(-50%)
}

100%{
    transform:translateX(0)
}
}

.hero-content{
    position:relative;
    z-index:1;
    text-align:center;
    max-width:1000px
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:10px 24px;
    background:rgba(255,255,255,0.03);
    border:1px solid var(--gray-800);
    border-radius:100px;
    margin-bottom:40px;
    opacity:0
}

.badge-dot{
    width:8px;
    height:8px;
    background:var(--emerald);
    border-radius:50%;
    animation:pulse 2s ease-in-out infinite
}

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

50%{
    opacity:0.5;
    transform:scale(1.3)
}
}

.badge-text{
    font-family:var(--font-mono);
    font-size:0.7rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--gray-300)
}

.glitch-text{
    position:relative
}

.glitch-text::before,.glitch-text::after{
    content:attr(data-text);
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0
}

.glitch-text:hover::before{
    animation:glitch-1 0.3s infinite linear alternate-reverse;
    color:var(--emerald);
    opacity:0.8
}

.glitch-text:hover::after{
    animation:glitch-2 0.3s infinite linear alternate-reverse;
    color:#ff00ff;
    opacity:0.8
}

@keyframes glitch-1{
    0%{
    clip-path:inset(20% 0 60% 0);
    transform:translate(-3px,-3px)
}

20%{
    clip-path:inset(60% 0 20% 0);
    transform:translate(3px,3px)
}

40%{
    clip-path:inset(40% 0 40% 0);
    transform:translate(-3px,3px)
}

60%{
    clip-path:inset(80% 0 10% 0);
    transform:translate(3px,-3px)
}

80%{
    clip-path:inset(10% 0 80% 0);
    transform:translate(-3px,-3px)
}

100%{
    clip-path:inset(50% 0 30% 0);
    transform:translate(3px,3px)
}
}

@keyframes glitch-2{
    0%{
    clip-path:inset(60% 0 20% 0);
    transform:translate(3px,3px)
}

20%{
    clip-path:inset(20% 0 60% 0);
    transform:translate(-3px,-3px)
}

40%{
    clip-path:inset(80% 0 10% 0);
    transform:translate(3px,-3px)
}

60%{
    clip-path:inset(40% 0 40% 0);
    transform:translate(-3px,3px)
}

80%{
    clip-path:inset(50% 0 30% 0);
    transform:translate(3px,3px)
}

100%{
    clip-path:inset(10% 0 80% 0);
    transform:translate(-3px,-3px)
}
}

.hero-title{
    font-size:clamp(3.5rem,12vw,9rem);
    font-weight:600;
    line-height:0.95;
    letter-spacing:-0.03em;
    margin-bottom:32px
}

.title-line-wrapper{
    overflow:hidden;
    display:block
}

.title-line{
    display:block;
    transform:translateY(120%);
    will-change:transform
}

.title-outline{
    color:transparent;
    -webkit-text-stroke:1.5px var(--white)
}

.title-accent{
    color:var(--emerald);
    font-style:italic
}

.split-text .char{
    display:inline-block;
    opacity:0;
    transform:translateY(100px);
    will-change:transform,opacity
}

.hero-subtitle{
    font-size:clamp(1rem,2.5vw,1.375rem);
    color:var(--gray-400);
    max-width:600px;
    margin:0 auto 48px;
    line-height:1.7;
    opacity:0;
    transform:translateY(30px)
}

.hero-ctas{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    opacity:0;
    transform:translateY(30px)
}

.btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:var(--font-body);
    font-size:0.9375rem;
    font-weight:500;
    padding:18px 36px;
    border-radius:100px;
    border:none;
    position:relative;
    overflow:hidden;
    transition:all 0.5s var(--ease-out-expo)
}

.btn-primary{
    background:var(--white);
    color:var(--black)
}

.btn-primary::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:var(--emerald);
    transform:translateX(-100%);
    transition:transform 0.5s var(--ease-out-expo)
}

.btn-primary:hover::before{
    transform:translateX(0)
}

.btn-primary .btn-text,.btn-primary .btn-icon{
    position:relative;
    z-index:1
}

.btn-primary:hover{
    transform:scale(1.05);
    box-shadow:0 20px 50px var(--emerald-glow)
}

.btn-secondary{
    background:transparent;
    color:var(--white);
    border:1px solid var(--gray-700)
}

.btn-secondary:hover{
    border-color:var(--emerald);
    background:var(--emerald-glow);
    transform:scale(1.05)
}

.btn-icon{
    width:20px;
    height:20px;
    transition:transform 0.4s var(--ease-out-expo)
}

.btn:hover .btn-icon{
    transform:translateX(5px)
}

.btn-large{
    padding:22px 44px;
    font-size:1rem
}

.btn-whatsapp{
    background:#25d366;
    color:var(--white)
}

.btn-whatsapp:hover{
    background:#1da851;
    transform:scale(1.05);
    box-shadow:0 20px 50px rgba(37,211,102,0.3)
}

.whatsapp-icon{
    width:20px;
    height:20px
}

.scroll-indicator{
    position:absolute;
    bottom:40px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    opacity:0
}

.scroll-text{
    font-family:var(--font-mono);
    font-size:0.65rem;
    letter-spacing:0.3em;
    color:var(--gray-500);
    writing-mode:vertical-rl
}

.scroll-line{
    width:1px;
    height:60px;
    background:linear-gradient(to bottom,var(--emerald),transparent);
    animation:scrollLine 2s ease-in-out infinite
}

@keyframes scrollLine{
    0%,100%{
    transform:scaleY(0);
    transform-origin:top
}

50%{
    transform:scaleY(1);
    transform-origin:top
}

51%{
    transform-origin:bottom
}

100%{
    transform:scaleY(0);
    transform-origin:bottom
}
}

.marquee-section{
    padding:40px 0;
    background:var(--gray-900);
    border-top:1px solid var(--gray-800);
    border-bottom:1px solid var(--gray-800);
    overflow:hidden;
    position:relative
}

.marquee-dark{
    background:var(--emerald)
}

.marquee-dark .marquee-item,.marquee-dark .marquee-divider{
    color:var(--black)
}

.marquee{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    overflow:hidden;
    user-select:none;
    width:100%;
    align-items:center;
    height:100px
}

.marquee-content{
    display:inline-flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    flex-shrink:0;
    white-space:nowrap;
    animation:marquee 5s linear infinite;
    gap:0;
    height:100px
}

.marquee-fast .marquee-content{
    animation-duration:3s
}

@keyframes marquee{
    0%{
        transform:translateX(0)
    }
    100%{
        transform:translateX(-50%)
    }
}

.marquee-item{
    font-family:var(--font-display);
    font-size:clamp(1.5rem,4vw,3rem);
    font-weight:600;
    color:var(--white);
    padding:0 60px;
    white-space:nowrap;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    height:100px;
    vertical-align:middle
}

.marquee-divider{
    color:var(--emerald);
    font-size:1rem;
    padding:0 50px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    height:100px;
    vertical-align:middle
}


.services{
    position:relative;
    padding:var(--section-padding) 0;
    overflow:hidden
}

.section-bg-text{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:0;
    pointer-events:none;
    width:200%
}

.bg-text-scroll{
    font-family:var(--font-display);
    font-size:clamp(10rem,30vw,25rem);
    font-weight:700;
    color:transparent;
    -webkit-text-stroke:1px var(--gray-900);
    text-transform:uppercase;
    white-space:nowrap;
    line-height:0.8;
    will-change:transform
}

.section-header{
    text-align:center;
    margin-bottom:100px;
    position:relative;
    z-index:1
}

.section-number{
    display:block;
    font-family:var(--font-mono);
    font-size:0.75rem;
    letter-spacing:0.3em;
    color:var(--emerald);
    margin-bottom:24px;
    opacity:0;
    transform:translateY(20px)
}

.section-title-wrapper{
    overflow:hidden
}

.section-title{
    font-size:clamp(2.5rem,7vw,5rem);
    font-weight:600;
    letter-spacing:-0.02em
}

.section-title span{
    display:inline-block
}

.split-chars .char{
    display:inline-block;
    opacity:0;
    transform:translateY(100%);
    will-change:transform,opacity
}

.section-subtitle{
    font-size:1.125rem;
    color:var(--gray-400);
    margin-top:20px;
    opacity:0;
    transform:translateY(20px)
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
    position:relative;
    z-index:1
}

.service-card{
    position:relative;
    background:var(--gray-900);
    border:1px solid var(--gray-800);
    border-radius:24px;
    padding:48px 40px;
    overflow:hidden;
    opacity:0;
    transform:translateY(60px)
}

.service-card:hover{
    border-color:var(--emerald)
}

.card-bg{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%),var(--emerald-glow),transparent 50%);
    opacity:0;
    transition:opacity 0.5s
}

.service-card:hover .card-bg{
    opacity:1
}

.card-number{
    position:absolute;
    top:24px;
    right:24px;
    font-family:var(--font-mono);
    font-size:0.7rem;
    letter-spacing:0.1em;
    color:var(--gray-600)
}

.card-content{
    position:relative;
    z-index:1
}

.card-icon{
    width:56px;
    height:56px;
    color:var(--gray-500);
    margin-bottom:32px;
    transition:all 0.5s var(--ease-out-expo)
}

.service-card:hover .card-icon{
    color:var(--emerald);
    transform:scale(1.15) rotate(-5deg)
}

.card-title{
    font-family:var(--font-display);
    font-size:1.75rem;
    font-weight:600;
    margin-bottom:16px;
    display:flex;
    flex-wrap:wrap
}

.title-char{
    display:inline-block;
    transition:all 0.3s var(--ease-out-expo)
}

.service-card:hover .title-char{
    color:var(--emerald)
}

.service-card:hover .title-char:nth-child(odd){
    transform:translateY(-5px)
}

.service-card:hover .title-char:nth-child(even){
    transform:translateY(5px)
}

.card-desc{
    color:var(--gray-400);
    font-size:0.9375rem;
    line-height:1.7;
    margin-bottom:24px
}

.card-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px
}

.tag{
    font-size:0.7rem;
    padding:8px 16px;
    background:var(--gray-800);
    border-radius:100px;
    color:var(--gray-400);
    transition:all 0.3s
}

.service-card:hover .tag{
    background:var(--emerald-glow);
    color:var(--emerald-light)
}

.card-hover-effect{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg,var(--emerald),var(--emerald-light));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.6s var(--ease-out-expo)
}

.service-card:hover .card-hover-effect{
    transform:scaleX(1)
}

.horizontal-section{
    position:relative;
    overflow:hidden;
    z-index:2;
    background:var(--black);
}

.horizontal-section::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, var(--black) 100%);
    pointer-events: none;
    z-index: 100;
}

.services-horizontal{
    z-index:10
}

.services-horizontal .horizontal-wrapper{
    z-index:10;
    background:var(--black)
}

.process-horizontal{
    z-index:12
}

.process-horizontal .horizontal-wrapper{
    z-index:12;
    background:var(--dark)
}

.horizontal-wrapper{
    position:relative;
    height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:var(--black)
}

.horizontal-content{
    display:flex;
    gap:0;
    will-change:transform
}

.horizontal-panel{
    flex-shrink:0;
    width:100vw;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    padding:var(--container-padding)
}

.panel-intro{
    background:var(--dark)
}

.panel-bg-text{
    position:absolute;
    font-family:var(--font-display);
    font-size:clamp(10rem,30vw,25rem);
    font-weight:700;
    color:transparent;
    -webkit-text-stroke:1px var(--gray-800);
    text-transform:uppercase;
    opacity:0.3;
    pointer-events:none
}

.panel-title{
    font-size:clamp(3rem,10vw,8rem);
    font-weight:600;
    text-align:center;
    position:relative;
    z-index:1;
    white-space:nowrap
}

.panel-step{
    background:var(--black);
    flex-direction:column;
    gap:40px
}

.step-number{
    font-family:var(--font-mono);
    font-size:clamp(6rem,20vw,15rem);
    font-weight:700;
    color:transparent;
    -webkit-text-stroke:2px var(--emerald);
    line-height:1;
    opacity:0;
    transform:scale(0.5)
}

.step-content{
    text-align:center;
    max-width:500px
}

.step-title{
    font-family:var(--font-display);
    font-size:clamp(2rem,5vw,4rem);
    font-weight:600;
    margin-bottom:16px;
    position:relative;
    opacity:0;
    transform:translateY(30px)
}

.glitch-hover{
    position:relative
}

.glitch-hover::before,.glitch-hover::after{
    content:attr(data-pt);
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0
}

.glitch-hover:hover::before{
    animation:glitch-1 0.4s infinite linear alternate-reverse;
    color:var(--emerald);
    opacity:0.7
}

.glitch-hover:hover::after{
    animation:glitch-2 0.4s infinite linear alternate-reverse;
    color:#ff6b6b;
    opacity:0.7
}

.step-desc{
    font-size:1.125rem;
    color:var(--gray-400);
    line-height:1.7;
    opacity:0;
    transform:translateY(20px)
}

.panel-intro-content{
    text-align:center;
    position:relative;
    z-index:2
}

.panel-number{
    display:block;
    font-family:var(--font-mono);
    font-size:0.85rem;
    letter-spacing:0.3em;
    color:var(--emerald);
    margin-bottom:24px;
    opacity:0;
    transform:translateY(20px)
}

.panel-subtitle{
    font-size:clamp(1rem,2vw,1.25rem);
    color:var(--gray-400);
    margin-top:24px;
    opacity:0;
    transform:translateY(20px)
}

.services-horizontal{
    background:var(--black)
}

.services-intro{
    background:linear-gradient(135deg,var(--dark) 0%,var(--black) 100%)
}

.panel-service{
    background:var(--dark);
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden
}

.panel-black-end{
    background: #000;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    min-width:100vw;
    min-height:100vh
}

/* Black Transition Panel */
.panel-black-transition {
    background: #000;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-width: 100vw;
}

.black-transition-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.transition-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.transition-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.transition-particles .t-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--emerald);
    border-radius: 50%;
    opacity: 0;
    animation: float-dot 4s ease-in-out infinite;
}

.transition-particles .t-dot:nth-child(1) {
    left: 20%;
    top: 30%;
    animation-delay: 0s;
}

.transition-particles .t-dot:nth-child(2) {
    left: 80%;
    top: 40%;
    animation-delay: 0.5s;
}

.transition-particles .t-dot:nth-child(3) {
    left: 50%;
    top: 20%;
    animation-delay: 1s;
}

.transition-particles .t-dot:nth-child(4) {
    left: 30%;
    top: 70%;
    animation-delay: 1.5s;
}

.transition-particles .t-dot:nth-child(5) {
    left: 70%;
    top: 60%;
    animation-delay: 2s;
}

.transition-particles .t-dot:nth-child(6) {
    left: 50%;
    top: 80%;
    animation-delay: 2.5s;
}

@keyframes float-dot {
    0%, 100% {
        opacity: 0;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-20px);
    }
}

.transition-text {
    position: relative;
    z-index: 2;
}

.transition-line-text {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--emerald);
    opacity: 0.6;
}

.black-panel-content{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center
}

.black-panel-glow{
    position:absolute;
    width:400px;
    height:400px;
    background:radial-gradient(circle,rgba(16,185,129,0.1) 0%,transparent 70%);
    border-radius:50%;
    filter:blur(60px);
    animation:pulse-glow 4s ease-in-out infinite
}

@keyframes pulse-glow{
    0%,100%{
        opacity:0.5;
        transform:scale(1)
    }
    50%{
        opacity:0.8;
        transform:scale(1.2)
    }
}

.service-panel-bg{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    overflow:hidden
}

.service-bg-number{
    font-family:var(--font-mono);
    font-size:clamp(20rem,50vw,45rem);
    font-weight:700;
    color:transparent;
    -webkit-text-stroke:1px var(--gray-800);
    opacity:0.4;
    line-height:1;
    transform:translateY(20%);
    will-change:transform,opacity
}

.service-panel-content{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:700px;
    padding:40px
}

.service-number-small{
    font-family:var(--font-mono);
    font-size:0.75rem;
    letter-spacing:0.2em;
    color:var(--emerald);
    margin-bottom:24px;
    opacity:0;
    transform:translateY(20px)
}

.service-icon-large{
    width:100px;
    height:100px;
    margin:0 auto 32px;
    color:var(--gray-500);
    opacity:0;
    transform:scale(0.5) rotate(-10deg);
    transition:color 0.5s,transform 0.5s var(--ease-out-expo)
}

.panel-service:hover .service-icon-large{
    color:var(--emerald);
    transform:scale(1.1) rotate(0deg)
}

.service-title-large{
    font-family:var(--font-display);
    font-size:clamp(3rem,8vw,6rem);
    font-weight:700;
    color:var(--white);
    margin-bottom:24px;
    letter-spacing:-0.02em;
    opacity:0;
    transform:translateY(40px)
}

.service-desc-large{
    font-size:clamp(1rem,2vw,1.25rem);
    color:var(--gray-400);
    line-height:1.8;
    margin-bottom:40px;
    opacity:0;
    transform:translateY(30px)
}

.service-tags-large{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    opacity:0;
    transform:translateY(20px)
}

.tag-large{
    font-family:var(--font-mono);
    font-size:0.75rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:12px 24px;
    background:var(--gray-800);
    border:1px solid var(--gray-700);
    border-radius:100px;
    color:var(--gray-300);
    transition:all 0.4s var(--ease-out-expo)
}

.tag-large:hover{
    background:var(--emerald-glow);
    border-color:var(--emerald);
    color:var(--emerald-light);
    transform:translateY(-3px)
}

/* ============================================
   Smooth End Transition for Services
============================================ */
/* Transition styles handled by JavaScript for better control */

/* Remove old cinematic transition styles */
.transition-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at center,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 40%,
        rgba(0, 0, 0, 0.8) 70%,
        var(--black) 100%);
    opacity: 0;
    will-change: opacity, transform;
}

.transition-fade-black {
    position: absolute;
    inset: 0;
    background: var(--black);
    opacity: 0;
    will-change: opacity;
    z-index: 5;
}

/* Extra layers for a more "cinematic" flip + shutter feel (added via JS if missing) */
.transition-shutter{
    position:absolute;
    inset:-10%;
    background:
        radial-gradient(80% 60% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.85) 100%),
        linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 25%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0) 75%, rgba(255,255,255,0.06));
    mix-blend-mode:multiply;
    opacity:0;
    transform:scale(1.06);
    will-change:opacity,transform,filter;
    pointer-events:none;
    z-index: 2;
}

.transition-flip{
    position:absolute;
    inset:-20%;
    background:var(--black);
    opacity:0;
    transform:scale(1.08);
    will-change:opacity,transform;
    pointer-events:none;
    z-index: 3;
}

.transition-grain{
    position:absolute;
    inset:-20%;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.40'/%3E%3C/svg%3E");
    mix-blend-mode:overlay;
    opacity:0;
    will-change:opacity,transform;
    pointer-events:none;
    z-index: 4;
}

/* Cinematic fade states */
.cinematic-transition.fade-in .transition-overlay {
    animation: fadeInVignette 2s ease-out forwards;
}

.cinematic-transition.fade-in .transition-fade-black {
    animation: fadeToBlack 2.5s ease-out forwards;
}

@keyframes fadeInVignette {
    0% {
        opacity: 0;
        transform: scale(1.2);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeToBlack {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.about-horizontal{
    background:var(--black)
}

.about-intro{
    background:linear-gradient(135deg,var(--gray-900) 0%,var(--dark) 100%)
}

.panel-about{
    background:var(--dark);
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden
}

.about-panel-bg{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    overflow:hidden
}

.about-bg-word{
    font-family:var(--font-display);
    font-size:clamp(12rem,35vw,30rem);
    font-weight:700;
    color:transparent;
    -webkit-text-stroke:1px var(--gray-800);
    opacity:0.3;
    text-transform:uppercase;
    line-height:1;
    will-change:transform,opacity
}

.about-panel-content{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:700px;
    padding:40px
}

.about-icon{
    width:80px;
    height:80px;
    margin:0 auto 32px;
    color:var(--emerald);
    opacity:0;
    transform:scale(0.5)
}

.about-title{
    font-family:var(--font-display);
    font-size:clamp(2.5rem,6vw,5rem);
    font-weight:700;
    color:var(--white);
    margin-bottom:32px;
    letter-spacing:-0.02em;
    opacity:0;
    transform:translateY(40px)
}

.about-text-large{
    font-size:clamp(1.125rem,2.5vw,1.5rem);
    color:var(--gray-300);
    line-height:1.8;
    margin-bottom:40px;
    opacity:0;
    transform:translateY(30px)
}

.about-highlight{
    display:inline-block;
    position:relative;
    opacity:0;
    transform:translateY(20px)
}

.highlight-text{
    font-family:var(--font-display);
    font-size:clamp(1.5rem,3vw,2rem);
    font-weight:600;
    color:var(--emerald);
    font-style:italic;
    position:relative
}

.highlight-text::after{
    content:'';
    position:absolute;
    bottom:-8px;
    left:0;
    width:100%;
    height:2px;
    background:linear-gradient(90deg,var(--emerald),transparent);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.6s var(--ease-out-expo)
}

.panel-about:hover .highlight-text::after{
    transform:scaleX(1)
}

.panel-stats{
    background:linear-gradient(135deg,var(--gray-900) 0%,var(--dark) 100%)
}

.stats-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:60px;
    padding:40px
}

.stat-box{
    text-align:center;
    opacity:0;
    transform:translateY(40px)
}

.stat-number-huge{
    font-family:var(--font-display);
    font-size:clamp(4rem,12vw,10rem);
    font-weight:700;
    color:var(--white);
    line-height:1;
    display:inline
}

.stat-symbol-huge{
    font-family:var(--font-display);
    font-size:clamp(2rem,6vw,5rem);
    font-weight:600;
    color:var(--emerald);
    display:inline
}

.stat-label-large{
    display:block;
    margin-top:16px;
    font-family:var(--font-mono);
    font-size:0.8rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--gray-400)
}

.values-content{
    position:relative;
    z-index:2;
    text-align:left;
    max-width:600px;
    padding:40px
}

.values-list{
    margin-top:40px
}

.value-item{
    display:flex;
    align-items:center;
    gap:24px;
    padding:24px 0;
    border-bottom:1px solid var(--gray-800);
    opacity:0;
    transform:translateX(-30px);
    transition:all 0.4s var(--ease-out-expo)
}

.value-item:hover{
    padding-left:16px;
    border-color:var(--emerald)
}

.value-number{
    font-family:var(--font-mono);
    font-size:0.8rem;
    letter-spacing:0.1em;
    color:var(--emerald);
    min-width:32px
}

.value-text{
    font-family:var(--font-display);
    font-size:clamp(1.25rem,2.5vw,1.75rem);
    font-weight:500;
    color:var(--white);
    transition:color 0.3s
}

.value-item:hover .value-text{
    color:var(--emerald-light)
}

.process-horizontal{
    background:var(--black)
}

.process-horizontal .panel-step{
    background:linear-gradient(270deg,var(--dark) 0%,var(--black) 100%)
}

.process-horizontal .panel-intro{
    background:linear-gradient(270deg,var(--gray-900) 0%,var(--dark) 100%)
}

.mask-reveal-section{
    position:relative;
    min-height:100vh;
    background:var(--black);
    overflow:hidden;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center
}

.mask-reveal-bg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
    opacity:0;
    pointer-events:none
}

.reveal-gradient{
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse 80% 50% at 50% 50%,var(--emerald-intense) 0%,transparent 50%),radial-gradient(ellipse 60% 80% at 30% 20%,rgba(16,185,129,0.4) 0%,transparent 50%),radial-gradient(ellipse 70% 60% at 70% 80%,rgba(52,211,153,0.3) 0%,transparent 50%),linear-gradient(180deg,var(--dark) 0%,var(--black) 50%,var(--dark) 100%)
}

.reveal-particles{
    position:absolute;
    inset:0;
    overflow:hidden
}

.particle{
    position:absolute;
    width:4px;
    height:4px;
    background:var(--emerald);
    border-radius:50%;
    opacity:0.6;
    animation:floatParticle 10s ease-in-out infinite
}

.particle:nth-child(1){
    top:20%;
    left:10%;
    animation-delay:0s
}

.particle:nth-child(2){
    top:60%;
    left:25%;
    animation-delay:1s
}

.particle:nth-child(3){
    top:30%;
    left:50%;
    animation-delay:2s
}

.particle:nth-child(4){
    top:80%;
    left:70%;
    animation-delay:3s
}

.particle:nth-child(5){
    top:10%;
    left:85%;
    animation-delay:4s
}

.particle:nth-child(6){
    top:50%;
    left:90%;
    animation-delay:5s
}

.particle:nth-child(7){
    top:70%;
    left:15%;
    animation-delay:6s
}

.particle:nth-child(8){
    top:40%;
    left:75%;
    animation-delay:7s
}

@keyframes floatParticle{
    0%,100%{
    transform:translateY(0) scale(1);
    opacity:0.3
}

50%{
    transform:translateY(-30px) scale(1.3);
    opacity:0.7
}
}

.mask-container{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2;
    pointer-events:none
}

.mask-svg{
    width:100%;
    height:100%
}

.mask-circle{
    transform-origin:center
}

.masked-rect{
    fill:var(--black)
}

.mask-foreground{
    display:none
}

.mask-cta-content{
    position:relative;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    padding:40px;
    opacity:0
}

.mask-cta-wrapper{
    text-align:center;
    max-width:900px
}

.mask-cta-label{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:0.75rem;
    letter-spacing:0.4em;
    color:var(--emerald);
    margin-bottom:24px;
    opacity:0;
    transform:translateY(20px)
}

.mask-cta-title{
    font-size:clamp(2.5rem,8vw,5rem);
    font-weight:600;
    line-height:1.1;
    margin-bottom:24px
}

.mask-word{
    display:inline-block;
    margin:0 6px;
    opacity:0;
    transform:translateY(40px)
}

.mask-word-accent{
    color:var(--emerald);
    font-style:italic
}

.mask-cta-subtitle{
    font-size:clamp(1rem,2vw,1.25rem);
    color:var(--gray-400);
    margin-bottom:40px;
    opacity:0;
    transform:translateY(20px)
}

.mask-cta-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:var(--font-body);
    font-size:1rem;
    font-weight:500;
    padding:18px 36px;
    background:var(--emerald);
    color:var(--black);
    border-radius:100px;
    transition:all 0.4s var(--ease-out-expo);
    opacity:0;
    transform:translateY(20px)
}

.mask-cta-btn svg{
    width:20px;
    height:20px;
    transition:transform 0.4s var(--ease-out-expo)
}

.mask-cta-btn:hover{
    background:var(--emerald-light);
    transform:scale(1.05);
    box-shadow:0 20px 60px var(--emerald-glow)
}

.mask-cta-btn:hover svg{
    transform:translateX(5px)
}

.mask-progress{
    position:absolute;
    bottom:40px;
    left:50%;
    transform:translateX(-50%);
    width:100px;
    height:3px;
    background:var(--gray-800);
    border-radius:3px;
    z-index:11;
    overflow:hidden;
    opacity:0
}

.mask-progress-bar{
    width:0%;
    height:100%;
    background:var(--emerald);
    border-radius:3px
}

.vertical-section{
    position:relative;
    background:var(--black);
    z-index:4
}

.about-vertical{
    z-index:6
}

.vertical-panel{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:var(--container-padding)
}

.about-intro-panel{
    background:linear-gradient(180deg,var(--dark) 0%,var(--black) 100%)
}

.about-mission-panel{
    background:var(--dark)
}

.about-approach-panel{
    background:linear-gradient(180deg,var(--gray-900) 0%,var(--dark) 100%)
}

.about-stats-panel{
    background:var(--dark)
}

.about-values-panel{
    background:linear-gradient(180deg,var(--dark) 0%,var(--black) 100%)
}

.panel-bg-text-vertical{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-family:var(--font-display);
    font-size:clamp(15rem,40vw,35rem);
    font-weight:700;
    color:transparent;
    -webkit-text-stroke:1px var(--gray-800);
    text-transform:uppercase;
    opacity:0.2;
    pointer-events:none;
    white-space:nowrap
}

.vertical-bg-word{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) rotate(-10deg);
    font-family:var(--font-display);
    font-size:clamp(15rem,45vw,40rem);
    font-weight:700;
    color:transparent;
    -webkit-text-stroke:1px var(--gray-800);
    text-transform:uppercase;
    opacity:0.15;
    pointer-events:none;
    white-space:nowrap;
    will-change:transform,opacity
}

.vertical-panel-content{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:800px;
    padding:40px
}

.scroll-down-indicator{
    margin-top:60px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    opacity:0;
    animation:fadeInUp 1s forwards 1.5s
}

.scroll-down-indicator span{
    font-family:var(--font-mono);
    font-size:0.65rem;
    letter-spacing:0.3em;
    color:var(--gray-500)
}

.scroll-arrow{
    font-size:1.5rem;
    color:var(--emerald);
    animation:bounceDown 1.5s ease-in-out infinite
}

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

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

@keyframes fadeInUp{
    from{
    opacity:0;
    transform:translateY(20px)
}

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

.stats-grid-vertical{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    gap:80px;
    flex-wrap:wrap;
    padding:40px
}

.stat-box-vertical{
    text-align:center;
    opacity:0;
    transform:translateY(60px) scale(0.9)
}

@media (max-width:768px){
    .stats-grid{
    grid-template-columns:1fr;
    gap:40px
}

.service-panel-content,.about-panel-content,.values-content{
    padding:24px
}

.service-icon-large{
    width:70px;
    height:70px
}

.about-icon{
    width:60px;
    height:60px
}
}

.about{
    position:relative;
    padding:var(--section-padding) 0;
    overflow:hidden
}

.about-parallax-bg{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden
}

.parallax-text{
    position:absolute;
    font-family:var(--font-display);
    font-weight:700;
    color:transparent;
    -webkit-text-stroke:1px var(--gray-900);
    text-transform:uppercase;
    white-space:nowrap;
    will-change:transform
}

.parallax-text-1{
    font-size:clamp(15rem,40vw,35rem);
    top:10%;
    left:-10%;
    opacity:0.3
}

.parallax-text-2{
    font-size:clamp(10rem,30vw,25rem);
    top:40%;
    right:-10%;
    opacity:0.25
}

.parallax-text-3{
    font-size:clamp(12rem,35vw,30rem);
    bottom:5%;
    left:20%;
    opacity:0.2
}

.about-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:100px;
    align-items:center;
    position:relative;
    z-index:1
}

.about-content{
    position:relative
}

.about-text-blocks{
    margin:40px 0
}

.text-block{
    font-size:clamp(1.125rem,2vw,1.375rem);
    color:var(--gray-400);
    line-height:1.8;
    margin-bottom:16px;
    opacity:0;
    transform:translateY(30px)
}

.text-highlight{
    font-size:clamp(1.5rem,3vw,2rem);
    color:var(--emerald);
    font-family:var(--font-display);
    font-style:italic;
    font-weight:600
}

.about-stats{
    display:flex;
    gap:60px;
    margin-top:60px
}

.stat-item{
    opacity:0;
    transform:translateY(30px)
}

.stat-number{
    font-family:var(--font-display);
    font-size:clamp(3rem,6vw,5rem);
    font-weight:700;
    color:var(--white);
    line-height:1;
    display:inline
}

.stat-symbol{
    font-family:var(--font-display);
    font-size:clamp(2rem,4vw,3rem);
    color:var(--emerald);
    display:inline
}

.stat-label{
    display:block;
    margin-top:8px;
    font-family:var(--font-mono);
    font-size:0.7rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--gray-500)
}

.about-visual{
    display:flex;
    justify-content:center;
    align-items:center
}

.visual-box{
    position:relative;
    width:100%;
    max-width:400px;
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center
}

.box-inner{
    position:relative;
    z-index:1;
    text-align:center;
    padding:60px;
    background:var(--gray-900);
    border:1px solid var(--gray-800);
    border-radius:24px
}

.box-glitch{
    font-family:var(--font-display);
    font-size:clamp(3rem,8vw,5rem);
    font-weight:700;
    color:var(--white);
    position:relative
}

.box-glitch::before,.box-glitch::after{
    content:attr(data-text);
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}

.box-glitch::before{
    animation:glitch-1 3s infinite linear;
    color:var(--emerald);
    opacity:0
}

.box-glitch::after{
    animation:glitch-2 3s infinite linear;
    color:#ff00ff;
    opacity:0
}

.visual-box:hover .box-glitch::before,.visual-box:hover .box-glitch::after{
    opacity:0.8
}

.box-subtitle{
    font-size:1.25rem;
    color:var(--gray-400);
    margin-top:8px
}

.box-decorations{
    position:absolute;
    inset:-20px;
    pointer-events:none
}

.deco{
    position:absolute;
    background:var(--emerald);
    opacity:0.5
}

.deco-1{
    top:0;
    left:20%;
    width:60%;
    height:1px;
    transform:scaleX(0);
    animation:decoLine 3s ease-in-out infinite
}

.deco-2{
    bottom:0;
    right:20%;
    width:60%;
    height:1px;
    transform:scaleX(0);
    animation:decoLine 3s ease-in-out infinite 0.5s
}

.deco-3{
    left:0;
    top:20%;
    width:1px;
    height:60%;
    transform:scaleY(0);
    animation:decoLineV 3s ease-in-out infinite 1s
}

.deco-4{
    right:0;
    bottom:20%;
    width:1px;
    height:60%;
    transform:scaleY(0);
    animation:decoLineV 3s ease-in-out infinite 1.5s
}

@keyframes decoLine{
    0%,100%{
    transform:scaleX(0);
    transform-origin:left
}

50%{
    transform:scaleX(1);
    transform-origin:left
}

51%{
    transform-origin:right
}

100%{
    transform:scaleX(0);
    transform-origin:right
}
}

@keyframes decoLineV{
    0%,100%{
    transform:scaleY(0);
    transform-origin:top
}

50%{
    transform:scaleY(1);
    transform-origin:top
}

51%{
    transform-origin:bottom
}

100%{
    transform:scaleY(0);
    transform-origin:bottom
}
}

.section-transition{
    position:relative;
    height:400px;
    background:var(--black);
    overflow:hidden
}

.transition-gradient{
    position:absolute;
    inset:0;
    background:var(--black)
}

.transition-line{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scaleX(0);
    transform-origin:center;
    width:300px;
    height:1px;
    background:linear-gradient(90deg,transparent 0%,var(--emerald) 50%,transparent 100%)
}

/* ============================================
   RAIOS VERTICAIS - ANTES DO CTA
   ============================================ */
.light-trails-vertical-before-cta {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.light-trail-vc {
    position: absolute;
    filter: blur(1px);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.8);
}

.trail-vc-1 {
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 10%,
        rgba(16, 185, 129, 1) 50%,
        rgba(16, 185, 129, 0) 90%,
        transparent 100%);
    left: 5%;
    top: -100%;
    animation: verticalRainBeforeCTA 3s ease-in-out infinite;
    animation-delay: 0s;
}

.trail-vc-2 {
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 10%,
        rgba(16, 185, 129, 1) 50%,
        rgba(16, 185, 129, 0) 90%,
        transparent 100%);
    left: 18%;
    top: -100%;
    animation: verticalRainBeforeCTA 3.5s ease-in-out infinite;
    animation-delay: 0.3s;
}

.trail-vc-3 {
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 10%,
        rgba(16, 185, 129, 1) 50%,
        rgba(16, 185, 129, 0) 90%,
        transparent 100%);
    left: 31%;
    top: -100%;
    animation: verticalRainBeforeCTA 3.2s ease-in-out infinite;
    animation-delay: 0.6s;
}

.trail-vc-4 {
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 10%,
        rgba(16, 185, 129, 1) 50%,
        rgba(16, 185, 129, 0) 90%,
        transparent 100%);
    left: 44%;
    top: -100%;
    animation: verticalRainBeforeCTA 3.8s ease-in-out infinite;
    animation-delay: 0.9s;
}

.trail-vc-5 {
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 10%,
        rgba(16, 185, 129, 1) 50%,
        rgba(16, 185, 129, 0) 90%,
        transparent 100%);
    left: 57%;
    top: -100%;
    animation: verticalRainBeforeCTA 3.3s ease-in-out infinite;
    animation-delay: 1.2s;
}

.trail-vc-6 {
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 10%,
        rgba(16, 185, 129, 1) 50%,
        rgba(16, 185, 129, 0) 90%,
        transparent 100%);
    left: 70%;
    top: -100%;
    animation: verticalRainBeforeCTA 3.6s ease-in-out infinite;
    animation-delay: 1.5s;
}

.trail-vc-7 {
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 10%,
        rgba(16, 185, 129, 1) 50%,
        rgba(16, 185, 129, 0) 90%,
        transparent 100%);
    left: 83%;
    top: -100%;
    animation: verticalRainBeforeCTA 3.4s ease-in-out infinite;
    animation-delay: 1.8s;
}

.trail-vc-8 {
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 10%,
        rgba(16, 185, 129, 1) 50%,
        rgba(16, 185, 129, 0) 90%,
        transparent 100%);
    left: 95%;
    top: -100%;
    animation: verticalRainBeforeCTA 3.7s ease-in-out infinite;
    animation-delay: 2.1s;
}

@keyframes verticalRainBeforeCTA {
    0% {
        top: -100%;
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

.transition-services-vision{
    position:relative;
    z-index:5;
    background:var(--black);
    height:200px
}

.transition-services-vision .transition-gradient{
    background:linear-gradient(180deg,var(--dark) 0%,var(--black) 50%,var(--black) 100%)
}

.cta-section{
    position:relative;
    padding:var(--section-padding) 0;
    overflow:hidden;
    min-height:80vh;
    display:flex;
    align-items:center;
    background:var(--black)
}

.cta-bg-text{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:0;
    pointer-events:none
}

.cta-word{
    font-family:var(--font-display);
    font-size:clamp(15rem,40vw,40rem);
    font-weight:700;
    color:transparent;
    -webkit-text-stroke:2px var(--gray-800);
    text-transform:uppercase;
    white-space:nowrap;
    opacity:0;
    will-change:transform;
    user-select:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none
}

.cta-content{
    text-align:center;
    position:relative;
    z-index:1;
    max-width:900px;
    margin:0 auto
}

.cta-title{
    font-size:clamp(2.5rem,8vw,6rem);
    font-weight:600;
    line-height:1.1;
    margin-bottom:48px;
    user-select:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none
}

.cta-title .word{
    display:inline-block;
    opacity:0;
    transform:translateY(100px);
    margin:0 10px;
    will-change:transform,opacity
}

/* Override for 3D CTA words - initial states handled by JavaScript */
.cta-3d-section .cta-title .word.cta-3d-word {
    opacity: 0;
    transform: none;
    transform-style: preserve-3d;
}

.word-accent{
    color:var(--emerald);
    font-style:italic
}

.cta-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    opacity:0;
    transform:translateY(30px)
}

/* Override for 3D CTA - initial states handled by JavaScript */
.cta-3d-section .cta-buttons.cta-3d-buttons {
    opacity: 0;
    transform: none;
}

.contact{
    position:relative;
    padding:var(--section-padding) 0;
    background:var(--dark);
    overflow:hidden
}

.contact-bg-elements{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden
}

.contact-circle{
    position:absolute;
    border-radius:50%;
    border:1px solid var(--gray-800)
}

.circle-1{
    width:600px;
    height:600px;
    top:-200px;
    right:-200px;
    animation:rotateCircle 30s linear infinite
}

.circle-2{
    width:400px;
    height:400px;
    bottom:-100px;
    left:-100px;
    animation:rotateCircle 25s linear infinite reverse
}

@keyframes rotateCircle{
    from{
    transform:rotate(0deg)
}

to{
    transform:rotate(360deg)
}
}

.contact-grid{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:80px;
    position:relative;
    z-index:1
}

.contact-info{
    padding-right:40px
}

.contact-details{
    margin:40px 0;
    display:flex;
    flex-direction:column;
    gap:16px
}

.contact-item{
    display:flex;
    align-items:center;
    gap:20px;
    padding:20px 24px;
    background:var(--gray-900);
    border:1px solid var(--gray-800);
    border-radius:16px;
    transition:all 0.4s var(--ease-out-expo);
    opacity:0;
    transform:translateX(-30px)
}

.contact-item:hover{
    border-color:var(--emerald);
    transform:translateX(10px)
}

.item-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gray-800);
    border-radius:12px;
    color:var(--gray-400);
    transition:all 0.4s;
    flex-shrink:0
}

.item-icon svg{
    width:24px;
    height:24px
}

.contact-item:hover .item-icon{
    background:var(--emerald);
    color:var(--black)
}

.item-content{
    flex:1
}

.item-label{
    display:block;
    font-family:var(--font-mono);
    font-size:0.65rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--gray-500);
    margin-bottom:4px
}

.item-value{
    font-size:1rem;
    color:var(--white);
    font-weight:500
}

.item-arrow{
    font-size:1.25rem;
    color:var(--gray-600);
    transition:all 0.4s
}

.contact-item:hover .item-arrow{
    color:var(--emerald);
    transform:translateX(5px)
}

.contact-social{
    display:flex;
    align-items:center;
    gap:20px;
    opacity:0;
    transform:translateY(20px)
}

.social-label{
    font-family:var(--font-mono);
    font-size:0.65rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--gray-500)
}

.social-links{
    display:flex;
    gap:12px
}

.social-link{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gray-900);
    border:1px solid var(--gray-800);
    border-radius:12px;
    color:var(--gray-400);
    transition:all 0.4s var(--ease-out-expo)
}

.social-link:hover{
    background:var(--emerald);
    border-color:var(--emerald);
    color:var(--black);
    transform:translateY(-5px) rotate(-5deg)
}

.social-link svg{
    width:20px;
    height:20px
}

.contact-form-wrapper{
    position:relative;
    background:
        radial-gradient(circle at top right, rgba(16,185,129,0.15), transparent 35%),
        linear-gradient(140deg, #0c0c0c, #050505 55%, #080b0c 100%);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:32px;
    padding:48px;
    box-shadow:0 25px 60px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter:blur(18px);
    overflow:hidden;
    opacity:0;
    transform:translateY(40px)
}

.form-header{
    margin-bottom:40px
}

.form-title{
    font-family:var(--font-display);
    font-size:1.75rem;
    font-weight:600
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px
}

.form-group{
    position:relative;
    margin-bottom:32px
}

.form-group label{
    position:absolute;
    top:20px;
    left:0;
    font-family:var(--font-mono);
    font-size:0.7rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--gray-500);
    pointer-events:none;
    transition:all 0.3s var(--ease-out-expo)
}

.form-group input,.form-group select,.form-group textarea{
    width:100%;
    padding:20px 0 12px;
    background:rgba(255,255,255,0.02);
    border:none;
    border-bottom:1px solid rgba(255,255,255,0.2);
    font-family:var(--font-body);
    font-size:1rem;
    color:var(--white);
    transition:border-color 0.3s, box-shadow 0.3s;
    outline:none;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08);
}

.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
    border-color:var(--emerald);
    box-shadow: inset 0 -1px 0 rgba(16,185,129,0.4), 0 0 20px rgba(16,185,129,0.1);
}

.form-group input:focus ~ label,.form-group input:valid ~ label,.form-group select:focus ~ label,.form-group select:valid ~ label,.form-group textarea:focus ~ label,.form-group textarea:valid ~ label{
    top:0;
    font-size:0.6rem;
    color:var(--emerald)
}

.form-group select{
    cursor:pointer;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 0 center
}

.form-group select option{
    background:var(--gray-900);
    color:var(--white)
}

.form-group textarea{
    resize:vertical;
    min-height:120px
}

.input-highlight{
    position:absolute;
    bottom:0;
    left:0;
    width:0;
    height:2px;
    background:var(--emerald);
    transition:width 0.4s var(--ease-out-expo)
}

.form-group input:focus ~ .input-highlight,.form-group select:focus ~ .input-highlight,.form-group textarea:focus ~ .input-highlight{
    width:100%
}

.btn-submit{
    width:100%;
    justify-content:center
}

.footer{
    background:var(--black);
    border-top:1px solid rgba(255,255,255,0.05);
    padding:40px 60px;
    position:relative
}

.footer-container{
    max-width:1400px;
    margin:0 auto;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    text-align:left;
    padding-right:80px
}

.footer-logo{
    opacity:0.6;
    transition:opacity 0.4s var(--ease-out-expo);
    flex-shrink:0
}

.footer-logo:hover{
    opacity:1
}

.footer-logo img{
    height:35px;
}

.footer-center{
    display:flex;
    align-items:center;
    gap:30px;
    flex:1;
    justify-content:center
}
    width:auto;
    filter:brightness(0) invert(1)
}

.footer-links{
    display:flex;
    align-items:center;
    gap:20px;
    font-family:var(--font-mono);
    font-size:0.75rem;
    letter-spacing:0.1em
}

.footer-link{
    color:var(--gray-500);
    text-decoration:none;
    text-transform:uppercase;
    transition:color 0.4s var(--ease-out-expo);
    position:relative
}

.footer-link:hover{
    color:var(--emerald)
}

.footer-divider{
    color:var(--gray-700);
    font-size:0.6rem
}

.footer-copyright{
    font-family:var(--font-mono);
    font-size:0.7rem;
    color:var(--gray-600);
    letter-spacing:0.15em;
    margin-top:0;
    white-space:nowrap
}

.footer-social{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:15px;
    margin-top:0;
    flex-shrink:0
}

.footer-social-link{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(255,255,255,0.05);
    color:var(--gray-500);
    transition:all 0.4s var(--ease-out-expo)
}

.footer-social-link:hover{
    background:var(--emerald);
    color:var(--white);
    transform:translateY(-3px)
}

.footer-social-link svg{
    width:20px;
    height:20px
}

.lang-switcher-footer{
    display:flex;
    align-items:center;
    gap:6px
}

.lang-btn-footer{
    background:none;
    border:none;
    font-family:var(--font-mono);
    font-size:0.65rem;
    letter-spacing:0.1em;
    color:var(--gray-600);
    padding:6px 10px;
    cursor:pointer;
    transition:color 0.3s,background 0.3s;
    border-radius:4px
}

.lang-btn-footer:hover{
    color:var(--white)
}

.lang-btn-footer.active{
    color:var(--emerald);
    background:rgba(16,185,129,0.1)
}

.lang-divider-footer{
    color:var(--gray-700);
    font-size:0.6rem
}

/* ====================================== */
/* FOOTER MENU BUTTON - FIXED BOTTOM RIGHT */
/* ====================================== */
.footer-menu-btn{
    position:fixed;
    bottom:32px;
    right:32px;
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:14px;
    background:rgba(10,10,10,0.95);
    backdrop-filter:blur(12px);
    border:1px solid var(--gray-800);
    border-radius:12px;
    transition:all 0.4s var(--ease-out-expo);
    z-index:9999;
    box-shadow:0 8px 32px rgba(0,0,0,0.4);
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent
}

@media (min-width: 769px) {
    .footer-menu-btn {
        cursor: pointer;
    }
}

.footer-menu-btn::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,var(--emerald-dark),var(--emerald));
    opacity:0;
    border-radius:12px;
    transition:opacity 0.4s var(--ease-out-expo)
}

.footer-menu-btn:hover{
    border-color:var(--emerald);
    transform:translateY(-4px);
    box-shadow:0 12px 40px rgba(16,185,129,0.3)
}

.footer-menu-btn:hover::before{
    opacity:0.15
}

.footer-menu-btn span{
    width:26px;
    height:2px;
    background:var(--gray-300);
    transition:all 0.4s var(--ease-out-expo);
    transform-origin:center;
    position:relative;
    z-index:1
}

.footer-menu-btn:hover span{
    background:var(--emerald-light)
}

.footer-menu-btn.active{
    background:rgba(16,185,129,0.1);
    border-color:var(--emerald)
}

.footer-menu-btn.active span:nth-child(1){
    transform:rotate(45deg) translate(5px,6px);
    background:var(--emerald)
}

.footer-menu-btn.active span:nth-child(2){
    opacity:0;
    transform:scaleX(0)
}

.footer-menu-btn.active span:nth-child(3){
    transform:rotate(-45deg) translate(5px,-6px);
    background:var(--emerald)
}

@media (max-width:1024px){
    .services-grid{
    grid-template-columns:1fr;
    gap:24px
}

.about-grid{
    grid-template-columns:1fr;
    gap:60px
}

.about-visual{
    order:-1
}

.contact-grid{
    grid-template-columns:1fr;
    gap:60px
}
}

@media (max-width:768px){
    html,body{
    overflow-x:hidden
}

body{
    cursor:auto
}

.cursor-follower{
    display:none
}

.nav-links,.nav-cta{
    display:none
}

.mobile-menu-btn{
    display:flex
}

/* Mobile Menu Compact Adjustments */
.mobile-menu{
    width:min(260px, 85vw);
    bottom:90px;
    right:20px;
    padding:12px
}

.mobile-link{
    font-size:0.8rem;
    padding:12px 16px
}

.footer-menu-btn{
    bottom:24px;
    right:24px;
    padding:12px;
    gap:4px
}

.footer-menu-btn span{
    width:24px
}

.hero-ctas{
    flex-direction:column;
    width:100%
}

.hero-ctas .btn{
    width:100%;
    justify-content:center
}

.about-stats{
    flex-wrap:wrap;
    gap:40px
}

.form-row{
    grid-template-columns:1fr
}

.form-wrapper,.contact-form-wrapper{
    padding:24px 16px
}

.form-title{
    font-size:1.25rem
}

.form-group input,.form-group textarea,.form-group select{
    font-size:16px
}

.contact-info{
    padding-right:0
}

.contact-item{
    padding:16px
}

.stats-grid-vertical{
    gap:40px
}

.footer{
    padding:40px 30px
}

.footer-container{
    flex-direction:column;
    gap:30px;
    text-align:center;
    padding-right:0
}

.footer-center{
    flex-direction:column;
    gap:20px
}

.footer-links{
    flex-direction:row;
    gap:16px
}

.footer-divider{
    display:inline
}

.footer-social{
    gap:16px
}

.footer-social-link{
    width:40px;
    height:40px
}

.footer-social-link svg{
    width:18px;
    height:18px
}

.cta-section{
    min-height:60vh;
    padding:60px 0
}

.cta-bg-text{
    display:none
}

.section-transition,.transition-services-vision{
    height:60px
}

.transition-line{
    width:100px
}
}

@media (max-width:480px){
    :root{
    --container-padding:20px
}

.hero-title{
    font-size:2.5rem
}

.section-title{
    font-size:2rem
}


.hero-central-visual{
    width:130px;
    height:130px
}

.stagger-word{
    font-size:clamp(1.5rem,9vw,2.5rem) !important;
    user-select:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none
}

.stagger-word.accent{
    font-size:clamp(2rem,11vw,3rem) !important
}

.hero-cta-btn{
    padding:16px 28px;
    font-size:0.85rem
}

.vision-central-visual{
    width:100px;
    height:100px
}

.vision-stagger-word{
    font-size:clamp(1.2rem,7vw,2rem) !important
}

.vision-stagger-word.vs-accent{
    font-size:clamp(1.5rem,9vw,2.5rem) !important
}

.vision-cta-btn{
    padding:16px 28px;
    font-size:0.85rem
}

.cta-title{
    font-size:clamp(1.5rem,6vw,2rem)
}

.cta-bg-text{
    display:none
}

.cta-subtitle{
    font-size:0.9rem
}

.step-number{
    font-size:clamp(3rem,15vw,5rem)
}

.step-title{
    font-size:clamp(1.5rem,6vw,2rem)
}

.section-transition{
    height:80px
}

.transition-line{
    width:150px
}

.form-wrapper,.contact-form-wrapper{
    padding:20px 12px
}

.form-title{
    font-size:1.1rem
}

.contact-item{
    padding:12px
}

.preloader-logo-img{
    width:clamp(150px,50vw,250px)
}
}

@media (max-width:768px){
    .services-horizontal,.process-horizontal{
    height:auto !important
}

.horizontal-wrapper{
    height:auto !important;
    position:relative !important
}

.horizontal-content{
    flex-direction:column;
    transform:none !important
}

.horizontal-panel{
    width:100%;
    height:auto;
    min-height:auto;
    padding:80px 20px
}

/* Mobile transition handled by JavaScript */

.panel-title{
    font-size:clamp(1.8rem,7vw,2.5rem)
}

.panel-bg-text{
    font-size:clamp(3rem,15vw,6rem)
}

.service-title-large{
    font-size:clamp(1.8rem,6vw,2.5rem)
}

.service-desc-large{
    font-size:0.95rem;
    line-height:1.6
}

.service-icon-large{
    width:50px;
    height:50px
}

.tag-large{
    font-size:0.6rem;
    padding:6px 12px
}

.service-tags-large{
    gap:8px
}

.panel-intro-content{
    padding:20px
}

.service-panel-content{
    padding:20px;
    max-width:100%
}

.service-bg-number{
    font-size:clamp(8rem,30vw,12rem)
}

.step-number{
    font-size:clamp(4rem,15vw,8rem) !important
}

.step-title{
    font-size:clamp(1.5rem,5vw,2rem)
}

.step-desc{
    font-size:0.9rem
}

.step-list li{
    font-size:0.85rem
}
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important
}
}

.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:0
}

.hero-radial-container{
    position:relative;
    width:100%;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center
}

/* Background decorations - positioned absolutely behind text */
.hero-decorations{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:clamp(280px,35vw,450px);
    height:clamp(280px,35vw,450px);
    z-index:5;
    pointer-events:none
}

/* Desktop: Circunferência maior e palavras espalhadas */
@media (min-width: 769px) {
    .hero-decorations{
        width:clamp(350px,40vw,550px);
        height:clamp(350px,40vw,550px);
        z-index:10
    }

    /* Palavras flutuantes espalhadas pela página */
    .radial-word{
        font-size:clamp(0.65rem,1vw,0.85rem);
        letter-spacing:0.35em
    }

    /* Dispersas - longe dos textos principais */
    .radial-word.word-1{
        top:15%;
        right:8%;
        left:auto;
        transform:translate(0,-50%)
    }

    .radial-word.word-2{
        top:30%;
        right:35%;
        left:auto;
        transform:translate(0,-50%)
    }

    .radial-word.word-3{
        bottom:15%;
        left:8%;
        top:auto;
        transform:translate(-50%,50%)
    }

    .radial-word.word-4{
        top:50%;
        right:10%;
        left:auto;
        transform:translate(0,-50%)
    }

    .radial-word.word-5{
        top:45%;
        left:12%;
        transform:translate(-50%,-50%)
    }

    .radial-word.word-6{
        bottom:30%;
        left:35%;
        top:auto;
        transform:translate(-50%,50%)
    }
}

/* Logo within the horizontal line */
.line-horizontal .hero-central-visual{
    position:relative;
    width:clamp(240px,32vw,440px);
    height:clamp(240px,32vw,440px);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    z-index:20;
    margin:clamp(1rem,3vh,2.5rem) 0
}

.line-horizontal .hero-central-visual .central-logo{
    width:760%;
    height:auto;
    object-fit:contain
}

.hero-decorations .central-glow,
.central-glow{
    position:absolute;
    inset:-50%;
    background:radial-gradient(circle,var(--emerald-intense) 0%,var(--emerald-glow) 30%,transparent 70%);
    opacity:0;
    filter:blur(60px);
    animation:centralGlowPulse 4s ease-in-out infinite;
    will-change:opacity,transform
}

@keyframes centralGlowPulse{
    0%,100%{
    opacity:0.3;
    transform:scale(0.9)
}

50%{
    opacity:0.6;
    transform:scale(1.1)
}
}

.central-ring{
    position:absolute;
    border-radius:50%;
    border:1px solid var(--emerald);
    opacity:0;
    will-change:transform,opacity
}

.ring-1{
    width:100%;
    height:100%;
    animation:ringRotate 20s linear infinite
}

.ring-2{
    width:130%;
    height:130%;
    border-style:dashed;
    animation:ringRotate 30s linear infinite reverse
}

.ring-3{
    width:160%;
    height:160%;
    border-color:var(--gray-700);
    animation:ringRotate 40s linear infinite
}

@keyframes ringRotate{
    from{
    transform:rotate(0deg)
}

to{
    transform:rotate(360deg)
}
}

.central-logo{
    position:relative;
    z-index:5;
    width:700%;
    height:auto;
    filter:brightness(0) invert(1);
    opacity:0;
    transform:scale(0.5);
    will-change:transform,opacity;
    user-select:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    pointer-events:none;
    -webkit-user-drag:none;
    -khtml-user-drag:none;
    -moz-user-drag:none;
    -o-user-drag:none
}

.central-particles{
    position:absolute;
    inset:-20%;
    pointer-events:none
}

.particle-dot{
    position:absolute;
    width:4px;
    height:4px;
    background:var(--emerald);
    border-radius:50%;
    opacity:0;
    will-change:transform,opacity
}

.particle-dot:nth-child(1){
    top:10%;
    left:50%
}

.particle-dot:nth-child(2){
    top:25%;
    left:85%
}

.particle-dot:nth-child(3){
    top:50%;
    left:95%
}

.particle-dot:nth-child(4){
    top:75%;
    left:85%
}

.particle-dot:nth-child(5){
    top:90%;
    left:50%
}

.particle-dot:nth-child(6){
    top:75%;
    left:15%
}

.particle-dot:nth-child(7){
    top:50%;
    left:5%
}

.particle-dot:nth-child(8){
    top:25%;
    left:15%
}

.radial-words{
    position:absolute;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:10;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    max-width:none;
    overflow:visible
}

.radial-word{
    position:absolute;
    font-family:var(--font-mono);
    font-size:clamp(0.6rem,1.2vw,0.9rem);
    font-weight:700;
    letter-spacing:0.4em;
    text-transform:uppercase;
    color:var(--gray-600);
    opacity:0;
    will-change:transform,opacity;
    transition:color 0.4s,text-shadow 0.4s;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    animation:radialWordFloat 4s ease-in-out infinite
}

@keyframes radialWordFloat{
    0%,100%{
        transform:translate(-50%,-50%) translateY(0px) rotate(0deg)
    }
    25%{
        transform:translate(-50%,-50%) translateY(-8px) rotate(2deg)
    }
    50%{
        transform:translate(-50%,-50%) translateY(-4px) rotate(-2deg)
    }
    75%{
        transform:translate(-50%,-50%) translateY(-10px) rotate(1deg)
    }
}

.radial-word:hover{
    color:var(--emerald);
    text-shadow:0 0 30px var(--emerald-glow)
}

/* Word positioning handled by GSAP animation - no static positioning needed */
}

.staggered-typography{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:25
}

.stagger-line{
    position:absolute;
    overflow:hidden
}

.stagger-word{
    display:block;
    font-family:var(--font-display);
    font-weight:700;
    line-height:1;
    color:var(--white);
    opacity:0;
    will-change:transform,opacity;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-break: keep-all;
    user-select:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    pointer-events:none
}

.stagger-word.accent{
    color:var(--emerald);
    font-style:italic;
    font-size:clamp(3rem,6vw,7rem);
    font-weight:800;
    letter-spacing:-0.03em;
    margin-left:0.5rem
}


/* Desktop: Layout com logo centralizado e textos nos cantos */
@media (min-width: 769px) {
    .line-horizontal{
        position:absolute;
        inset:0;
        pointer-events:none;
        z-index:15
    }

    .line-horizontal .stagger-word{
        position:absolute;
        font-size:clamp(2.5rem,5vw,6rem);
        line-height:1.1;
        letter-spacing:-0.02em;
        font-weight:700;
        white-space:nowrap;
        opacity:0;
        will-change:transform,opacity
    }

    /* "Transformamos ideias" - Canto Superior Esquerdo */
    .line-horizontal .stagger-word:nth-child(1) {
        top:8%;
        left:5%;
        transform:translateY(-100%);
        font-size:clamp(2.5rem,4.5vw,5.5rem)
    }

    .line-horizontal .stagger-word:nth-child(2) {
        top:calc(8% + 5rem);
        left:5%;
        transform:translateY(-100%);
        font-size:clamp(3rem,5.5vw,6.5rem)
    }

    /* Logo centralizado dentro da circunferência */
    .line-horizontal .hero-central-visual {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        width:clamp(280px,32vw,400px);
        height:clamp(280px,32vw,400px);
        z-index:15;
        pointer-events:auto;
        display:flex;
        align-items:center;
        justify-content:center
    }

    .line-horizontal .hero-central-visual .central-logo {
        width:560%;
        height:auto
    }

    /* "em realidades" - Canto Inferior Direito (coluna vertical) */
    .line-horizontal .stagger-word:nth-child(4) {
        bottom:calc(8% + 5rem);
        right:10%;
        text-align:right;
        transform:translateY(100%);
        font-size:clamp(2.5rem,4.5vw,5.5rem)
    }

    .line-horizontal .stagger-word:nth-child(5) {
        bottom:8%;
        right:0.5%;
        text-align:right;
        transform:translateY(100%);
        font-size:clamp(3rem,5.5vw,6.5rem)
    }
}

/* Mobile: mantém o layout horizontal existente */
.line-horizontal{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:0.5rem clamp(0.5rem,2vw,1rem);
    z-index:15;
    width:95%;
    max-width:1200px
}

.line-horizontal .stagger-word{
    font-size:clamp(2.5rem,5vw,6rem);
    display:inline-block;
    line-height:1.1;
    letter-spacing:-0.02em;
    font-weight:700;
    white-space:nowrap
}

/* Logo placeholder removed - logo is now inline */

/* Legacy positioning - keep for backwards compatibility */
.line-top-left{top:12%;left:5%}
.line-top-left .stagger-word{font-size:clamp(3rem,10vw,9rem);transform:translateY(100%)}
.line-top-right{top:22%;right:5%;text-align:right}
.line-top-right .stagger-word{font-size:clamp(4rem,14vw,12rem);transform:translateX(100%)}
.line-bottom-left{bottom:35%;left:8%;z-index:25}
.line-bottom-left .stagger-word{font-size:clamp(2rem,6vw,5rem);transform:translateX(-100%)}
.line-bottom-right{bottom:22%;right:-8%;text-align:right;z-index:25}
.line-bottom-right .stagger-word{font-size:clamp(3.5rem,12vw,10rem);transform:translateY(100%)}

.hero-bottom-bar{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:50px var(--container-padding);
    z-index:20;
    opacity:0;
    transform:translateY(30px)
}

.bottom-bar-left,.bottom-bar-right{
    display:flex;
    align-items:center;
    gap:16px
}

.bar-label{
    font-family:var(--font-mono);
    font-size:0.65rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--gray-500)
}

.bar-dot{
    width:4px;
    height:4px;
    background:var(--emerald);
    border-radius:50%
}

.bottom-bar-center{
    position:absolute;
    left:50%;
    transform:translateX(-50%)
}

.hero-cta-btn{
    display:inline-flex;
    align-items:center;
    gap:16px;
    padding:20px 40px;
    background:transparent;
    border:1px solid var(--gray-700);
    border-radius:100px;
    font-family:var(--font-body);
    font-size:0.9rem;
    font-weight:500;
    color:var(--white);
    transition:all 0.5s var(--ease-out-expo);
    position:relative;
    overflow:hidden
}

.hero-cta-btn::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--emerald);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.5s var(--ease-out-expo);
    z-index:-1
}

.hero-cta-btn:hover::before{
    transform:scaleX(1)
}

.hero-cta-btn:hover{
    border-color:var(--emerald);
    color:var(--black);
    transform:scale(1.05);
    box-shadow:0 20px 60px var(--emerald-glow)
}

.cta-arrow{
    width:20px;
    height:20px;
    transition:transform 0.4s var(--ease-out-expo)
}

.hero-cta-btn:hover .cta-arrow{
    transform:translateX(5px)
}

.scroll-indicator-new{
    display:flex;
    align-items:center;
    gap:16px
}

.scroll-text-new{
    font-family:var(--font-mono);
    font-size:0.6rem;
    letter-spacing:0.3em;
    color:var(--gray-600)
}

.scroll-line-new{
    width:60px;
    height:1px;
    background:linear-gradient(90deg,var(--emerald),transparent);
    transform:scaleX(0);
    transform-origin:left;
    animation:scrollLineExpand 2s ease-in-out infinite
}

@keyframes scrollLineExpand{
    0%,100%{
    transform:scaleX(0);
    opacity:0
}

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

@media (max-width:1024px){
    .radial-word{
    font-size:clamp(0.5rem,1vw,0.7rem)
}

.line-top-left .stagger-word{
    font-size:clamp(2rem,8vw,5rem)
}

.line-top-right .stagger-word{
    font-size:clamp(2.5rem,10vw,6rem)
}

.line-bottom-left .stagger-word{
    font-size:clamp(1.5rem,5vw,3rem)
}

.line-bottom-right .stagger-word{
    font-size:clamp(2rem,8vw,5rem)
}
}

/* Mac and Large Desktop Optimizations */
@media (min-width: 1440px) {
    /* Hero radial words - better sizing for large screens */
    .radial-word {
        font-size: clamp(0.75rem, 1vw, 0.95rem);
        letter-spacing: 0.35em;
        white-space: nowrap;
    }

    /* Line horizontal - melhor formatação em telas grandes */
    .line-horizontal .stagger-word:nth-child(1) {
        font-size: clamp(3rem, 5vw, 6rem);
    }

    .line-horizontal .stagger-word:nth-child(2),
    .line-horizontal .stagger-word:nth-child(5) {
        font-size: clamp(3.5rem, 6vw, 7.5rem);
    }

    .line-horizontal .stagger-word:nth-child(4) {
        font-size: clamp(3rem, 5vw, 6rem);
        bottom: calc(8% + 7.5rem) !important;
    }

    .line-horizontal .hero-central-visual {
        width: clamp(320px, 34vw, 440px);
        height: clamp(320px, 34vw, 440px);
    }

    /* Hero stagger words - optimized for large displays */
    .line-top-left .stagger-word {
        font-size: clamp(5rem, 8vw, 8rem);
        white-space: nowrap;
    }

    .line-top-right .stagger-word {
        font-size: clamp(6rem, 10vw, 10rem);
        white-space: nowrap;
    }

    .line-bottom-left .stagger-word {
        font-size: clamp(3rem, 5vw, 4.5rem);
        white-space: nowrap;
    }

    .line-bottom-right .stagger-word {
        font-size: clamp(5rem, 9vw, 8.5rem);
        white-space: nowrap;
    }

    /* Vision radial words */
    .vision-radial-word {
        font-size: clamp(0.8rem, 1.1vw, 1.05rem);
        letter-spacing: 0.35em;
        white-space: nowrap;
    }

    /* Vision stagger words */
    .vs-line-1 .vision-stagger-word {
        font-size: clamp(2.5rem, 4.5vw, 3.8rem);
        white-space: nowrap;
    }

    .vs-line-2 .vision-stagger-word {
        font-size: clamp(7rem, 12vw, 12rem);
        white-space: nowrap;
    }

    .vs-line-3 .vision-stagger-word {
        font-size: clamp(4rem, 6.5vw, 5.5rem);
        white-space: nowrap;
    }

    .vs-line-4 .vision-stagger-word {
        font-size: clamp(6rem, 10vw, 9.5rem);
        white-space: nowrap;
    }

    .vs-line-5 .vision-stagger-word {
        font-size: clamp(3.5rem, 5.5vw, 4.8rem);
        white-space: nowrap;
    }

    .vs-line-6 .vision-stagger-word {
        font-size: clamp(7rem, 13vw, 13rem);
        white-space: nowrap;
    }

    /* CTA 3D words */
    .cta-3d-word {
        white-space: nowrap;
    }

    .cta-title {
        font-size: clamp(2.5rem, 5vw, 4.5rem);
        line-height: 1.2;
    }
}

@media (min-width: 1920px) {
    /* Extra large displays - fixed sizes for consistency */
    .radial-word {
        font-size: 0.9rem;
        letter-spacing: 0.3em;
    }

    /* Line horizontal - tamanhos fixos para telas extra grandes */
    .line-horizontal .stagger-word:nth-child(1),
    .line-horizontal .stagger-word:nth-child(4) {
        font-size: 5.5rem;
    }

    .line-horizontal .stagger-word:nth-child(4) {
        bottom: calc(8% + 8.5rem) !important;
    }

    .line-horizontal .stagger-word:nth-child(2),
    .line-horizontal .stagger-word:nth-child(5) {
        font-size: 7rem;
    }

    .line-horizontal .hero-central-visual {
        width: 440px;
        height: 440px;
    }

    .line-top-left .stagger-word {
        font-size: 7.5rem;
    }

    .line-top-right .stagger-word {
        font-size: 9.5rem;
    }

    .line-bottom-left .stagger-word {
        font-size: 4.2rem;
    }

    .line-bottom-right .stagger-word {
        font-size: 8rem;
    }

    .vision-radial-word {
        font-size: 1rem;
        letter-spacing: 0.3em;
    }

    .vs-line-1 .vision-stagger-word {
        font-size: 3.5rem;
    }

    .vs-line-2 .vision-stagger-word {
        font-size: 11rem;
    }

    .vs-line-3 .vision-stagger-word {
        font-size: 5.2rem;
    }

    .vs-line-4 .vision-stagger-word {
        font-size: 9rem;
    }

    .vs-line-5 .vision-stagger-word {
        font-size: 4.5rem;
    }

    .vs-line-6 .vision-stagger-word {
        font-size: 12rem;
    }

    .cta-title {
        font-size: 4.2rem;
    }
}

/* Old mobile styles removed - now handled in comprehensive mobile section below */

.vision-section{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:var(--black);
    z-index:7;
    margin-top:0;
    padding-top:0
}

.vision-bg{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none
}

.vision-gradient-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    opacity:0;
    will-change:transform,opacity
}

.orb-v1{
    width:700px;
    height:700px;
    background:radial-gradient(circle,var(--emerald-intense) 0%,transparent 70%);
    top:20%;
    left:-20%
}

.orb-v2{
    width:600px;
    height:600px;
    background:radial-gradient(circle,rgba(16,185,129,0.4) 0%,transparent 70%);
    bottom:10%;
    right:-15%
}

.vision-noise{
    position:absolute;
    inset:0;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:0.02
}

.vision-radial-container{
    position:relative;
    width:100%;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center
}

.vision-central-visual{
    position:relative;
    width:clamp(220px,28vw,350px);
    height:clamp(220px,28vw,350px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10
}

.vision-glow{
    position:absolute;
    inset:-80%;
    background:radial-gradient(circle,var(--emerald-intense) 0%,var(--emerald-glow) 25%,transparent 60%);
    opacity:0;
    filter:blur(80px);
    will-change:opacity,transform
}

.vision-ring{
    position:absolute;
    border-radius:50%;
    border:1px solid var(--emerald);
    opacity:0;
    will-change:transform,opacity
}

.v-ring-1{
    width:100%;
    height:100%;
    border-width:2px;
    animation:visionRingRotate 15s linear infinite
}

.v-ring-2{
    width:140%;
    height:140%;
    border-style:dashed;
    border-color:rgba(16,185,129,0.5);
    animation:visionRingRotate 25s linear infinite reverse
}

.v-ring-3{
    width:180%;
    height:180%;
    border-color:var(--gray-700);
    animation:visionRingRotate 35s linear infinite
}

.v-ring-4{
    width:220%;
    height:220%;
    border-style:dotted;
    border-color:var(--gray-800);
    animation:visionRingRotate 45s linear infinite reverse
}

@keyframes visionRingRotate{
    from{
    transform:rotate(0deg)
}

to{
    transform:rotate(360deg)
}
}

.vision-core{
    position:relative;
    z-index:5;
    width:50%;
    height:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transform:scale(0.3) rotate(-180deg);
    will-change:transform,opacity
}

.vision-icon{
    width:100%;
    height:100%;
    color:var(--emerald)
}

.vision-particles{
    position:absolute;
    inset:-30%;
    pointer-events:none
}

.v-particle{
    position:absolute;
    width:6px;
    height:6px;
    background:var(--emerald);
    border-radius:50%;
    opacity:0;
    will-change:transform,opacity
}

.v-particle:nth-child(1){
    top:5%;
    left:50%
}

.v-particle:nth-child(2){
    top:25%;
    right:10%
}

.v-particle:nth-child(3){
    top:60%;
    right:5%
}

.v-particle:nth-child(4){
    bottom:10%;
    left:50%
}

.v-particle:nth-child(5){
    top:60%;
    left:5%
}

.v-particle:nth-child(6){
    top:25%;
    left:10%
}

.vision-radial-words{
    position:absolute;
    width:100%;
    height:100%;
    pointer-events:none
}

.vision-radial-word{
    position:absolute;
    font-family:var(--font-mono);
    font-size:clamp(0.7rem,1.3vw,1rem);
    font-weight:800;
    letter-spacing:0.4em;
    text-transform:uppercase;
    color:var(--gray-600);
    opacity:0;
    will-change:transform,opacity;
    transition:color 0.4s,text-shadow 0.4s;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.vision-radial-word:hover{
    color:var(--emerald);
    text-shadow:0 0 40px var(--emerald-glow)
}

.vw-1{
    top:28%;
    left:50%;
    transform:translateX(-50%)
}

.vw-2{
    top:38%;
    right:22%;
    transform:rotate(20deg)
}

.vw-3{
    bottom:38%;
    right:20%;
    transform:rotate(45deg)
}

.vw-4{
    bottom:28%;
    left:50%;
    transform:translateX(-50%)
}

.vw-5{
    bottom:38%;
    left:20%;
    transform:rotate(-45deg)
}

.vw-6{
    top:38%;
    left:22%;
    transform:rotate(-20deg)
}

.vision-staggered-typography{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:5
}

.vision-stagger-line{
    position:absolute;
    overflow:hidden
}

.vision-stagger-word{
    display:block;
    font-family:var(--font-display);
    font-weight:800;
    line-height:0.85;
    color:var(--white);
    opacity:0;
    will-change:transform,opacity;
    text-shadow:0 4px 30px rgba(0,0,0,0.3);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-break: keep-all;
}

.vision-stagger-word.vs-accent{
    color:var(--emerald);
    font-style:italic;
    font-weight:900;
    text-shadow:0 4px 40px var(--emerald-glow)
}

.vs-line-1{
    top:18%;
    left:15%
}

.vs-line-1 .vision-stagger-word{
    font-size:clamp(2rem,5vw,4rem);
    transform:translateX(-120%);
    font-family:var(--font-mono);
    letter-spacing:0.3em;
    text-transform:uppercase;
    font-weight:700
}

.vs-line-2{
    top:24%;
    left:12%
}

.vs-line-2 .vision-stagger-word{
    font-size:clamp(5rem,15vw,14rem);
    font-weight:800;
    transform:translateY(120%)
}

.vs-line-3{
    top:32%;
    right:12%;
    text-align:right
}

.vs-line-3 .vision-stagger-word{
    font-size:clamp(3rem,7vw,6rem);
    font-weight:700;
    transform:translateX(120%)
}

.vs-line-4{
    top:42%;
    right:10%;
    text-align:right
}

.vs-line-4 .vision-stagger-word{
    font-size:clamp(4rem,12vw,11rem);
    font-weight:800;
    transform:translateY(-120%)
}

.vs-line-5{
    bottom:32%;
    left:15%
}

.vs-line-5 .vision-stagger-word{
    font-size:clamp(2.5rem,6vw,5rem);
    font-weight:700;
    transform:translateX(-120%)
}

.vs-line-6{
    bottom:12%;
    left:10%
}

.vs-line-6 .vision-stagger-word{
    font-size:clamp(5rem,16vw,15rem);
    font-weight:900;
    transform:translateY(120%)
}

.vision-bottom-bar{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:30px var(--container-padding);
    z-index:20;
    opacity:0;
    transform:translateY(40px)
}

.vision-bar-left,.vision-bar-right{
    flex:1
}

.vision-bar-right{
    text-align:right
}

.vision-bar-center{
    position:absolute;
    left:50%;
    transform:translateX(-50%)
}

.vision-label{
    font-family:var(--font-mono);
    font-size:0.6rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--gray-600)
}

.vision-cta-btn{
    display:inline-flex;
    align-items:center;
    gap:16px;
    padding:20px 44px;
    background:var(--emerald);
    border:2px solid var(--emerald);
    border-radius:100px;
    font-family:var(--font-body);
    font-size:0.95rem;
    font-weight:600;
    color:var(--black);
    transition:all 0.5s var(--ease-out-expo);
    position:relative;
    overflow:hidden
}

.vision-cta-btn::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--white);
    transform:scaleX(0);
    transform-origin:right;
    transition:transform 0.5s var(--ease-out-expo);
    z-index:-1
}

.vision-cta-btn:hover::before{
    transform:scaleX(1);
    transform-origin:left
}

.vision-cta-btn:hover{
    transform:scale(1.08);
    box-shadow:0 25px 80px var(--emerald-glow)
}

.vision-cta-arrow{
    width:20px;
    height:20px;
    transition:transform 0.4s var(--ease-out-expo)
}

.vision-cta-btn:hover .vision-cta-arrow{
    transform:translateX(8px)
}

@media (max-width:1024px){
    .vision-radial-word{
    font-size:clamp(0.55rem,1vw,0.8rem)
}

.vs-line-2 .vision-stagger-word{
    font-size:clamp(4rem,12vw,9rem)
}

.vs-line-4 .vision-stagger-word{
    font-size:clamp(3rem,9vw,7rem)
}

.vs-line-6 .vision-stagger-word{
    font-size:clamp(4rem,12vw,10rem)
}
}

@media (max-width:768px){
    .vision-central-visual{
    width:clamp(120px,35vw,180px);
    height:clamp(120px,35vw,180px)
}

.vision-radial-words{
    display:none
}

.vision-staggered-typography{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding-top:80px
}

.vision-stagger-line{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    text-align:center;
    margin-bottom:5px
}

.vision-stagger-word{
    font-size:clamp(1.5rem,8vw,2.5rem) !important;
    transform:none !important
}

.vision-stagger-word.vs-accent{
    font-size:clamp(2rem,11vw,3.5rem) !important
}

.vs-line-1 .vision-stagger-word{
    font-size:clamp(0.9rem,4vw,1.2rem) !important
}

.vs-line-5{
    display:block
}

.vision-bottom-bar{
    flex-direction:column;
    gap:16px;
    padding:24px 20px
}

.vision-bar-left,.vision-bar-right{
    display:none
}

.vision-bar-center{
    position:relative;
    left:auto;
    transform:none
}
}


/* ============================================
   PREMIUM ANIMATIONS - ADDITIONAL STYLES
   ============================================ */

/* Preloader Enhanced */
.preloader {
    clip-path: inset(0 0 0 0);
}

/* Enhanced Cursor States */
.cursor-dot {
    will-change: transform;
    pointer-events: none;
}

.cursor-ring {
    will-change: transform;
    pointer-events: none;
}

/* Smooth Transitions */
* {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.hero-central-visual,
.vision-central-visual {
    perspective: 1000px;
    transform-style: preserve-3d;
}

/* Enhanced Glow Effects */
.central-glow,
.vision-glow {
    will-change: transform, opacity;
}

/* Improved Text Rendering */
.stagger-word,
.vision-stagger-word,
.cta-title .word {
    will-change: transform, opacity;
    -webkit-font-smoothing: antialiased;
}

/* GPU Acceleration for Horizontal Scroll */
.horizontal-content {
    will-change: transform;
    transform: translateZ(0);
}

.horizontal-panel {
    will-change: opacity;
}

/* Service Panel Enhancements */
.service-bg-number {
    will-change: transform, opacity;
    transition: opacity 0.3s ease-out;
}

/* Particle Effects */
.particle-dot,
.v-particle {
    will-change: transform, opacity;
}

/* Ring Animations Enhancement */
.central-ring,
.vision-ring {
    will-change: transform, opacity;
}

/* Button Hover Effects */
.btn::before {
    will-change: transform;
}

.magnetic {
    will-change: transform;
}

/* Marquee Smooth */
.marquee-content {
    will-change: transform;
}

/* ============================================
   ORGANIC SECTION TRANSITION - Process → Technology
   ============================================ */
.section-transition {
    position: relative;
    height: 15vh;
    min-height: 100px;
    max-height: 200px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

/* Background crossfade layers */
.transition-bg-dark {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--black) 0%, transparent 50%, var(--black) 100%);
    opacity: 0.5;
    z-index: 1
}

.transition-bg-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(16, 185, 129, 0.02) 0%,
        transparent 70%
    );
    opacity: 1;
    z-index: 2
}

/* Flow container */
.transition-flow {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10
}

/* Flowing green beam - energy transfer visual */
.flow-beam {
    position: absolute;
    width: 6px;
    height: 0%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(16, 185, 129, 0.5) 20%,
        var(--emerald) 50%,
        rgba(16, 185, 129, 0.5) 80%,
        transparent 100%
    );
    box-shadow:
        0 0 40px var(--emerald),
        0 0 80px rgba(16, 185, 129, 0.9),
        0 0 120px rgba(16, 185, 129, 0.6);
    opacity: 0
}

/* Traveling particles - movement indication */
.flow-particles {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.flow-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--emerald);
    border-radius: 50%;
    opacity: 0;
    box-shadow:
        0 0 20px var(--emerald),
        0 0 35px rgba(16, 185, 129, 0.8),
        0 0 50px rgba(16, 185, 129, 0.5);
    left: 50%;
    transform: translateX(-50%)
}

.flow-particle:nth-child(1) { top: 20%; }
.flow-particle:nth-child(2) { top: 35%; }
.flow-particle:nth-child(3) { top: 50%; }
.flow-particle:nth-child(4) { top: 65%; }
.flow-particle:nth-child(5) { top: 80%; }

/* Connecting line - horizontal growth */
.transition-line {
    position: absolute;
    width: 0%;
    max-width: 300px;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(16, 185, 129, 0.5) 20%,
        var(--emerald) 50%,
        rgba(16, 185, 129, 0.5) 80%,
        transparent 100%
    );
    box-shadow:
        0 0 30px var(--emerald),
        0 0 60px rgba(16, 185, 129, 0.8),
        0 0 90px rgba(16, 185, 129, 0.5);
    will-change: transform;
    opacity: 0
}

/* Contact Items */
.contact-item {
    will-change: transform, opacity;
}

/* Stats Counter */
.counter {
    font-variant-numeric: tabular-nums;
}

/* Scroll Indicator Animation */
@keyframes scrollPulse {
    0%, 100% {
        opacity: 0.5;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(5px);
    }
}

.scroll-arrow {
    animation: scrollPulse 1.5s ease-in-out infinite;
}

/* Premium Shadow Effects */
.hero-cta-btn:hover,
.vision-cta-btn:hover,
.btn-primary:hover {
    box-shadow: 
        0 20px 60px var(--emerald-glow),
        0 0 100px rgba(16, 185, 129, 0.15);
}

/* Glitch Text Enhancement */
.glitch-hover {
    position: relative;
}

.glitch-hover::before,
.glitch-hover::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.glitch-hover:hover::before {
    animation: glitchPremium1 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    color: var(--emerald);
    opacity: 0.8;
    text-shadow: 2px 0 var(--emerald-light);
}

.glitch-hover:hover::after {
    animation: glitchPremium2 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite reverse;
    color: #ff00ff;
    opacity: 0.6;
    text-shadow: -2px 0 #ff6b6b;
}

@keyframes glitchPremium1 {
    0% { clip-path: inset(20% 0 60% 0); transform: translate(-3px, -1px); }
    25% { clip-path: inset(60% 0 20% 0); transform: translate(3px, 1px); }
    50% { clip-path: inset(40% 0 40% 0); transform: translate(-2px, 2px); }
    75% { clip-path: inset(80% 0 10% 0); transform: translate(2px, -2px); }
    100% { clip-path: inset(10% 0 80% 0); transform: translate(-3px, 1px); }
}

@keyframes glitchPremium2 {
    0% { clip-path: inset(60% 0 20% 0); transform: translate(3px, 1px); }
    25% { clip-path: inset(20% 0 60% 0); transform: translate(-3px, -1px); }
    50% { clip-path: inset(80% 0 10% 0); transform: translate(2px, -2px); }
    75% { clip-path: inset(40% 0 40% 0); transform: translate(-2px, 2px); }
    100% { clip-path: inset(10% 0 80% 0); transform: translate(3px, -1px); }
}

/* Magnetic Button Enhanced Feedback */
.magnetic:active {
    transform: scale(0.98) !important;
}

/* Improved Form Focus States */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--emerald);
    box-shadow: 0 4px 20px var(--emerald-glow);
}

/* Smooth Parallax Text */
.parallax-text,
.bg-text-scroll,
.vertical-bg-word,
.panel-bg-text,
.cta-word {
    will-change: transform;
}

/* Enhanced Card Hover */
.service-card {
    transition: 
        transform 0.6s var(--ease-out-expo),
        border-color 0.3s ease,
        box-shadow 0.6s var(--ease-out-expo);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.3),
        0 0 40px var(--emerald-glow);
}

/* Value Item Hover */
.value-item {
    transition: all 0.4s var(--ease-out-expo);
}

.value-item:hover {
    background: rgba(16, 185, 129, 0.05);
    border-color: var(--emerald);
}

/* Contact Item Enhanced */
.contact-item {
    transition: 
        transform 0.4s var(--ease-out-expo),
        border-color 0.3s ease,
        background 0.3s ease;
}

.contact-item:hover {
    background: rgba(16, 185, 129, 0.03);
}

/* Social Link Bounce */
.social-link {
    transition: 
        transform 0.4s var(--ease-elastic),
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

/* Footer Link Hover */

/* Tag Hover Effects */
.tag-large {
    transition: 
        transform 0.3s var(--ease-out-expo),
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

.tag-large:hover {
    box-shadow: 0 10px 30px var(--emerald-glow);
}

/* Navbar Enhanced */
.navbar {
    transition: 
        padding 0.5s var(--ease-out-expo),
        background 0.3s ease,
        backdrop-filter 0.3s ease;
}

.navbar.scrolled {
    background: rgba(5, 5, 5, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Mobile Menu Enhancement */
.mobile-menu {
    transition: opacity 0.5s var(--ease-out-expo);
}

.mobile-link {
    transition: 
        color 0.3s ease,
        transform 0.3s var(--ease-out-expo);
}

.mobile-link:hover {
    color: var(--emerald);
    transform: translateX(20px);
}

/* Performance Optimizations */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .will-change-transform {
        will-change: auto;
    }
}

/* High DPI Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .central-logo,
    .preloader-logo-img,
    .logo-img,
    .footer-logo {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ============================================
   PREMIUM ANIMATION SECTIONS
   ============================================ */

/* Base Premium Section Styles */
.premium-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--black);
    padding: var(--section-padding) 0;
}

/* Mobile: garantir overflow visible na seção depth */
@media (max-width: 768px) {
    .premium-section.depth-tunnel-section {
        overflow: visible !important;
    }
}

/* ============================================
   TEXT SCRAMBLE SECTION
   ============================================ */
.text-scramble-section {
    background: linear-gradient(180deg, var(--black) 0%, var(--gray-900) 50%, var(--black) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.scramble-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 var(--container-padding);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.scramble-title {
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(50px);
    text-align: center;
    width: 100%;
    word-break: keep-all;
    white-space: nowrap;
}

.scramble-subtitle {
    font-family: var(--font-mono);
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--emerald);
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(30px);
    text-align: center;
    width: 100%;
    max-width: 800px;
}

.scramble-words {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 100%;
}

.scramble-word {
    font-family: var(--font-mono);
    font-size: clamp(0.9rem, 2vw, 1.3rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gray-400);
    padding: 15px 30px;
    border: 1px solid var(--gray-700);
    border-radius: 100px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s var(--ease-out-expo);
    cursor: default;
}

.scramble-word:hover {
    color: var(--emerald);
    border-color: var(--emerald);
    background: var(--emerald-glow);
    box-shadow: 0 10px 40px var(--emerald-glow);
}

.scramble-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: clamp(20rem, 50vw, 50rem);
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px var(--gray-800);
    opacity: 0.15;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
}

/* ============================================
   PREMIUM INFINITE MARQUEE WITH HOVER
   ============================================ */
.premium-marquee-section {
    padding: 60px 0;
    background: var(--gray-900);
    border-top: 1px solid var(--gray-800);
    border-bottom: 1px solid var(--gray-800);
    overflow: hidden;
}

.premium-marquee {
    display: flex;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
}

.premium-marquee-content {
    display: flex;
    align-items: center;
    gap: 80px;
    animation: premiumMarquee 30s linear infinite;
    white-space: nowrap;
    padding-right: 80px;
}

.premium-marquee-reverse .premium-marquee-content {
    animation-direction: reverse;
}

@keyframes premiumMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Hover pause effect */
.marquee-hover-pause:hover .premium-marquee-content {
    animation-play-state: paused;
}

.pm-item {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--white);
    transition: color 0.3s ease, text-shadow 0.3s ease;
    padding: 0 30px;
}

.pm-item.outline {
    color: transparent;
    -webkit-text-stroke: 1px var(--white);
}

.pm-item:hover {
    color: var(--emerald);
    text-shadow: 0 0 50px var(--emerald-glow);
}

.pm-item.outline:hover {
    -webkit-text-stroke-color: var(--emerald);
    text-shadow: 0 0 50px var(--emerald-glow);
}

.pm-divider {
    width: 20px;
    height: 20px;
    color: var(--gray-600);
    flex-shrink: 0;
}

.pm-divider.emerald {
    color: var(--emerald);
}

.pm-divider svg {
    width: 100%;
    height: 100%;
}

/* ============================================
   DEPTH SECTION - CYLINDER TUNNEL EFFECT
   ============================================ */
.depth-tunnel-section {
    position: relative;
    min-height: 100vh;
    background: #000000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    contain: layout style paint;
    isolation: isolate;
}

/* Tunnel Container - Strong Perspective */
.tunnel-container {
    position: relative;
    width: 100%;
    height: 100vh;
    perspective: 1200px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
    will-change: transform;
    backface-visibility: hidden;
}

/* Background Gradient */
.tunnel-bg-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 70% 60% at 50% 50%,
        rgba(16, 185, 129, 0.1) 0%,
        rgba(6, 78, 59, 0.05) 40%,
        transparent 70%
    );
    z-index: 0;
    animation: tunnelBgPulse 8s ease-in-out infinite;
}

@keyframes tunnelBgPulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.15);
    }
}

/* Tunnel Rings Container */
.tunnel-rings {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    z-index: 1;
}

/* Tunnel Ring - Creates Cylinder Effect */
.tunnel-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(16, 185, 129, 0.5);
    background: radial-gradient(
        circle,
        rgba(16, 185, 129, 0.04) 0%,
        rgba(16, 185, 129, 0.02) 40%,
        transparent 70%
    );
    box-shadow:
        0 0 30px rgba(16, 185, 129, 0.4),
        0 0 60px rgba(16, 185, 129, 0.2),
        inset 0 0 30px rgba(16, 185, 129, 0.15);
    transform-style: preserve-3d;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Ring Sizes - Progressive Funnel Effect (GSAP will handle transforms) */
.ring-01 {
    width: 120vmin;
    height: 120vmin;
    border-width: 4px;
}

.ring-02 {
    width: 112vmin;
    height: 112vmin;
    border-width: 4px;
}

.ring-03 {
    width: 104vmin;
    height: 104vmin;
    border-width: 3px;
}

.ring-04 {
    width: 96vmin;
    height: 96vmin;
    border-width: 3px;
}

.ring-05 {
    width: 88vmin;
    height: 88vmin;
    border-width: 3px;
}

.ring-06 {
    width: 80vmin;
    height: 80vmin;
}

.ring-07 {
    width: 72vmin;
    height: 72vmin;
}

.ring-08 {
    width: 64vmin;
    height: 64vmin;
}

.ring-09 {
    width: 56vmin;
    height: 56vmin;
}

.ring-10 {
    width: 48vmin;
    height: 48vmin;
}

.ring-11 {
    width: 42vmin;
    height: 42vmin;
}

.ring-12 {
    width: 36vmin;
    height: 36vmin;
}

.ring-13 {
    width: 30vmin;
    height: 30vmin;
}

.ring-14 {
    width: 24vmin;
    height: 24vmin;
}

.ring-15 {
    width: 18vmin;
    height: 18vmin;
    border-color: rgba(16, 185, 129, 0.7);
    border-width: 3px;
    box-shadow:
        0 0 40px rgba(16, 185, 129, 0.6),
        inset 0 0 40px rgba(16, 185, 129, 0.3);
}

/* Tunnel Center - End of Tunnel */
.tunnel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(200px);
    z-index: 10;
    text-align: center;
    transform-style: preserve-3d;
    will-change: transform;
    backface-visibility: hidden;
}

.tunnel-center-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(
        circle,
        rgba(16, 185, 129, 0.4) 0%,
        rgba(16, 185, 129, 0.2) 30%,
        rgba(16, 185, 129, 0.05) 50%,
        transparent 70%
    );
    filter: blur(60px);
    animation: centerGlowPulse 4s ease-in-out infinite;
}

@keyframes centerGlowPulse {
    0%, 100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.tunnel-word {
    position: relative;
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 12vw, 8rem);
    font-weight: 900;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 1;
    text-shadow:
        0 0 40px rgba(16, 185, 129, 0.9),
        0 0 80px rgba(16, 185, 129, 0.6),
        0 0 120px rgba(16, 185, 129, 0.4);
    margin-bottom: 16px;
}

/* Mobile: simplificar e garantir que apareça completa */
@media (max-width: 768px) {
    .tunnel-word {
        font-size: 1.2rem !important;
        line-height: 1.4 !important;
        letter-spacing: -0.05em !important;
        white-space: nowrap !important;
        overflow: visible !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
        text-align: center !important;
        transform: none !important;
        display: block !important;
        position: relative !important;
        text-shadow: 0 0 20px rgba(16, 185, 129, 0.5) !important;
        box-sizing: border-box !important;
    }
}

.tunnel-center .section-number {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.3em;
    color: var(--emerald-light);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
}

.tunnel-description {
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 2vw, 0.95rem);
    color: var(--gray-400);
    letter-spacing: 0.05em;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    opacity: 0.9;
    position: relative;
    z-index: 2;
}

/* Tunnel Particles */
.tunnel-particles-container {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.tunnel-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--emerald-light);
    border-radius: 50%;
    box-shadow:
        0 0 15px var(--emerald-light),
        0 0 30px rgba(16, 185, 129, 0.5);
    opacity: 0.8;
}

.tunnel-particle:nth-child(1) { top: 15%; left: 20%; }
.tunnel-particle:nth-child(2) { top: 25%; right: 15%; }
.tunnel-particle:nth-child(3) { top: 45%; left: 10%; }
.tunnel-particle:nth-child(4) { top: 55%; right: 25%; }
.tunnel-particle:nth-child(5) { bottom: 35%; left: 30%; }
.tunnel-particle:nth-child(6) { bottom: 25%; right: 20%; }
.tunnel-particle:nth-child(7) { top: 70%; left: 40%; }
.tunnel-particle:nth-child(8) { top: 80%; right: 35%; }
.tunnel-particle:nth-child(9) { bottom: 15%; left: 25%; }
.tunnel-particle:nth-child(10) { bottom: 45%; right: 40%; }

/* Tunnel Radial Lines */
.tunnel-lines-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.tunnel-depth-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 150%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(16, 185, 129, 0.3) 30%,
        rgba(16, 185, 129, 0.5) 50%,
        rgba(16, 185, 129, 0.3) 70%,
        transparent 100%
    );
    transform-origin: 50% 50%;
    opacity: 0.6;
}

.tunnel-depth-line.line-1 { transform: translate(-50%, -50%) rotate(0deg); }
.tunnel-depth-line.line-2 { transform: translate(-50%, -50%) rotate(45deg); }
.tunnel-depth-line.line-3 { transform: translate(-50%, -50%) rotate(90deg); }
.tunnel-depth-line.line-4 { transform: translate(-50%, -50%) rotate(135deg); }
.tunnel-depth-line.line-5 { transform: translate(-50%, -50%) rotate(22.5deg); }
.tunnel-depth-line.line-6 { transform: translate(-50%, -50%) rotate(67.5deg); }
.tunnel-depth-line.line-7 { transform: translate(-50%, -50%) rotate(112.5deg); }
.tunnel-depth-line.line-8 { transform: translate(-50%, -50%) rotate(157.5deg); }


/* ============================================
   IMAGE REVEAL WITH CLIP-PATH
   ============================================ */
.image-reveal-section {
    background: var(--black);
    padding: 100px 0;
    min-height: auto;
}

.reveal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.reveal-item {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 20px;
    cursor: pointer;
}

.reveal-image-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.reveal-image {
    position: absolute;
    inset: 0;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1s var(--ease-out-expo);
}

.reveal-item:hover .reveal-image,
.reveal-item.revealed .reveal-image {
    clip-path: inset(0 0 0 0);
}

.reveal-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 2;
}

.reveal-content {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    z-index: 3;
}

.reveal-number {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--emerald);
    display: block;
    margin-bottom: 10px;
    opacity: 0;
    transform: translateY(20px);
}

.reveal-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--white);
    opacity: 0;
    transform: translateY(20px);
}

.reveal-item.revealed .reveal-number,
.reveal-item.revealed .reveal-title {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .reveal-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .reveal-item {
        aspect-ratio: 16/9;
    }
}

/* ============================================
   SCROLL VELOCITY TEXT
   ============================================ */
.scroll-velocity-section {
    min-height: 50vh;
    padding: 100px 0;
    overflow: hidden;
    background: var(--black);
}

.velocity-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.velocity-row {
    display: flex;
    gap: 100px;
    white-space: nowrap;
    will-change: transform;
}

.velocity-text {
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 900;
    color: var(--white);
    line-height: 1;
    text-transform: uppercase;
    flex-shrink: 0;
    padding: 0 30px;
}

.velocity-text.outline {
    color: transparent;
    -webkit-text-stroke: 2px var(--emerald);
}

/* ============================================
   DRAMATIC COUNTERS
   ============================================ */
.dramatic-counters-section {
    min-height: 80vh;
    background: var(--black);
}

.counters-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.counter-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
}

.orb-c1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--emerald-intense) 0%, transparent 70%);
    top: -200px;
    right: -200px;
}

.orb-c2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.4) 0%, transparent 70%);
    bottom: -150px;
    left: -150px;
}

.counters-header {
    text-align: center;
    margin-bottom: 80px;
}

.counters-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--white);
}

.dramatic-counters-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.dramatic-counter {
    text-align: center;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--gray-800);
    border-radius: 20px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.4s var(--ease-out-expo);
}

.dramatic-counter:hover {
    border-color: var(--emerald);
    background: var(--emerald-glow);
    transform: translateY(-10px);
    box-shadow: 0 20px 60px var(--emerald-glow);
}

.counter-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    margin-bottom: 15px;
}

.dramatic-number {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 800;
    color: var(--white);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.counter-suffix {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--emerald);
}

.counter-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin-bottom: 20px;
}

.counter-bar {
    height: 3px;
    background: var(--gray-800);
    border-radius: 3px;
    overflow: hidden;
}

.counter-bar-fill {
    height: 100%;
    width: 0;
    background: var(--emerald);
    border-radius: 3px;
    transition: width 2s var(--ease-out-expo);
}

.dramatic-counter.animated .counter-bar-fill {
    width: 100%;
}

@media (max-width: 1024px) {
    .dramatic-counters-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .dramatic-counters-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   PREMIUM WHY SECTION - REDESIGNED
   ============================================ */
.why-section {
    min-height: 100vh;
    padding: 160px 0;
    background: linear-gradient(180deg, var(--black) 0%, #0a0a0a 100%);
    position: relative;
    overflow: hidden;
}

.why-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Header */
.why-header {
    margin-bottom: 120px;
    position: relative;
}

.why-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.4em;
    color: var(--emerald);
    text-transform: uppercase;
    display: block;
    margin-bottom: 24px;
    opacity: 0;
    transform: translateY(20px);
}

.why-title {
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    display: flex;
    flex-direction: column;
}

.why-title-line {
    color: var(--white);
    opacity: 0;
    transform: translateY(60px);
    display: block;
}

.why-title-line.accent {
    color: var(--emerald);
    font-style: italic;
}

/* Premium List */
.why-list {
    position: relative;
}

.why-item {
    display: grid;
    grid-template-columns: 200px 1fr 1px;
    gap: 60px;
    align-items: start;
    padding: 80px 0;
    position: relative;
    opacity: 0;
    transform: translateY(40px);
}

.why-item:first-child {
    padding-top: 0;
}

.why-item:last-child {
    padding-bottom: 0;
}

.why-item:last-child .why-item-line {
    display: none;
}

/* Item Number */
.why-item-number {
    font-family: var(--font-mono);
    font-size: clamp(6rem, 10vw, 10rem);
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--gray-800);
    transition: all 0.6s var(--ease-out-expo);
    position: sticky;
    top: 120px;
}

.why-item:hover .why-item-number {
    -webkit-text-stroke: 2px var(--emerald);
    color: transparent;
    transform: scale(1.1);
}

/* Item Content */
.why-item-content {
    padding-top: 20px;
}

.why-item-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 600;
    color: var(--white);
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    line-height: 1.1;
    transition: color 0.4s;
}

.why-item:hover .why-item-title {
    color: var(--emerald);
}

.why-item-desc {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--gray-400);
    line-height: 1.8;
    max-width: 600px;
    transition: color 0.4s;
}

.why-item:hover .why-item-desc {
    color: var(--gray-300);
}

/* Item Line */
.why-item-line {
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--gray-800) 50%,
        transparent 100%);
    position: absolute;
    right: 0;
    top: 0;
    transition: background 0.6s;
}

.why-item:hover .why-item-line {
    background: linear-gradient(180deg,
        transparent 0%,
        var(--emerald) 50%,
        transparent 100%);
}

/* Responsive */
@media (max-width: 1024px) {
    .why-item {
        grid-template-columns: 150px 1fr 1px;
        gap: 40px;
        padding: 60px 0;
    }

    .why-item-number {
        font-size: clamp(4rem, 8vw, 6rem);
    }
}

@media (max-width: 768px) {
    .why-section {
        padding: 100px 0;
    }

    .why-header {
        margin-bottom: 80px;
    }

    .why-item {
        grid-template-columns: 100px 1fr;
        gap: 30px;
        padding: 50px 0;
    }

    .why-item-line {
        display: none;
    }

    .why-item-number {
        font-size: 4rem;
        position: relative;
        top: 0;
    }

    .why-item-content {
        padding-top: 10px;
    }
}

/* ============================================
   SCROLL PROGRESS INDICATOR
   ============================================ */
.scroll-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    height: 3px;
    background: transparent;
    z-index: 9999;
    overflow: hidden;
}

.scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--emerald-dark), var(--emerald), var(--emerald-light));
    box-shadow: 0 0 10px var(--emerald), 0 0 20px var(--emerald-glow);
    transition: width 0.1s linear;
}

/* ============================================
   LENIS SMOOTH SCROLL OVERRIDES
   ============================================ */
html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* Optimize touch scrolling */
html.lenis {
    height: auto;
}

.lenis [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis [data-lenis-prevent-wheel] {
    overscroll-behavior: none;
}

.lenis [data-lenis-prevent-touch] {
    -webkit-overflow-scrolling: auto;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* ============================================
   PREMIUM SECTION RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .premium-section {
        min-height: auto;
        padding: 80px 0;
    }

    .scramble-title {
        font-size: clamp(2.5rem, 12vw, 5rem);
    }

    .scramble-words {
        flex-direction: column;
        gap: 15px;
    }

    .scramble-word {
        font-size: 0.8rem;
        padding: 12px 24px;
    }

    .scramble-bg-text {
        font-size: clamp(10rem, 40vw, 20rem);
    }

    .pm-item {
        font-size: clamp(1.5rem, 4vw, 2.5rem);
    }

    .velocity-text {
        font-size: clamp(2.5rem, 10vw, 5rem);
    }
}

/* ============================================
   CTA 3D SECTION
   ============================================ */
.cta-3d-section {
    perspective: 1000px;
    transform-style: preserve-3d;
    overflow: hidden;
}

.cta-3d-bg {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    pointer-events: none;
}

.cta-3d-layer {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    will-change: transform;
}

/* 3D Rings */
.cta-3d-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid;
}

.ring-outer {
    width: 800px;
    height: 800px;
    border-color: var(--gray-800);
    animation: ring3dRotate 40s linear infinite;
}

.ring-inner {
    width: 400px;
    height: 400px;
    border-color: var(--emerald);
    border-width: 2px;
    opacity: 0.5;
    animation: ring3dRotate 25s linear infinite reverse;
}

@keyframes ring3dRotate {
    from { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(0deg); }
    to { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(360deg); }
}

/* 3D Dots Pattern */
.cta-3d-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--gray-700) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.3;
}

/* 3D Grid */
.cta-3d-grid {
    position: absolute;
    inset: -50%;
    background-image:
        linear-gradient(rgba(16, 185, 129, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 185, 129, 0.05) 1px, transparent 1px);
    background-size: 100px 100px;
    transform: rotateX(60deg);
}

/* 3D Floating Text */
.cta-3d-floating-text {
    position: absolute;
    top: 50%;
    font-family: var(--font-display);
    font-size: clamp(4rem, 10vw, 10rem);
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px var(--gray-800);
    opacity: 0.3;
    white-space: nowrap;
}

.text-left {
    left: -5%;
    transform: translateY(-50%) rotateY(25deg);
}

.text-right {
    right: -5%;
    transform: translateY(-50%) rotateY(-25deg);
}

/* 3D Glow */
.cta-3d-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--emerald-glow) 0%, transparent 60%);
    filter: blur(80px);
    opacity: 0.4;
}

/* 3D Content */
.cta-3d-content {
    position: relative;
    z-index: 10;
    transform-style: preserve-3d;
}

.cta-3d-title-wrapper {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.cta-3d-title {
    transform-style: preserve-3d;
}

.cta-3d-word {
    display: inline-block;
    transition: transform 0.4s var(--ease-out-expo), text-shadow 0.4s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.cta-3d-word:hover {
    text-shadow:
        0 0 20px var(--emerald-glow),
        0 0 40px var(--emerald-glow),
        0 0 80px var(--emerald-glow);
}

.cta-3d-buttons {
    transform-style: preserve-3d;
}

/* Responsive 3D */
@media (max-width: 768px) {
    .cta-3d-section {
        perspective: 1000px !important;
        transform-style: preserve-3d !important;
    }

    .ring-outer {
        width: 400px;
        height: 400px;
    }

    .ring-inner {
        width: 200px;
        height: 200px;
    }

    .cta-3d-floating-text {
        display: none;
    }

    .cta-3d-glow {
        width: 300px;
        height: 300px;
    }
}

/* ============================================
   MOBILE OPTIMIZATION - COMPREHENSIVE
   ============================================ */

/* Mobile First - 768px and below */
@media (max-width: 768px) {

    /* ====== GLOBAL MOBILE RESETS ====== */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    html, body {
        overflow-x: hidden;
        scroll-behavior: auto;
    }

    /* Restore normal cursor on mobile/touch devices */
    body, a, button {
        cursor: auto !important;
    }

    .cursor-dot,
    .cursor-ring,
    .cursor-follower {
        display: none !important;
    }

    /* Container mobile fix */
    .section-container {
        padding: 0 20px;
        max-width: 100%;
    }

    /* Enable all animations and effects on mobile */
    .parallax-text,
    .bg-text-scroll {
        display: none !important; /* Only these remain hidden */
    }

    .cta-bg-text,
    .scramble-bg-text {
        opacity: 0.3 !important; /* Reduced for mobile */
    }

    .cta-3d-bg,
    .cta-3d-layer {
        opacity: 0.4 !important;
    }

    .vision-gradient-orb,
    .gradient-orb {
        opacity: 0.4 !important;
        filter: blur(100px) !important;
    }

    .grid-overlay {
        opacity: 0.4 !important;
    }

    .noise {
        opacity: 0.02 !important;
    }

    /* Enable 3D transforms on mobile with reduced perspective */
    .cta-3d-section,
    .cta-3d-content,
    .cta-3d-title-wrapper,
    .cta-3d-title,
    .vision-section,
    .vision-radial-container,
    .hero {
        perspective: 1000px !important;
        transform-style: preserve-3d !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    /* Hero radial container needs visible overflow for radial words */
    .hero-radial-container {
        perspective: 1000px !important;
        transform-style: preserve-3d !important;
        max-width: 100vw !important;
        overflow: visible !important;
    }

    /* Radial words - Remove conflicting styles, use absolute positioning only (defined later) */

    /* Allow animations on mobile - set initial states only */
    .cta-3d-word,
    .cta-3d-buttons,
    .scramble-title,
    .scramble-subtitle,
    .scramble-word,
    .parallax-title,
    .parallax-desc,
    .why-label,
    .why-title-line,
    .why-item,
    .dramatic-counter,
    .reveal-item,
    .reveal-number,
    .reveal-title,
    .service-card,
    .panel-title,
    .panel-desc,
    .service-title-large,
    .tunnel-word,
    .tunnel-description,
    .vision-stagger-word {
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Allow will-change for animations on mobile */
    .central-logo,
    .central-glow,
    .central-ring,
    .particle-dot,
    .radial-word,
    .stagger-word,
    .tunnel-ring,
    .vision-ring,
    .v-ring-1, .v-ring-2, .v-ring-3, .v-ring-4,
    .v-particle {
        will-change: transform, opacity;
    }

    /* Essential transitions */
    a, button, .btn, .mobile-link, .nav-link,
    .footer-social-link, .mobile-menu, .mobile-menu-overlay,
    .footer-menu-btn, .faq-answer {
        transition: background-color 0.2s ease, color 0.2s ease,
                    transform 0.2s ease, opacity 0.2s ease,
                    max-height 0.3s ease !important;
    }

    /* Ensure smooth menu animations */
    .mobile-menu, .mobile-menu-overlay {
        transition: opacity 0.3s ease, transform 0.3s ease !important;
    }

    /* Allow GSAP to control opacity and transforms on mobile */

    /* ====== TYPOGRAPHY MOBILE ====== */
    h1, .hero-title {
        font-size: clamp(2rem, 8vw, 2.8rem);
        line-height: 1.2;
    }

    h2, .section-title {
        font-size: clamp(1.75rem, 6vw, 2.25rem);
        line-height: 1.3;
    }

    h3 {
        font-size: clamp(1.25rem, 4.5vw, 1.65rem);
        line-height: 1.4;
    }

    p {
        font-size: clamp(0.95rem, 3.5vw, 1.1rem);
        line-height: 1.6;
    }

    .section-number {
        font-size: 0.7rem;
        margin-bottom: 12px;
        letter-spacing: 0.2em;
    }

    /* ====== REMOVE ALL TEXT ROTATIONS ON MOBILE ====== */
    .split-text .char,
    .split-chars .char,
    .char,
    .line-top-left .stagger-word,
    .line-top-right .stagger-word,
    .line-bottom-left .stagger-word,
    .line-bottom-right .stagger-word,
    .stagger-word,
    .word,
    .line {
        transform: none;
        -webkit-transform: none;
    }

    /* Ensure animated text is visible and straight */
    .split-text,
    .split-chars,
    .staggered-typography {
        position: relative !important;
        inset: auto !important;
        padding: 20px !important;
        width: 100% !important;
        max-width: 100vw !important;
        text-align: center !important;
        overflow: hidden !important;
    }

    .staggered-typography .stagger-line {
        position: relative !important;
        transform: none;
        margin: 8px 0 !important;
        width: 100% !important;
    }

    .staggered-typography .stagger-word {
        font-size: clamp(1.5rem, 7vw, 2.5rem) !important;
        transform: none;
        -webkit-transform: none;
        opacity: 1;
        display: inline-block !important;
        word-wrap: break-word !important;
        max-width: 100% !important;
    }

    /* ====== HERO SECTION MOBILE - FULL VERSION ====== */
    section.hero {
        position: relative !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        height: 100vh !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .hero > .hero-bg {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
    }

    .hero > .hero-radial-container {
        position: relative !important;
        width: 100% !important;
        height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
        z-index: 2 !important;
        box-sizing: border-box !important;
    }

    /* Legacy rules - now handled by .line-horizontal */
    .hero .central-glow {
        opacity: 0.35 !important;
        display: block !important;
    }

    .hero .central-ring {
        display: block !important;
        opacity: 0.4 !important;
    }

    .hero .central-particles {
        display: flex !important;
    }

    .hero .particle-dot {
        width: 4px !important;
        height: 4px !important;
        opacity: 0.5 !important;
    }

    /* ====== LINHA HORIZONTAL MOBILE (vertical stack) ====== */
    .line-horizontal {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3rem 0.6rem !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        text-align: center !important;
    }

    .line-horizontal .stagger-word {
        font-size: clamp(1.8rem, 7vw, 2.8rem) !important;
        display: inline-block !important;
        line-height: 1.1 !important;
        margin: 0 !important;
    }

    .line-horizontal .stagger-word:nth-child(1),
    .line-horizontal .stagger-word:nth-child(2) {
        order: 1 !important;
    }

    .line-horizontal .hero-central-visual {
        order: 2 !important;
        width: clamp(140px, 36vw, 220px) !important;
        height: clamp(140px, 36vw, 220px) !important;
        margin: 0 !important;
        flex-basis: 100% !important;
    }

    .line-horizontal .stagger-word:nth-child(4),
    .line-horizontal .stagger-word:nth-child(5) {
        order: 3 !important;
    }

    .line-horizontal .hero-central-visual .central-logo {
        position: relative !important;
        transform: none !important;
        max-width: 100% !important;
    }

    /* Hero decorations mobile */
    .hero-decorations {
        width: clamp(200px, 50vw, 350px) !important;
        height: clamp(200px, 50vw, 350px) !important;
    }

    /* Radial words positioned around logo - FULL AREA for spreading */
    .hero .radial-words,
    .radial-words {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        pointer-events: none !important;
        display: block !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .hero .radial-word,
    .radial-word {
        position: absolute !important;
        font-family: var(--font-mono) !important;
        font-size: clamp(0.45rem, 0.9vw, 0.6rem) !important;
        font-weight: 700 !important;
        letter-spacing: 0.25em !important;
        text-transform: uppercase !important;
        color: var(--gray-600) !important;
        white-space: nowrap !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
        opacity: 1 !important;
        max-width: 30vw !important;
        text-align: center !important;
    }

    /* MOBILE: Posições espalhadas - 4 à DIREITA (left > 60%), 2 à ESQUERDA */
    .hero .radial-word.word-1,
    .radial-word.word-1 {
        top: 15% !important;
        left: 75% !important;
        right: auto !important;
    }

    .hero .radial-word.word-2,
    .radial-word.word-2 {
        top: 35% !important;
        left: 82% !important;
        right: auto !important;
    }

    .hero .radial-word.word-3,
    .radial-word.word-3 {
        top: 58% !important;
        left: 70% !important;
        right: auto !important;
    }

    .hero .radial-word.word-4,
    .radial-word.word-4 {
        bottom: 18% !important;
        left: 78% !important;
        right: auto !important;
        top: auto !important;
    }

    .hero .radial-word.word-5,
    .radial-word.word-5 {
        top: 25% !important;
        left: 10% !important;
        right: auto !important;
    }

    .hero .radial-word.word-6,
    .radial-word.word-6 {
        bottom: 25% !important;
        left: 12% !important;
        right: auto !important;
        top: auto !important;
    }

    /* Remove keyframe - GSAP handles all animation in mobile */

    /* Allow GSAP to control staggered typography positioning */
    .hero .staggered-typography,
    .staggered-typography {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
        z-index: 25 !important;
    }

    .hero .stagger-line,
    .stagger-line {
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .hero .stagger-word,
    .stagger-word {
        font-size: clamp(1.8rem, 8vw, 3.5rem) !important;
        display: block !important;
        color: var(--white) !important;
        line-height: 0.9 !important;
        margin: 0 !important;
        font-family: var(--font-display) !important;
        font-weight: 700 !important;
    }

    .hero .stagger-word.accent,
    .stagger-word.accent {
        font-size: clamp(2rem, 10vw, 5rem) !important;
        color: var(--emerald) !important;
        font-weight: 800 !important;
        font-style: italic !important;
    }

    /* Bottom bar positioned at bottom */
    .hero > .hero-bottom-bar,
    .hero-bottom-bar {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 30px 20px !important;
        gap: 20px !important;
        z-index: 30 !important;
    }

    .hero .bottom-bar-center,
    .bottom-bar-center {
        position: relative !important;
        left: auto !important;
        transform: none !important;
        order: 1 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .hero .hero-cta-btn,
    .hero-cta-btn {
        width: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 14px 28px !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        opacity: 1;
        min-height: 48px !important;
        border-radius: 10px !important;
        background: var(--emerald) !important;
        color: var(--black) !important;
    }

    .hero .bottom-bar-left,
    .bottom-bar-left {
        position: relative !important;
        order: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        font-size: 0.65rem !important;
    }

    .hero .bottom-bar-right,
    .bottom-bar-right {
        display: none !important;
    }

    /* ====== MARQUEE MOBILE - ESTATICA ====== */
    .marquee-section {
        padding: 25px 0 !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 60px !important;
    }

    .marquee {
        overflow: visible !important;
        display: flex !important;
        height: auto !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
    }

    .marquee-content {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px !important;
        animation: none !important;
        width: 100% !important;
    }

    .marquee-content:last-child {
        display: none !important;
    }

    .marquee-item {
        font-size: 1.1rem !important;
        padding: 8px 20px !important;
        display: inline-block !important;
        white-space: nowrap !important;
        height: auto !important;
        line-height: 1.4 !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 4px !important;
    }

    .marquee-divider {
        display: none !important;
    }

    /* Premium Marquee - SCROLL HORIZONTAL ANIMADO NO MOBILE */
    .premium-marquee-section {
        padding: 30px 0 !important;
        overflow: hidden !important;
        background: var(--gray-900) !important;
    }

    .premium-marquee {
        display: flex !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    .premium-marquee-content {
        display: flex !important;
        align-items: center !important;
        gap: 50px !important;
        animation: premiumMarquee 25s linear infinite !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding-right: 50px !important;
    }

    .premium-marquee-reverse .premium-marquee-content {
        animation-direction: reverse !important;
    }

    .pm-item {
        font-size: 1.4rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 0 20px !important;
    }

    .pm-divider {
        width: 12px !important;
        height: 12px !important;
        flex-shrink: 0 !important;
    }

    /* ====== SERVICES SECTION MOBILE ====== */
    .horizontal-section,
    .services-horizontal,
    .process-horizontal {
        height: auto !important;
        min-height: auto !important;
        position: relative !important;
    }

    /* Remover gradiente lateral no mobile */
    .horizontal-section::after {
        display: none !important;
    }

    .horizontal-wrapper {
        position: relative !important;
        height: auto !important;
        width: 100% !important;
    }

    .horizontal-content {
        display: flex;
        flex-direction: column;
        transform: none;
        width: 100% !important;
    }

    .horizontal-panel {
        width: 100% !important;
        min-width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 60px 20px;
        position: relative !important;
    }

    .panel-intro,
    .services-intro {
        min-height: auto;
        padding: 80px 20px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .panel-bg-text {
        display: none;
    }

    .panel-intro-content {
        position: relative;
        z-index: 2;
        text-align: center;
        padding: 0;
    }

    .panel-number {
        font-size: 0.7rem;
        margin-bottom: 15px;
    }

    .panel-title {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
        margin-bottom: 15px;
        white-space: normal;
        word-wrap: break-word;
    }

    .panel-desc {
        font-size: 0.95rem;
        max-width: 100%;
    }

    .panel-service {
        min-height: auto;
        padding: 60px 20px;
    }

    .service-bg-number {
        font-size: 6rem;
        opacity: 0.08;
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .service-panel-content {
        padding: 0;
        max-width: 100%;
        position: relative;
        z-index: 2;
    }

    .service-icon-large {
        width: 50px;
        height: 50px;
        margin-bottom: 16px;
    }

    .service-title-large {
        font-size: 1.5rem;
        margin-bottom: 12px;
    }

    .service-desc-large {
        font-size: 0.95rem;
        margin-bottom: 20px;
        line-height: 1.6;
    }

    .service-tags-large {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-start;
    }

    .service-tag {
        font-size: 0.65rem;
        padding: 5px 10px;
    }

    /* ====== VISION SECTION MOBILE ====== */
    .vision-section {
        min-height: auto;
        padding: 60px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .vision-radial-container {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .vision-central-visual {
        width: 150px !important;
        height: 150px !important;
        margin: 0 auto !important;
    }

    .vision-core {
        display: block !important;
    }

    .vision-ring,
    .v-ring-1, .v-ring-2, .v-ring-3, .v-ring-4 {
        display: block !important;
        opacity: 0.3 !important;
    }

    .vision-particles,
    .v-particles {
        display: flex !important;
        opacity: 0.4 !important;
    }

    .v-particle {
        width: 4px !important;
        height: 4px !important;
    }

    .vision-radial-words {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

    .vision-radial-word {
        position: absolute !important;
        font-size: 0.65rem !important;
        font-family: var(--font-mono) !important;
        font-weight: 700 !important;
        letter-spacing: 0.4em !important;
        text-transform: uppercase !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 15px;
        opacity: 1;
        background: rgba(10, 10, 10, 0.5);
    }

    .vision-staggered-typography {
        position: relative !important;
        inset: auto !important;
        padding: 0;
        width: 100%;
        text-align: center;
    }

    .vision-stagger-line {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none;
        text-align: center;
        margin: 4px 0;
    }

    .vision-stagger-word {
        font-size: clamp(1.1rem, 4.5vw, 1.6rem) !important;
        opacity: 1;
        transform: none;
    }

    .vision-stagger-word.accent,
    .vision-stagger-word.vs-accent {
        font-size: clamp(1.3rem, 5.5vw, 2rem) !important;
        color: var(--emerald);
    }

    .vision-bottom-bar {
        width: 100%;
        padding: 20px 0;
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
    }

    .vision-bar-left,
    .vision-bar-right {
        display: none;
    }

    /* ====== ABOUT SECTION MOBILE ====== */
    .about,
    .about-vertical {
        padding: 60px 0;
        min-height: auto;
    }

    .about .section-container {
        padding: 0 20px;
    }

    .about-parallax-bg {
        display: none;
    }

    .about-content {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .about-text,
    .about-visual {
        width: 100%;
    }

    .about-stats {
        flex-direction: column;
        gap: 20px;
    }

    .stat-item {
        text-align: center;
    }

    .stat-number {
        font-size: 2.5rem;
    }

    .stat-label {
        font-size: 0.7rem;
    }

    .vertical-panel {
        min-height: auto;
        padding: 60px 20px;
    }

    .about-intro-panel {
        min-height: auto;
        padding: 60px 20px;
    }

    .vertical-panel-content {
        max-width: 100%;
        padding: 0;
    }

    .panel-bg-text-vertical {
        display: none;
    }

    .about-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 20px;
    }

    .about-title {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    .about-text-large {
        font-size: 1rem;
        line-height: 1.7;
    }

    .about-highlight {
        font-size: 1.1rem;
        padding: 16px;
        margin: 24px 0;
    }

    .values-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .value-item {
        font-size: 0.85rem;
        padding: 12px 16px;
    }

    .stats-grid-vertical {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .stat-box-vertical {
        padding: 16px 12px;
    }

    .stat-number-large {
        font-size: 1.75rem;
    }

    .stat-label-vertical {
        font-size: 0.6rem;
    }

    /* ====== PROCESS SECTION MOBILE ====== */
    .process-horizontal {
        height: auto !important;
    }

    .process-horizontal .horizontal-wrapper {
        position: relative !important;
        height: auto !important;
    }

    .process-horizontal .horizontal-content {
        display: flex;
        flex-direction: column;
        transform: none;
    }

    .process-horizontal .horizontal-panel {
        width: 100% !important;
        min-width: 100% !important;
        min-height: auto;
        padding: 60px 20px;
    }

    .step-content {
        text-align: center;
    }

    .step-number {
        font-size: 4rem;
        margin-bottom: 16px;
    }

    .step-title {
        font-size: 1.5rem;
        margin-bottom: 12px;
    }

    .step-desc {
        font-size: 0.95rem;
    }

    /* ====== PREMIUM SECTIONS MOBILE ====== */

    /* Text Scramble Section */
    .text-scramble-section {
        min-height: auto;
        padding: 80px 20px;
    }

    .scramble-title {
        font-size: clamp(2rem, 10vw, 3.5rem) !important;
        opacity: 1;
        transform: none;
    }

    .scramble-subtitle {
        font-size: 0.75rem !important;
        letter-spacing: 0.15em;
        margin-bottom: 40px;
        opacity: 1;
        transform: none;
    }

    .scramble-words {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .scramble-word {
        font-size: 0.75rem !important;
        padding: 10px 20px;
        opacity: 1;
        transform: none;
    }

    /* Depth Tunnel Section */
    .depth-tunnel-section {
        min-height: auto;
        padding: 80px 15px;
        overflow: visible !important;
    }

    .tunnel-container {
        perspective: 1000px !important;
        transform-style: preserve-3d !important;
        height: auto !important;
        min-height: 60vh;
        overflow: visible !important;
        padding: 40px 0;
    }

    .tunnel-center {
        padding: 0 20px !important;
        width: 100% !important;
        overflow: visible !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .tunnel-word {
        font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
        white-space: nowrap !important;
        overflow: visible !important;
        letter-spacing: 0em !important;
        line-height: 1.3 !important;
        padding: 0 10px !important;
        text-align: center !important;
        display: inline-block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 95vw !important;
        width: auto !important;
        transform: scale(0.95) !important;
    }

    .tunnel-description {
        font-size: 0.75rem;
        max-width: 90%;
        padding: 0 20px;
        line-height: 1.5;
        margin-top: 20px;
    }

    /* Keep rings visible but limit count */
    .tunnel-ring:nth-child(n+11) {
        display: none;
    }

    .tunnel-ring {
        display: block !important;
        opacity: 0.3 !important;
    }

    .tunnel-depth-line {
        opacity: 0.15 !important;
        display: block !important;
    }

    .tunnel-particle {
        opacity: 0.4 !important;
        width: 3px !important;
        height: 3px !important;
    }

    .parallax-desc {
        font-size: 1rem;
        opacity: 1;
        transform: none;
    }

    /* Image Reveal Section */
    .image-reveal-section {
        padding: 60px 20px;
    }

    .reveal-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .reveal-item {
        aspect-ratio: 16/10;
        border-radius: 12px;
    }

    .reveal-image {
        clip-path: inset(0 0 0 0) !important;
    }

    .reveal-content {
        bottom: 20px;
        left: 20px;
        right: 20px;
    }

    .reveal-number {
        font-size: 0.65rem;
        opacity: 1;
        transform: none;
    }

    .reveal-title {
        font-size: 1.25rem;
        opacity: 1;
        transform: none;
    }

    /* Scroll Velocity Section */
    .scroll-velocity-section {
        min-height: auto;
        padding: 60px 0;
        overflow: hidden;
    }

    .velocity-row {
        animation: mobileMarquee 15s linear infinite;
        gap: 80px;
    }

    .velocity-row[data-velocity-direction="right"] {
        animation-direction: reverse;
    }

    @keyframes mobileMarquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

    .velocity-text {
        font-size: clamp(2rem, 8vw, 4rem) !important;
        transform: none;
        padding: 0 30px;
    }

    /* Dramatic Counters Section */
    .dramatic-counters-section {
        min-height: auto;
        padding: 80px 20px;
    }

    .counters-header {
        margin-bottom: 40px;
    }

    .counters-title {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }

    .dramatic-counters-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .dramatic-counter {
        padding: 24px 16px;
        border-radius: 16px;
        opacity: 1;
        transform: none;
    }

    .dramatic-number {
        font-size: 2rem;
    }

    .counter-suffix {
        font-size: 1.25rem;
    }

    .counter-label {
        font-size: 0.65rem;
        letter-spacing: 0.1em;
    }

    .counter-bar {
        height: 2px;
    }

    /* Why Section Mobile */
    .why-section {
        padding: 80px 20px;
    }

    .why-header {
        margin-bottom: 60px;
    }

    .why-label {
        opacity: 1;
        transform: none;
        font-size: 0.7rem;
        margin-bottom: 16px;
    }

    .why-title {
        font-size: clamp(2.5rem, 10vw, 4rem) !important;
    }

    .why-title-line {
        opacity: 1;
        transform: none;
    }

    .why-item {
        grid-template-columns: 80px 1fr;
        gap: 20px;
        padding: 40px 0;
        opacity: 1;
        transform: none;
    }

    .why-item-number {
        font-size: 3rem !important;
        position: relative;
        top: 0;
    }

    .why-item-title {
        font-size: 1.5rem !important;
        margin-bottom: 12px;
    }

    .why-item-desc {
        font-size: 0.95rem;
    }

    .why-item-line {
        display: none;
    }

    /* ====== CTA SECTION MOBILE ====== */
    .cta-section,
    .cta-3d-section {
        min-height: auto;
        padding: 60px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .section-transition {
        display: none;
    }

    .cta-3d-bg {
        display: block !important;
        opacity: 0.4 !important;
    }

    .cta-word {
        display: none !important;
    }

    .cta-content,
    .cta-3d-content {
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cta-title,
    .cta-3d-title {
        font-size: clamp(1.4rem, 5.5vw, 2rem);
        margin-bottom: 24px;
        line-height: 1.3;
    }

    .cta-title .word,
    .cta-3d-word {
        display: inline-block !important;
        margin: 0 3px;
    }

    .cta-buttons,
    .cta-3d-buttons {
        width: 100%;
        max-width: 280px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        opacity: 1;
        transform: none;
    }

    .cta-buttons .btn,
    .cta-3d-buttons .btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }

    /* ====== CONTACT SECTION MOBILE ====== */
    .contact {
        padding: 60px 20px;
    }

    .contact .section-container {
        padding: 0;
    }

    .contact-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .contact-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .contact-info {
        order: 2;
    }

    .contact-form-wrapper {
        order: 1;
        padding: 24px 16px;
        border-radius: 16px;
        background: var(--gray-900);
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        font-size: 0.75rem;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 16px; /* Prevents iOS zoom */
        padding: 16px 0 10px;
    }

    .contact-info-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .contact-item {
        padding: 14px;
        border-radius: 12px;
        background: var(--gray-900);
    }

    .contact-social {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
    }

    .social-link {
        width: 44px;
        height: 44px;
    }

    /* ====== FOOTER MOBILE ====== */
    .footer {
        padding: 40px 0 20px;
    }

    .footer-content {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .footer-logo-section {
        align-items: center;
    }

    .footer-logo {
        max-width: 80px;
    }

    .footer-nav {
        flex-direction: column;
        gap: 12px;
    }

    .footer-contact {
        text-align: center;
    }

    .footer-marquee {
        padding: 20px 0;
        margin: 30px 0;
    }

    .footer-marquee-text {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }

    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        padding-top: 20px;
        padding-bottom: 80px;
        align-items: center;
        text-align: center;
    }

    /* ====== SCROLL PROGRESS MOBILE ====== */
    .scroll-progress-container {
        height: 2px;
    }

    /* ====== BUTTONS MOBILE ====== */
    .btn {
        padding: 14px 24px;
        font-size: 0.85rem;
        min-height: 48px;
        min-width: 48px;
    }

    .btn-large {
        padding: 16px 28px;
        min-height: 52px;
    }

    /* ====== TOUCH TARGETS OPTIMIZATION ====== */
    a, button, .clickable, .magnetic {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .nav-link {
        padding: 12px 16px;
        min-height: 48px;
    }

    .mobile-link {
        padding: 16px 20px;
        min-height: 52px;
        font-size: 0.95rem;
        border-radius: 10px;
    }

    .footer-social-link {
        min-width: 48px;
        min-height: 48px;
    }

    /* ====== NAVIGATION MOBILE OPTIMIZATION ====== */
    .nav {
        padding: 16px 20px;
        backdrop-filter: blur(16px);
    }

    .nav-logo {
        height: 32px;
    }

    .mobile-menu {
        bottom: 84px;
        right: 20px;
        width: min(280px, calc(100vw - 40px));
        max-height: 70vh;
        overflow-y: auto;
        padding: 16px;
    }

    .mobile-menu-btn {
        min-width: 48px;
        min-height: 48px;
        padding: 12px;
    }

    /* ====== FORMS MOBILE OPTIMIZATION ====== */
    input, textarea, select {
        font-size: 16px !important;
        min-height: 48px;
        padding: 12px 16px;
    }

    textarea {
        min-height: 120px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    /* ====== WILL-CHANGE FOR ANIMATED ELEMENTS ====== */
    .central-logo,
    .central-glow,
    .central-ring,
    .particle-dot,
    .radial-word,
    .stagger-word,
    .char,
    .tunnel-ring,
    .vision-ring,
    .v-particle,
    .tunnel-particle,
    .cta-3d-word {
        will-change: transform, opacity;
    }

    /* ====== PERFORMANCE OPTIMIZATION ====== */
    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    img {
        content-visibility: auto;
    }

    section {
        content-visibility: auto;
        contain-intrinsic-size: 0 500px;
    }

    /* ====== SCROLL BEHAVIOR MOBILE ====== */
    html {
        scroll-padding-top: 80px;
    }

    body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    /* ====== SAFE AREA INSETS ====== */
    .nav, .footer, .mobile-menu {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }

    .hero {
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* ====== TEXT SELECTION ====== */
    ::selection {
        background: rgba(16, 185, 129, 0.3);
        color: var(--white);
    }

    /* ====== TRANSITIONS MOBILE ====== */
    .section-transition {
        height: 40px;
    }

    .transition-line {
        width: 60px;
    }

    /* ====== IMPROVED SPACING ====== */
    section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .section-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* ====== FORCE SHOW ALL SECTIONS ====== */
    section, .horizontal-panel, .panel-service, .panel-intro {
        opacity: 1;
        visibility: visible !important;
    }

    /* ====== SIMPLIFY MARQUEE - ESTATICA MOBILE ====== */
    .marquee-section {
        padding: 25px 0 !important;
        height: auto !important;
    }

    .premium-marquee-section {
        padding: 30px 0 !important;
        overflow: hidden !important;
    }

    .marquee {
        height: auto !important;
        display: flex !important;
        justify-content: center !important;
        gap: 15px !important;
    }

    .premium-marquee {
        display: flex !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    .marquee-content {
        animation: none !important;
        display: flex !important;
        gap: 15px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .premium-marquee-content {
        display: flex !important;
        align-items: center !important;
        gap: 50px !important;
        animation: premiumMarquee 25s linear infinite !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .premium-marquee-reverse .premium-marquee-content {
        animation-direction: reverse !important;
    }

    .marquee-content:last-child {
        display: none !important;
    }

    .marquee-item {
        height: auto !important;
        line-height: 1.4 !important;
        display: inline-block !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 4px !important;
    }

    .marquee-divider {
        display: none !important;
    }
}

/* Extra small devices - 480px and below */
@media (max-width: 480px) {
    :root {
        --container-padding: 16px;
        --section-padding: 50px;
    }

    .hero {
        padding: 80px 16px 30px;
    }

    .stagger-word {
        font-size: clamp(1.2rem, 5.5vw, 1.8rem) !important;
    }

    .stagger-word.accent {
        font-size: clamp(1.4rem, 6.5vw, 2.2rem) !important;
    }

    .hero-central-visual {
        width: 200px;
        height: 200px;
    }

    .central-logo {
        max-width: 360px;
    }

    .radial-words {
        max-width: 280px;
    }

    .radial-word {
        font-size: 0.55rem;
        padding: 4px 8px;
    }

    .dramatic-counters-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid-vertical {
        grid-template-columns: 1fr;
    }

    .service-bg-number {
        font-size: 4rem;
    }

    .step-number {
        font-size: 2.5rem;
    }

    .cta-title,
    .cta-3d-title {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
    }

    .contact-form-wrapper {
        padding: 20px 14px;
    }

    .scramble-title {
        font-size: clamp(1.5rem, 8vw, 2.5rem) !important;
    }

    .stagger-section-title {
        font-size: clamp(1.4rem, 5vw, 2rem) !important;
    }

    /* Premium Marquee - mobile pequeno */
    .premium-marquee-section {
        padding: 25px 0 !important;
    }

    .premium-marquee-content {
        gap: 40px !important;
    }

    .pm-item {
        font-size: 1.2rem !important;
        padding: 0 15px !important;
    }

    .pm-divider {
        width: 10px !important;
        height: 10px !important;
    }
}

/* Landscape phones */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 60px 0;
    }

    .hero-central-visual {
        width: 200px;
        height: 200px;
    }

    .vision-section {
        min-height: auto;
    }
}

/* ============================================
   LARGE SCREENS (Mac, Desktop)
   ============================================ */
@media (min-width: 1440px) {
    .text-scramble-section {
        padding: 100px 60px;
    }

    .scramble-content {
        max-width: 1600px;
        padding: 0 80px;
    }

    .scramble-content .section-number {
        font-size: 0.85rem;
        letter-spacing: 0.35em;
        margin-bottom: 30px;
    }

    .scramble-title {
        font-size: clamp(6rem, 10vw, 9rem);
        letter-spacing: -0.02em;
        margin-bottom: 40px;
    }

    .scramble-subtitle {
        font-size: 1rem;
        letter-spacing: 0.4em;
        margin-bottom: 80px;
        max-width: 1000px;
    }

    .scramble-words {
        gap: 40px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .scramble-word {
        font-size: 1.1rem;
        padding: 18px 36px;
    }
}

/* Extra Large Screens (iMac, Large Displays) */
@media (min-width: 1920px) {
    .scramble-title {
        font-size: 8.5rem;
        max-width: 100%;
    }

    .scramble-subtitle {
        font-size: 1.05rem;
        max-width: 1200px;
    }
}

/* ============================================
   PAGE TRANSITIONS - Premium Effect
   ============================================ */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-transition-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scaleY(0);
    transform-origin: bottom;
}

.page-transition-layer.layer-1 {
    background: var(--gray-900);
    z-index: 1;
}

.page-transition-layer.layer-2 {
    background: var(--gray-800);
    z-index: 2;
}

.page-transition-layer.layer-3 {
    background: var(--black);
    z-index: 3;
}

.page-transition-logo {
    position: relative;
    z-index: 4;
    opacity: 0;
    transform: scale(0.8);
}

.transition-logo-img {
    width: clamp(100px, 20vw, 200px);
    height: auto;
    filter: brightness(0) invert(1);
}

/* Page transition active state */
.page-transition.active {
    pointer-events: auto;
}

.page-transition.active .page-transition-layer {
    transform: scaleY(1);
}

.page-transition.active .page-transition-logo {
    opacity: 1;
    transform: scale(1);
}

/* ============================================
   3D CARD TILT EFFECT
   ============================================ */
.tilt-card {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.1s ease-out;
}

.tilt-card-inner {
    transform-style: preserve-3d;
    transition: transform 0.3s ease-out;
}

.tilt-card:hover .tilt-card-inner {
    transform: translateZ(20px);
}

.tilt-card .tilt-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 50%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: inherit;
}

.tilt-card:hover .tilt-shine {
    opacity: 1;
}

/* ============================================
   TEXT REVEAL WITH MASK
   ============================================ */
.text-reveal {
    overflow: hidden;
    display: inline-block;
}

.text-reveal-inner {
    display: inline-block;
    transform: translateY(100%);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.text-reveal.revealed .text-reveal-inner {
    transform: translateY(0);
}

/* Clip path reveal */
.clip-reveal {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.clip-reveal.revealed {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* ============================================
   HOVER GLOW EFFECT
   ============================================ */
.hover-glow {
    position: relative;
    overflow: hidden;
}

.hover-glow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, var(--emerald-glow) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
    pointer-events: none;
    z-index: -1;
}

.hover-glow:hover::before {
    width: 300%;
    height: 300%;
}

/* ============================================
   ENHANCED BUTTON EFFECTS
   ============================================ */
.btn-premium {
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--ease-out-expo);
}

.btn-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.5s ease;
}

.btn-premium:hover::before {
    left: 100%;
}

.btn-premium::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, var(--emerald), var(--emerald-dark));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-premium:hover::after {
    opacity: 1;
}

/* ============================================
   FLOATING ANIMATION
   ============================================ */
.float-animation {
    animation: floatUpDown 3s ease-in-out infinite;
}

@keyframes floatUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.float-animation-delayed {
    animation: floatUpDown 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

/* ============================================
   PULSE ANIMATION
   ============================================ */
.pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--emerald-glow);
    }
    50% {
        box-shadow: 0 0 20px 10px var(--emerald-glow);
    }
}

/* ============================================
   STAGGER FADE IN
   ============================================ */
.stagger-fade-in > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.stagger-fade-in.active > *:nth-child(1) { transition-delay: 0s; }
.stagger-fade-in.active > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-fade-in.active > *:nth-child(3) { transition-delay: 0.2s; }
.stagger-fade-in.active > *:nth-child(4) { transition-delay: 0.3s; }
.stagger-fade-in.active > *:nth-child(5) { transition-delay: 0.4s; }
.stagger-fade-in.active > *:nth-child(6) { transition-delay: 0.5s; }

.stagger-fade-in.active > * {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   CURSOR HOVER STATES - Enhanced
   ============================================ */
body:has(.tilt-card:hover) .cursor-dot {
    width: 12px;
    height: 12px;
    mix-blend-mode: normal;
}

body:has(.tilt-card:hover) .cursor-ring {
    width: 60px;
    height: 60px;
    border-color: var(--emerald);
    opacity: 0.8;
}

body:has(a:hover) .cursor-dot,
body:has(button:hover) .cursor-dot {
    transform: translate(-50%, -50%) scale(1.5);
}

/* ============================================
   RESPONSIVE - Mobile disable heavy effects
   ============================================ */
@media (max-width: 768px) {
    .page-transition {
        display: none;
    }

    .tilt-card {
        transform: none;
    }

    .tilt-card-inner {
        transform: none;
    }

    .float-animation,
    .float-animation-delayed {
        animation: none;
    }

    .pulse-glow {
        animation: none;
    }

    .light-trail,
    .light-trail-v,
    .light-trail-f,
    .light-trail-t,
    .light-trail-b,
    .light-trail-c,
    .light-trail-g,
    .light-trail-s,
    .light-trail-bt {
        animation: none !important;
        opacity: 0 !important;
        display: none !important;
    }

    .light-trails,
    .light-trails-vertical,
    .light-trails-footer,
    .light-trails-transition,
    .light-trails-black,
    .light-trails-cta,
    .light-trails-grid,
    .light-trails-scramble,
    .light-trails-black-trans {
        display: none !important;
    }
}

/* ============================================
   LIGHT TRAILS ANIMATIONS
   ============================================ */

/* Light Trails Container - Vision Section */
.light-trails {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.light-trail {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 0.8) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    filter: blur(1px);
    opacity: 0;
}

.trail-1 {
    width: 300px;
    top: 20%;
    left: -300px;
    animation: lightTrailHorizontal 8s ease-in-out infinite;
    animation-delay: 0s;
}

.trail-2 {
    width: 400px;
    top: 50%;
    left: -400px;
    animation: lightTrailHorizontal 10s ease-in-out infinite;
    animation-delay: 2s;
}

.trail-3 {
    width: 250px;
    top: 70%;
    left: -250px;
    animation: lightTrailHorizontal 9s ease-in-out infinite;
    animation-delay: 4s;
}

.trail-4 {
    width: 350px;
    top: 35%;
    left: -350px;
    animation: lightTrailDiagonal 12s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes lightTrailHorizontal {
    0% {
        left: -300px;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes lightTrailDiagonal {
    0% {
        left: -350px;
        top: 35%;
        opacity: 0;
        transform: rotate(-5deg);
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        left: 100%;
        top: 65%;
        opacity: 0;
        transform: rotate(-5deg);
    }
}

/* Light Trails Vertical - About Section */
.light-trails-vertical {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.light-trail-v {
    position: absolute;
    width: 2px;
    height: 400px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 0.8) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    filter: blur(1px);
    opacity: 0;
}

.trail-v-1 {
    left: 15%;
    top: -400px;
    animation: lightTrailVertical 10s ease-in-out infinite;
    animation-delay: 0s;
}

.trail-v-2 {
    left: 50%;
    top: -400px;
    animation: lightTrailVertical 12s ease-in-out infinite;
    animation-delay: 3s;
}

.trail-v-3 {
    left: 85%;
    top: -400px;
    animation: lightTrailVertical 11s ease-in-out infinite;
    animation-delay: 6s;
}

@keyframes lightTrailVertical {
    0% {
        top: -400px;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

/* Light Trails Footer */
.light-trails-footer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.light-trail-f {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 0.5) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    filter: blur(1px);
    opacity: 0;
}

.trail-f-1 {
    width: 200px;
    top: 30%;
    left: -200px;
    animation: lightTrailHorizontal 15s ease-in-out infinite;
    animation-delay: 0s;
}

.trail-f-2 {
    width: 250px;
    top: 70%;
    left: -250px;
    animation: lightTrailHorizontal 18s ease-in-out infinite;
    animation-delay: 7s;
}

/* Light Trails Transition */
.light-trails-transition {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.light-trail-t {
    position: absolute;
    width: 6px;
    height: 350px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0.3) 10%,
        rgba(16, 185, 129, 1) 50%,
        rgba(16, 185, 129, 0.3) 90%,
        transparent 100%);
    filter: blur(0.5px);
    opacity: 0;
    box-shadow:
        0 0 25px rgba(16, 185, 129, 1),
        0 0 50px rgba(16, 185, 129, 0.8),
        0 0 75px rgba(16, 185, 129, 0.5);
}

.trail-t-1 {
    left: 25%;
    top: -300px;
    animation: lightTrailVerticalFast 6s ease-in-out infinite;
    animation-delay: 0s;
}

.trail-t-2 {
    left: 50%;
    top: -300px;
    animation: lightTrailVerticalFast 7s ease-in-out infinite;
    animation-delay: 1.5s;
}

.trail-t-3 {
    left: 75%;
    top: -300px;
    animation: lightTrailVerticalTransition 6.5s ease-in-out infinite;
    animation-delay: 3s;
}

@keyframes lightTrailVerticalTransition {
    0% {
        top: -300px;
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

/* Light Trails in Black Panels */
.light-trails-black {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.light-trail-b {
    position: absolute;
    background: linear-gradient(135deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 0.6) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    filter: blur(2px);
    opacity: 0;
}

.trail-b-1 {
    width: 500px;
    height: 2px;
    top: 25%;
    left: -500px;
    animation: lightTrailBlackHorizontal 14s ease-in-out infinite;
    animation-delay: 0s;
}

.trail-b-2 {
    width: 2px;
    height: 600px;
    left: 30%;
    top: -600px;
    animation: lightTrailBlackVertical 16s ease-in-out infinite;
    animation-delay: 5s;
}

.trail-b-3 {
    width: 450px;
    height: 2px;
    top: 75%;
    left: -450px;
    animation: lightTrailBlackDiagonal 15s ease-in-out infinite;
    animation-delay: 8s;
}

@keyframes lightTrailBlackHorizontal {
    0% {
        left: -500px;
        opacity: 0;
    }
    15% {
        opacity: 0.8;
    }
    85% {
        opacity: 0.8;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes lightTrailBlackVertical {
    0% {
        top: -600px;
        opacity: 0;
    }
    15% {
        opacity: 0.8;
    }
    85% {
        opacity: 0.8;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

@keyframes lightTrailBlackDiagonal {
    0% {
        left: -450px;
        top: 75%;
        opacity: 0;
        transform: rotate(15deg);
    }
    15% {
        opacity: 0.8;
    }
    85% {
        opacity: 0.8;
    }
    100% {
        left: 100%;
        top: 25%;
        opacity: 0;
        transform: rotate(15deg);
    }
}

/* Light Trails VERTICAIS - Black Panel após Automações */
.light-trails-black-vertical {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

.light-trail-bv {
    position: absolute;
    filter: blur(0.5px);
    opacity: 1;
    box-shadow: 0 0 20px rgba(16, 185, 129, 1), 0 0 40px rgba(16, 185, 129, 0.8);
}

.trail-bv-1 {
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 1) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    left: 10%;
    top: -100%;
    animation: lightTrailVerticalFast 4s ease-in-out infinite;
    animation-delay: 0s;
}

.trail-bv-2 {
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 0.9) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    left: 25%;
    top: -100%;
    animation: lightTrailVerticalFast 5s ease-in-out infinite;
    animation-delay: 0.5s;
}

.trail-bv-3 {
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 1) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    left: 40%;
    top: -100%;
    animation: lightTrailVerticalFast 4.5s ease-in-out infinite;
    animation-delay: 1s;
}

.trail-bv-4 {
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 0.9) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    left: 55%;
    top: -100%;
    animation: lightTrailVerticalFast 5.5s ease-in-out infinite;
    animation-delay: 1.5s;
}

.trail-bv-5 {
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 1) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    left: 70%;
    top: -100%;
    animation: lightTrailVerticalFast 4s ease-in-out infinite;
    animation-delay: 2s;
}

.trail-bv-6 {
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 0.9) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    left: 85%;
    top: -100%;
    animation: lightTrailVerticalFast 5s ease-in-out infinite;
    animation-delay: 2.5s;
}

.trail-bv-7 {
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 1) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    left: 50%;
    top: -100%;
    animation: lightTrailVerticalFast 4.5s ease-in-out infinite;
    animation-delay: 3s;
}

@keyframes lightTrailVerticalFast {
    0% {
        top: -100%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

/* Light Trails CTA Section */
.light-trails-cta {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.light-trail-c {
    position: absolute;
    filter: blur(2px);
    opacity: 0;
}

.trail-c-1 {
    width: 600px;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 1) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    top: 15%;
    left: -600px;
    animation: lightTrailCtaHorizontal 10s ease-in-out infinite;
    animation-delay: 0s;
}

.trail-c-2 {
    width: 3px;
    height: 500px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 0.9) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    left: 20%;
    top: -500px;
    animation: lightTrailCtaVertical 11s ease-in-out infinite;
    animation-delay: 2s;
}

.trail-c-3 {
    width: 550px;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 1) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    top: 50%;
    left: -550px;
    animation: lightTrailCtaHorizontal 13s ease-in-out infinite;
    animation-delay: 4s;
}

.trail-c-4 {
    width: 3px;
    height: 450px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 0.9) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    left: 80%;
    top: -450px;
    animation: lightTrailCtaVertical 12s ease-in-out infinite;
    animation-delay: 6s;
}

.trail-c-5 {
    width: 500px;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 1) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    top: 85%;
    left: -500px;
    animation: lightTrailCtaDiagonal 14s ease-in-out infinite;
    animation-delay: 3s;
}

/* Light Trails Scramble Section */
.light-trails-scramble {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.light-trail-s {
    position: absolute;
    filter: blur(2px);
    opacity: 0;
}

.trail-s-1 {
    width: 500px;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 0.9) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    top: 20%;
    left: -500px;
    animation: lightTrailCtaHorizontal 11s ease-in-out infinite;
    animation-delay: 0s;
}

.trail-s-2 {
    width: 3px;
    height: 450px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 0.85) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    left: 30%;
    top: -450px;
    animation: lightTrailCtaVertical 13s ease-in-out infinite;
    animation-delay: 3s;
}

.trail-s-3 {
    width: 600px;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 1) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    top: 70%;
    left: -600px;
    animation: lightTrailCtaHorizontal 12s ease-in-out infinite;
    animation-delay: 5s;
}

.trail-s-4 {
    width: 3px;
    height: 500px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 0.9) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    left: 75%;
    top: -500px;
    animation: lightTrailCtaVertical 14s ease-in-out infinite;
    animation-delay: 7s;
}

/* Light Trails Black Transition Panel */
.light-trails-black-trans {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.light-trail-bt {
    position: absolute;
    filter: blur(2px);
    opacity: 0;
}

.trail-bt-1 {
    width: 700px;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 1) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    top: 15%;
    left: -700px;
    animation: lightTrailCtaHorizontal 9s ease-in-out infinite;
    animation-delay: 0s;
}

.trail-bt-2 {
    width: 3px;
    height: 600px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 0.95) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    left: 25%;
    top: -600px;
    animation: lightTrailCtaVertical 10s ease-in-out infinite;
    animation-delay: 1.5s;
}

.trail-bt-3 {
    width: 650px;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 1) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    top: 50%;
    left: -650px;
    animation: lightTrailCtaHorizontal 11s ease-in-out infinite;
    animation-delay: 3s;
}

.trail-bt-4 {
    width: 3px;
    height: 550px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 0.9) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    left: 70%;
    top: -550px;
    animation: lightTrailCtaVertical 12s ease-in-out infinite;
    animation-delay: 5s;
}

.trail-bt-5 {
    width: 600px;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 1) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    top: 85%;
    left: -600px;
    animation: lightTrailCtaDiagonal 13s ease-in-out infinite;
    animation-delay: 2.5s;
}

@keyframes lightTrailCtaHorizontal {
    0% {
        left: -600px;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes lightTrailCtaVertical {
    0% {
        top: -500px;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

@keyframes lightTrailCtaDiagonal {
    0% {
        left: -500px;
        top: 85%;
        opacity: 0;
        transform: rotate(-10deg);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: 100%;
        top: 15%;
        opacity: 0;
        transform: rotate(-10deg);
    }
}

/* Light Trails Grid Section */
.light-trails-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.light-trail-g {
    position: absolute;
    filter: blur(1.5px);
    opacity: 0;
}

.trail-g-1 {
    width: 400px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 0.7) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    top: 30%;
    left: -400px;
    animation: lightTrailGridHorizontal 16s ease-in-out infinite;
    animation-delay: 0s;
}

.trail-g-2 {
    width: 2px;
    height: 500px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 0.7) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    left: 60%;
    top: -500px;
    animation: lightTrailGridVertical 14s ease-in-out infinite;
    animation-delay: 5s;
}

.trail-g-3 {
    width: 450px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(16, 185, 129, 0) 0%,
        rgba(16, 185, 129, 0.7) 50%,
        rgba(16, 185, 129, 0) 100%,
        transparent 100%);
    top: 70%;
    left: -450px;
    animation: lightTrailGridDiagonal 17s ease-in-out infinite;
    animation-delay: 8s;
}

@keyframes lightTrailGridHorizontal {
    0% {
        left: -400px;
        opacity: 0;
    }
    15% {
        opacity: 0.7;
    }
    85% {
        opacity: 0.7;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes lightTrailGridVertical {
    0% {
        top: -500px;
        opacity: 0;
    }
    15% {
        opacity: 0.7;
    }
    85% {
        opacity: 0.7;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

@keyframes lightTrailGridDiagonal {
    0% {
        left: -450px;
        top: 70%;
        opacity: 0;
        transform: rotate(8deg);
    }
    15% {
        opacity: 0.7;
    }
    85% {
        opacity: 0.7;
    }
    100% {
        left: 100%;
        top: 30%;
        opacity: 0;
        transform: rotate(8deg);
    }
}

/* ============================================
   AUTOMAÇÕES SECTION - CENTERED TEXT
   ============================================ */
.panel-service.panel-service-last {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.panel-service.panel-service-last .service-panel-content {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 700px !important;
}

.panel-service.panel-service-last .service-panel-content > * {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.panel-service.panel-service-last .service-number-small {
    text-align: center !important;
    width: 100% !important;
}

.panel-service.panel-service-last .service-icon-large {
    margin: 0 auto 24px auto !important;
    display: flex !important;
    justify-content: center !important;
    align-self: center !important;
}

.panel-service.panel-service-last .service-title-large {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    align-self: center !important;
    font-size: clamp(2.5rem, 7vw, 5rem) !important;
    word-wrap: break-word;
    hyphens: auto;
}

.panel-service.panel-service-last .service-desc-large {
    text-align: center !important;
    width: 100% !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    align-self: center !important;
}

.panel-service.panel-service-last .service-tags-large {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    align-self: center !important;
}

.panel-service.panel-service-last .tag-large {
    text-align: center !important;
}

/* Mobile override for Automações */
@media (max-width: 768px) {
    .panel-service.panel-service-last {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 60px 20px !important;
    }

    .panel-service.panel-service-last .service-panel-content {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .panel-service.panel-service-last .service-tags-large {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    /* Fix vignette and zoom issues on mobile */
    .depth-vignette {
        display: none !important;
    }

    /* Ensure proper sizing on mobile */
    html {
        font-size: 16px !important;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        min-width: 100vw;
        max-width: 100vw;
        overflow-x: hidden !important;
        cursor: auto !important;
    }

    /* Fix cursor on mobile */
    .cursor-follower,
    .cursor-dot,
    .cursor-ring {
        display: none !important;
    }

    /* Ensure sections don't cause horizontal scroll */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative !important;
    }

    .hero,
    .horizontal-section,
    .vertical-section,
    .premium-section,
    section {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
    }

    /* Fix for any escaped elements */
    * {
        max-width: 100vw;
    }

    /* Fix marquee overflow */
    .marquee-section {
        overflow: visible !important;
        max-width: 100vw !important;
    }

    .premium-marquee-section {
        overflow: hidden !important;
        max-width: 100vw !important;
    }

    /* Fix bottom bar overflow */
    .hero-bottom-bar,
    .vision-bottom-bar {
        position: relative !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 15px 20px !important;
        flex-direction: column !important;
        gap: 15px !important;
        overflow: hidden !important;
    }

    .bottom-bar-left,
    .bottom-bar-center,
    .bottom-bar-right,
    .vision-bar-left,
    .vision-bar-center,
    .vision-bar-right {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .hero-cta-btn,
    .vision-cta-btn {
        width: 100% !important;
        max-width: 280px !important;
        justify-content: center !important;
    }

    /* Fix CTA section text */
    .cta-title {
        font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
        line-height: 1.2 !important;
        text-align: center !important;
        word-wrap: break-word !important;
        max-width: 100% !important;
    }

    /* Fix footer overflow */
    .footer {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .footer-container {
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    /* Fix container padding */
    .section-container {
        padding-left: clamp(20px, 5vw, 40px) !important;
        padding-right: clamp(20px, 5vw, 40px) !important;
    }

    /* ====== BALANCED MOBILE OPTIMIZATION ====== */

    /* Marquee estatica no mobile */
    .marquee-content {
        animation: none !important;
        display: flex !important;
        height: auto !important;
        line-height: 1.4 !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
    }

    /* Premium marquee - SCROLL HORIZONTAL ANIMADO */
    .premium-marquee-content {
        display: flex !important;
        align-items: center !important;
        gap: 50px !important;
        animation: premiumMarquee 25s linear infinite !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        flex-wrap: nowrap !important;
    }

    .premium-marquee-reverse .premium-marquee-content {
        animation-direction: reverse !important;
    }

    .marquee-item,
    .marquee-divider {
        display: inline-block !important;
        height: auto !important;
        line-height: 1.4 !important;
    }

    .marquee-divider {
        display: none !important;
    }

    .pm-item {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .pm-divider {
        flex-shrink: 0 !important;
    }

    /* ====== DEPTH/TUNNEL SECTION - MOBILE FIX ====== */
    .depth-tunnel-section.premium-section {
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .depth-tunnel-section {
        min-height: 70vh !important;
        height: auto !important;
        padding: 60px 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #000 !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .tunnel-container {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        perspective: none !important;
        transform: none !important;
        transform-style: flat !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 30px 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Show tunnel rings on mobile with reduced opacity */
    .tunnel-rings,
    .tunnel-ring {
        display: block !important;
        opacity: 0.25 !important;
        visibility: visible !important;
    }

    .tunnel-ring {
        border-width: 1px !important;
    }

    .tunnel-bg-gradient {
        display: block !important;
        opacity: 0.4 !important;
        visibility: visible !important;
    }

    .tunnel-particles-container,
    .tunnel-particle {
        display: flex !important;
        opacity: 0.3 !important;
        visibility: visible !important;
    }

    .tunnel-particle {
        width: 2px !important;
        height: 2px !important;
    }

    .tunnel-lines-container,
    .tunnel-depth-line {
        display: block !important;
        opacity: 0.1 !important;
        visibility: visible !important;
    }

    /* Center content - make it the focus */
    .tunnel-center {
        position: relative !important;
        z-index: 10 !important;
        text-align: center !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        display: block !important;
    }

    .tunnel-center-glow {
        display: none !important;
    }

    .tunnel-word {
        font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
        margin-bottom: 20px !important;
        opacity: 1 !important;
        transform: scale(0.95) !important;
        visibility: visible !important;
        display: inline-block !important;
        white-space: nowrap !important;
        overflow: visible !important;
        letter-spacing: 0em !important;
        line-height: 1.3 !important;
        padding: 0 10px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        color: var(--white) !important;
        text-align: center !important;
        max-width: 95vw !important;
        width: auto !important;
    }

    .tunnel-center .section-number {
        font-size: 0.875rem !important;
        margin-bottom: 15px !important;
        display: block !important;
        opacity: 0.6 !important;
        color: var(--emerald) !important;
    }

    .tunnel-description {
        font-size: clamp(0.95rem, 4vw, 1.1rem) !important;
        line-height: 1.6 !important;
        max-width: 100% !important;
        margin: 20px auto 0 !important;
        opacity: 1;
        transform: none;
        visibility: visible !important;
        display: block !important;
        color: var(--gray-300) !important;
        font-family: var(--font-body) !important;
        text-align: center !important;
        padding: 0 20px !important;
    }

    .tunnel-center .section-number {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }

    /* Split chars - garantir que o texto apareça completo */
    .depth-tunnel-section .split-chars {
        overflow: visible !important;
        max-width: 95vw !important;
        width: auto !important;
        display: inline-block !important;
        white-space: nowrap !important;
        margin: 0 auto !important;
    }

    .depth-tunnel-section .split-chars .char,
    .tunnel-word .char {
        display: inline !important;
        opacity: 1 !important;
        transform: none !important;
        overflow: visible !important;
        white-space: nowrap !important;
        font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
    }

    /* Garantir que h2.tunnel-word esteja centrado */
    .depth-tunnel-section h2.tunnel-word,
    h2.tunnel-word.split-chars {
        font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
        max-width: 95vw !important;
        width: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        white-space: nowrap !important;
        padding: 0 10px !important;
        transform: scale(0.95) !important;
        letter-spacing: 0em !important;
    }

    /* Ensure proper spacing around tunnel section */
    .depth-tunnel-section + section,
    .depth-tunnel-section + .premium-section {
        margin-top: 0 !important;
    }

    /* Para telas pequenas (smartphones comuns) */
    @media (max-width: 400px) {
        .tunnel-word,
        h2.tunnel-word,
        .depth-tunnel-section h2.tunnel-word {
            font-size: 1rem !important;
            padding: 0 15px !important;
            transform: none !important;
            letter-spacing: -0.05em !important;
        }
    }

    /* Para telas muito pequenas */
    @media (max-width: 360px) {
        .tunnel-word,
        h2.tunnel-word,
        .depth-tunnel-section h2.tunnel-word {
            font-size: 0.9rem !important;
            padding: 0 15px !important;
            letter-spacing: -0.07em !important;
        }
    }

    /* REGRA FINAL - PALAVRA COMPLETA E CENTRADA */
    .depth-tunnel-section .tunnel-word,
    .depth-tunnel-section h2.tunnel-word,
    .depth-tunnel-section .split-chars,
    section.depth-tunnel-section h2 {
        font-size: 1.2rem !important;
        max-width: 100% !important;
        overflow: visible !important;
        white-space: nowrap !important;
        transform: none !important;
        letter-spacing: -0.05em !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
        display: block !important;
        text-align: center !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Caracteres individuais também pequenos */
    .depth-tunnel-section .split-chars .char,
    .depth-tunnel-section .tunnel-word .char {
        font-size: inherit !important;
        display: inline !important;
        transform: none !important;
    }
}