/* Reset Padrão Profissional */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
}

/* Estrutura principal B2B Dark */
body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    min-height: 100vh; 
    background-color: #0b1120;
    color: #ffffff;
    position: relative;
    overflow-x: hidden; 
}

/* Formas de Fundo - CORRIGIDO: Agora restrito apenas à primeira dobra (100vh) */
.bg-shapes {
    position: absolute;
    top: 0; left: 0; right: 0; 
    height: 100vh; /* Garante que as formas não desçam para as próximas seções */
    overflow: hidden;
    z-index: -1;
    display: flex;
    pointer-events: none; 
}
.shape-1 {
    position: absolute;
    width: 120vw; height: 120vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168,85,247,0.1) 0%, rgba(0,0,0,0) 70%);
    top: -40%; right: -20%;
}
.shape-2 {
    position: absolute;
    width: 80vw; height: 80vw;
    border-radius: 50%;
    background: rgba(30, 58, 138, 0.15);
    bottom: -20%; left: -10%;
}

/* Cabeçalho */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 5% 1rem 5%; 
    width: 100%;
    max-width: 1400px; 
    margin: 0 auto;    
    position: relative;
    z-index: 10;
    flex: 0 0 auto; 
}

.logo-img {
    max-width: 120px; 
    display: flex;
    height: auto;
}

nav {
    display: flex;
    gap: 2rem;
}

/* Isolado para não afetar links do rodapé futuramente */
nav a {
    color: #e2e8f0;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.3s;
    cursor: pointer;
    display: flex;
}

nav a:hover {
    color: #a855f7;
}

/* Área Hero */
.hero-section {
    display: flex;
    flex: 1 0 auto; 
    align-items: center;
    justify-content: space-between;
    padding: 0 5% 2rem 5%; 
    width: 100%;
    max-width: 1400px; 
    margin: 0 auto;    
    gap: 3rem;
    position: relative;
    z-index: 10;
}

/* LADO ESQUERDO: Textos e Botão */
.text-content {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    max-width: 600px;
}

.headline {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.headline h1 {
    font-size: clamp(2.5rem, 4vw, 3.5rem); 
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    display: flex;
}

.headline h2 {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 600;
    color: #a855f7;
    display: flex;
}

/* CORRIGIDO: Isolado apenas para os parágrafos da hero section */
.text-content p {
    font-size: 1rem; 
    color: #cbd5e1;
    line-height: 1.5;
    display: flex;
    max-width: 90%;
}

.actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.5rem;
}

.btn-outline {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #ffffff;
    background: transparent;
    color: #ffffff;
    padding: 0.6rem 1.8rem; 
    border-radius: 30px;
    font-weight: bold;
    font-size: 0.85rem;
    width: max-content;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-outline:hover {
    background: #ffffff;
    color: #0b1120;
}


/* LADO DIREITO: Formulário B2B Otimizado */
.form-wrapper {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    padding: 1.5rem; 
    border-radius: 16px; 
    width: 100%;
    max-width: 450px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.form-title {
    color: #1e293b;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem; 
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
}

.form-wrapper form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem; 
}

.form-row {
    display: flex;
    flex-direction: row;
    gap: 0.8rem;
    width: 100%;
}

.input-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.2rem; 
}

/* CORRIGIDO: Isolado para não afetar outros labels do site */
.form-wrapper label {
    color: #475569;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
}

/* CORRIGIDO: Isolado para não afetar outros inputs e selects do site */
.form-wrapper input, 
.form-wrapper select {
    padding: 0.6rem 0.8rem; 
    border: 1px solid #cbd5e1;
    border-radius: 30px;
    font-size: 0.85rem;
    color: #1e293b;
    outline: none;
    display: flex;
    width: 100%;
    background-color: #f8fafc;
    transition: all 0.2s;
}

.form-wrapper input:focus, 
.form-wrapper select:focus {
    border-color: #a855f7;
    background-color: #ffffff;
}

.btn-submit {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #22c55e;
    color: white;
    padding: 0.8rem; 
    border: none;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 0.2rem;
    transition: background 0.2s;
    text-transform: uppercase;
}

.btn-submit:hover {
    background-color: #16a34a;
}

/* Responsividade de Alto Nível */
@media (max-width: 1024px) {
    /* Removi a redundância do height: auto no body, pois o min-height já resolve */

    .hero-section {
        flex-direction: column;
        text-align: center;
        padding-top: 2rem;
        padding-bottom: 3rem;
    }
    
    .text-content { align-items: center; }
    .headline h1, .headline h2, .text-content p { justify-content: center; text-align: center; }
    nav { display: none; }
    header { justify-content: center; }
    
    .form-row {
        flex-direction: column;
        gap: 0.8rem;
    }
}
/* =========================================
   SEÇÃO DE PROVA SOCIAL (LOGOS CAROUSEL)
========================================= */

.social-proof {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #080c17; /* Um tom levemente diferente do body para separar as seções */
    padding: 3rem 5%;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Linha divisória sutil */
    position: relative;
    z-index: 10;
}

.social-proof-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    gap: 2rem;
}

.social-proof-content h3 {
    color: #94a3b8; /* Cor neutra para não roubar a atenção da Hero */
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
}

