/*==================================================
  QERN
  STYLE.CSS - PARTE 1
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/*=========================
        RESET
=========================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Inter",sans-serif;

    background:#0B0614;

    color:white;

    overflow-x:hidden;

}

img{
    display:block;
    width:100%;
}

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

button{
    font-family:inherit;
}

/*=========================
      VARIÁVEIS
=========================*/

:root{

    --primary:#8B5CF6;
    --primary-dark:#7C3AED;

    --text:#FFFFFF;

    --text-light:#B8B3C9;

    --white:#181028;

    --border:rgba(255,255,255,.08);

    --shadow:0 20px 60px rgba(139,92,246,.25);

}

/*=========================
       CONTAINER
=========================*/

.container{

    width:min(1180px,90%);

    margin:auto;

}

/*=========================
       BACKGROUND
=========================*/

body::before{

    content:"";

    position:fixed;

    width:700px;

    height:700px;

    background:radial-gradient(circle,
    rgba(109,40,217,.15),
    transparent 70%);

    top:-250px;

    right:-250px;

    z-index:-1;

    animation:floatGlow 12s ease-in-out infinite;

}

body::after{

    content:"";

    position:fixed;

    width:500px;

    height:500px;

    background:radial-gradient(circle,
    rgba(167,139,250,.12),
    transparent 70%);

    bottom:-200px;

    left:-150px;

    z-index:-1;

    animation:floatGlow 16s ease-in-out infinite alternate;

}

@keyframes floatGlow{

0%{

transform:translateY(0px)
translateX(0px);

}

50%{

transform:translateY(40px)
translateX(20px);

}

100%{

transform:translateY(0px)
translateX(0px);

}

}

/*=========================
        HEADER
=========================*/

header{

    background:rgba(11,6,20,.75);

    backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(255,255,255,.05);

}

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:82px;

}

.logo{

    font-size:30px;

    font-weight:800;

    letter-spacing:-1px;

    color:var(--primary);

}

nav{

    display:flex;

    gap:45px;

}

nav a{

    font-size:15px;

    font-weight:500;

    transition:.3s;

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

}

nav a:hover{

    color:var(--primary);

}

nav a:hover::after{

    width:100%;

}

/*=========================
       CTA
=========================*/

.cta{

    padding:14px 28px;

    border-radius:50px;

    background:var(--primary);

    color:white;

    font-weight:600;

    transition:.35s;

    box-shadow:var(--shadow);

}

.cta:hover{

    transform:translateY(-3px);

    background:var(--primary-dark);

}

/*=========================
         HERO
=========================*/

.hero{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:center;

}

.hero .container{

    position:relative;

    z-index:2;

}

.tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:50px;

    background:rgba(109,40,217,.08);

    color:var(--primary);

    font-weight:600;

    margin-bottom:35px;

}

.hero h1{

    font-size:clamp(54px,7vw,90px);

    line-height:1;

    font-weight:800;

    letter-spacing:-3px;

}

.hero p{

    margin-top:35px;

    font-size:22px;

    line-height:1.8;

    color:var(--text-light);

    max-width:620px;

}

.buttons{

    display:flex;

    gap:18px;

    margin-top:50px;

}

.primary{

    background:var(--primary);

    color:white;

    padding:18px 34px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

    box-shadow:var(--shadow);

}

.primary:hover{

    transform:translateY(-4px);

    background:var(--primary-dark);

}

.secondary{

    color:#fff;

    background:transparent;

    border:1px solid var(--border);

    padding:18px 34px;

    border-radius:50px;

    transition:.35s;

    font-weight:600;

}

.secondary:hover{

    border-color:var(--primary);

    color:var(--primary);

    transform:translateY(-4px);

}

.highlight{

    color:#A78BFA;

    text-shadow:

        0 0 18px rgba(139,92,246,.45),
        0 0 45px rgba(139,92,246,.18);

}

/*=========================
    HERO ANIMATION
=========================*/

