/*==============================
        RESET
===============================*/
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    font-family:'Poppins',sans-serif;
    background:var(--bg-page);
    color:var(--text-heading);
    overflow-x:hidden;
    transition:background-color .3s ease,color .3s ease;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{border:none;cursor:pointer;background:none;font-family:inherit;}

/*==============================
        ACESSIBILIDADE
===============================*/
.skip-link{
    position:absolute;top:-60px;left:16px;z-index:1200;
    background:var(--primary);color:#fff;padding:12px 22px;border-radius:10px;
    font-weight:600;font-size:.9rem;transition:top .25s ease;
}
.skip-link:focus{top:16px;}
a:focus-visible,button:focus-visible{
    outline:2px solid var(--primary);outline-offset:3px;border-radius:4px;
}
.theme-toggle:focus-visible,.menu-mobile:focus-visible,.scroll-top:focus-visible,.whatsapp-button:focus-visible{
    outline-offset:3px;
}

/*==============================
        VARIÁVEIS
===============================*/
:root{
    --primary:#2563EB;
    --primary-dark:#1D4ED8;
    --secondary:#0F172A;
    --gray:#64748B;
    --light:#F8FAFC;
    --white:#FFFFFF;
    --border:#E2E8F0;
    --success:#10B981;
    --whatsapp:#25D366;
    --radius:18px;
    --radius-sm:12px;
    --transition:.4s cubic-bezier(.22,1,.36,1);
    --shadow:0 20px 60px rgba(15,23,42,.08);
    --container:1200px;
    --text-heading:#0F172A;
    --text-body:#64748B;
    --bg-page:#F7F9FC;
    --bg-card:#FFFFFF;
}

/*==============================
        TEMA ESCURO
===============================*/
html.dark{
    --text-heading:#F1F5F9;
    --text-body:#94A3B8;
    --bg-page:#0B1120;
    --bg-card:#131B2E;
    --light:#101728;
    --border:#22304A;
}
html.dark .btn-outline{border-color:#26375A;}
html.dark .hero::before{background:#1E3A8A;opacity:.35;}
html.dark .hero::after{background:#1E3A8A;opacity:.25;}
html.dark .header{background:rgba(11,17,32,.8);border-bottom-color:rgba(34,48,74,.7);}
html.dark .service-icon,
html.dark .contact-card i,
html.dark .about-list i{background:rgba(37,99,235,.18);}
html.dark .section-tag{background:rgba(37,99,235,.15);}
html.dark .review-stars{color:#F5A623;}

/*==============================
        GLOBAIS
===============================*/
.container{width:min(92%,var(--container));margin:auto;}
.section{
    display:flex;
    align-items:center;
    padding:clamp(60px, 6vw, 80px) 0;
}
.section-header{text-align:center;max-width:720px;margin:0 auto 48px;}
.section-tag{
    display:inline-flex;align-items:center;gap:8px;
    background:#DBEAFE;color:var(--primary);
    padding:8px 18px;border-radius:999px;
    font-size:.85rem;font-weight:600;margin-bottom:18px;
}
.section-header h2{
    font-size:clamp(1.9rem,4.2vw,2.75rem);line-height:1.2;
    margin-bottom:18px;color:var(--text-heading);
}
.section-header p{color:var(--text-body);line-height:1.8;font-size:1.05rem;}

/*==============================
        BOTÕES
===============================*/
.btn-primary{
    background:var(--primary);color:#fff;padding:16px 34px;
    border-radius:999px;font-weight:600;transition:var(--transition);
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    position:relative;overflow:hidden;
}
.btn-primary::before{
    content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-20deg);transition:left .7s ease;
}
.btn-primary:hover::before{left:125%;}
.btn-primary:hover{
    background:var(--primary-dark);transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(37,99,235,.35);
}
.btn-outline{
    border:2px solid #D6E4FF;color:var(--text-heading);
    padding:16px 34px;border-radius:999px;transition:.3s;font-weight:600;
}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);}

/*==============================
        HEADER
===============================*/
.header{
    position:fixed;width:100%;top:0;left:0;z-index:999;
    backdrop-filter:blur(18px);background:rgba(255,255,255,.78);
    border-bottom:1px solid rgba(226,232,240,.6);
}
.header .container{
    display:flex;align-items:center;justify-content:space-between;height:82px;
}
.logo{
    display:inline-flex;align-items:center;flex:0 0 auto;
    line-height:0;border-radius:8px;
}
.logo-image{
    display:block;width:clamp(158px,14vw,194px);height:auto;
    object-fit:contain;
}
.logo-white{display:none;}
html.dark .header .logo-color{display:none;}
html.dark .header .logo-white{display:block;}
.nav{display:flex;gap:32px;}
.nav a{position:relative;color:var(--text-heading);font-weight:500;transition:.3s;}
.nav a::after{
    content:"";position:absolute;width:0;height:2px;background:var(--primary);
    left:0;bottom:-6px;transition:.3s;
}
.nav a:hover{color:var(--primary);}
.nav a:hover::after{width:100%;}
.nav a[aria-current="page"]{color:var(--primary);}
.nav a[aria-current="page"]::after{width:100%;}
body.menu-open{overflow:hidden;}
.header-actions{display:flex;align-items:center;gap:16px;}
.lang-toggle{display:flex;align-items:center;}
.lang-toggle a{
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:50%;opacity:1;
    transition:var(--transition);
    box-shadow:0 0 0 2px transparent;
}
.lang-toggle a img{
    width:24px;height:24px;border-radius:50%;object-fit:cover;
    box-shadow:0 0 0 1px rgba(15,23,42,.1);
    display:block;
}
.lang-toggle a:hover{opacity:.82;transform:scale(1.08);}
.theme-toggle{
    width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--light);color:var(--text-heading);font-size:.95rem;transition:var(--transition);
    border:1px solid var(--border);
}
.theme-toggle:hover{border-color:var(--primary);color:var(--primary);transform:rotate(20deg);}
.menu-mobile{
    display:none;width:44px;height:44px;align-items:center;justify-content:center;
    border-radius:50%;background:var(--light);color:var(--text-heading);font-size:1.15rem;
}

/*==================================
            HERO
===================================*/
.hero{
    min-height:calc(100svh - 82px);
    display:flex;
    align-items:center;
    margin-top:82px;
    padding:clamp(28px, 4.5vh, 52px) 0;
    position:relative;overflow:hidden;
    background-image:
        linear-gradient(90deg,rgba(248,250,252,.98) 0%,rgba(248,250,252,.9) 44%,rgba(248,250,252,.58) 100%),
        url('imagens/hero-tech-background.webp');
    background-size:cover;
    background-position:center right;
    background-repeat:no-repeat;
}
html.dark .hero{
    background-image:
        linear-gradient(90deg,rgba(11,17,32,.98) 0%,rgba(11,17,32,.92) 44%,rgba(11,17,32,.72) 100%),
        url('imagens/hero-tech-background.webp');
}
.hero::before{
    content:"";position:absolute;width:550px;height:550px;border-radius:50%;
    background:#DBEAFE;filter:blur(120px);right:-180px;top:-120px;z-index:-1;
}
.hero::after{
    content:"";position:absolute;width:400px;height:400px;border-radius:50%;
    background:#BFDBFE;filter:blur(120px);left:-180px;bottom:-120px;z-index:-1;
}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px;}
.hero-left h1{
    font-size:clamp(2.8rem,5vw,4.6rem);line-height:1.1;
    color:var(--text-heading);margin:25px 0;
}
.hero-left p{font-size:1.1rem;line-height:1.9;color:var(--text-body);max-width:620px;}
.hero-buttons{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap;}
.badge{
    display:inline-flex;align-items:center;gap:10px;background:var(--bg-card);
    padding:12px 22px;border-radius:999px;box-shadow:var(--shadow);
    color:var(--primary);font-weight:600;
}
.badge i{font-size:1rem;}