/* Container que esconde o que vazar para os lados e aplica o fade nas bordas */
.carousel-container {
    display: flex;
    width: 100%;
    overflow: hidden;
    /* Máscara que cria o efeito de sumir nas bordas (Transparente -> Preto -> Transparente) */
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* A trilha que vai se mover */
.carousel-track {
    display: flex;
    align-items: center;
    gap: 4rem; /* Espaço entre as logos */
    width: max-content; /* Permite que a trilha cresça o tamanho que precisar */
    animation: scroll-carousel 25s linear infinite; /* Velocidade do loop */
}

/* Pausa a animação se o usuário passar o mouse por cima */
.carousel-track:hover {
    animation-play-state: paused;
}

/* Container de cada logo (seja link <a> ou div) */
.client-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.5; /* Deixa apagado/discreto */
    transition: all 0.3s ease;
    cursor: default;
}

/* Trava rígida para a imagem inserida não quebrar o layout */
.client-logo img {
    max-height: 95px; /* Altura máxima travada para elegância */
    width: auto;      /* Mantém a proporção */
    max-width: 160px; /* Limite de largura para logos muito compridas */
    filter: grayscale(100%); /* Deixa a imagem em tons de cinza */
    transition: all 0.3s ease;
    object-fit: contain;
}

/* Quando passa o mouse, a logo ganha vida */
.client-logo:hover {
    opacity: 1;
}

.client-logo:hover img {
    filter: grayscale(0%); /* Devolve as cores originais da imagem */
}

/* Animação do Loop Infinito */
@keyframes scroll-carousel {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move metade do tamanho total da trilha + metade do gap */
        transform: translateX(calc(-50% - 2rem)); 
    }
}

/* Responsividade para o carrossel no celular */
@media (max-width: 1024px) {
    .social-proof {
        padding: 2rem 5%;
    }
    
    .social-proof-content h3 {
        font-size: 0.8rem;
    }

    .carousel-track {
        gap: 2.5rem; /* Diminui o espaço entre logos no mobile */
    }
    
    .client-logo img {
        max-height: 25px; /* Logos ainda menores na tela do celular */
    }
}


/* =========================================
   SEÇÃO GROWFUNNEL LIGHT (FUNDO GELO)
========================================= */

.growfunnel-light-section {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #f4f7f9; 
    padding: 6rem 5%;
    position: relative;
    overflow: hidden; 
    z-index: 10;
}

/* Halos de Luz de Fundo (Método Blur) */
.gf-bg-shapes {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1; 
    overflow: hidden;
    pointer-events: none;
}

.gf-shape-1 {
    position: absolute;
    width: 600px; 
    height: 600px;
    border-radius: 50%;
    background-color: rgba(168, 85, 247, 0.12); 
    filter: blur(140px); 
    top: -150px; 
    left: -150px;
    will-change: filter;
}

.gf-shape-2 {
    position: absolute;
    width: 500px; 
    height: 500px;
    border-radius: 50%;
    background-color: rgba(217, 70, 239, 0.10); 
    filter: blur(130px); 
    bottom: -100px; 
    right: -100px;
    will-change: filter;
}

/* Container de Conteúdo */
.growfunnel-light-container {
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1300px;
    gap: 5rem;
    position: relative;
    z-index: 2; /* Garante que o texto fique à frente das luzes */
}

/* LADO ESQUERDO: TEXTOS */
.gf-text-side {
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 550px;
    gap: 1rem; 
}

.gf-badge {
    background-color: rgba(168, 85, 247, 0.1); 
    color: #9333ea;
    padding: 0.3rem 0.8rem;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: max-content;
    display: flex;
}

.gf-text-side h2 {
    font-size: clamp(2rem, 3.5vw, 2.8rem); 
    font-weight: 800;
    color: #0f172a; 
    line-height: 1.1;
    display: flex;
    flex-direction: column;
}

.gf-highlight {
    color: #a855f7;
}

.gf-subtitle {
    font-size: 1.1rem; 
    color: #334155;
    line-height: 1.5;
    margin-top: 0.3rem;
}

.gf-subtitle strong {
    color: #a855f7;
}

.gf-description {
    font-size: 0.95rem; 
    color: #64748b;
    line-height: 1.6;
}

/* LADO DIREITO: CARDS EMPILHADOS */
.gf-cards-side {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1.2rem; 
    width: 100%;
    max-width: 600px;
}

/* Card Horizontal */
.gf-feature-card {
    position: relative; /* OBRIGATÓRIO PARA O BOTÃO FUNCIONAR */
    cursor: pointer;
    display: flex;
    flex-direction: row; 
    align-items: flex-start;
    background: #ffffff;
    padding: 1.5rem; 
    border-radius: 12px; 
    box-shadow: 0 8px 30px -10px rgba(0, 0, 0, 0.04); 
    border: 1px solid rgba(0, 0, 0, 0.02); 
    gap: 1.2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gf-feature-card:hover {
    transform: translateX(-8px); 
    box-shadow: 0 15px 40px -10px rgba(168, 85, 247, 0.1); 
}

/* Caixinha do Ícone */
.gf-icon-box {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50px; 
    height: 50px; 
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(217, 70, 239, 0.1) 100%);
    border-radius: 10px;
    color: #a855f7;
    flex-shrink: 0; 
}

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

/* Textos dentro do Card */
.gf-feature-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-right: 2rem; /* Evita que o texto encoste no botão do canto */
}

.gf-feature-text h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
}