.hero>*{

    animation:fadeUp 1.2s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================
      SECTIONS
=========================*/

section{

    padding:140px 0;

}

/*=========================
      RESPONSIVO
=========================*/

@media(max-width:900px){

nav{

display:none;

}

.hero h1{

font-size:56px;

}

.hero p{

font-size:18px;

}

.buttons{

flex-direction:column;

align-items:flex-start;

}

.cta{

display:none;

}

}
/*=========================
        SERVICES
=========================*/

.section-header{

    max-width:720px;

    margin-bottom:80px;

}

.section-header span{

    color:var(--primary);

    font-weight:700;

    letter-spacing:3px;

    font-size:14px;

}

.section-header h2{

    font-size:58px;

    line-height:1.05;

    margin:20px 0;

    letter-spacing:-2px;

}

.section-header p{

    font-size:20px;

    color:var(--text-light);

    line-height:1.8;

}

.services-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.service-card{

    background:#181028;

    border:1px solid rgba(255,255,255,.08);

    border-radius:28px;

    padding:45px;

    transition:.45s;

    position:relative;

    overflow:hidden;

}

.service-card::before{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    border-radius:50%;

    background:rgba(109,40,217,.05);

    top:-180px;

    right:-180px;

    transition:.5s;

}

.service-card:hover{

    transform:translateY(-12px);

    border-color:rgba(109,40,217,.2);

    box-shadow:0 30px 70px rgba(109,40,217,.08);

}

.service-card:hover::before{

    transform:scale(1.4);

}

.service-number{

    color:var(--primary);

    font-size:42px;

    font-weight:800;

    margin-bottom:30px;

}

.service-card h3{

    color:#fff;

    font-size:30px;

    margin-bottom:20px;

}

.service-card p{

    color:var(--text-light);

    line-height:1.9;

    font-size:17px;

}

/* RESPONSIVO */

@media(max-width:900px){

.services-grid{

grid-template-columns:1fr;

}

.section-header h2{

font-size:42px;

}

}

/*=========================
        PORTFÓLIO
=========================*/

.portfolio{

    padding:140px 0;

}

.portfolio-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.portfolio-card{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    aspect-ratio:4/5;

    background:#181028;

    border:1px solid rgba(255,255,255,.08);

}

.portfolio-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.8s;

}

.portfolio-card:hover img{

    transform:scale(1.08);

}

.portfolio-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(0,0,0,.8),
    transparent 60%);

    display:flex;

    justify-content:flex-end;

    flex-direction:column;

    padding:35px;

}

.portfolio-overlay span{

    color:#A78BFA;

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:12px;

}

.portfolio-overlay h3{

    color:white;

    font-size:34px;

    font-weight:700;

}

.portfolio-card::after{

    content:"";

    position:absolute;

    inset:0;

    border:1px solid transparent;

    transition:.4s;

}

.portfolio-card:hover::after{

    border:1px solid rgba(139,92,246,.45);

}

@media(max-width:900px){

.portfolio-grid{

grid-template-columns:1fr;

}

}

/*=========================
    LINKS DO PORTFÓLIO
=========================*/

.case-link{

    display:block;

    color:inherit;

    text-decoration:none;

}

.case-link .case-header{

    width:100%;

    pointer-events:none;

}

.case-link:hover .case-title h3{

    color:#C4A7FF;

    text-shadow:
        0 0 10px rgba(196,167,255,.65),
        0 0 30px rgba(139,92,246,.45);

}

.case-link:hover .case-icon{

    color:#A78BFA;

    transform:translateX(8px);

}

.case-link:hover{

    border-color:#8B5CF6;

}

/*=========================
      WHY QERN
=========================*/

.why{

    padding:160px 0;

}

.why .container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.why-left span{

    color:var(--primary);

    letter-spacing:3px;

    font-size:14px;

    font-weight:700;

}

.why-left h2{

    font-size:60px;

    margin:25px 0;

    line-height:1.05;

}

.why-left p{

    color:var(--text-light);

    line-height:1.9;

    font-size:20px;

}

.why-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}

.why-card{

    padding:35px;

    background:#181028;

    border-radius:24px;

    border:1px solid rgba(255,255,255,.08);

    transition:.4s;

}

.why-card:hover{

    transform:translateY(-10px);

    border-color:rgba(139,92,246,.3);

}

.why-card h3{

    color:white;

    margin-bottom:15px;

}

.why-card p{

    color:var(--text-light);

}

/*=========================
        CTA
=========================*/

.cta-section{

    text-align:center;

    padding:170px 0;

}

.cta-section h2{

    font-size:72px;

    line-height:1.05;

    max-width:900px;

    margin:auto;

}

.cta-section p{

    margin:35px auto 55px;

    max-width:650px;

    color:var(--text-light);

    font-size:20px;

}

/*=========================
        FOOTER
=========================*/

footer{

    border-top:1px solid rgba(255,255,255,.06);

    padding:50px 0;

}