/*==================================
        MOCKUP NAVEGADOR
===================================*/
.hero-right{position:relative;}
.browser{
    background:var(--bg-card);border-radius:22px;overflow:hidden;
    box-shadow:0 40px 80px rgba(15,23,42,.12);border:1px solid var(--border);
    transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
    position:relative;z-index:1;
}
.hero-right:hover .browser{transform:translateY(-6px);box-shadow:0 50px 90px rgba(15,23,42,.18);}
.browser-top{
    height:48px;display:flex;align-items:center;gap:10px;padding:0 20px;
    background:var(--light);border-bottom:1px solid var(--border);
}
.browser-top span{width:12px;height:12px;border-radius:50%;}
.browser-top span:nth-child(1){background:#FF5F57;}
.browser-top span:nth-child(2){background:#FEBC2E;}
.browser-top span:nth-child(3){background:#28C840;}
.hero-video{
    position:relative;aspect-ratio:16/9;background:#0B1120;overflow:hidden;cursor:pointer;
}
.hero-video img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.hero-video:hover img{transform:scale(1.04);}
.hero-video::before{
    content:"";position:absolute;inset:0;background:rgba(15,23,42,.18);transition:background .3s ease;
}
.hero-video:hover::before{background:rgba(15,23,42,.3);}
.hero-video .play-btn{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--primary);
    display:flex;align-items:center;justify-content:center;font-size:1.4rem;
    box-shadow:0 10px 30px rgba(0,0,0,.3);transition:var(--transition);
}
.hero-video .play-btn i{margin-left:4px;}
.hero-video:hover .play-btn{transform:translate(-50%,-50%) scale(1.1);background:#fff;}
.hero-video iframe{width:100%;height:100%;border:0;display:block;}
.video-placeholder{
    position:absolute;inset:0;z-index:2;padding:28px;
    display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
    color:#fff;background:
        radial-gradient(circle at 78% 20%,rgba(37,99,235,.5),transparent 38%),
        linear-gradient(135deg,#111827,#0F172A 58%,#1E3A8A);
}
.video-placeholder small{font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#93C5FD;}
.video-placeholder strong{max-width:380px;margin:7px 0;font-size:clamp(1.05rem,2vw,1.45rem);line-height:1.25;}
.video-placeholder span{max-width:390px;color:#CBD5E1;font-size:.78rem;line-height:1.55;}
.hero-video .play-btn{z-index:3;}
.hero-video.has-video .video-placeholder{display:none;}
.hero-video.video-pending{cursor:default;}
.browser-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:26px 28px 30px;}
.browser-stats div{background:var(--light);padding:18px 12px;border-radius:16px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;}
.browser-stats i{font-size:1.15rem;color:var(--primary);margin-bottom:8px;}
.browser-stats strong{display:block;font-size:.95rem;line-height:1.25;color:var(--text-heading);}
.browser-stats span{color:var(--text-body);font-size:.8rem;margin-top:3px;}

/*==================================
        CARDS FLUTUANTES
===================================*/
.floating-card{
    position:absolute;background:var(--bg-card);padding:16px 20px;border-radius:18px;
    display:flex;align-items:center;gap:12px;
    box-shadow:0 20px 50px rgba(15,23,42,.12);
    animation:float 5s ease-in-out infinite;z-index:4;pointer-events:none;
}
.floating-card i{color:var(--primary);font-size:1.2rem;}
.floating-card strong{display:block;font-size:.85rem;color:var(--text-heading);}
.floating-card span{font-size:.78rem;color:var(--text-body);}
.card-one{top:40px;left:-60px;}
.card-two{right:-40px;top:180px;animation-delay:1.2s;}
.card-three{left:20px;bottom:-25px;animation-delay:2s;}
@keyframes float{
    0%{transform:translateY(0px);}
    50%{transform:translateY(-12px);}
    100%{transform:translateY(0px);}
}

/*==================================
        TECNOLOGIAS
===================================*/
.techs{
    padding:30px 0;background:var(--secondary);color:#fff;
    border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
}
.techs .container{display:flex;align-items:center;gap:40px;flex-wrap:wrap;justify-content:center;}
.techs > .container > span{
    font-family:'Poppins',sans-serif;font-weight:700;font-size:.78rem;
    letter-spacing:.12em;color:#94A3B8;white-space:nowrap;
}
.tech-list{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.tech-list div{
    font-size:.88rem;font-weight:600;color:#E2E8F0;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
    padding:9px 18px;border-radius:999px;transition:var(--transition);
}
.tech-list div:hover{background:var(--primary);border-color:var(--primary);color:#fff;transform:translateY(-3px);}

/*==================================
        SERVIÇOS
===================================*/
.services{background:#FFFFFF;}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.service-card{
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
    padding:30px 24px;transition:var(--transition);
}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent;}
.service-icon{
    width:56px;height:56px;border-radius:16px;background:#DBEAFE;color:var(--primary);
    display:flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:22px;
    transition:var(--transition);
}
.service-card:hover .service-icon{background:var(--primary);color:#fff;transform:scale(1.06);}
.service-card h3{font-size:1.15rem;margin-bottom:12px;color:var(--text-heading);}
.service-card p{color:var(--text-body);line-height:1.75;font-size:.95rem;}
.service-price{
    display:inline-block;margin-top:16px;font-size:.78rem;font-weight:700;
    color:var(--primary);background:#DBEAFE;padding:5px 12px;border-radius:999px;
}
html.dark .service-price{background:rgba(37,99,235,.18);}
.featured-service{position:relative;border-color:rgba(37,99,235,.42);box-shadow:0 16px 38px rgba(37,99,235,.1);}
.featured-badge{
    position:absolute;top:18px;right:18px;padding:5px 10px;border-radius:999px;
    background:var(--primary);color:#fff;font-size:.65rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
}
.featured-service .service-icon{background:var(--primary);color:#fff;}

/*==================================
        DIFERENCIAIS
===================================*/
.features{background:var(--secondary);}
.features .section-tag{background:rgba(255,255,255,.08);color:#93C5FD;}
.features .section-header h2{color:#fff;}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.feature{
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);padding:28px 22px;text-align:center;transition:var(--transition);
}
.feature:hover{background:rgba(255,255,255,.07);transform:translateY(-6px);}
.feature i{font-size:1.6rem;color:#60A5FA;margin-bottom:18px;display:inline-block;}
.feature h3{color:#fff;font-size:1.05rem;margin-bottom:10px;}
.feature p{color:#94A3B8;font-size:.92rem;line-height:1.7;}

/*==================================
        PORTFÓLIO / CASES
===================================*/
.portfolio{background:#F3F6FB;}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.project{
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
    overflow:hidden;transition:var(--transition);display:flex;flex-direction:column;
}
.project:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.project-image{height:230px;position:relative;overflow:hidden;}
.project-img{
    width:100%;height:auto;display:block;
    transition:filter .35s ease;
}
.project:hover .project-img{filter:saturate(1.04) contrast(1.02);}
.project-image::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to top,rgba(15,23,42,.62),rgba(15,23,42,0) 30%);
}
.project-image .project-domain{
    position:absolute;left:16px;bottom:14px;z-index:1;
    display:inline-flex;align-items:center;gap:7px;
    color:#fff;font-weight:600;font-size:.85rem;letter-spacing:.02em;
    background:rgba(15,23,42,.55);backdrop-filter:blur(4px);
    padding:7px 14px;border-radius:999px;
}
.project-content{padding:30px 28px;display:flex;flex-direction:column;flex:1;}
.project-content h3{font-size:1.3rem;margin-bottom:12px;color:var(--text-heading);}
.project-content p{color:var(--text-body);line-height:1.75;margin-bottom:18px;font-size:.95rem;}
.project-content a{
    display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--primary);transition:.3s;
}
.project-content a:hover{gap:12px;}
.project-summary{margin-bottom:20px;}
.project-highlights{list-style:none;display:grid;gap:12px;margin:0 0 22px;padding:0;}
.project-highlights li{display:grid;grid-template-columns:72px 1fr;gap:10px;padding-top:12px;border-top:1px solid var(--border);}
.project-highlights strong{font-size:.7rem;color:var(--primary);letter-spacing:.04em;text-transform:uppercase;}
.project-highlights span{font-size:.84rem;color:var(--text-body);line-height:1.6;}
.project-actions{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.project-content .case-cta{padding:9px 13px;border:1px solid var(--primary);border-radius:999px;font-size:.78rem;}
.project-content .case-cta:hover{background:var(--primary);color:#fff;gap:8px;}

/*==================================
        FAQ
===================================*/
.faq{background:#F3F6FB;}
.faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.faq-item{
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
    overflow:hidden;transition:var(--transition);
}
.faq-item:hover{border-color:var(--primary);}
.faq-question{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:22px 26px;text-align:left;font-size:1rem;font-weight:600;color:var(--text-heading);
}
.faq-question i{color:var(--primary);font-size:.9rem;transition:transform .35s ease;flex-shrink:0;}
.faq-item.open .faq-question i{transform:rotate(180deg);}
.faq-answer{
    max-height:0;overflow:hidden;transition:max-height .4s ease;
}
.faq-answer p{padding:0 26px 22px;color:var(--text-body);font-size:.94rem;line-height:1.8;}
.faq-item.open .faq-answer{max-height:300px;}

/*==================================
        AVALIAÇÕES (estilo Google)
===================================*/
.reviews{background:#FFFFFF;}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.review-card{
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
    padding:26px 24px;transition:var(--transition);
}
.review-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.review-stars{display:flex;gap:3px;color:#F5A623;margin-bottom:16px;font-size:.8rem;}
.review-card p{color:var(--text-body);font-size:.92rem;line-height:1.75;margin-bottom:22px;}
.review-author{display:flex;align-items:center;gap:12px;}
.review-avatar{
    width:42px;height:42px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,var(--primary),#60A5FA);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;
}
.review-author h4{font-size:.92rem;color:var(--text-heading);margin-bottom:2px;}
.review-author span{font-size:.8rem;color:var(--text-body);}
.review-badge{
    display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;
    color:var(--text-body);margin-top:18px;padding-top:18px;border-top:1px solid var(--border);
}
.review-badge i{color:#4285F4;}

/*==================================
        SOBRE
===================================*/
.about{background:#F3F6FB;}
.about-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:52px;align-items:center;}
.profile-card{
    background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);
    padding:12px;text-align:center;border:1px solid var(--border);max-width:360px;margin:0 auto;
}
.profile-avatar{
    width:100%;aspect-ratio:1/1;border-radius:14px;
    background:linear-gradient(135deg,var(--primary),#60A5FA);
    display:flex;align-items:center;justify-content:center;
    font-size:4rem;font-weight:800;color:#fff;
}
.profile-info{padding:22px 10px 12px;}
.profile-info h3{font-size:1.2rem;color:var(--text-heading);margin-bottom:4px;}
.profile-info span{color:var(--text-body);font-size:.9rem;}
.about-content .section-tag{margin-bottom:18px;}
.about-content h2{font-size:clamp(1.8rem,3.4vw,2.4rem);color:var(--text-heading);margin-bottom:20px;line-height:1.25;}
.about-content p{color:var(--text-body);line-height:1.72;margin-bottom:12px;}
.about-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;}
.about-list div{display:flex;align-items:center;gap:12px;}
.about-list i{
    width:38px;height:38px;flex-shrink:0;border-radius:10px;background:#DBEAFE;
    color:var(--primary);display:flex;align-items:center;justify-content:center;
}
.about-list span{font-size:.9rem;color:var(--text-heading);font-weight:500;}

/*==================================
        ECOSSISTEMA
===================================*/
.ecosystem{background:var(--secondary);}
.ecosystem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.eco-card{
    background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);
    padding:30px 23px;transition:var(--transition);position:relative;
}
.eco-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.eco-badge{
    position:absolute;top:18px;right:18px;
    font-size:.65rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
    color:#CBD5E1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
    padding:4px 10px;border-radius:999px;
}
.eco-card i{font-size:1.5rem;color:var(--primary);margin-bottom:20px;display:inline-block;transition:var(--transition);}
.eco-card:hover i{transform:scale(1.08);}
.eco-card h3{font-size:1.05rem;margin-bottom:10px;color:#FFFFFF;}
.eco-card p{color:#94A3B8;font-size:.9rem;line-height:1.7;}

/*==================================
        PROCESSO
===================================*/
.process{background:var(--secondary);}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.process-card{
    position:relative;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
    border-radius:var(--radius);padding:30px 23px;transition:var(--transition);
}
.process-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.process-card > span{
    position:absolute;top:20px;right:24px;font-size:2.2rem;font-weight:800;
    color:rgba(255,255,255,.12);transition:var(--transition);
}
.process-card:hover > span{color:var(--primary);opacity:.35;}
.process-card i{font-size:1.4rem;color:var(--primary);margin-bottom:22px;display:inline-block;transition:var(--transition);}
.process-card:hover i{transform:scale(1.08);}
.process-card h3{font-size:1.1rem;margin-bottom:10px;color:#FFFFFF;}
.process-card p{color:#94A3B8;font-size:.9rem;line-height:1.7;}

/* Cabeçalhos e cards sobre fundos escuros */
.process .section-tag,.ecosystem .section-tag{
    background:rgba(255,255,255,.08);color:#93C5FD;
}
.process .section-header h2,.ecosystem .section-header h2{color:#FFFFFF;}
.process .section-header p,.ecosystem .section-header p{color:#94A3B8;}

/* Alternância de cores no tema escuro */
html.dark .services,html.dark .reviews,html.dark .contact{background:var(--bg-page);}
html.dark .portfolio,html.dark .about,html.dark .faq{background:var(--light);}

/*==================================
        CTA
===================================*/
.cta{
    display:flex;
    align-items:center;
    padding:0 0 clamp(64px, 7vw, 88px);
}
.cta-box{
    background:linear-gradient(135deg,var(--primary),#1E40AF);
    border-radius:24px;padding:56px 44px;text-align:center;color:#fff;
    position:relative;overflow:hidden;
}
.cta-box::before{
    content:"";position:absolute;width:400px;height:400px;border-radius:50%;
    background:rgba(255,255,255,.08);top:-150px;right:-100px;
}
.cta-box > span{
    display:inline-block;font-weight:600;font-size:.9rem;color:#BFDBFE;margin-bottom:16px;
}
.cta-box h2{font-size:clamp(1.8rem,3.6vw,2.6rem);max-width:700px;margin:0 auto 18px;line-height:1.25;}
.cta-box p{color:#DBEAFE;max-width:560px;margin:0 auto 34px;line-height:1.8;}
.cta-box .btn-primary{background:#fff;color:var(--primary);}
.cta-box .btn-primary:hover{background:#F1F5F9;box-shadow:0 15px 35px rgba(0,0,0,.2);}

/*==================================
        CONTATO
===================================*/
.contact{background:#FFFFFF;}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.contact-card{
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
    padding:30px 24px;text-align:center;transition:var(--transition);
}
.contact-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.contact-card i{
    width:54px;height:54px;border-radius:14px;background:#DBEAFE;color:var(--primary);
    display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin:0 auto 20px;
    transition:var(--transition);
}
.contact-card:hover i{background:var(--primary);color:#fff;transform:scale(1.06);}
.contact-card h3{font-size:1.1rem;margin-bottom:8px;color:var(--text-heading);}
.contact-card p{color:var(--text-body);font-size:.92rem;margin-bottom:14px;}
.contact-card a{font-weight:600;color:var(--primary);}
.contact-card a:hover{text-decoration:underline;}

/*==================================
        FOOTER
===================================*/
.footer{background:var(--secondary);padding-top:64px;color:#94A3B8;}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:36px;padding-bottom:42px;}
.footer-brand .logo{color:#fff;}
.footer-brand .logo-image{width:190px;max-width:100%;}
.footer-brand p{margin-top:16px;line-height:1.8;font-size:.92rem;max-width:260px;}
.footer-social{display:flex;gap:12px;margin-top:20px;}
.footer-social a{
    width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.06);color:#94A3B8;transition:var(--transition);
}
.footer-social a:hover{background:var(--primary);color:#fff;}
.footer-location{display:flex;align-items:flex-start;gap:8px;}
.footer-location i{color:#60A5FA;margin-top:5px;}
.footer-links h4{color:#fff;font-size:.95rem;margin-bottom:18px;}
.footer-links a,.footer-links span{
    display:block;margin-bottom:12px;font-size:.9rem;color:#94A3B8;transition:.3s;
}
.footer-links a:hover{color:#60A5FA;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:26px 0;}
.footer-bottom-row{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    flex-wrap:wrap;gap:10px;text-align:center;
}
.footer-bottom-row p{font-size:.85rem;color:#64748B;}

/*==================================
        FLUTUANTES (whatsapp / topo)
===================================*/
.whatsapp-button{
    position:relative;
    position:fixed;bottom:28px;right:28px;width:58px;height:58px;border-radius:50%;
    background:var(--whatsapp);color:#fff;display:flex;align-items:center;justify-content:center;
    font-size:1.5rem;box-shadow:0 15px 35px rgba(37,211,102,.4);z-index:900;transition:var(--transition);
}
.whatsapp-button::before{
    content:"";position:absolute;inset:0;border-radius:50%;background:var(--whatsapp);
    animation:pulse-ring 2.4s cubic-bezier(.22,1,.36,1) infinite;z-index:-1;
}
@keyframes pulse-ring{
    0%{transform:scale(1);opacity:.55;}
    100%{transform:scale(1.7);opacity:0;}
}
.whatsapp-button:hover{transform:translateY(-4px) scale(1.05);}
.whatsapp-button:hover::before{animation-play-state:paused;opacity:0;}
.scroll-top{
    position:fixed;bottom:28px;right:98px;width:46px;height:46px;border-radius:50%;
    background:var(--bg-card);color:var(--text-heading);display:flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow);z-index:900;opacity:0;visibility:hidden;transform:translateY(10px);
    transition:.3s;
}
.scroll-top.show{opacity:1;visibility:visible;transform:translateY(0);}

/*==================================
        REVEAL
===================================*/
.reveal{opacity:1;transform:none;}
.js .reveal{
    opacity:0;transform:translateY(30px) scale(.985);
    transition:opacity .75s cubic-bezier(.16,.8,.24,1), transform .75s cubic-bezier(.16,.8,.24,1);
    transition-delay:var(--reveal-delay,0ms);
}
.js .reveal-left{transform:translateX(-38px);}
.js .reveal-right{transform:translateX(38px);}
.js .reveal-scale{transform:scale(.95);}
.js .reveal.in{opacity:1;transform:translate3d(0,0,0) scale(1);}

/* cascata: itens dentro dos grids entram em sequência */
:where(.services-grid,.features-grid,.ecosystem-grid,.process-grid,.reviews-grid,.contact-grid,.portfolio-grid) > .reveal:nth-child(1){transition-delay:.05s;}
:where(.services-grid,.features-grid,.ecosystem-grid,.process-grid,.reviews-grid,.contact-grid,.portfolio-grid) > .reveal:nth-child(2){transition-delay:.15s;}
:where(.services-grid,.features-grid,.ecosystem-grid,.process-grid,.reviews-grid,.contact-grid,.portfolio-grid) > .reveal:nth-child(3){transition-delay:.25s;}
:where(.services-grid,.features-grid,.ecosystem-grid,.process-grid,.reviews-grid,.contact-grid,.portfolio-grid) > .reveal:nth-child(4){transition-delay:.35s;}
@media (prefers-reduced-motion:reduce){
    .js .reveal{opacity:1;transform:none;transition:none;}
    .floating-card{animation:none;}
    .whatsapp-button::before{animation:none;display:none;}
    html{scroll-behavior:auto;}
}

/*==================================
        RESPONSIVO
===================================*/
@media (min-width:1081px){
    .services .container,.process .container,.ecosystem .container{
        display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.45fr);
        align-items:center;gap:clamp(48px,5vw,72px);
    }
    .services .section-header,.process .section-header,.ecosystem .section-header{
        text-align:left;max-width:390px;margin:0;
    }
    .services-grid,.process-grid,.ecosystem-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .service-card,.process-card,.eco-card{min-height:178px;}
    .service-card{padding:26px 23px;}
    .service-icon{width:50px;height:50px;margin-bottom:16px;}
    .process-card,.eco-card{padding:26px 23px;}
    .process-card i,.eco-card i{margin-bottom:16px;}
}
@media (max-width:1400px){
    .hero-grid{gap:44px;}
    .hero-left h1{font-size:clamp(2.2rem,4.4vw,3.6rem);margin:20px 0;}
    .hero-left p{font-size:1.02rem;}
    .hero-video .play-btn{width:62px;height:62px;font-size:1.2rem;}
    .card-one{left:-16px;top:24px;}
    .card-two{right:-14px;top:150px;}
    .card-three{left:10px;bottom:-18px;}
}
@media (min-width:901px) and (max-height:760px){
    .hero{min-height:calc(100svh - 82px);padding:22px 0;}
    .hero-left h1{font-size:clamp(2.45rem,3.8vw,3.3rem);line-height:1.08;margin:15px 0;}
    .hero-left p{font-size:.96rem;line-height:1.65;}
    .badge{padding:9px 16px;font-size:.9rem;}
    .hero-buttons{margin-top:22px;}
    .btn-primary,.btn-outline{padding:13px 27px;}
    .browser{max-width:560px;margin-left:auto;}
    .browser-top{height:38px;}
    .hero-video{aspect-ratio:auto;height:clamp(230px,44vh,270px);}
    .browser-stats{gap:10px;padding:12px 16px 16px;}
    .browser-stats div{padding:12px 8px;border-radius:12px;}
    .browser-stats strong{font-size:.9rem;}
    .browser-stats span{font-size:.78rem;}
    .floating-card{padding:11px 15px;border-radius:14px;}
    .card-one{top:12px;left:-10px;}
    .card-two{right:-10px;top:122px;}
    .card-three{left:14px;bottom:-12px;}
}
@media (max-width:1080px){
    .services-grid,.features-grid,.ecosystem-grid,.process-grid,.reviews-grid{grid-template-columns:repeat(2,1fr);}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .hero-grid{gap:50px;}
}
@media (max-width:900px){
    .hero{background-position:68% center;}
    .nav{
        position:fixed;top:82px;left:0;right:0;background:var(--bg-card);
        flex-direction:column;gap:0;padding:10px 24px 20px;
        border-bottom:1px solid var(--border);
        transform:translateY(-130%);opacity:0;visibility:hidden;
        transition:.3s;
    }
    .nav.open{transform:translateY(0);opacity:1;visibility:visible;}
    .nav a{padding:14px 0;border-bottom:1px solid var(--border);width:100%;}
    .menu-mobile{display:flex;}

    .hero-grid{grid-template-columns:1fr;}
    .hero-right{margin-top:12px;}
    .floating-card{display:none;}

    .about-grid{grid-template-columns:1fr;}
    .profile-card{max-width:280px;margin:0 auto;}
    .about-list{grid-template-columns:1fr;}

    .portfolio-grid{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;gap:36px;}
    .footer-bottom-row{justify-content:center;text-align:center;}
}
@media (max-width:640px){
    .header-actions{gap:8px;}
    .header .logo-image{width:132px;}
    .lang-toggle a,.theme-toggle{width:36px;height:36px;}
    .menu-mobile{width:40px;height:40px;}
    .hero{
        background-image:
            linear-gradient(rgba(248,250,252,.93),rgba(248,250,252,.88)),
            url('imagens/hero-tech-background.webp');
        background-position:72% center;
    }
    html.dark .hero{
        background-image:
            linear-gradient(rgba(11,17,32,.94),rgba(11,17,32,.9)),
            url('imagens/hero-tech-background.webp');
    }
    .services-grid,.features-grid,.ecosystem-grid,.process-grid,.reviews-grid{grid-template-columns:1fr;}
    .browser-stats{grid-template-columns:repeat(3,1fr);gap:8px;padding:14px;}
    .browser-stats div{padding:14px 6px;border-radius:12px;}
    .browser-stats strong{font-size:.78rem;}
    .browser-stats span{font-size:.72rem;}
    .hero-video .play-btn{width:56px;height:56px;font-size:1.1rem;}
    .video-placeholder{padding:20px;}
    .video-placeholder strong{max-width:300px;font-size:1rem;}
    .video-placeholder span{max-width:280px;font-size:.7rem;}
    .project-highlights li{grid-template-columns:1fr;gap:4px;}
    .project-actions{align-items:stretch;flex-direction:column;}
    .project-actions a{justify-content:center;}
    .cta-box{padding:42px 24px;}
    .whatsapp-button{width:52px;height:52px;bottom:20px;right:20px;font-size:1.3rem;}
    .scroll-top{width:42px;height:42px;bottom:20px;right:82px;}
    .techs .container{flex-direction:column;gap:18px;}
    .hero-buttons{width:100%;flex-direction:column;}
    .hero-buttons .btn-primary,.hero-buttons .btn-outline{width:100%;}
    .section-header{margin-bottom:36px;}
    .hero{margin-top:82px;min-height:auto;padding:48px 0 56px;}
    .hero-left{display: flex; flex-direction: column; align-items: center;}
    .service-card.reveal.in{display: flex; flex-direction: column; align-items: center;}
    .eco-card.reveal.in{display: flex; flex-direction: column; align-items: center;}
    .process-card.reveal.in{display: flex; flex-direction: column; align-items: center;}
}

/*==================================
    EXPERIÊNCIA PREMIUM POR SCROLL
===================================*/
.header{
    transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.header.is-scrolled{
    background:rgba(255,255,255,.96);
    border-bottom-color:rgba(148,163,184,.22);
    box-shadow:0 12px 35px rgba(15,23,42,.08);
}
html.dark .header.is-scrolled{
    background:rgba(11,17,32,.96);
    box-shadow:0 14px 38px rgba(0,0,0,.24);
}
.scroll-progress{
    position:absolute;left:0;right:0;bottom:-1px;height:3px;
    background:transparent;overflow:hidden;pointer-events:none;
}
.scroll-progress span{
    display:block;width:100%;height:100%;background:var(--primary);
    transform:scaleX(0);transform-origin:left center;will-change:transform;
}

.hero{min-height:clamp(580px,78svh,720px);}
.hero-grid{position:relative;isolation:isolate;}
.hero-grid::before{
    content:"";position:absolute;right:-8%;top:-12%;width:48%;aspect-ratio:1;
    background-image:linear-gradient(rgba(37,99,235,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.08) 1px,transparent 1px);
    background-size:42px 42px;mask-image:linear-gradient(135deg,#000,transparent 72%);
    z-index:-1;pointer-events:none;
}
.js .hero-animate{
    opacity:0;animation:hero-copy-in .78s cubic-bezier(.16,.8,.24,1) forwards;
}
.js .hero-visual{animation-name:hero-visual-in;}
.js .hero-delay-1{animation-delay:.08s;}
.js .hero-delay-2{animation-delay:.18s;}
.js .hero-delay-3{animation-delay:.3s;}
.js .hero-delay-4{animation-delay:.42s;}
@keyframes hero-copy-in{
    from{opacity:0;transform:translate3d(0,24px,0);}
    to{opacity:1;transform:translate3d(0,0,0);}
}
@keyframes hero-visual-in{
    from{opacity:0;transform:translate3d(0,30px,0) scale(.965);}
    to{opacity:1;transform:translate3d(0,0,0) scale(1);}
}

.section-header h2::after{
    content:"";display:block;width:52px;height:3px;margin:18px auto 0;border-radius:99px;
    background:var(--primary);transform:scaleX(0);transform-origin:left center;
    transition:transform .65s cubic-bezier(.16,.8,.24,1) .2s;
}
.section-header.in h2::after{transform:scaleX(1);}
@media (min-width:1081px){
    .services .section-header h2::after,.ecosystem .section-header h2::after{margin-left:0;}
}

.service-card:hover{
    transform:translateY(-6px);border-color:rgba(37,99,235,.58);
    box-shadow:0 18px 42px rgba(15,23,42,.09);
}
.service-card:hover .service-icon{transform:translateY(-3px) scale(1.05);}
.service-card.in .service-icon,.feature.in i,.eco-card.in i,.contact-card.in i{
    animation:icon-pop .55s cubic-bezier(.16,.8,.24,1) both;
}
@keyframes icon-pop{
    from{opacity:.35;transform:scale(.82);}
    to{opacity:1;transform:scale(1);}
}

.portfolio-grid{grid-template-columns:1fr;gap:clamp(44px,6vw,76px);}
.project{
    display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    align-items:start;gap:clamp(26px,4vw,54px);overflow:visible;
    background:transparent;border:0;border-radius:0;
}
.project:hover{transform:none;box-shadow:none;}
.project-image{
    position:sticky;top:112px;height:auto!important;aspect-ratio:16/9!important;
    border:1px solid var(--border);border-radius:22px;
    background:#05070D;display:grid;place-items:center;
    box-shadow:0 22px 55px rgba(15,23,42,.1);
}
.portfolio .project-image .project-img{
    position:absolute;inset:0;width:100%!important;height:100%!important;
    object-fit:contain!important;object-position:center!important;
}
.portfolio .project-image::after{display:none;}
html.dark .project-image{background:#02040A;}
.project-content{
    min-height:430px;padding:clamp(28px,4vw,42px);
    background:var(--bg-card);border:1px solid var(--border);border-radius:22px;
}
.project:nth-child(even) .project-image{order:2;}
.project:nth-child(even) .project-content{order:1;}
.project-link i{transition:transform .3s ease;}
.project-link:hover i{transform:translateX(4px);}
.project-content .case-cta:focus-visible,.project-link:focus-visible{outline-offset:4px;}

.process .container{display:block;}
.process .section-header{text-align:center;max-width:760px;margin:0 auto 58px;}
.process-grid{
    --process-progress:0;position:relative;isolation:isolate;
    grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;padding-top:34px;
}
.process-grid::before,.process-grid::after{
    content:"";position:absolute;left:5%;right:5%;top:14px;height:2px;border-radius:99px;z-index:-1;
}
.process-grid::before{background:rgba(148,163,184,.25);}
.process-grid::after{
    background:var(--primary);transform:scaleX(var(--process-progress));
    transform-origin:left center;will-change:transform;
}
.process-card{opacity:.56;transform:translateY(0);}
.js .process-card.reveal.in{opacity:.56;transform:translateY(0);}
.process-card::before{
    content:"";position:absolute;left:50%;top:-27px;width:13px;height:13px;border-radius:50%;
    background:#475569;border:3px solid var(--secondary);transform:translateX(-50%);
    transition:background .3s ease,box-shadow .3s ease,transform .3s ease;
}
.process-card.is-past{opacity:.8;}
.js .process-card.reveal.in.is-past{opacity:.8;}
.process-card.is-active{
    opacity:1;border-color:rgba(96,165,250,.7);background:rgba(37,99,235,.13);
    transform:translateY(-7px);
}
.js .process-card.reveal.in.is-active{opacity:1;transform:translateY(-7px);}
.process-card.is-past::before,.process-card.is-active::before{background:var(--primary);}
.process-card.is-active::before{box-shadow:0 0 0 7px rgba(37,99,235,.2);transform:translateX(-50%) scale(1.08);}
.process-card.is-active > span{color:#60A5FA;opacity:.65;}
.process-card.is-active i{transform:scale(1.1);color:#93C5FD;}

@media (min-width:1081px){
    .process .container{
        display:grid;
        grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);
        align-items:start;
        gap:clamp(56px,6vw,96px);
    }
    .process .section-header{
        position:sticky;
        top:clamp(116px,16vh,150px);
        align-self:start;
        text-align:left;
        max-width:430px;
        margin:0;
    }
    .process .section-header h2::after{margin-left:0;}
    .process-grid{
        grid-template-columns:1fr;
        max-width:none;
        margin:0;
        padding:0 0 0 46px;
        gap:22px;
    }
    .process-grid::before,.process-grid::after{
        left:14px;
        right:auto;
        top:0;
        bottom:0;
        width:2px;
        height:auto;
    }
    .process-grid::after{
        transform:scaleY(var(--process-progress));
        transform-origin:center top;
    }
    .process-card{min-height:170px;padding:30px;}
    .process-card::before{left:-39px;top:32px;transform:none;}
    .process-card.is-active::before{transform:scale(1.08);}
    .process-card,.js .process-card.reveal.in{opacity:.82;transform:none;}
    .process-card.is-past,.js .process-card.reveal.in.is-past{opacity:.92;}
    .process-card.is-active,.js .process-card.reveal.in.is-active{opacity:1;transform:none;}
    .process-card:hover{transform:none;}
}

.about-image{position:relative;padding-bottom:52px;}
.about-image::after{
    content:"UX • PERFORMANCE • CODE";position:absolute;left:50%;right:auto;bottom:0;
    transform:translateX(-50%);white-space:nowrap;
    padding:9px 14px;border-radius:999px;background:var(--secondary);color:#BFDBFE;
    border:1px solid rgba(96,165,250,.25);font-size:.66rem;font-weight:700;letter-spacing:.08em;
    box-shadow:0 14px 34px rgba(15,23,42,.18);
}

.cta{padding-top:clamp(18px,3vw,36px);}
.cta-box{
    background:
        radial-gradient(circle at 84% 10%,rgba(37,99,235,.42),transparent 34%),
        linear-gradient(135deg,#0F172A,#111C34 58%,#172554);
    border:1px solid rgba(96,165,250,.22);
    box-shadow:0 28px 70px rgba(15,23,42,.2);
}
.cta-box .btn-primary{box-shadow:0 12px 30px rgba(0,0,0,.18);}
.cta-box .btn-primary:hover{transform:translateY(-4px) scale(1.015);}

@media (max-width:1080px){
    .process-grid{
        grid-template-columns:1fr;max-width:720px;margin:0 auto;padding:0 0 0 42px;gap:16px;
    }
    .process-grid::before,.process-grid::after{left:13px;right:auto;top:0;bottom:0;width:2px;height:auto;}
    .process-grid::after{transform:scaleY(var(--process-progress));transform-origin:center top;}
    .process-card::before{left:-36px;top:28px;transform:none;}
    .process-card.is-active::before{transform:scale(1.08);}
    .process-card{min-height:0;}
}

@media (max-width:900px){
    .project{grid-template-columns:1fr;gap:18px;}
    .project-image{position:relative;top:auto;height:auto!important;aspect-ratio:16/9!important;}
    .project:nth-child(even) .project-image,.project:nth-child(even) .project-content{order:initial;}
    .project-content{min-height:0;}
}

@media (max-width:640px){
    .hero-grid::before{display:none;}
    .process .section-header{margin-bottom:40px;}
    .process-card.reveal.in{display:block;align-items:initial;}
    .project-content{padding:26px 22px;}
}

@media (prefers-reduced-motion:reduce){
    .hero-animate{opacity:1!important;animation:none!important;transform:none!important;}
    .scroll-progress span,.process-grid::after{will-change:auto;}
    .section-header h2::after{transform:scaleX(1);transition:none;}
    .service-card.in .service-icon,.feature.in i,.eco-card.in i,.contact-card.in i{animation:none;}
    .project-image{position:relative;top:auto;}
    .process-card,.process-card.is-active{opacity:1;transform:none;}
    .js .process-card.reveal.in,.js .process-card.reveal.in.is-past,.js .process-card.reveal.in.is-active{opacity:1;transform:none;}
}

/*==================================
    LIQUID GLASS — SAFEDEVS
    Camada visual progressiva: mantém
    contraste e possui fallback sólido.
===================================*/
:root{
    --glass-light:rgba(255,255,255,.64);
    --glass-light-strong:rgba(255,255,255,.82);
    --glass-light-border:rgba(255,255,255,.82);
    --glass-dark:rgba(255,255,255,.065);
    --glass-dark-strong:rgba(255,255,255,.095);
    --glass-dark-border:rgba(255,255,255,.14);
    --glass-shadow:0 18px 50px rgba(15,23,42,.10),inset 0 1px 0 rgba(255,255,255,.72);
    --glass-shadow-dark:0 20px 54px rgba(2,6,23,.26),inset 0 1px 0 rgba(255,255,255,.12);
}

/* Fundos com profundidade suave para o vidro ficar perceptível. */
.services,.reviews,.contact{
    background:
        radial-gradient(circle at 10% 10%,rgba(96,165,250,.13),transparent 30%),
        radial-gradient(circle at 92% 88%,rgba(37,99,235,.08),transparent 32%),
        #F8FAFC;
}
.portfolio,.about,.faq{
    background:
        radial-gradient(circle at 90% 12%,rgba(37,99,235,.10),transparent 28%),
        radial-gradient(circle at 8% 84%,rgba(147,197,253,.14),transparent 32%),
        #EEF3F9;
}
html.dark .services,html.dark .reviews,html.dark .contact,
html.dark .portfolio,html.dark .about,html.dark .faq{
    background:
        radial-gradient(circle at 12% 10%,rgba(37,99,235,.16),transparent 28%),
        radial-gradient(circle at 90% 86%,rgba(96,165,250,.08),transparent 30%),
        var(--bg-page);
}

/* Header e navegação. */
.header{
    background:rgba(255,255,255,.58);
    border-bottom:1px solid rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(22px) saturate(175%);
    backdrop-filter:blur(22px) saturate(175%);
    box-shadow:0 8px 30px rgba(15,23,42,.035),inset 0 1px 0 rgba(255,255,255,.78);
}
.header.is-scrolled{
    background:rgba(255,255,255,.76);
    border-bottom-color:rgba(255,255,255,.88);
    box-shadow:0 14px 38px rgba(15,23,42,.09),inset 0 1px 0 rgba(255,255,255,.9);
}
html.dark .header,html.dark .header.is-scrolled{
    background:rgba(11,17,32,.66);
    border-bottom-color:rgba(148,163,184,.16);
    box-shadow:0 14px 38px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08);
}
.nav a{padding:8px 12px;border-radius:999px;}
.nav a:hover,.nav a[aria-current="page"]{background:rgba(37,99,235,.09);}
.nav a::after{left:16%;bottom:2px;}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:68%;}

.lang-toggle a,.theme-toggle,.menu-mobile,.scroll-top{
    background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.42));
    border:1px solid rgba(255,255,255,.88);
    -webkit-backdrop-filter:blur(16px) saturate(170%);
    backdrop-filter:blur(16px) saturate(170%);
    box-shadow:0 8px 22px rgba(15,23,42,.09),inset 0 1px 0 rgba(255,255,255,.92);
}
html.dark .lang-toggle a,html.dark .theme-toggle,html.dark .menu-mobile,html.dark .scroll-top{
    background:linear-gradient(145deg,rgba(51,65,85,.72),rgba(15,23,42,.46));
    border-color:rgba(255,255,255,.14);
    box-shadow:0 10px 24px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.12);
}

/* Botões: o CTA principal continua sólido; o secundário recebe vidro. */
.btn-primary{
    border:1px solid rgba(255,255,255,.28);
    box-shadow:0 12px 28px rgba(37,99,235,.24),inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-outline,.project-content .case-cta{
    background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.32));
    border-color:rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    backdrop-filter:blur(14px) saturate(160%);
    box-shadow:0 10px 26px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.88);
}
html.dark .btn-outline,html.dark .project-content .case-cta{
    background:linear-gradient(145deg,rgba(51,65,85,.48),rgba(15,23,42,.32));
    border-color:rgba(148,163,184,.22);
    box-shadow:0 10px 28px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.1);
}
.btn-outline:hover,.project-content .case-cta:hover{
    background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.52);
    box-shadow:0 14px 32px rgba(37,99,235,.14),inset 0 1px 0 rgba(255,255,255,.75);
}

/* Pílulas e elementos flutuantes. */
.badge,.section-tag,.floating-card,.tech-list div,.about-image::after,.project-domain{
    -webkit-backdrop-filter:blur(16px) saturate(170%);
    backdrop-filter:blur(16px) saturate(170%);
    border:1px solid rgba(255,255,255,.72);
    box-shadow:0 12px 32px rgba(15,23,42,.09),inset 0 1px 0 rgba(255,255,255,.74);
}
.badge,.section-tag,.floating-card{
    background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,255,255,.42));
}
.features .section-tag,.process .section-tag,.ecosystem .section-tag,
.tech-list div,.about-image::after,.project-domain{
    background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.045));
    border-color:rgba(255,255,255,.15);
    box-shadow:0 14px 34px rgba(2,6,23,.22),inset 0 1px 0 rgba(255,255,255,.12);
}
html.dark .badge,html.dark .section-tag,html.dark .floating-card{
    background:linear-gradient(145deg,rgba(51,65,85,.68),rgba(15,23,42,.42));
    border-color:rgba(255,255,255,.14);
    box-shadow:var(--glass-shadow-dark);
}

/* Superfícies claras. */
.browser,.browser-stats div,.service-card,.review-card,.faq-item,
.profile-card,.contact-card,.project-content{
    background:linear-gradient(145deg,var(--glass-light-strong),var(--glass-light));
    border-color:var(--glass-light-border);
    -webkit-backdrop-filter:blur(18px) saturate(155%);
    backdrop-filter:blur(18px) saturate(155%);
    box-shadow:var(--glass-shadow);
}
html.dark .browser,html.dark .browser-stats div,html.dark .service-card,
html.dark .review-card,html.dark .faq-item,html.dark .profile-card,
html.dark .contact-card,html.dark .project-content{
    background:linear-gradient(145deg,rgba(30,41,59,.78),rgba(15,23,42,.54));
    border-color:rgba(255,255,255,.12);
    box-shadow:var(--glass-shadow-dark);
}
.service-card:hover,.review-card:hover,.contact-card:hover,.project-content:hover{
    border-color:rgba(96,165,250,.52);
    box-shadow:0 22px 56px rgba(37,99,235,.13),inset 0 1px 0 rgba(255,255,255,.88);
}

/* Vidro escuro nas seções institucionais. */
.feature,.process-card,.eco-card{
    background:linear-gradient(145deg,var(--glass-dark-strong),var(--glass-dark));
    border-color:var(--glass-dark-border);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    backdrop-filter:blur(18px) saturate(150%);
    box-shadow:var(--glass-shadow-dark);
}
.feature:hover,.process-card:hover,.eco-card:hover,
.process-card.is-active{
    background:linear-gradient(145deg,rgba(37,99,235,.19),rgba(255,255,255,.07));
    border-color:rgba(96,165,250,.46);
    box-shadow:0 22px 54px rgba(2,6,23,.28),inset 0 1px 0 rgba(255,255,255,.14);
}

/* Moldura do vídeo e CTA recebem brilho interno, sem perder contraste. */
.browser,.project-image,.cta-box{border:1px solid rgba(255,255,255,.3);}
.browser{box-shadow:0 34px 76px rgba(15,23,42,.18),inset 0 1px 0 rgba(255,255,255,.82);}
.cta-box{
    box-shadow:0 28px 70px rgba(15,23,42,.23),inset 0 1px 0 rgba(255,255,255,.16);
}

@media (max-width:900px){
    .nav{
        left:4%;right:4%;top:90px;border-radius:22px;
        background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);
        -webkit-backdrop-filter:blur(22px) saturate(170%);
        backdrop-filter:blur(22px) saturate(170%);
        box-shadow:0 20px 50px rgba(15,23,42,.14),inset 0 1px 0 rgba(255,255,255,.88);
    }
    html.dark .nav{
        background:rgba(15,23,42,.82);border-color:rgba(255,255,255,.14);
        box-shadow:0 22px 54px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1);
    }
    .nav a{padding:14px 16px;}
    .nav a::after{display:none;}
}

@media (max-width:640px){
    .header{-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);}
    .browser,.service-card,.review-card,.faq-item,.profile-card,.contact-card,
    .project-content,.feature,.process-card,.eco-card{
        -webkit-backdrop-filter:blur(12px) saturate(140%);
        backdrop-filter:blur(12px) saturate(140%);
    }
}

/* Fallback para navegadores sem suporte a desfoque de fundo. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .header,.header.is-scrolled,.nav{background:rgba(255,255,255,.97);}
    html.dark .header,html.dark .header.is-scrolled,html.dark .nav{background:rgba(11,17,32,.97);}
    .badge,.section-tag,.floating-card,.browser,.browser-stats div,.service-card,
    .review-card,.faq-item,.profile-card,.contact-card,.project-content{background:var(--bg-card);}
    .feature,.process-card,.eco-card{background:#182238;}
}

/*==================================
    REFINO DE INTERAÇÕES E CONTRASTE
===================================*/
/* Estados explícitos evitam heranças de cor entre os temas. */
.btn-primary:hover,.btn-primary:focus-visible{
    color:#FFFFFF;background:var(--primary-dark);
}
.btn-outline:hover,.btn-outline:focus-visible{
    color:var(--primary-dark);background:rgba(37,99,235,.10);
    border-color:rgba(37,99,235,.55);
}
.project-content .case-cta:hover,
.project-content .case-cta:focus-visible{
    color:var(--primary-dark);
    background:rgba(37,99,235,.11);
    border-color:rgba(37,99,235,.62);
    box-shadow:0 12px 28px rgba(37,99,235,.13),inset 0 1px 0 rgba(255,255,255,.82);
}
html.dark .btn-outline:hover,html.dark .btn-outline:focus-visible,
html.dark .project-content .case-cta:hover,
html.dark .project-content .case-cta:focus-visible{
    color:#FFFFFF;
    background:rgba(37,99,235,.72);
    border-color:rgba(147,197,253,.65);
    box-shadow:0 14px 30px rgba(37,99,235,.22),inset 0 1px 0 rgba(255,255,255,.18);
}
.cta-box .btn-primary:hover,.cta-box .btn-primary:focus-visible{
    color:var(--primary-dark);background:#FFFFFF;
}

.theme-toggle:hover,.theme-toggle:focus-visible,
.menu-mobile:hover,.menu-mobile:focus-visible,
.scroll-top:hover,.scroll-top:focus-visible{
    color:var(--primary);background:rgba(219,234,254,.82);
    border-color:rgba(37,99,235,.38);
    box-shadow:0 12px 28px rgba(37,99,235,.14),inset 0 1px 0 rgba(255,255,255,.9);
}
html.dark .theme-toggle:hover,html.dark .theme-toggle:focus-visible,
html.dark .menu-mobile:hover,html.dark .menu-mobile:focus-visible,
html.dark .scroll-top:hover,html.dark .scroll-top:focus-visible{
    color:#BFDBFE;background:rgba(37,99,235,.28);
    border-color:rgba(96,165,250,.45);
}
.lang-toggle a:hover,.lang-toggle a:focus-visible{
    opacity:1;background:rgba(219,234,254,.72);border-color:rgba(37,99,235,.34);
}
html.dark .lang-toggle a:hover,html.dark .lang-toggle a:focus-visible{
    background:rgba(37,99,235,.25);border-color:rgba(96,165,250,.42);
}
.project-link:hover,.project-link:focus-visible,
.contact-card a:hover,.contact-card a:focus-visible{
    color:var(--primary-dark);text-decoration:none;
}
html.dark .project-link:hover,html.dark .project-link:focus-visible,
html.dark .contact-card a:hover,html.dark .contact-card a:focus-visible{
    color:#93C5FD;
}

/* Selo abaixo do card Jonas: contraste reforçado em ambos os temas. */
.about-image::after{
    color:#FFFFFF;
    background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(30,64,175,.9));
    border:1px solid rgba(147,197,253,.58);
    box-shadow:0 14px 34px rgba(15,23,42,.25),inset 0 1px 0 rgba(255,255,255,.2);
    text-shadow:0 1px 8px rgba(0,0,0,.28);
}
html.dark .about-image::after{
    color:#DBEAFE;
    background:linear-gradient(135deg,rgba(30,41,59,.94),rgba(30,64,175,.82));
    border-color:rgba(147,197,253,.46);
}

/* FAQ: vidro mais evidente e resposta integrada ao mesmo painel. */
.faq-list{gap:16px;}
.faq-item{
    background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(255,255,255,.42));
    border:1px solid rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(22px) saturate(170%);
    backdrop-filter:blur(22px) saturate(170%);
    box-shadow:0 14px 36px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.95);
}
.faq-item:hover{
    border-color:rgba(96,165,250,.52);
    box-shadow:0 18px 44px rgba(37,99,235,.11),inset 0 1px 0 rgba(255,255,255,.98);
}
.faq-item.open{
    background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(219,234,254,.58));
    border-color:rgba(37,99,235,.46);
    box-shadow:0 20px 48px rgba(37,99,235,.13),inset 0 1px 0 rgba(255,255,255,.98);
}
.faq-question{transition:color .3s ease,background-color .3s ease;}
.faq-question:hover,.faq-question:focus-visible{color:var(--primary);background:rgba(37,99,235,.045);}
.faq-question i{
    width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:rgba(219,234,254,.72);border:1px solid rgba(255,255,255,.86);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.faq-item.open .faq-question i{color:#FFFFFF;background:var(--primary);border-color:rgba(255,255,255,.3);}
.faq-answer p{border-top:1px solid rgba(148,163,184,.16);padding-top:18px;}
html.dark .faq-item{
    background:linear-gradient(145deg,rgba(30,41,59,.76),rgba(15,23,42,.48));
    border-color:rgba(255,255,255,.12);box-shadow:var(--glass-shadow-dark);
}
html.dark .faq-item:hover,html.dark .faq-item.open{
    background:linear-gradient(145deg,rgba(30,64,175,.28),rgba(15,23,42,.62));
    border-color:rgba(96,165,250,.4);
}
html.dark .faq-question i{background:rgba(37,99,235,.22);border-color:rgba(255,255,255,.12);}
html.dark .faq-answer p{border-top-color:rgba(148,163,184,.14);}

/* Contato: cartões de vidro com ícones também translúcidos. */
.contact-card{
    position:relative;overflow:hidden;
    background:
        radial-gradient(circle at 86% 8%,rgba(96,165,250,.2),transparent 34%),
        linear-gradient(145deg,rgba(255,255,255,.76),rgba(255,255,255,.4));
    border:1px solid rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(22px) saturate(170%);
    backdrop-filter:blur(22px) saturate(170%);
    box-shadow:0 16px 42px rgba(15,23,42,.09),inset 0 1px 0 rgba(255,255,255,.96);
}
.contact-card:hover{
    transform:translateY(-5px);
    border-color:rgba(96,165,250,.56);
    box-shadow:0 22px 52px rgba(37,99,235,.14),inset 0 1px 0 rgba(255,255,255,.98);
}
.contact-card i{
    background:linear-gradient(145deg,rgba(219,234,254,.86),rgba(255,255,255,.48));
    border:1px solid rgba(255,255,255,.9);
    box-shadow:0 10px 24px rgba(37,99,235,.1),inset 0 1px 0 rgba(255,255,255,.95);
}
.contact-card:hover i{background:var(--primary);color:#FFFFFF;border-color:rgba(255,255,255,.32);}
html.dark .contact-card{
    background:
        radial-gradient(circle at 86% 8%,rgba(37,99,235,.2),transparent 36%),
        linear-gradient(145deg,rgba(30,41,59,.78),rgba(15,23,42,.5));
    border-color:rgba(255,255,255,.12);box-shadow:var(--glass-shadow-dark);
}
html.dark .contact-card:hover{border-color:rgba(96,165,250,.42);}
html.dark .contact-card i{
    background:linear-gradient(145deg,rgba(37,99,235,.26),rgba(30,41,59,.5));
    border-color:rgba(255,255,255,.12);
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .faq-item,.contact-card{background:var(--bg-card);}
    html.dark .faq-item,html.dark .contact-card{background:#131B2E;}
}

/* =========================================================
   CONSENTIMENTO DE COOKIES — LIQUID GLASS
   ========================================================= */
.footer-legal{display:flex;align-items:center;justify-content:center;gap:22px;text-align:center;}
.cookie-settings-link{
    appearance:none;border:0;background:transparent;color:#94A3B8;font:inherit;font-size:.85rem;
    padding:4px 0;cursor:pointer;text-decoration:underline;text-underline-offset:4px;
    transition:color .2s ease;
}
.cookie-settings-link:hover,.cookie-settings-link:focus-visible{color:#BFDBFE;}

.cookie-banner[hidden]{display:none!important;}
.cookie-banner{
    position:fixed;z-index:3000;left:50%;bottom:22px;transform:translateX(-50%);
    width:min(1180px,calc(100% - 32px));display:flex;align-items:center;justify-content:space-between;gap:28px;
    padding:20px 22px;border:1px solid rgba(255,255,255,.88);border-radius:24px;
    background:
        radial-gradient(circle at 8% 0%,rgba(96,165,250,.2),transparent 34%),
        linear-gradient(145deg,rgba(255,255,255,.9),rgba(241,245,249,.72));
    -webkit-backdrop-filter:blur(24px) saturate(175%);backdrop-filter:blur(24px) saturate(175%);
    box-shadow:0 22px 70px rgba(15,23,42,.2),inset 0 1px 0 rgba(255,255,255,.96);
    animation:cookie-enter .38s ease both;
}
.cookie-banner-copy{display:flex;align-items:flex-start;gap:16px;max-width:670px;}
.cookie-banner-copy h2{font-size:1.08rem;line-height:1.35;margin:0 0 5px;color:var(--text);}
.cookie-banner-copy p{font-size:.86rem;line-height:1.6;color:var(--text-light);margin:0;}
.cookie-icon{
    flex:0 0 42px;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:var(--primary);
    background:linear-gradient(145deg,rgba(219,234,254,.94),rgba(255,255,255,.6));
    border:1px solid rgba(255,255,255,.94);box-shadow:0 8px 24px rgba(37,99,235,.13),inset 0 1px 0 #fff;
}
.cookie-actions,.cookie-dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;}
.cookie-btn{
    appearance:none;border:1px solid transparent;border-radius:12px;min-height:44px;padding:10px 16px;
    font:inherit;font-size:.78rem;font-weight:700;line-height:1.2;cursor:pointer;white-space:nowrap;
    transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.cookie-btn:hover{transform:translateY(-2px);}
.cookie-btn-primary{background:var(--primary);color:#fff;box-shadow:0 9px 24px rgba(37,99,235,.24);}
.cookie-btn-primary:hover,.cookie-btn-primary:focus-visible{background:var(--primary-dark);color:#fff;}
.cookie-btn-secondary{background:rgba(255,255,255,.74);border-color:rgba(148,163,184,.34);color:var(--secondary);}
.cookie-btn-secondary:hover,.cookie-btn-secondary:focus-visible{background:#fff;border-color:rgba(37,99,235,.48);color:var(--primary-dark);}
.cookie-btn-ghost{background:transparent;color:var(--primary-dark);}
.cookie-btn-ghost:hover,.cookie-btn-ghost:focus-visible{background:rgba(37,99,235,.09);color:var(--primary-dark);}
.cookie-btn:focus-visible,.cookie-settings-link:focus-visible,.cookie-dialog-close:focus-visible,.cookie-switch input:focus-visible+span{
    outline:3px solid rgba(37,99,235,.38);outline-offset:3px;
}

.cookie-dialog{
    width:min(650px,calc(100% - 28px));max-height:min(760px,calc(100vh - 28px));overflow:auto;
    padding:0;border:1px solid rgba(255,255,255,.9);border-radius:26px;color:var(--text);
    background:
        radial-gradient(circle at 90% 0%,rgba(96,165,250,.2),transparent 34%),
        linear-gradient(145deg,rgba(255,255,255,.96),rgba(241,245,249,.9));
    -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
    box-shadow:0 28px 90px rgba(15,23,42,.28),inset 0 1px 0 rgba(255,255,255,.98);
}
.cookie-dialog::backdrop{background:rgba(15,23,42,.56);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);}
.cookie-dialog[open]{animation:cookie-dialog-enter .25s ease both;}
.cookie-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:27px 27px 18px;}
.cookie-dialog-header h2{font-size:1.55rem;margin:6px 0 6px;}
.cookie-dialog-header p{font-size:.9rem;color:var(--text-light);margin:0;}
.cookie-dialog-close{
    appearance:none;flex:0 0 40px;width:40px;height:40px;border-radius:12px;border:1px solid rgba(148,163,184,.26);
    display:grid;place-items:center;background:rgba(255,255,255,.58);color:var(--secondary);cursor:pointer;
}
.cookie-categories{display:grid;gap:12px;padding:4px 27px 24px;}
.cookie-category{
    display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 18px;border-radius:17px;
    background:rgba(255,255,255,.58);border:1px solid rgba(148,163,184,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
label.cookie-category{cursor:pointer;}
.cookie-category strong{display:block;font-size:.9rem;color:var(--text);margin-bottom:4px;}
.cookie-category p{font-size:.78rem;line-height:1.55;color:var(--text-light);margin:0;}
.cookie-always-on{flex:0 0 auto;color:var(--primary-dark);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.cookie-switch{position:relative;flex:0 0 48px;width:48px;height:28px;}
.cookie-switch input{position:absolute;opacity:0;width:1px;height:1px;}
.cookie-switch span{position:absolute;inset:0;border-radius:999px;background:#CBD5E1;border:1px solid rgba(100,116,139,.2);transition:.22s ease;}
.cookie-switch span::after{
    content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
    box-shadow:0 3px 8px rgba(15,23,42,.22);transition:transform .22s ease;
}
.cookie-switch input:checked+span{background:var(--primary);border-color:var(--primary);}
.cookie-switch input:checked+span::after{transform:translateX(20px);}
.cookie-dialog-actions{padding:18px 27px 27px;border-top:1px solid rgba(148,163,184,.18);}

html.dark .cookie-banner,html.dark .cookie-dialog{
    background:
        radial-gradient(circle at 8% 0%,rgba(37,99,235,.28),transparent 36%),
        linear-gradient(145deg,rgba(30,41,59,.96),rgba(15,23,42,.88));
    border-color:rgba(255,255,255,.15);box-shadow:0 24px 80px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.12);
}
html.dark .cookie-icon{background:rgba(37,99,235,.22);border-color:rgba(147,197,253,.22);box-shadow:none;}
html.dark .cookie-btn-secondary,html.dark .cookie-dialog-close,html.dark .cookie-category{
    background:rgba(30,41,59,.66);border-color:rgba(255,255,255,.12);color:#E2E8F0;
}
html.dark .cookie-btn-secondary:hover,html.dark .cookie-btn-secondary:focus-visible{background:rgba(37,99,235,.22);color:#DBEAFE;border-color:rgba(96,165,250,.38);}
html.dark .cookie-btn-ghost{color:#BFDBFE;}
html.dark .cookie-btn-ghost:hover,html.dark .cookie-btn-ghost:focus-visible{color:#fff;background:rgba(96,165,250,.14);}
html.dark .cookie-always-on{color:#93C5FD;}
html.dark .cookie-switch span{background:#475569;}
html.dark .cookie-dialog-actions{border-top-color:rgba(255,255,255,.1);}

@keyframes cookie-enter{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes cookie-dialog-enter{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

@media (max-width:900px){
    .cookie-banner{align-items:stretch;flex-direction:column;gap:16px;}
    .cookie-actions{width:100%;}
    .cookie-actions .cookie-btn{flex:1;}
    .footer-legal{flex-direction:column;gap:8px;}
}
@media (max-width:640px){
    .cookie-banner{bottom:10px;width:calc(100% - 20px);padding:17px;border-radius:20px;}
    .cookie-banner-copy{gap:12px;}
    .cookie-icon{display:none;}
    .cookie-actions{display:grid;grid-template-columns:1fr 1fr;}
    .cookie-actions .cookie-btn-primary{grid-column:1/-1;grid-row:1;}
    .cookie-btn{white-space:normal;padding:10px 11px;}
    .cookie-dialog-header{padding:22px 20px 16px;}
    .cookie-dialog-header h2{font-size:1.3rem;}
    .cookie-categories{padding:4px 20px 20px;}
    .cookie-category{padding:15px 14px;gap:12px;}
    .cookie-dialog-actions{padding:16px 20px 22px;display:grid;grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
    .cookie-banner,.cookie-dialog[open]{animation:none;}
    .cookie-btn,.cookie-switch span,.cookie-switch span::after{transition:none;}
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .cookie-banner,.cookie-dialog{background:#F8FAFC;}
    html.dark .cookie-banner,html.dark .cookie-dialog{background:#172033;}
}