.gf-feature-text p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.5;
}

/* =========================================
   BOTÃO "VER RESULTADOS" (Canto do Card)
========================================= */
.gf-action-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    background: rgba(168, 85, 247, 0.08); 
    color: #a855f7;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gf-action-btn svg {
    width: 18px;
    height: 18px;
}

.gf-feature-card:hover .gf-action-btn {
    background: #a855f7;
    color: #ffffff;
    transform: scale(1.1); 
    box-shadow: 0 5px 15px rgba(168, 85, 247, 0.3);
}

/* =========================================
   ESTRUTURA DO MODAL DE RESULTADOS
========================================= */
.gf-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(11, 17, 32, 0.85); 
    backdrop-filter: blur(8px); 
    z-index: 9999; 
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.3s ease;
}

.gf-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.gf-modal-content {
    background: #ffffff;
    width: 90%;
    max-width: 700px;
    border-radius: 20px;
    padding: 2.5rem;
    position: relative;
    transform: translateY(30px); 
    transition: transform 0.3s ease;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.gf-modal-overlay.active .gf-modal-content {
    transform: translateY(0); 
}

.gf-modal-close {
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
    background: none;
    border: none;
    font-size: 2rem;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}

.gf-modal-close:hover {
    color: #0f172a;
}

.gf-modal-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding-right: 2rem; 
}

.gf-modal-header h3 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #0f172a;
}

.gf-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.gf-modal-body p {
    color: #64748b;
    line-height: 1.6;
}

.placeholder-print {
    width: 100%;
    height: 300px;
    background: #f1f5f9;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-weight: 600;
}

/* =========================================
   MEDIA QUERIES - RESPONSIVIDADE
========================================= */

@media (max-width: 1440px) {
    .growfunnel-light-section { padding: 4rem 5%; }
    .growfunnel-light-container { gap: 3rem; }
    .gf-cards-side { gap: 1rem; }
    .gf-feature-card { padding: 1.2rem; gap: 1rem; }
    .gf-icon-box { min-width: 45px; height: 45px; border-radius: 8px; }
    .gf-icon-box svg { width: 20px; height: 20px; }
    .gf-feature-text h4 { font-size: 1.05rem; }
    .gf-feature-text p { font-size: 0.8rem; }
}

@media (max-width: 1024px) {
    .growfunnel-light-container { flex-direction: column; text-align: center; gap: 3rem; }
    .gf-text-side { align-items: center; }
    .gf-feature-card { flex-direction: column; align-items: center; text-align: center; padding: 2rem 1.5rem; }
    .gf-feature-text { padding-right: 0; }
    .gf-feature-card:hover { transform: translateY(-5px); }
}

/* =========================================
   SEÇÃO LANDING PAGE (ALTA CONVERSÃO & 3D)
========================================= */

.lp-showcase-section {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #0b1120; /* Fundo dark premium */
    padding: 6rem 5%; 
    position: relative;
    z-index: 10;
    overflow: hidden; /* Evita que a animação 3D gere barra de rolagem */
}

.lp-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1300px;
    gap: 5rem; 
}

/* =========================================
   LADO ESQUERDO: MOCKUP VISUAL 3D
========================================= */
.lp-visual-side {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1500px; /* Cria a profundidade do ambiente 3D */
    z-index: 5;
}

/* O Navegador 3D Translúcido */
.browser-mockup-3d {
    width: 100%;
    max-width: 550px;
    height: auto;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.8) 100%);
    backdrop-filter: blur(12px); /* Efeito de vidro (Glassmorphism) */
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8), 
                0 0 30px rgba(168, 85, 247, 0.15); /* Glow roxo de fundo */
    overflow: hidden;
    transform-style: preserve-3d;
    transform: rotateX(5deg) rotateY(-15deg);
    animation: float-mockup-3d 8s ease-in-out infinite; /* Flutuação no eixo 3D */
}