.footer-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

}

footer h3{

    color:white;

}

footer p{

    color:var(--text-light);

}

footer small{

    color:#777;

}

/*=========================
      RESPONSIVO
=========================*/

@media(max-width:900px){

.why .container{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr;

}

.cta-section h2{

font-size:46px;

}

.footer-content{

gap:20px;

flex-direction:column;

text-align:center;

}

}

/*=========================
    NAVBAR SCROLL
=========================*/

header.scrolled{

background:rgba(8,6,15,.92);

backdrop-filter:blur(24px);

box-shadow:0 20px 50px rgba(0,0,0,.25);

}

/*=========================
      SCROLL REVEAL
=========================*/

.service-card,
.portfolio-card,
.why-card,
.section-header,
.cta-section{

opacity:0;

transform:translateY(60px);

transition:1s;

}

.show{

opacity:1;

transform:translateY(0);

}

/*=========================
    TOP BUTTON
=========================*/

.top-button{

position:fixed;

right:40px;

bottom:40px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#8B5CF6;

color:white;

font-size:24px;

cursor:pointer;

opacity:0;

pointer-events:none;

transition:.4s;

box-shadow:0 20px 50px rgba(139,92,246,.3);

}

.top-button:hover{

transform:translateY(-5px);

background:#A78BFA;

}

.top-button.visible{

opacity:1;

pointer-events:auto;

}

.hero::before{

content:"";

position:absolute;

width:700px;

height:700px;

background:radial-gradient(circle,
rgba(139,92,246,.25),
transparent 70%);

right:-250px;

top:-250px;

filter:blur(30px);

animation:heroGlow 8s ease-in-out infinite;

}

@keyframes heroGlow{

0%{

transform:scale(1);

}

50%{

transform:scale(1.15);

}

100%{

transform:scale(1);

}

}

/*=========================
        MARQUEE
=========================*/

.marquee{

    width:100%;

    overflow:hidden;

    padding:28px 0;

    background:#140A24;

    border-top:1px solid rgba(255,255,255,.08);

    border-bottom:1px solid rgba(255,255,255,.08);

}

.marquee-track{

    display:flex;

    width:max-content;

    gap:70px;

    animation:marquee 22s linear infinite;

}

.marquee-track span{

    color:white;

    font-size:30px;

    font-weight:700;

    letter-spacing:1px;

    white-space:nowrap;

}

.marquee-track span:nth-child(odd){

    color:#8B5CF6;

}

