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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #f4f4f4;
            overflow-x: hidden;
        }

        /* Tipografia e Gradientes */
        .gradient-text {
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(to right, #346d8c, #d9f924);
        }

        /* Efeitos Glassmorphism */
        .glass-dark {
            background: rgba(1, 28, 38, 0.85); /* brand-900 translúcido */
            backdrop-filter: blur(12px);
            border: 1px solid rgba(217, 249, 36, 0.1);
        }

        .glass-light {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        /* Hero Section Background */
        .pattern-bg {
            background-color: #232325;
            background-image: radial-gradient(circle at top right, rgba(217, 249, 36, 0.15), transparent 40%),
                              linear-gradient(135deg, #011c26 0%, #03313d 100%);
        }

        /* Animação de Flutuação da Foto (Hero) */
        @keyframes floatHero {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }
        .hero-photo-container {
            animation: floatHero 6s ease-in-out infinite;
            position: relative;
        }
        
        /* SOLUÇÃO DO CORTE DA FOTO: MÁSCARA DE GRADIENTE */
        /* Faz a parte inferior da imagem desaparecer suavemente para se misturar ao fundo */
        .mask-bottom {
            -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
        }
        
        /* Brilho atrás da foto */
        .hero-photo-container::before {
            content: '';
            position: absolute;
            width: 80%;
            height: 80%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(circle, rgba(217, 249, 36, 0.2), transparent 70%);
            filter: blur(40px);
            z-index: -1;
        }
        .meta-logo{

            position:absolute;
            top:30px;
            right:40px;
            width:120px;
            opacity:.80;
            filter:blur(2px);
            }

            .google-logo{
            position:absolute;
           bottom: 250px;
            left:40px;
            width:120px;
            opacity:.80;
            filter:blur(2px);

}

        /* Botão Premium com Efeito de Brilho */
        .hero-cta {
            position: relative;
            overflow: hidden;
            transition: 0.3s;
        }
        .hero-cta:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 35px rgba(217, 249, 36, 0.35);
        }
        .hero-cta::before {
            content: '';
            position: absolute;
            top: 0;
            left: -120%;
            width: 70%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            animation: heroShine 4s infinite;
        }
        @keyframes heroShine {
            0% { left: -120%; }
            20% { left: 150%; }
            100% { left: 150%; }
        }

        /* Efeito Reveal (Scroll) */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: 0.8s ease-out;
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Carrossel (Swiper) Customizações */
        .image-placeholder {
            position: relative;
            padding-bottom: 120%;
            height: 0;
            overflow: hidden;
            border-radius: 0.75rem;
            background-color: #f1f5f9;
            border: 1px solid #e2e8f0;
        }
        .image-placeholder img {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            object-fit: contain; background-color: #fff;
        }
        .swiper-slide { height: auto !important; }
        .swiper-pagination { margin-top: 2rem !important; position: relative !important; }
        .swiper-pagination-bullet { background-color: #94a3b8 !important; opacity: 0.5 !important; transition: all 0.3s ease !important; }
        .swiper-pagination-bullet-active { background-color: #346d8c !important; opacity: 1 !important; width: 24px !important; border-radius: 8px !important; }

        /* Tooltip Instagram */
        .tooltip-container { position: relative; cursor: pointer; }
        .tooltip-container:hover .tooltip-text { opacity: 1; transform: translate(-50%, 0); }
        .tooltip-text { opacity: 0; transform: translate(-50%, 10px); transition: all 0.2s ease; }
        /* =========================================
   RESPONSIVIDADE (MEDIA QUERIES)
========================================= */

/* Dispositivos Médios (Tablets e Notebooks Pequenos - até 1024px) */
@media (max-width: 1024px) {
    /* Diminui e reposiciona os logos para não encostarem no texto */
    .meta-logo {
        width: 80px;
        top: 20px;
        right: 20px;
        opacity: 0.5;
    }
    .google-logo {
        width: 80px;
        bottom: 150px;
        left: 20px;
        opacity: 0.5;
    }
    
    /* Ajusta a máscara para a foto um pouco menor */
    .mask-bottom {
        -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    }
}

/* Dispositivos Pequenos (Celulares - até 768px) */
@media (max-width: 768px) {
    /* No celular, é melhor esconder ou deixar os logos super discretos para não poluir a leitura */
    .meta-logo, .google-logo {
        display: none; 
    }
    
    /* Aumenta a velocidade do brilho no botão no celular */
    .hero-cta::before {
        animation: heroShine 3s infinite;
    }

    /* Ajuste da máscara para celular, onde a foto empilha embaixo do texto */
    .mask-bottom {
        -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
    }

    /* Reduz o brilho atrás da foto para não vazar tela no mobile */
    .hero-photo-container::before {
        width: 90%;
        height: 90%;
        filter: blur(30px);
    }
}