/* Cabecalho estilo macOS */
.browser-header {
    background: #0f172a;
    padding: 0.8rem 1rem;
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mac-dot { width: 12px; height: 12px; border-radius: 50%; }
.mac-dot.close { background: #ef4444; }
.mac-dot.minimize { background: #f59e0b; }
.mac-dot.expand { background: #10b981; }

/* Corpo Interno (A Landing Page Simulada) */
.simulated-lp {
    display: flex;
    flex-direction: column;
    background-color: #f4f7f9; 
    padding: 1rem;
    color: #0f172a;
    transform: translateZ(20px); /* Traz a página para frente do vidro */
}

.sk-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.sk-logo { font-weight: 800; color: #a855f7; font-size: 0.8rem; }
.sk-nav { width: 50%; height: 6px; background: rgba(0,0,0,0.05); border-radius: 2px; }

.sk-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; margin-bottom: 1rem;}
.sk-h1 { font-size: 1rem; font-weight: 800; line-height: 1.2; }
.sk-p { font-size: 0.6rem; color: #64748b; max-width: 80%; }
.sk-btn { background: #22c55e; color: white; border: none; padding: 0.3rem 0.8rem; font-size: 0.5rem; font-weight: 700; border-radius: 10px; margin-top: 0.5rem;}

.sk-pricing { display: flex; gap: 0.5rem; }
.sk-card-3d { flex: 1; height: 50px; background: white; border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; font-size: 0.4rem; color: #cbd5e1; border: 1px solid #f1f5f9; }
.sk-card-3d.special { border-color: #a855f7; color: #a855f7; font-weight: 700; }

/* ELEMENTOS 3D FLUTUANTES */
.floating-3d {
    position: absolute;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.8rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    z-index: 10;
}

.floating-3d span {
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.icon-3d { width: 32px; height: 32px; }

.el-3d-1 { top: -50px; right: -40px; animation: float-mockup-3d 6s ease-in-out infinite reverse; }
.el-3d-2 { bottom: 20px; left: -50px; animation: float-mockup-3d 9s ease-in-out infinite 1s; }
.el-3d-3 { 
    top: 50px; left: -100px; 
    animation: float-mockup-3d 7s ease-in-out infinite 0.5s reverse; 
    background: rgba(168, 85, 247, 0.1); 
    border-color: rgba(168, 85, 247, 0.2);
}

/* Animação Flutuante 3D */
@keyframes float-mockup-3d {
    0% { transform: rotateX(5deg) rotateY(-15deg) translateY(0px); }
    50% { transform: rotateX(7deg) rotateY(-13deg) translateY(-20px); }
    100% { transform: rotateX(5deg) rotateY(-15deg) translateY(0px); }
}

/* Animação Flutuante 2D (Para Mobile) */
@keyframes float-mockup-2d {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* =========================================
   LADO DIREITO: TEXTOS E BENEFÍCIOS
========================================= */
.lp-text-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 600px;
    gap: 1.5rem;
}

.lp-text-side h2 {
    font-size: clamp(2.2rem, 3.5vw, 3rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
}

.lp-highlight {
    color: #a855f7;
    background: linear-gradient(90deg, #a855f7, #22c55e); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Lista de Benefícios (Checkmarks) */
.lp-benefits-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.lp-benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.check-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    background: rgba(34, 197, 94, 0.2); 
    color: #22c55e; 
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.check-icon svg { width: 14px; height: 14px; }

.lp-benefits-list p {
    font-size: 1.05rem;
    color: #cbd5e1;
    line-height: 1.5;
}

.lp-benefits-list strong {
    color: #ffffff;
}

/* Botão CTA Secundário */
.lp-cta-btn {
    text-decoration: none;
    background: #a855f7;
    color: #ffffff;
    border: none;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    width: max-content;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px -5px rgba(168, 85, 247, 0.4);
    margin-top: 0.5rem;
}

.lp-cta-btn:hover {
    background: #9333ea;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -5px rgba(168, 85, 247, 0.6);
}

/* =========================================
   MEDIA QUERIES - RESPONSIVIDADE
========================================= */

/* 💻 Especial para Notebooks (telas até 1440px) */
@media (max-width: 1440px) {
    .lp-showcase-section { padding: 4rem 5%; }
    .lp-container { gap: 3rem; }
    .lp-text-side { gap: 1.2rem; }
    .lp-benefits-list { gap: 1.2rem; }
    .lp-benefits-list p { font-size: 0.95rem; }

    /* Reduzindo o Mockup 3D */
    .browser-mockup-3d {
        max-width: 450px;
        transform: rotateX(3deg) rotateY(-10deg); 
    }
    
    .simulated-lp { padding: 0.8rem; }
    .sk-h1 { font-size: 0.8rem; }
    .sk-p { font-size: 0.5rem; }
    .sk-card-3d { height: 40px; }

    /* Reaproximando os ícones 3D flutuantes */
    .floating-3d { padding: 0.6rem; gap: 0.3rem; }
    .icon-3d { width: 24px; height: 24px; }
    .floating-3d span { font-size: 0.6rem; }

    .el-3d-1 { top: -30px; right: -20px; }
    .el-3d-2 { bottom: 10px; left: -30px; }
    .el-3d-3 { top: 30px; left: -70px; }

    .lp-cta-btn {
        padding: 0.8rem 1.8rem;
        font-size: 0.95rem;
    }
}

/* 📱 Responsividade para Celulares e Tablets (até 1024px) */
@media (max-width: 1024px) {
    .lp-container {
        flex-direction: column-reverse; /* No mobile, texto sobe e mockup desce */
        gap: 4rem;
        text-align: center;
    }

    .lp-text-side { align-items: center; }
    .lp-benefits-list li { text-align: left; }

    /* Zera a perspectiva e usa a flutuação 2D simples para não quebrar a tela do celular */
    .browser-mockup-3d {
        transform: rotateX(0deg) rotateY(0deg); 
        animation: float-mockup-2d 6s ease-in-out infinite; 
    }
    
    /* Esconde os selos menores no mobile para não poluir e não vazar a tela */
    .floating-3d { display: none; }
}

/* =========================================
   SEÇÃO 5 PILARES (BENTO GRID)
========================================= */

.pillars-section {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #f4f7f9; /* Fundo claro para criar a quebra de padrão */
    padding: 6rem 5%;
    position: relative;
    z-index: 10;
}

.pillars-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    gap: 4rem;
}

/* Cabeçalho da Seção */
.pillars-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.pillars-header h2 {
    font-size: clamp(2.2rem, 3.5vw, 3rem);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.pillars-highlight {
    color: #a855f7;
    background: linear-gradient(90deg, #a855f7, #d946ef);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================================
   SEÇÃO BENTO GRID (OS 5 PILARES) - COMPACTO
========================================= */

.pillars-section {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #f4f7f9; 
    padding: 4rem 5%; /* Reduzido de 6rem para 4rem no Desktop normal */
    position: relative;
    z-index: 10;
}

.pillars-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    gap: 2.5rem; /* Reduzido de 4rem para 2.5rem (Aproxima o título dos cards) */
}

/* Cabeçalho da Seção */
.pillars-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
}

.pillars-header h2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem); /* Título um pouco menor no Desktop */
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}

.pillars-highlight {
    color: #a855f7;
}

/* =========================================
   A MÁGICA DO BENTO GRID
========================================= */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); 
    gap: 1.2rem; /* Reduzido de 1.5rem para encolher o grid */
    width: 100%;
}

/* Estilo Base do Card */
.bento-card {
    background: #ffffff;
    border-radius: 16px; /* Borda levemente menor para acompanhar o tamanho */
    padding: 1.8rem; /* Reduzido de 2.5rem (Cards mais magros) */
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Reduzido de 1.2rem */
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bento-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px -10px rgba(168, 85, 247, 0.15);
}

.card-large { grid-column: span 3; }
.card-medium { grid-column: span 2; }

/* Detalhes Internos dos Cards */
.bento-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px; /* Reduzido de 60px */
    height: 50px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(217, 70, 239, 0.1) 100%);
    border-radius: 12px;
    color: #a855f7;
}

.bento-icon svg {
    width: 24px; /* Ícone menor */
    height: 24px;
}

.bento-content {
    display: flex;
    flex-direction: column;
    gap: 0.4rem; /* Texto mais junto do título */
}

.bento-content h3 {
    font-size: 1.15rem; /* Reduzido de 1.3rem */
    font-weight: 700;
    color: #0f172a;
}

.bento-content p {
    font-size: 0.9rem; /* Reduzido de 0.95rem */
    color: #64748b;
    line-height: 1.4; /* Reduzido o espaço entre as linhas de texto */
}

/* =========================================
   RESPONSIVIDADE (NOTEBOOKS E CELULARES)
========================================= */

/* 💻 Especial para Notebooks (telas até 1440px) */
@media (max-width: 1440px) {
    .pillars-section {
        padding: 2.5rem 5%; /* Compressão agressiva para Notebooks */
    }

    .pillars-container {
        gap: 1.8rem; /* Cola bem o título no grid */
    }

    .pillars-header h2 {
        font-size: 1.8rem;
    }

    .bento-grid {
        gap: 1rem; 
    }

    .bento-card {
        padding: 1.2rem 1.5rem; /* Muito mais enxuto */
        gap: 0.8rem;
    }

    .bento-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .bento-icon svg {
        width: 20px;
        height: 20px;
    }

    .bento-content h3 {
        font-size: 1rem;
    }

    .bento-content p {
        font-size: 0.8rem;
        line-height: 1.4;
    }
}

/* 📱 Tablet (Muda o grid para 2 colunas) */
@media (max-width: 1024px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .card-large, .card-medium { grid-column: span 1; }
    .bento-card:last-child { grid-column: span 2; }
}

/* 📱 Celular (Muda o grid para 1 coluna empilhada) */
@media (max-width: 768px) {
    .bento-grid { grid-template-columns: 1fr; }
    .card-large, .card-medium, .bento-card:last-child { grid-column: span 1; }
    .pillars-header h2 { font-size: 1.8rem; }
}


/* =========================================
   SEÇÃO DE PLANOS (PRICING - ULTRA-COMPACTO)
========================================= */

.pricing-section {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #050810; /* Fundo Dark Profundo */
    padding: 3rem 5%; /* REDUZIDO: De 6rem para 3rem (Altura padrão) */
    position: relative;
    z-index: 10;
    overflow: hidden; /* Corta os glows de fundo */
}

/* Bolas Roxas de Fundo (Glows Radiais - Idêntico à Hero) */
.pricing-section::before,
.pricing-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    z-index: -1; /* Fica atrás dos cards */
    pointer-events: none;
}

/* Glow Principal (Topo Direito) */
.pricing-section::before {
    width: 80vw; height: 80vw;
    background: radial-gradient(circle, rgba(168,85,247,0.08) 0%, rgba(0,0,0,0) 70%);
    top: -30%; right: -20%;
}

/* Glow Secundário (Baixo Esquerdo) */
.pricing-section::after {
    width: 60vw; height: 60vw;
    background: rgba(30, 58, 138, 0.1); /* Tom azulado/roxo */
    bottom: -20%; left: -10%;
}

.pricing-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    gap: 2rem; /* REDUZIDO: De 4rem para 2rem (Aproxima título e grid) */
    position: relative;
    z-index: 2; /* Fica acima dos glows */
}

/* Cabeçalho */
.pricing-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem; /* REDUZIDO gap interno */
}

.pricing-header h2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem); /* REDUZIDO tipografia do título */
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
}

.pricing-highlight {
    color: #a855f7;
}

.pricing-header p {
    font-size: 0.95rem; /* REDUZIDO fonte do subtítulo */
    color: #cbd5e1;
}

/* =========================================
   GRID DOS PLANOS PRINCIPAIS (COMPACTO)
========================================= */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem; /* REDUZIDO gap entre cards */
    width: 100%;
    align-items: stretch;
}