@keyframes marquee{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/*=========================
        MENU
=========================*/

.nav-container{

    display:flex;
    justify-content:space-between;
    align-items:center;
    height:90px;

}

.menu-btn{

    width:55px;
    height:55px;

    background:none;
    border:none;

    cursor:pointer;

    display:flex;
    flex-direction:column;
    justify-content:center;

    gap:8px;

    transition:.35s;

}

.menu-btn:hover{

    transform:scale(1.05);

}

.menu-btn span{

    height:2px;

    background:white;

    border-radius:50px;

    transition:.4s;

}

.menu-btn span:first-child{

    width:40px;

}

.menu-btn span:last-child{

    width:26px;

    margin-left:auto;

}

/*=========================
      MENU OVERLAY
=========================*/

.menu-overlay{

    position:fixed;
    inset:0;

    background:linear-gradient(
        135deg,
        #050505,
        #120018,
        #4B0082,
        #180024,
        #000000
    );

    background-size:400% 400%;

    animation:menuGradient 8s ease infinite;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    padding:60px 8%;

    z-index:9999;

    opacity:0;
    visibility:hidden;

    transform:translateY(-40px);

    transition:
        opacity .5s ease,
        transform .5s ease,
        visibility .5s;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

@keyframes menuGradient{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

/*=========================
        TOP
=========================*/

.menu-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.menu-top h2{

    font-size:18px;

    letter-spacing:4px;

    font-weight:700;

    color:#FFFFFF;

    text-shadow:
        0 0 8px rgba(255,255,255,.15),
        0 0 20px rgba(139,92,246,.25);

}
.close-menu{

    background:none;

    border:none;

    font-size:34px;

    color:white;

    cursor:pointer;

    transition:.35s;

}

.close-menu:hover{

    color:#C4A7FF;

    transform:rotate(90deg);

    text-shadow:
        0 0 10px rgba(196,167,255,.8),
        0 0 30px rgba(139,92,246,.7);

}

/*=========================
      MENU LINKS
=========================*/

.fullscreen-menu{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.fullscreen-menu a{

    font-size:72px;

    font-weight:800;

    color:white;

    transition:
        color .35s ease,
        transform .35s ease,
        padding-left .35s ease,
        text-shadow .35s ease,
        filter .35s ease;

}

.fullscreen-menu a:hover{

    color:#D8C4FF;

    padding-left:22px;

    transform:scale(1.02);

    text-shadow:
        0 0 8px rgba(196,167,255,.8),
        0 0 20px rgba(139,92,246,.8),
        0 0 45px rgba(139,92,246,.55),
        0 0 80px rgba(109,40,217,.35);

    filter:brightness(1.35);

}

/*=========================
      SOCIALS
=========================*/

.menu-footer{

    display:flex;

    gap:35px;

}

.menu-footer a{

    display:flex;

    align-items:center;

    justify-content:center;

    color:#B8B3C9;

    transition:
        color .3s ease,
        transform .3s ease,
        filter .3s ease;

}

.menu-footer a:hover{

    color:#D8C4FF;

    transform:translateY(-4px) scale(1.08);

    filter:
        brightness(1.4)
        drop-shadow(0 0 8px rgba(196,167,255,.8))
        drop-shadow(0 0 20px rgba(139,92,246,.6));

}
/*=========================
      HERO VIDEO
=========================*/

.hero-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:-3;

    filter:blur(2px);

    transition:filter .3s ease;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(139,92,246,.20),
            transparent 35%
        ),

        radial-gradient(
            circle at 20% 80%,
            rgba(109,40,217,.12),
            transparent 40%
        ),

        linear-gradient(
            90deg,
            rgba(8,6,15,.92) 0%,
            rgba(8,6,15,.75) 45%,
            rgba(8,6,15,.55) 100%
        );

    z-index:-2;

}

.hero-video.scrolled{

    filter:blur(10px);

}

/*=========================
    SCROLL INDICATOR
=========================*/

.scroll-indicator{

    margin-top:90px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:12px;

}

.mouse{

    width:32px;

    height:55px;

    border:2px solid rgba(255,255,255,.45);

    border-radius:30px;

    display:flex;

    justify-content:center;

    padding-top:8px;

}

.mouse span{

    width:5px;

    height:10px;

    background:#8B5CF6;

    border-radius:50px;

    animation:scrollMouse 2s infinite;

}

.scroll-indicator p{

    color:#B8B3C9;

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

}

@keyframes scrollMouse{

0%{

transform:translateY(0);

opacity:1;

}

70%{

transform:translateY(18px);

opacity:0;

}

100%{

transform:translateY(0);

opacity:1;

}

}

/*=========================
     SERVICES V2
=========================*/

.services-list{

    margin-top:80px;

}

.service-item{

    display:grid;

    grid-template-columns:80px 1fr 60px;

    align-items:center;

    padding:40px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

    transition:.4s;

}

.service-item:first-child{

    border-top:1px solid rgba(255,255,255,.08);

}

.service-id{

    color:#8B5CF6;

    font-size:18px;

    font-weight:700;

}

.service-item h3{

    font-size:52px;

    font-weight:700;

    color:white;

    transition:.35s;

}

.arrow{

    font-size:34px;

    color:#8B5CF6;

    transition:.35s;

}

.service-item:hover{

    padding-left:25px;

    border-color:#8B5CF6;

}

.service-item:hover h3{

    color:#A78BFA;

}

.service-item:hover .arrow{

    transform:translateX(10px) rotate(45deg);

}

@media(max-width:900px){

.service-item{

grid-template-columns:1fr;

gap:15px;

}

.service-item h3{

font-size:34px;

}

.arrow{

display:none;

}

}

/*=========================
        LOADER V2
=========================*/



.loader{

    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:linear-gradient(
        135deg,
        #050505,
        #120018,
        #4B0082,
        #180024,
        #000000
    );

    background-size:400% 400%;

    animation:loaderGradient 8s ease infinite;

    z-index:999999;

    transition:
        opacity .8s ease,
        visibility .8s ease;

}

.loader.hide{

    opacity:0;
    visibility:hidden;

}

.loader-logo{

    display:flex;
    justify-content:center;
    align-items:center;

}

.loader-logo img{

    height:95px;
    width:auto;

    animation:
        logoIntro 1s cubic-bezier(.22,1,.36,1),
        logoGlow 2.2s ease-in-out infinite;

}

/*=========================
      FUNDO ANIMADO
=========================*/

@keyframes loaderGradient{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

/*=========================
      ENTRADA DO LOGO
=========================*/

@keyframes logoIntro{

    0%{

        opacity:0;
        transform:scale(.75) rotate(-5deg);
        filter:blur(8px);

    }

    60%{

        opacity:1;
        transform:scale(1.08);
        filter:blur(0);

    }

    100%{

        opacity:1;
        transform:scale(1);

    }

}

/*=========================
       GLOW PREMIUM
=========================*/

@keyframes logoGlow{

    0%{

        transform:scale(1);

        opacity:.85;

        filter:
            brightness(1)
            drop-shadow(0 0 6px rgba(139,92,246,.25))
            drop-shadow(0 0 18px rgba(139,92,246,.15));

    }

    20%{

        transform:scale(1.015);

        filter:
            brightness(1.15)
            drop-shadow(0 0 14px rgba(170,110,255,.45))
            drop-shadow(0 0 35px rgba(170,110,255,.25));

    }

    50%{

        transform:scale(1.04);

        filter:
            brightness(1.55)
            drop-shadow(0 0 28px rgba(190,120,255,.95))
            drop-shadow(0 0 70px rgba(170,110,255,.65))
            drop-shadow(0 0 120px rgba(139,92,246,.35));

    }

    80%{

        transform:scale(1.015);

        filter:
            brightness(1.15)
            drop-shadow(0 0 14px rgba(170,110,255,.45))
            drop-shadow(0 0 35px rgba(170,110,255,.25));

    }

    100%{

        transform:scale(1);

        opacity:.85;

        filter:
            brightness(1)
            drop-shadow(0 0 6px rgba(139,92,246,.25))
            drop-shadow(0 0 18px rgba(139,92,246,.15));

    }

}

/*=========================
      HERO ENTRADA
=========================*/

.hero{

    opacity:0;

    transform:translateY(40px);

    transition:1s ease;

}

.hero.loaded{

    opacity:1;

    transform:translateY(0);

}

.hero-video{

    animation:heroZoom 18s ease-in-out infinite alternate;

}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}/*==================================================
            SUCCESS CASES
==================================================*/

.cases{

    margin-top:90px;

}

.case{

    border-top:1px solid rgba(255,255,255,.08);

}

.case:last-child{

    border-bottom:1px solid rgba(255,255,255,.08);

}

/*------------------------------
        Header
------------------------------*/

.case-header{

    width:100%;

    background:none;

    border:none;

    padding:40px 0;

    display:grid;

    grid-template-columns:70px 1fr 60px;

    align-items:center;

    cursor:pointer;

    color:white;

    transition:.35s;

}

.case-header:hover{

    color:#A78BFA;

}

.case-number{

    color:#8B5CF6;

    font-weight:700;

    font-size:18px;

}

.case-title h3{

    font-size:40px;

    font-weight:700;

    margin-bottom:10px;

    transition:.3s;

}

.case-title p{

    color:#B8B3C9;

    font-size:17px;

}

.case-icon{

    font-size:42px;

    font-weight:300;

    transition:.45s;

}

/*------------------------------
        Body
------------------------------*/

.case-body{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transform:translateY(-20px);

    transition:

        max-height .8s cubic-bezier(.22,1,.36,1),

        opacity .45s ease,

        transform .6s ease,

        padding .45s ease;

}

.case.active .case-body{

    max-height:1400px;

    opacity:1;

    transform:translateY(0);

    padding-bottom:60px;

}

/*------------------------------
        Conteúdo
------------------------------*/

.case-info{

    max-width:760px;

}

.case-info h4{

    font-size:26px;

    margin-bottom:25px;

}

.case-info p{

    color:#B8B3C9;

    line-height:1.9;

    margin-bottom:30px;

}

.case-info ul{

    list-style:none;

    display:grid;

    gap:15px;

}

.case-info li{

    position:relative;

    padding-left:28px;

    color:white;

}

.case-info li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#8B5CF6;

}

/*------------------------------
        Galeria
------------------------------*/

.case-gallery{

    margin-top:50px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.case-gallery img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    border-radius:20px;

    transition:.45s;

    border:1px solid rgba(255,255,255,.06);

}

.case-gallery img:hover{

    transform:

        translateY(-10px)

        scale(1.03);

    border-color:#8B5CF6;

    box-shadow:

        0 20px 60px

        rgba(139,92,246,.25);

}

/*------------------------------
        Estado aberto
------------------------------*/

.case.active .case-icon{

    transform:rotate(45deg);

    color:#8B5CF6;

}

.case.active .case-title h3{

    color:#A78BFA;

}

/*------------------------------
        Responsivo
------------------------------*/

@media(max-width:900px){

.case-header{

    position:relative;

}

.case-header::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:1px;

    background:#8B5CF6;

    transition:.5s;

}

.case-header:hover::after{

    width:100%;

}

.case-title h3{

font-size:28px;

}

.case-gallery{

grid-template-columns:1fr;

}

.case-icon{

font-size:34px;

}

}

.case-gallery img{

    opacity:0;

    transform:translateY(30px);

}

.case.active .case-gallery img{

    opacity:1;

    transform:translateY(0);

}

.case.active .case-gallery img:nth-child(1){

    transition:.5s ease .15s;

}

.case.active .case-gallery img:nth-child(2){

    transition:.5s ease .30s;

}

.case.active .case-gallery img:nth-child(3){

    transition:.5s ease .45s;

}

.case-info{

    opacity:0;

    transform:translateY(20px);

    transition:.5s ease;

}

.case.active .case-info{

    opacity:1;

    transform:translateY(0);

    transition-delay:.15s;

}

.case-number{

    transition:.35s;

}

.case.active .case-number{

    transform:translateX(8px);

    color:#A78BFA;

}

.footer-content{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    padding:30px 0;
}

.footer-left{
    justify-self:start;
}

.footer-center{
    justify-self:center;
    text-align:center;
}

.footer-right{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:18px;
}

.footer-logo{
    height:48px;
    width:auto;
}

.footer-right a{
    color:inherit;
    display:flex;
    transition:.3s;
}

.footer-right a:hover{
    opacity:.7;
    transform:translateY(-2px);
}

/*=========================
      VER MAIS PROJETOS
=========================*/

.portfolio-more{

    display:flex;
    justify-content:center;

    margin-top:50px;

}