/* Estrutura do Card */
.pricing-card {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px; /* Borda mais contida */
    padding: 1.5rem; /* MUITO REDUZIDO: De 2.5rem para 1.5rem (Cards mais magros) */
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.pricing-card:hover {
    transform: translateY(-5px);
    border-color: rgba(168, 85, 247, 0.3);
}

/* Card Destacado (Pró) */
.pricing-card.popular {
    background: linear-gradient(180deg, #1e1b4b 0%, #0f172a 100%);
    border: 2px solid #a855f7;
    transform: scale(1.02); /* Escala menor pra não esbarrar */
    z-index: 2;
    box-shadow: 0 20px 50px rgba(168, 85, 247, 0.15);
}

.pricing-card.popular:hover {
    transform: scale(1.02) translateY(-5px);
}

.pr-popular-badge {
    position: absolute;
    top: -10px; /* Ajustado pra nova borda */
    left: 50%;
    transform: translateX(-50%);
    background: #a855f7;
    color: white;
    font-size: 0.65rem; /* REDUZIDO badge */
    font-weight: 800;
    padding: 0.2rem 0.8rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Informações do Header do Plano */
.pr-card-header {
    margin-bottom: 1rem; /* REDUZIDO margem */
}

.pr-card-header h3 {
    font-size: 1.3rem; /* REDUZIDO título do plano */
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.3rem;
}

.pr-target {
    font-size: 0.75rem; /* REDUZIDO descrição do alvo */
    color: #94a3b8;
    line-height: 1.4;
    min-height: 35px; /* Alinhamento visual compactado */
}

/* Preço */
.pr-price-box {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    margin-bottom: 0.2rem; /* REDUZIDO margem */
}

.pr-currency {
    font-size: 1rem; /* REDUZIDO moeda */
    font-weight: 600;
    color: #e2e8f0;
}

.pr-value {
    font-size: 2.5rem; /* REDUZIDO valor numérico */
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}

.pr-period {
    font-size: 0.9rem;
    color: #94a3b8;
}

/* Taxa de Setup */
.pr-setup-fee {
    font-size: 0.75rem; /* REDUZIDO setup */
    color: #cbd5e1;
    font-weight: 600;
    margin-bottom: 1.2rem; /* REDUZIDO margem */
    line-height: 1.4;
    min-height: 30px;
}

.pr-setup-fee span {
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 400;
}

.pr-setup-fee.special-fee { color: #22c55e; }

/* Botões */
.pr-btn-outline, .pr-btn-solid {
    text-decoration: none;
    width: 100%;
    padding: 0.7rem; /* REDUZIDO padding do botão */
    border-radius: 8px;
    font-size: 0.85rem; /* REDUZIDO fonte do botão */
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
    margin-bottom: 1.2rem; /* REDUZIDO margem */
}

.pr-btn-outline {
    text-decoration: none;
    background: transparent;
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.pr-btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #e2e8f0;
}

.pr-btn-solid {
    background: #a855f7;
    color: #ffffff;
    border: none;
    box-shadow: 0 5px 15px rgba(168, 85, 247, 0.3);
}

.pr-btn-solid:hover { background: #9333ea; }

/* Lista de Funcionalidades */
.pr-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* REDUZIDO: Gap entre as features (Mais compacto verticalmente) */
    margin-top: auto;
}

.pr-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem; /* REDUZIDO: Fonte das features para economizar espaço */
    color: #cbd5e1;
    line-height: 1.3;
}

.pr-features li svg {
    width: 14px; /* Ícone menor */
    height: 14px;
    color: #22c55e;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.pr-feature-highlight { color: #ffffff !important; font-weight: 600; }

/* =========================================
   BANNER PERSONALIZADO (Compacto)
========================================= */
.pricing-custom-banner {
    width: 100%;
    background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1rem 2rem; /* REDUZIDO padding do banner */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.pr-custom-texts h3 {
    font-size: 1.15rem; /* REDUZIDO título */
    color: #ffffff;
    margin-bottom: 0.1rem;
}

.pr-custom-texts p {
    color: #cbd5e1;
    font-size: 0.85rem; /* REDUZIDO descrição */
}

.pr-custom-texts strong { color: #a855f7; }

.pr-btn-whatsapp {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #25D366;
    color: #ffffff;
    border: none;
    padding: 0.6rem 1.2rem; /* REDUZIDO padding botão whatsapp */
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.8rem; /* REDUZIDO fonte whatsapp */
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
}

.pr-btn-whatsapp:hover { background: #1ebc5a; }
.pr-btn-whatsapp svg { width: 16px; height: 16px; }

/* =========================================
   MEDIA QUERIES - RESPONSIVIDADE
========================================= */

/* 💻 Especial para Notebooks (telas até 1440px) */
@media (max-width: 1440px) {
    .pricing-section {
        padding: 2.5rem 5%; /* Compressão agressiva na altura no notebook */
    }

    .pricing-container {
        gap: 1.5rem; /* Aproxima bem o título do grid */
    }

    .pricing-grid {
        gap: 1rem; /* Fecha os espaços entre os cards */
    }

    .pricing-card {
        padding: 1rem; /* Cards super magros */
    }

    .pricing-card.popular {
        transform: scale(1.02); /* Escala menor pra não quebrar a tela */
    }

    .pricing-card.popular:hover {
        transform: scale(1.02) translateY(-3px);
    }

    .pr-price-box {
        margin-bottom: 0.1rem;
    }

    .pr-value {
        font-size: 2rem; /* Fonte do preço menor */
    }
    
    .pr-setup-fee {
        margin-bottom: 1rem;
        min-height: 25px;
    }

    .pr-features {
        gap: 0.3rem; /* Comprime a lista de features */
    }

    .pricing-custom-banner {
        padding: 1rem;
    }
}

/* 📱 Responsividade para Celulares e Tablets em pé (até 1024px) */
@media (max-width: 1024px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 3rem; /* Dá espaço pros cards empilhados no mobile */
    }

    .pricing-card.popular {
        transform: scale(1);
    }

    .pricing-card.popular:hover {
        transform: translateY(-5px);
    }

    .pricing-custom-banner {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding: 1.5rem 1rem;
    }
}

/* =========================================
   CTA FINAL (Rodapé da Seção de Planos)
========================================= */
.pricing-final-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 1.5rem; /* Dá um respiro após o banner personalizado */
    gap: 1.2rem;
    width: 100%;
}

.pr-final-text {
    font-size: 1.1rem;
    color: #cbd5e1;
    max-width: 600px;
    line-height: 1.5;
}

.pr-final-text strong {
    color: #ffffff;
    font-weight: 700;
}

/* Botão Final Chamativo (Gradiente Roxo/Rosa) */
.pr-btn-final {
    text-decoration: none;
    background: linear-gradient(90deg, #a855f7, #d946ef);
    color: #ffffff;
    border: none;
    padding: 1.2rem 2.5rem;
    border-radius: 30px;
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px -5px rgba(168, 85, 247, 0.5);
    letter-spacing: 1px;
}

.pr-btn-final:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px -5px rgba(168, 85, 247, 0.7);
}

/* =========================================
   RESPONSIVIDADE (CTA FINAL)
========================================= */

/* 💻 Especial para Notebooks (telas até 1440px) */
@media (max-width: 1440px) {
    .pricing-final-cta { 
        margin-top: 0.5rem; /* Reduz o espaço para não empurrar a seção pra baixo */
        gap: 1rem; 
    }
    
    .pr-final-text { 
        font-size: 1rem; 
    }
    
    .pr-btn-final { 
        padding: 1rem 2rem; 
        font-size: 0.95rem; 
    }
}

/* 📱 Celulares e Tablets em pé (até 1024px) */
@media (max-width: 1024px) {
    .pricing-final-cta {
        margin-top: 1rem;
    }
    
    .pr-final-text { 
        font-size: 0.95rem; 
    }
    
    .pr-btn-final { 
        width: 100%; 
        max-width: 350px; /* Impede o botão de ficar gigante no celular */
    }
}

/* =========================================
   SEÇÃO TRUST (MISSÃO, NÚMEROS E CTA)
========================================= */

.trust-section {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #f4f7f9; /* Fundo gelo pra alternar com a seção anterior */
    padding: 5rem 5%; /* Padrão de altura já ajustado */
    position: relative;
    z-index: 10;
}

.trust-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    gap: 3rem; /* Espaço entre a parte de cima (textos) e o banner embaixo */
}

/* =========================================
   PARTE DE CIMA (Missão + Números)
========================================= */
.trust-top-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 4rem;
}

/* Esquerda: Missão */
.mission-flex {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1rem;
    max-width: 500px;
}

.mission-flex h2 {
    display: flex;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}

.mission-flex p {
    display: flex;
    font-size: 1rem;
    color: #64748b;
    line-height: 1.5;
}

/* Direita: Números */
.stats-flex {
    display: flex;
    flex-direction: row;
    flex: 1.2;
    justify-content: space-between;
    gap: 1.5rem;
    background: #ffffff;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.stat-item-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    flex: 1;
}

.stat-number {
    display: flex;
    font-size: 2.5rem;
    font-weight: 800;
    color: #a855f7; /* Cor principal pro número pular na tela */
    line-height: 1;
}

.stat-label {
    display: flex;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =========================================
   PARTE DE BAIXO (Banner de Urgência CTA)
========================================= */
.urgency-banner-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: linear-gradient(135deg, #4c1d95 0%, #2e1065 100%); /* Roxo forte chamativo */
    padding: 2rem 3rem;
    border-radius: 16px;
    box-shadow: 0 15px 30px rgba(76, 29, 149, 0.3);
    gap: 2rem;
}

.urgency-text-flex {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.urgency-text-flex h3 {
    display: flex;
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
}

.urgency-text-flex p {
    display: flex;
    font-size: 0.95rem;
    color: #d8b4fe; /* Roxinho claro pra leitura */
}

/* Botão Verde de Conversão */
.urgency-btn-flex {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #22c55e; /* Verde conversão */
    color: #ffffff;
    border: none;
    padding: 1.2rem 2.5rem;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px -5px rgba(34, 197, 94, 0.5);
    white-space: nowrap; /* Não deixa o texto do botão quebrar */
}

.urgency-btn-flex:hover {
    background: #16a34a;
    transform: translateY(-3px);
    box-shadow: 0 15px 25px -5px rgba(34, 197, 94, 0.6);
}

/* =========================================
   RESPONSIVIDADE (NOTEBOOKS E CELULARES)
========================================= */

/* 💻 Especial para Notebooks (telas até 1440px) */
@media (max-width: 1440px) {
    .trust-section {
        padding: 3rem 5%; /* Altura enxuta pro notebook */
    }

    .trust-container {
        gap: 2rem;
    }

    .trust-top-flex {
        gap: 2.5rem;
    }

    .mission-flex h2 {
        font-size: 1.8rem;
    }

    .stats-flex {
        padding: 1.5rem;
        gap: 1rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-label {
        font-size: 0.75rem;
    }

    .urgency-banner-flex {
        padding: 1.5rem 2rem;
    }

    .urgency-text-flex h3 {
        font-size: 1.1rem;
    }

    .urgency-btn-flex {
        padding: 1rem 2rem;
        font-size: 0.9rem;
    }
}

/* 📱 Responsividade Tablet (até 1024px) */
@media (max-width: 1024px) {
    .trust-top-flex {
        flex-direction: column; /* Joga os números pra baixo da missão */
        text-align: center;
    }

    .mission-flex {
        align-items: center;
        max-width: 100%;
    }

    .stats-flex {
        width: 100%;
    }

    .urgency-banner-flex {
        flex-direction: column; /* Joga o botão pra baixo do texto */
        text-align: center;
    }
}

/* 📱 Responsividade Celular (até 768px) */
@media (max-width: 768px) {
    .stats-flex {
        flex-direction: column; /* Empilha os 3 números um embaixo do outro no celular */
        gap: 2rem;
    }
    
    .urgency-btn-flex {
        width: 100%; /* Botão ocupa a tela toda no celular */
    }
}

/* =========================================
   FOOTER SIMPLES E ELEGANTE (CENTRALIZADO)
========================================= */

.simple-footer {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #050810; 
    padding: 3rem 5%;
    border-top: 1px solid rgba(255, 255, 255, 0.05); 
    position: relative;
    z-index: 10;
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Mantém tudo no centro */
    text-align: center; /* Garante que os textos fiquem centralizados */
    width: 100%;
    max-width: 1200px;
    gap: 1.5rem;
}

/* Redes Sociais */
.footer-social {
    display: flex;
    justify-content: center;
}

.social-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    border-radius: 50%;
    transition: all 0.3s ease;
    text-decoration: none;
}

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

/* Efeito Gradiente do Insta no Hover */
.social-link:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(220, 39, 67, 0.4);
}

/* Textos e Assinatura */
.footer-credits {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.footer-credits p {
    font-size: 0.9rem;
    color: #64748b;
}

.developed-by {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-size: 0.9rem;
}

/* O toque especial */
.heart {
    color: #ef4444; 
    animation: heartbeat 1.5s infinite; 
    display: inline-block;
}

.growfast-link {
    color: #e2e8f0;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s;
}

.growfast-link:hover {
    color: #a855f7; 
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}


/* =========================================
   PÁGINA DE OBRIGADO (PURO FLEXBOX!)
========================================= */

/* Reset básico pra garantir */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    background-color: #050810; /* Fundo escuro premium da Grow Fast */
    color: #ffffff;
    display: flex; /* Flexbox no body pra ocupar a tela toda */
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

.thank-you {
    display: flex; /* Flexbox na seção inteira */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1; /* Faz a seção preencher toda a altura disponível */
    padding: 2rem 5%;
    gap: 4rem;
    text-align: center;
}

/* Container do Texto e Botão */
.thank-you-content {
    display: flex; /* Flexbox pros textos não bagunçarem */
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 650px;
}

.thank-you-content h2 {
    display: flex; /* Flexbox até no H2! */
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    color: #ffffff;
    font-weight: 800;
    line-height: 1.1;
}

.thank-you-content p {
    display: flex; /* E no parágrafo! */
    font-size: 1.15rem;
    color: #cbd5e1;
    line-height: 1.6;
}

/* Botão do WhatsApp (CTA) */
.thank-you-content button {
    display: flex; /* Flexbox pra centralizar o texto do botão perfeito */
    justify-content: center;
    align-items: center;
    background-color: #25D366; /* Verde WhatsApp Conversão */
    color: #ffffff;
    border: none;
    padding: 1.2rem 3rem;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px -5px rgba(37, 211, 102, 0.4);
    margin-top: 1rem;
}

.thank-you-content button:hover {
    background-color: #1ebc5a;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px -5px rgba(37, 211, 102, 0.6);
}

/* Área da Logo */
.thank-you-image {
    display: flex; /* Flexbox pra alinhar a imagem */
    justify-content: center;
    align-items: center;
}

.thank-you-image img {
    max-width: 250px; /* Logo num tamanho bom */
    height: auto;
    opacity: 0.9;
    filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.3)); /* Brilho roxo por trás da logo */
}

/* =========================================
   RESPONSIVIDADE (Desktop via Flexbox)
========================================= */

@media (min-width: 1024px) {
    .thank-you {
        flex-direction: row-reverse; /* O grande truque do Flexbox: inverte a ordem lado a lado */
        justify-content: space-between;
        max-width: 1200px;
        margin: 0 auto;
        text-align: left;
    }

    .thank-you-content {
        align-items: flex-start; /* Alinha tudo pra esquerda no desktop */
    }

    .thank-you-image img {
        max-width: 400px; /* Deixa a logo maiorzona em telas grandes */
    }
}