.extra-projects{

    display:none;

    margin-top:40px;

    animation:showProjects .6s ease;

}

.extra-projects.active{

    display:block;

}

@keyframes showProjects{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* =========================================================
   EQUIPA — NOVO LAYOUT, CORES ORIGINAIS PRESERVADAS
   ========================================================= */
.team-section-clean{
  position:relative;
  overflow:hidden;
}

.team-clean-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:34px;
  margin-top:58px;
}

.team-clean-card{
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(24,16,40,.72);
  transition:transform .4s ease,border-color .4s ease,box-shadow .4s ease;
}

.team-clean-card:hover{
  transform:translateY(-8px);
  border-color:rgba(139,92,246,.45);
  box-shadow:0 28px 75px rgba(139,92,246,.14);
}

.team-clean-photo{
  position:relative;
  aspect-ratio:4/4.35;
  overflow:hidden;
  background:#181028;
}

.team-clean-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}

.team-clean-card:hover .team-clean-photo img{
  transform:scale(1.035);
}

.team-clean-photo::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:36%;
  background:linear-gradient(to top,rgba(11,6,20,.78),transparent);
  pointer-events:none;
}

.team-clean-number{
  position:absolute;
  right:20px;
  bottom:18px;
  z-index:2;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%;
  color:#C4A7FF;
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  border:1px solid rgba(196,167,255,.30);
  background:rgba(11,6,20,.70);
  backdrop-filter:blur(10px);
}

.team-clean-content{
  padding:30px 30px 34px;
}

.team-clean-label{
  display:block;
  margin-bottom:12px;
  color:#A78BFA;
  font-size:11px;
  font-weight:700;
  letter-spacing:2.2px;
}

.team-clean-content h3{
  margin:0 0 14px;
  color:#fff;
  font-size:30px;
  letter-spacing:-1px;
}

.team-clean-content > p{
  margin:0;
  color:#B8B3C9;
  font-size:15px;
  line-height:1.75;
}

.team-clean-tags{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:24px;
}

.team-clean-tags span{
  padding:8px 12px;
  border-radius:999px;
  color:#C4A7FF;
  font-size:11px;
  font-weight:600;
  border:1px solid rgba(196,167,255,.16);
  background:rgba(139,92,246,.07);
}

@media(max-width:800px){
  .team-clean-grid{grid-template-columns:1fr}
  .team-clean-photo{aspect-ratio:4/4.5}
}