/* Importação da fonte Inter do Google Fonts */

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



/* === VARIÁVEIS GLOBAIS (Root - Tema Escuro Padrão) === */

:root {

    /* Cores de Fundo e Cards */

    --bg-main: #070D14; /* Fundo profundo, quase preto */

    --bg-card: rgba(18, 28, 41, 0.45); /* Base do Glassmorphism */

    --bg-card-inner: rgba(255, 255, 255, 0.03); /* Fundo sutil para sub-elementos */

    

    /* Cores de Texto */

    --text-main: #FFFFFF;

    --text-muted: #A0ABB8; /* Texto secundário desbotado */

    

    /* Cores de Destaque (Cyan) */

    --accent: #42E8E0; /* Cyan vibrante principal */

    --accent-dark: #2BAFA8; /* Cyan mais escuro para gradientes */

    --accent-glow: rgba(66, 232, 224, 0.3); /* Brilho suave */

    --accent-transparent: rgba(66, 232, 224, 0.1); /* Fundo muito transparente */

    

    /* Bordas e Sombras */

    --border-glass: rgba(255, 255, 255, 0.12); /* Borda fina branca do Glass */

    --shadow-main: 0 10px 40px rgba(0, 0, 0, 0.5); /* Sombra pesada */

}



/* === VARIÁVEIS PARA TEMA CLARO (Ativado via JS) === */

[data-theme="light"] {

    --bg-main: #F3F4F6; /* Fundo cinza muito claro */

    --bg-card: rgba(255, 255, 255, 0.85); /* Glass claro mais opaco */

    --bg-card-inner: rgba(255, 255, 255, 0.5);

    

    --text-main: #1F2937; /* Cinza escuro */

    --text-muted: #4B5563;

    

    --accent: #0D9488; /* Teal mais escuro para contraste no branco */

    --accent-dark: #0F766E;

    --accent-glow: rgba(13, 148, 136, 0.2);

    --accent-transparent: rgba(13, 148, 136, 0.1);

    

    --border-glass: rgba(0, 0, 0, 0.08); /* Borda fina preta sutil */

    --shadow-main: 0 10px 30px rgba(0, 0, 0, 0.05); /* Sombras leves */

}



/* === RESET E ESTILOS BÁSICOS === */

* { 

    margin: 0; 

    padding: 0; 

    box-sizing: border-box; /* Garante que padding/border não aumentem o tamanho do elemento */

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

    /* Base App UX: Remove a cor de destaque azul (highlight) ao tocar em botões/links no celular */

    -webkit-tap-highlight-color: transparent; 

}



/* TRAVA DE LARGURA MASTER (Essencial para Centralização Mobile):

   Impede que qualquer elemento vaze para a direita (Overflow-x),

   garantindo que o navegador não 'tire o zoom' e mantenha tudo no centro.

*/

html, body { 

    overflow-x: hidden; 

    width: 100%; 

    max-width: 100vw; 

}



/* === REMOÇÃO DAS BARRAS DE ROLAGEM (Scrollbars) === */

::-webkit-scrollbar { 

    display: none; /* Esconde no Chrome, Safari, Edge moderno */

    width: 0; height: 0; background: transparent; 

}

html { 

    scrollbar-width: none; /* Esconde no Firefox */

    -ms-overflow-style: none; /* Esconde no IE antigo/Edge antigo */

    scroll-behavior: smooth; /* Rolagem suave nativa para links âncora */

    scroll-snap-type: y proximity; /* Efeito de 'travar' levemente nas seções ao rolar no PC */

}

body { 

    background-color: var(--bg-main); 

    color: var(--text-main); 

    position: relative; 

    min-height: 100vh; 

    transition: background-color 0.4s ease, color 0.4s ease; /* Transição suave na mudança de tema */

    -webkit-overflow-scrolling: touch; /* Melhora a rolagem em dispositivos iOS */

}



/* Classe ativada via JS para bloquear a rolagem do fundo (Body Scroll Lock) quando menu/modal abrem */

body.no-scroll { 

    overflow: hidden; 

    height: 100vh; 

    touch-action: none; /* Impede interações de toque de rolar o fundo no Android */

}



/* === ESTILOS UTilitários E REUTILIZÁVEIS === */



/* Efeitos Glow (Luzes de fundo) */

.bg-glow { position: absolute; border-radius: 50%; filter: blur(150px); z-index: -1; pointer-events: none; opacity: 0.25; }

.glow-1 { top: 10%; left: -10%; width: 500px; height: 500px; background: var(--accent); }

.glow-2 { bottom: 10%; right: -5%; width: 600px; height: 600px; background: var(--accent-dark); }

[data-theme="light"] .bg-glow { opacity: 0.1; } /* Glow mais fraco no tema claro */



/* Classes base do Glassmorphism */

.glass-panel { 

    background: var(--bg-card); 

    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); /* Efeito de desfoque do fundo */

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

    border-radius: 20px; 

    box-shadow: var(--shadow-main); 

    transition: all 0.4s ease;

}

.inner-glass { 

    background: var(--bg-card-inner); 

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

    border-radius: 12px; 

}



/* Classes de Texto e Destaque */

.text-cyan { color: var(--accent) !important; transition: color 0.4s ease; }

.highlight-card { border-color: var(--accent-glow); position: relative; } /* Card com borda brilhante */



/* === ESTRUTURA GENÉRICA DE SEÇÃO === */

.fullscreen-section { 

    min-height: 100dvh; /* Usa Dynamic Viewport Height para mobile */

    display: flex; 

    flex-direction: column; 

    justify-content: center; 

    padding: max(80px, 8vh) 10% max(40px, 5vh); /* Padding responsivo */

    scroll-snap-align: start; /* Onde o scroll snap 'trava' (no topo da seção) */

    position: relative; 

    z-index: 2; 

}

.section-title { text-align: center; margin-bottom: min(40px, 5vh); width: 100%; }

.section-title h2 { font-size: 2.5rem; margin-bottom: 12px; font-weight: 700; letter-spacing: -0.5px;}

.section-title p { color: var(--text-muted); font-size: 1.1rem; max-width: 650px; margin: 0 auto; line-height: 1.6;}



/* === BOTÕES E AÇÕES === */



/* Botão Primário (Preenchido) */

.btn-primary { 

    background: var(--accent); 

    color: #FFF !important; 

    padding: 12px 28px; 

    border: none; 

    border-radius: 50px; 

    font-weight: 600; 

    text-decoration: none; 

    transition: all 0.3s ease; 

    text-align: center; 

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

    box-shadow: 0 4px 15px var(--accent-glow); 

    cursor: pointer;

}

[data-theme="dark"] .btn-primary { color: #000 !important; } /* Texto preto no botão cyan no tema dark */

.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 6px 20px var(--accent-glow); }



/* Botão Outline (Vazado) */

.btn-outline { 

    background: transparent; 

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

    color: var(--text-main) !important; 

    padding: 10px 24px; 

    border-radius: 50px; 

    font-weight: 500; 

    text-decoration: none; 

    transition: all 0.3s ease; 

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

}

.btn-outline:hover { border-color: var(--accent); background: var(--accent-transparent); }



/* Utilitário para botão ocupar largura total */

.btn-full { width: 100%; border-radius: 12px; padding: 14px; }



/* === CABEÇALHO (Navbar - Estilos PC padrão) === */

.menu-btn { display: none; font-size: 1.5rem; cursor: pointer; color: var(--text-main); padding: 5px; } /* Escondido no PC */

.close-menu-btn { display: none; } /* Escondido no PC */

.menu-overlay { display: none; } /* Escondido no PC */



.header-wrapper { position: fixed; top: 20px; width: 100%; display: flex; justify-content: center; z-index: 1000; }

/* Barra de navegação flutuante estilo pílula */

.glass-panel-nav { 

    width: 90%; max-width: 1200px; 

    padding: 12px 30px; 

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

    border-radius: 50px; 

}

/* Fundo mais opaco na Nav para garantir leitura ao rolar */

[data-theme="dark"] .glass-panel-nav { background: rgba(7, 13, 20, 0.95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

[data-theme="light"] .glass-panel-nav { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }



.nav-links { display: flex; align-items: center; gap: 20px; }

.nav-links > a { color: var(--text-main); text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: 0.3s; opacity: 0.8; }

.nav-links > a:hover { opacity: 1; color: var(--accent); }



.nav-actions { display: flex; gap: 15px; align-items: center; margin-left: 15px; }

/* Botão de Tema */

.theme-btn { background: transparent; border: none; color: var(--text-main); font-size: 1.2rem; cursor: pointer; transition: 0.3s; opacity: 0.8; }

.theme-btn:hover { color: var(--accent); opacity: 1; }



/* === SEÇÃO HERO (Conteúdo específico) === */

.hero-container { display: flex; align-items: center; justify-content: space-between; width: 100%; }

.hero-text { max-width: 50%; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }

.badge-accent { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--accent-transparent); border-radius: 30px; font-size: 0.85rem; font-weight: 600; border: 1px solid var(--accent-glow); }

.hero-text h1 { font-size: 3.5rem; line-height: 1.1; font-weight: 800; letter-spacing: -1px;}

.hero-text p { font-size: 1.1rem; color: var(--text-muted); line-height: 1.6; }

.hero-buttons { display: flex; align-items: center; gap: 20px; }

.support-text { font-size: 0.85rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px;}



/* Wrapper que segura a perspectiva 3D */

.hero-3d-wrapper { perspective: 1000px; width: 450px; position: relative; }

/* O card que rotaciona no PC via JS */

.glass-card-3d { 

    width: 100%; height: 300px; 

    transform-style: preserve-3d; /* Permite que filhos tenham profundidade Z */

    transform: rotateY(-15deg) rotateX(10deg); /* Rotação padrão inicial */

    transition: transform 0.1s; /* Transição curta para acompanhar mouse suavemente */

}



/* Mockup Desktop Internals */

.mac-header { height: 30px; background: rgba(0,0,0,0.1); display: flex; align-items: center; padding: 0 15px; gap: 8px; border-radius: 20px 20px 0 0; border-bottom: 1px solid var(--border-glass);}

.dot { width: 10px; height: 10px; border-radius: 50%; }

.dot.red { background: #ff5f56; } .dot.yellow { background: #ffbd2e; } .dot.green { background: #27c93f; }

.url-bar { background: var(--bg-card-inner); padding: 2px 10px; border-radius: 10px; font-size: 0.6rem; color: var(--text-muted); margin-left: 10px; border: 1px solid var(--border-glass);}

.desktop-body { display: flex; height: calc(100% - 30px); padding: 15px; gap: 15px; }

.sidebar { width: 60px; display: flex; flex-direction: column; gap: 10px; }

.side-item { height: 15px; background: var(--border-glass); border-radius: 4px; }

.side-item.active { background: var(--accent); }

.dash-content { flex: 1; display: flex; flex-direction: column; gap: 10px; }

.dash-title { width: 50%; height: 20px; background: var(--border-glass); border-radius: 4px; }

.dash-cards { display: flex; gap: 10px; }

.d-card { flex: 1; height: 60px; }

.dash-chart { flex: 1; }



/* Mockup Celular flutuante (Popout) */

.mobile-3d-popout { 

    position: absolute; right: -30px; bottom: -30px; 

    width: 140px; height: 260px; 

    transform: translateZ(60px); /* Traz o celular 'para frente' no eixo Z */

    display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; 

}

[data-theme="dark"] .mobile-3d-popout { border: 4px solid #111; box-shadow: -20px 20px 40px rgba(0,0,0,0.8); }

[data-theme="light"] .mobile-3d-popout { border: 4px solid #ccc; box-shadow: -20px 20px 40px rgba(0,0,0,0.1); }

.camera-dot { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; background: #222; border-radius: 50%; z-index: 2; box-shadow: inset 0 0 2px rgba(0,0,0,0.5); }

.home-indicator { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 35px; height: 3px; background: rgba(255,255,255,0.3); border-radius: 3px; z-index: 2; }

.mobile-screen { padding: 30px 12px 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; height: 100%;}

.logo-icon { font-size: 1.8rem; color: var(--accent); margin-top: 5px; }

.mobile-screen h4 { font-size: 0.85rem; color: var(--text-main); margin: 0;}

.mobile-toast { padding: 6px; font-size: 0.65rem; width: 100%; display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--text-main); }

.whatsapp-color { color: #25D366; font-size: 1rem; }

.mobile-btn { background: var(--accent); color: #FFF; padding: 8px; width: 100%; border-radius: 6px; font-size: 0.7rem; font-weight: bold; margin-top: auto; }

[data-theme="dark"] .mobile-btn { color: #000; }



/* === SEÇÃO LOGOS (Trusted By) === */

.trusted-by { 

    text-align: center; 

    margin-top: -40px; /* Puxa levemente para cima para integrar com a Hero */

    padding-bottom: 40px; 

    scroll-snap-align: center; 

    width: 100%; overflow: hidden;

}

.trusted-by p { color: var(--text-muted); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px;}

.trusted-logos { display: flex; justify-content: center; flex-wrap: wrap; gap: 40px; font-size: 2rem; color: var(--border-glass); }



/* === GRIDS DE CONTEÚDO (Soluções, Testemunhos) === */

.grid-solutions, .grid-testimonials { 

    display: grid; 

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsivo automático */

    gap: min(30px, 3vh); 

}

.solution-card, .testimonial-card { padding: min(40px, 4vh); display: flex; flex-direction: column; gap: min(16px, 2vh); text-align: left; }

.solution-card:hover, .testimonial-card:hover { transform: translateY(-5px); border-color: var(--accent-transparent); }



/* Detalhes Cards Soluções */

.icon-box { width: 50px; height: 50px; background: var(--accent-transparent); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--accent); border: 1px solid var(--accent-glow); }

.solution-card h3 { font-size: 1.25rem; font-weight: 700; color: var(--text-main); margin: 0; }

.solution-card p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin: 0; }



/* Detalhes Cards Testemunhos */

.testi-header { display: flex; justify-content: space-between; align-items: flex-start; }

.testi-profile { display: flex; align-items: center; gap: 12px; }

.testi-avatar { width: 45px; height: 45px; background: var(--accent-transparent); color: var(--accent); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; border: 1px solid var(--accent-glow);}

.testi-profile h4 { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--text-main);}

.testi-profile span { font-size: 0.85rem; color: var(--text-muted); }

.testi-google i { color: #DB4437; font-size: 1.5rem; }

.testi-stars { color: #F59E0B; font-size: 0.9rem; display: flex; gap: 4px;}

.testimonial-card p { color: var(--text-main); font-size: 1rem; line-height: 1.6; font-style: italic; margin: 0; opacity: 0.9;}



/* Grid Recursos (4 colunas padrão) */

.grid-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.feature-box { padding: 25px; display: flex; flex-direction: column; gap: 12px; text-align: left; transition: 0.3s; }

.feature-box:hover { transform: translateY(-5px); border-color: var(--accent-transparent); }

.feature-box i.text-cyan { font-size: 2rem; margin-bottom: 4px;}

.feature-box h3 { font-size: 1.15rem; font-weight: 700; color: var(--text-main); margin: 0; }

.feature-box p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin: 0; }



/* === SEÇÃO PLATAFORMA (Layout Texto + Mockup) === */

.features-container { display: flex; align-items: center; gap: 50px; }

/* Texto (Esquerda) */

.feature-text { flex: 1; display: flex; flex-direction: column; gap: min(24px, 3vh); }

.feature-text h2 { font-size: 2.2rem; font-weight: 700; margin: 0;}

.feature-text p { color: var(--text-muted); line-height: 1.6; margin: 0;}

.feature-text .feature-list { display: flex; flex-direction: column; gap: min(16px, 2vh); list-style: none;}

.feature-text .feature-list li { display: flex; align-items: flex-start; gap: 16px; font-size: 1rem; color: var(--text-muted); margin: 0;}

.list-icon { width: 40px; height: 40px; background: var(--bg-card-inner); border: 1px solid var(--border-glass); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0;}



/* Mockup Dashboard (Direita) */

.feature-visual { flex: 1; display: flex; justify-content: center; width: 100%; }

.complex-dashboard { width: 100%; max-width: 550px; padding: min(25px, 3vh); display: flex; flex-direction: column; gap: min(20px, 2.5vh);}

.dash-top-bar { font-weight: 600; border-bottom: 1px solid var(--border-glass); padding-bottom: 16px; display: flex; justify-content: space-between; align-items: center; color: var(--text-muted);}



/* Status Live (Animação Pulse) */

.live-status { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: #ef4444; background: rgba(239, 68, 68, 0.1); padding: 4px 12px; border-radius: 20px; border: 1px solid rgba(239, 68, 68, 0.2);}

.pulse-dot { width: 8px; height: 8px; background: #ef4444; border-radius: 50%; animation: pulse 1.5s infinite; }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }



/* Métricas Dashboard */

.dash-metrics { display: flex; gap: 16px; width: 100%; }

.metric-card { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 8px;}

.metric-card span { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600;}

.metric-card h4 { font-size: 1.6rem; margin: 0; font-weight: 800; color: var(--text-main);}

.trend { font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; gap: 4px; }

.trend.up { color: #10b981; } 



/* Avatares Clientes */

.client-avatar-group { display: flex; align-items: center; margin-top: 4px;}

.avatar { width: 28px; height: 28px; background: var(--border-glass); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 0.7rem; color: var(--text-muted); border: 2px solid var(--bg-card); margin-left: -8px;}

.avatar:first-child { margin-left: 0; }



/* Gráfico Dashboard */

.dash-charts { display: flex; gap: 16px; width: 100%; }

.chart-title { display: block; font-size: 0.85rem; color: var(--text-muted); font-weight: 600; margin-bottom: 16px;}

.bar-chart-container { flex: 1; padding: 16px; }

.dash-bars { display: flex; align-items: flex-end; justify-content: space-between; height: 100px; gap: 8px; }

.bar { flex: 1; background: var(--border-glass); border-radius: 4px 4px 0 0; }

.bar.highlight { background: var(--accent); }



/* === SEÇÃO NICHOS (Flex Tags) === */

.grid-niches { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 900px; margin: 0 auto; width: 100%; }

.niche-tag { padding: 12px 20px; border-radius: 12px; font-weight: 500; font-size: 0.95rem; display: flex; align-items: center; gap: 10px; transition: 0.3s; cursor: default; }

.niche-tag i { color: var(--accent); font-size: 1.1rem;}

.niche-tag:hover { border-color: var(--accent-transparent); transform: scale(1.05);}

.niche-open-door { border-color: var(--accent-glow); background: var(--accent-transparent); cursor: default;}



/* === SEÇÃO SEGURANÇA (Layout Faixa) === */

.security-container { overflow: hidden; display: flex; flex-direction: column; padding: 0; width: 100%; }

.security-main { padding: min(40px, 4vh); display: flex; align-items: center; gap: 32px; }

.security-seal { flex-shrink: 0; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }

.security-text { display: flex; flex-direction: column; gap: 12px; }

.security-text h3 { font-size: 1.5rem; font-weight: 700; margin: 0; }

.security-text p { font-size: 1rem; color: var(--text-muted); line-height: 1.6; margin: 0;}

/* Faixa inferior */

.security-ribbon { background: var(--bg-card-inner); border-top: 1px solid var(--border-glass); padding: min(20px, 2vh) min(40px, 4vh); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }

.trust-item { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; font-weight: 500; color: var(--text-main); }

.trust-item i { color: var(--accent); font-size: 1.1rem; }



/* === SEÇÃO PREÇOS (Cards + Switch) === */



/* Switch Toggle (Mensal/Anual) */

.billing-toggle { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: min(20px, 2vh); font-weight: 600; width: 100%; }

.discount-badge { background: var(--accent-transparent); color: var(--accent); padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; border: 1px solid var(--accent-glow); margin-left: 8px;}

/* Estrutura do Switch CSS Puro */

.switch { position: relative; display: inline-block; width: 50px; height: 26px; }

.switch input { opacity: 0; width: 0; height: 0; }

.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border-glass); transition: .4s; border-radius: 34px; }

.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: var(--text-muted); transition: .4s; border-radius: 50%; }

input:checked + .slider { background-color: var(--accent-transparent); border-color: var(--accent); }

input:checked + .slider:before { transform: translateX(24px); background-color: var(--accent); }



/* Grid e Cards Preço */

.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: min(30px, 3vh); width: 100%; }

.pricing-card { padding: min(30px, 3vh) 25px; display: flex; flex-direction: column; gap: min(16px, 1.5vh); transition: 0.3s; }

/* Card Popular (Destaque central) */

.pricing-card.popular { border-color: var(--accent); transform: scale(1.03); }

.popular-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #FFF; font-weight: 600; padding: 6px 16px; border-radius: 20px; font-size: 0.8rem; white-space: nowrap; }

[data-theme="dark"] .popular-badge { color: #000; }



.pricing-header { display: flex; flex-direction: column; gap: 4px; text-align: left;}

.pricing-header h3 { font-size: 1.4rem; margin: 0; font-weight: 700;}

.pricing-header p { color: var(--text-muted); font-size: 0.9rem; margin: 0; margin-bottom: 5px;}

.price { font-size: 2.2rem; font-weight: 800; margin: 0; }

.pricing-features { list-style: none; display: flex; flex-direction: column; gap: 12px; flex-grow: 1;}

.pricing-features li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--text-main); margin: 0; }

.pricing-features li.disabled { color: var(--text-muted); opacity: 0.6; text-decoration: line-through;}



/* === SEÇÃO FAQ (Accordion) === */

.faq-container { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; width: 100%;}

.faq-item { border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }

/* Pergunta (Clicável) */

.faq-question { padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 600; font-size: 1.05rem; margin: 0;}

.faq-question i { color: var(--accent); transition: transform 0.3s ease; }

/* Estado Ativo (Aberta) */

.faq-item.active .faq-question i { transform: rotate(180deg); }

.faq-item.active { border-color: var(--accent-transparent); }

/* Resposta (Escondida por padrão - animação max-height via CSS) */

.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; padding: 0 24px; color: var(--text-muted); line-height: 1.6; font-size: 0.95rem;}

.faq-item.active .faq-answer { max-height: 200px; padding: 0 24px 20px; }



/* === SEÇÃO CTA FINAL === */

.cta-section { padding-top: 100px; padding-bottom: 100px; text-align: center; width: 100%; }

.cta-box { padding: min(60px, 6vh) min(40px, 4vw); display: flex; flex-direction: column; align-items: center; gap: 20px; }

.cta-box h2 { font-size: 2.2rem; font-weight: 800; margin: 0; }

.cta-box p { font-size: 1.1rem; color: var(--text-muted); margin: 0 0 10px; max-width: 600px;}



/* === RODAPÉ (Footer) === */

footer { padding: 0 10% 0; scroll-snap-align: end; width: 100%; }

.footer-content { padding: 50px 50px 30px; display: flex; flex-direction: column; gap: 40px; }

/* Gird Topo (3 colunas) */

.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; text-align: left; }

.footer-brand p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; max-width: 300px; margin: 0;}

.footer-contact, .footer-social { display: flex; flex-direction: column; gap: 16px; }

.footer-contact h4, .footer-social h4 { font-size: 1.1rem; color: var(--text-main); font-weight: 700; margin: 0; }

.contact-item { display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; color: var(--text-muted); }

.contact-item a { color: var(--text-muted); text-decoration: none; transition: 0.3s; }

.contact-item a:hover { color: var(--accent); }



/* Ícones Sociais circulares */

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

.social-icons a { width: 40px; height: 40px; background: var(--bg-card-inner); border: 1px solid var(--border-glass); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-main); font-size: 1.1rem; transition: 0.3s; text-decoration: none;}

.social-icons a:hover { background: var(--accent); color: #FFF; border-color: var(--accent); transform: translateY(-3px);}

[data-theme="dark"] .social-icons a:hover { color: #000; }



/* Linha Bottom */

.footer-bottom { border-top: 1px solid var(--border-glass); padding-top: 20px; text-align: center; color: var(--text-muted); font-size: 0.9rem; }



/* === MODAL "QUEM SOMOS" (Estilos base) === */

.modal-overlay { 

    position: fixed; inset: 0; 

    background: rgba(0, 0, 0, 0.8); /* Fundo escuro blur */

    z-index: 2000; 

    display: none; align-items: center; justify-content: center; /* Centralizado */

    opacity: 0; transition: opacity 0.3s; backdrop-filter: blur(5px);

}

.modal-overlay.active { display: flex; opacity: 1; } /* Estado Ativo */

.modal-content { max-width: 800px; width: 90%; max-height: 90vh; overflow-y: auto; padding: 40px; position: relative; }

.close-modal { position: absolute; top: 20px; right: 25px; font-size: 2rem; cursor: pointer; color: var(--text-muted); transition: 0.3s;}

.close-modal:hover { color: var(--accent); }



/* Timeline dentro da Modal */

.timeline { position: relative; margin: 0 auto; display: flex; flex-direction: column; gap: 30px;}

.timeline::after { content: ''; position: absolute; width: 2px; background: var(--border-glass); top: 0; bottom: 0; left: 15px; } /* Linha vertical */

.timeline-item { position: relative; padding-left: 45px; }

.timeline-dot { position: absolute; width: 16px; height: 16px; left: 8px; top: 15px; background: var(--accent); border-radius: 50%; z-index: 1; box-shadow: 0 0 10px var(--accent-glow);}

.timeline-box { padding: 25px; display: flex; flex-direction: column; gap: 10px; }

.timeline-box h3 { margin: 0; font-size: 1.2rem; font-weight: 700;}

.timeline-box p { margin: 0; color: var(--text-muted); line-height: 1.6;}



/* === BOTÃO FLUTUANTE WHATSAPP === */

.floating-wa { 

    position: fixed; bottom: 30px; right: 30px; 

    width: 60px; height: 60px; 

    background: #25D366; color: #FFF; 

    border-radius: 50%; 

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

    font-size: 2rem; 

    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4); 

    z-index: 1000; transition: 0.3s; text-decoration: none;

}

.floating-wa:hover { transform: scale(1.1); filter: brightness(1.1); }



/* === ANIMAÇÕES DE REVEAL (Scroll) === */

/* Estado inicial (Escondido e abaixo) */

.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }

/* Estado ativo (Visível e na posição original - adicionado via JS) */

.reveal.active { opacity: 1; transform: translateY(0); }



/* ==========================================================================

   === MEDIA QUERIES - RESPONSIVIDADE E APP MOBILE UX EXPERIÊNCIA ===

   Foco: Centralização Master, Travas de Largura e Ajustes de Espaçamento.

   ========================================================================== */



@media (max-width: 992px) {

    /* TRAVA SCROLL SNAP MOBILE:

       Nós desligamos o efeito de 'travar' nas seções no mobile porque ele quebra

       a sensação de rolagem fluida e rápida nativa dos celulares (App UX).

    */

    html { scroll-snap-type: none; }

    

    /* CENTRALIZAÇÃO MASTER MOBILE:

       Padding lateral reduzido e fixo (15px) para garantir que nada encoste na borda,

       mas que usemos o máximo de tela disponível. Box-sizing garante a matemática.

    */

    .fullscreen-section, .cta-section { 

        min-height: auto; /* Seções não precisam mais ter 100vh fixo */

        padding: 110px 15px 60px; /* Padding Top maior para compensar Nav Fixa */

        scroll-snap-align: none; 

        width: 100%; box-sizing: border-box; 

    }

    

    /* Mostrar Botão Hambúrguer */

    .menu-btn { display: block; }

    

    /* Grids responsivos para 2 colunas */

    .grid-features, .pricing-grid, .grid-solutions, .grid-testimonials { grid-template-columns: repeat(2, 1fr); }

    

    /* Ajuste Nav Bar Mobile (Pílula mais larga) */

    .glass-panel-nav { width: 100%; max-width: calc(100% - 30px); padding: 12px 20px; margin: 0 auto; }

    

    /* ESTILOS DO MENU LATERAL (GAVETA / OFF-CANVAS):

       - Background sólido opaco para garantir leitura total sem confundir com o fundo.

       - Desliza da direita para a esquerda.

    */

    .nav-links { 

        position: fixed; top: 0; right: -100%; /* Escondido à direita */

        width: 300px; height: 100vh; 

        background: rgba(7, 13, 20, 0.98) !important; /* QUASE OPACO - Fim da confusão visual */

        backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);

        flex-direction: column; justify-content: center; padding: 40px 30px; 

        border-radius: 0; border: none; border-left: 1px solid var(--border-glass); 

        gap: 15px; transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Animação suave Apple-style */

        z-index: 1001; overflow-y: auto; /* Permite rolar dentro do menu se links vazarem */

    }

    /* Ajuste de fundo menu claro */

    [data-theme="light"] .nav-links { background: rgba(255, 255, 255, 0.98) !important; }

    /* Estado Ativo do Menu (Desliza para dentro) */

    .nav-links.active { right: 0; }

    

    /* Fundo Escuro (Overlay) atrás do menu - Mais escuro para foco App UX */

    .menu-overlay { 

        display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.85); /* Bem escuro */

        backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);

        z-index: 1000; opacity: 0; visibility: hidden; transition: 0.4s ease; 

    }

    .menu-overlay.active { opacity: 1; visibility: visible; }



    /* Botão fechar dentro do menu mobile */

    .close-menu-btn { display: block; position: absolute; top: 25px; right: 25px; font-size: 1.8rem; color: var(--text-main); cursor: pointer; padding: 10px; }

    

    /* Estilos links dentro do menu mobile */

    .nav-links > a { font-size: 1.15rem; border-bottom: 1px solid rgba(255,255,255,0.05); padding: 15px 0; width: 100%; text-align: left; opacity: 1;}

    .nav-actions { flex-direction: column; width: 100%; gap: 15px; margin-left: 0; margin-top: 30px;}

    .nav-actions a, .theme-btn { width: 100%; text-align: center; justify-content: center;}

    

    /* === AJUSTES HERO SECTION MOBILE === */

    .hero-container { 

        flex-direction: column; text-align: center; gap: 30px; 

        width: 100%; justify-content: center; align-items: center; /* Centralização Master */

    }

    .hero-text { max-width: 100%; align-items: center; width: 100%; }

    .hero-text h1 { font-size: 2.4rem; }

    .hero-buttons { flex-direction: column; gap: 15px; width: 100%; max-width: 320px; } /* Botões empilhados e centralizados */

    .hero-buttons a { width: 100%; }

    

    /* *** AJUSTE SOLICITADO: DIMINUIR VISUAL 3D NO MOBILE ***

       Nós aplicamos uma escala menor (0.75) e adicionamos margem inferior para

       encolher o conjunto (PC + Celular flutuante) e impedir que ele fique

       em cima da seção de logos ("Empresas que confiam").

    */

    .hero-3d-wrapper { 

        width: 100%; max-width: 340px; 

        margin: 0 auto 10px; /* Reduzida margem inferior e centralizado */

        display: flex; justify-content: center; 

        transform: scale(0.75) !important; /* ENCOLHIDO - Fim da sobreposição */

        transform-origin: center center; /* Encolhe a partir do centro */

    }

    .glass-card-3d { width: 100%; } /* Garante que o card ocupe o wrapper encolhido */



    /* === AJUSTES OUTRAS SEÇÕES MOBILE === */



    /*logos */

    .trusted-by { margin-top: 0; padding-top: 20px; } /* Remove margem negativa no mobile */

    .trusted-logos { gap: 20px 30px; }



    .features-container { flex-direction: column; gap: 40px; width: 100%; }

    .feature-text { text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; }

    .feature-text .feature-list { align-items: center; width: 100%; }

    .feature-text .feature-list li { justify-content: flex-start; text-align: left; max-width: 320px; }

    

    /* Impede Dashboard Analítico de vazar a tela horizontalmente */

    .complex-dashboard { max-width: 100%; padding: 20px 15px; box-sizing: border-box; }

    .dash-metrics, .dash-charts { flex-direction: column; gap: 10px; }

    .metric-card { width: 100%; }

    

    /* Segurança mobile */

    .security-main { flex-direction: column; text-align: center; padding: 25px 15px;}

    .security-ribbon { flex-direction: column; align-items: center; padding: 25px 15px; gap: 15px; text-align: center;}

    

    /* Preços mobile */

    .pricing-card.popular { transform: scale(1); } /* Remove aumento de tamanho central no mobile */

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

    

    /* Footer mobile */

    footer { padding: 0; width: 100%; }

    .footer-content { padding: 40px 15px 20px; border-radius: 0; border-left: none; border-right: none;}

    .footer-top { grid-template-columns: 1fr; gap: 40px; text-align: center; align-items: center; }

    .footer-brand p { margin: 0 auto; }

    .contact-item { justify-content: center; }

    .social-icons { justify-content: center; }

    

    /* Botão WA menor */

    .floating-wa { bottom: 20px; right: 20px; width: 55px; height: 55px; font-size: 1.8rem; }

}



/* === AJUSTES PARA CELULARES PEQUENOS (Telas muito finas) === */

@media (max-width: 600px) {

    /* Grids viram 1 coluna total */

    .grid-features, .pricing-grid, .grid-solutions, .grid-testimonials { grid-template-columns: 1fr; }

    .section-title h2 { font-size: 2.1rem; }

    

    /* Ajuste fino final no visual Hero para telas minúsculas */

    .hero-3d-wrapper { transform: scale(0.7) !important; } 

    .hero-text h1 { font-size: 2.2rem; }

}



/* === AJUSTES PARA CELULARES 'DEITADOS' OU CURTOS (Landscape / Max-Height) === */

@media (max-height: 800px) {

    .fullscreen-section { padding-top: 90px; padding-bottom: 30px; }

    .section-title { margin-bottom: 25px; }

    .solution-card, .feature-box, .testimonial-card, .pricing-card { padding: 20px; gap: 12px; }

    .cta-box { padding: 30px 15px; }

}

/* ==========================================================================
   ============== EXTENSOES v2 - REDESIGN PREMIUM ==========================
   Estilos novos: loader, top-promo, hero aprimorado, segments carrossel,
   stats, multi-device, how-to, antes/depois, footer expandido, back-to-top.
   ========================================================================== */

:root {
    --accent-secondary: #7C5CFF;
    --accent-secondary-glow: rgba(124, 92, 255, 0.25);
    --gradient-primary: linear-gradient(135deg, #42E8E0 0%, #7C5CFF 100%);
    --gradient-text: linear-gradient(135deg, #42E8E0 0%, #A78BFA 100%);
}
[data-theme="light"] {
    --accent-secondary: #6D28D9;
    --accent-secondary-glow: rgba(109, 40, 217, 0.18);
    --gradient-primary: linear-gradient(135deg, #0D9488 0%, #6D28D9 100%);
    --gradient-text: linear-gradient(135deg, #0D9488 0%, #6D28D9 100%);
}

.text-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

/* === LOADER === */
.page-loader {
    position: fixed; inset: 0;
    background: var(--bg-main);
    z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 24px;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.page-loader.hidden { opacity: 0; visibility: hidden; }
.loader-logo img { height: 60px; animation: logoFloat 1.6s ease-in-out infinite; filter: drop-shadow(0 0 20px var(--accent-glow)); }
.loader-bar { width: 200px; height: 3px; background: var(--border-glass); border-radius: 3px; overflow: hidden; }
.loader-bar span { display: block; width: 30%; height: 100%; background: var(--gradient-primary); border-radius: 3px; animation: loaderSlide 1.2s ease-in-out infinite; }
@keyframes logoFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.05); } }
@keyframes loaderSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }

/* === TOP PROMO BAR === */
.top-promo {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1100;
    background: var(--gradient-primary);
    color: #fff;
    padding: 10px 20px;
    overflow: hidden;
    transform: translateY(0);
    transition: transform 0.4s ease;
}
.top-promo.hidden { transform: translateY(-100%); }
.top-promo-content {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    font-size: 0.9rem; position: relative;
}
.top-promo-content i { animation: promoBolt 2s ease-in-out infinite; }
@keyframes promoBolt { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }
.top-promo-close {
    position: absolute; right: 0;
    background: transparent; border: none; color: #fff; cursor: pointer;
    font-size: 1rem; padding: 4px 8px; opacity: 0.8; transition: 0.2s;
}
.top-promo-close:hover { opacity: 1; transform: rotate(90deg); }
[data-theme="dark"] .top-promo { color: #000; font-weight: 600; }
[data-theme="dark"] .top-promo-close { color: #000; }

body.has-promo .header-wrapper { top: 60px; }
body.has-promo { padding-top: 40px; }
@media (max-width: 768px) {
    .top-promo-content { font-size: 0.78rem; gap: 8px; }
    .top-promo-content span { padding-right: 28px; }
}

/* === GRID DE FUNDO === */
.bg-grid {
    position: fixed; inset: 0;
    background-image:
        linear-gradient(var(--border-glass) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-glass) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 30%, transparent 75%);
}
[data-theme="light"] .bg-grid { opacity: 0.5; }
.glow-3 { top: 50%; left: 40%; width: 400px; height: 400px; background: var(--accent-secondary); opacity: 0.15; }

.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 35px; width: auto; object-fit: contain; }

/* === BOTOES === */
.btn-trial {
    background: var(--gradient-primary) !important;
    box-shadow: 0 4px 20px var(--accent-glow), 0 0 30px var(--accent-secondary-glow) !important;
    position: relative;
    overflow: hidden;
}
.btn-trial::before {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.6s ease;
}
.btn-trial:hover::before { left: 100%; }
.btn-trial i { margin-right: 8px; }

.btn-cta-large {
    font-size: 1.05rem !important;
    padding: 16px 32px !important;
    gap: 10px;
    box-shadow: 0 8px 30px var(--accent-glow), 0 0 40px var(--accent-secondary-glow);
}

.btn-ghost {
    background: transparent;
    border: none;
    color: var(--text-main) !important;
    padding: 10px 20px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    transition: 0.3s; cursor: pointer;
    font-size: 0.95rem;
}
.btn-ghost:hover { color: var(--accent); transform: translateX(2px); }

.link-cyan { color: var(--accent); text-decoration: none; font-weight: 600; transition: 0.2s; }
.link-cyan:hover { text-decoration: underline; }

/* === HERO === */
.badge-pulse { position: relative; }
.badge-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 var(--accent-glow);
    animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
    0%,100% { box-shadow: 0 0 0 0 var(--accent-glow); }
    50% { box-shadow: 0 0 0 8px transparent; }
}

.hero-text h1 { font-size: 3.8rem !important; font-weight: 800; }
.typewriter {
    border-right: 3px solid var(--accent);
    animation: blinkCursor 0.8s step-end infinite;
    padding-right: 4px;
}
@keyframes blinkCursor { 50% { border-color: transparent; } }

.hero-trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.trust-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; font-size: 0.82rem; font-weight: 500;
    background: var(--bg-card-inner);
    border: 1px solid var(--border-glass);
    border-radius: 50px;
    color: var(--text-muted);
}
.trust-pill i { font-size: 0.9rem; }

.float-notif {
    position: absolute;
    background: var(--bg-card);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: 14px;
    padding: 10px 14px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
    transform: translateZ(80px);
    z-index: 5;
    animation: notifFloat 3.5s ease-in-out infinite;
}
.float-notif i {
    width: 32px; height: 32px;
    background: var(--accent-transparent);
    color: var(--accent);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
}
.float-notif div { display: flex; flex-direction: column; }
.float-notif strong { font-size: 0.78rem; color: var(--text-main); line-height: 1.2; }
.float-notif span { font-size: 0.7rem; color: var(--text-muted); }
.notif-1 { top: -20px; left: -50px; animation-delay: 0s; }
.notif-2 { bottom: 30px; left: -70px; animation-delay: 1.5s; }
@keyframes notifFloat {
    0%,100% { transform: translateZ(80px) translateY(0); }
    50% { transform: translateZ(80px) translateY(-10px); }
}
@media (max-width: 992px) { .float-notif { display: none; } }

.mini-bars { display: flex; align-items: flex-end; gap: 4px; padding: 8px; height: 100%; }
.mini-bars span { flex: 1; background: var(--accent); opacity: 0.7; border-radius: 2px 2px 0 0; }
.mini-bars span:nth-child(4) { background: var(--accent-secondary); opacity: 1; }

/* === STATS === */
.stats-section { padding: 60px 10% 40px; width: 100%; position: relative; z-index: 2; }
.stats-grid {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(4, 1fr);
    align-items: center;
    padding: 30px 40px;
    gap: 20px;
}
.stat-item { text-align: center; }
.stat-item h3 {
    font-size: 2.6rem; font-weight: 800; margin: 0;
    background: var(--gradient-text);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    line-height: 1;
}
.stat-item span { font-size: 0.9rem; color: var(--text-muted); margin-top: 8px; display: block; }
.stat-divider { width: 1px; height: 50px; background: var(--border-glass); margin: 0 auto; }
@media (max-width: 768px) {
    .stats-section { padding: 30px 15px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); padding: 25px 15px; gap: 25px 15px; }
    .stat-divider { display: none; }
    .stat-item h3 { font-size: 2rem; }
}

/* === SEGMENTOS CARROSSEL === */
.segments-section { padding: 80px 0 60px; position: relative; z-index: 2; overflow: hidden; width: 100%; }
.segments-section .section-title { padding: 0 10%; }
.segments-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 40px 0 30px;
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.segments-track {
    display: flex; gap: 20px;
    width: max-content;
    animation: carouselScroll 50s linear infinite;
    will-change: transform;
}
.segments-carousel:hover .segments-track { animation-play-state: paused; }
@keyframes carouselScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.segment-card {
    flex: 0 0 auto;
    width: 230px;
    padding: 24px 20px;
    background: var(--bg-card);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    display: flex; flex-direction: column; gap: 10px;
    transition: 0.3s ease;
}
.segment-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-glow);
    box-shadow: 0 12px 30px var(--accent-glow);
}
.segment-icon {
    width: 50px; height: 50px;
    background: var(--gradient-primary);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #fff;
    box-shadow: 0 8px 20px var(--accent-glow);
}
[data-theme="dark"] .segment-icon { color: #001819; }
.segment-card h4 { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--text-main); }
.segment-card p { font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.4; }
.segments-cta { text-align: center; padding: 0 10%; margin-top: 20px; }
.segments-cta p { color: var(--text-muted); font-size: 1rem; }
@media (max-width: 768px) {
    .segment-card { width: 200px; padding: 20px; }
    .segments-section .section-title { padding: 0 15px; }
}

/* === TAG NO CARD === */
.card-tag {
    align-self: flex-start;
    padding: 4px 12px;
    background: var(--accent-transparent);
    border: 1px solid var(--accent-glow);
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    margin-top: auto;
}
.card-tag.tag-popular { background: var(--gradient-primary); color: #fff; border-color: transparent; }
[data-theme="dark"] .card-tag.tag-popular { color: #000; }

/* === MULTI-DEVICE === */
.multidevice-section { background: linear-gradient(180deg, transparent 0%, var(--bg-card-inner) 50%, transparent 100%); }
.device-showcase {
    display: flex; align-items: flex-end; justify-content: center;
    gap: 30px; flex-wrap: wrap;
    width: 100%;
    perspective: 1500px;
}
.device-laptop, .device-tablet, .device-phone {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}
.device-laptop:hover, .device-tablet:hover, .device-phone:hover { transform: translateY(-8px); }
.device-label { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }

.device-laptop { width: 480px; max-width: 100%; }
.laptop-screen {
    width: 100%; height: 290px;
    background: #1a1f2e; border: 8px solid #2a2f3e;
    border-radius: 14px 14px 4px 4px; padding: 10px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
[data-theme="light"] .laptop-screen { background: #e5e7eb; border-color: #cbd5e1; }
.laptop-content { width: 100%; height: 100%; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.laptop-base {
    width: 540px; max-width: 110%;
    height: 14px;
    background: linear-gradient(180deg, #2a2f3e 0%, #1a1f2e 100%);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    position: relative;
}
[data-theme="light"] .laptop-base { background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%); }
.laptop-base::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 80px; height: 4px; background: rgba(0,0,0,0.3); border-radius: 0 0 6px 6px;
}
.mini-mac-header { height: 22px; padding: 0 10px; display: flex; align-items: center; gap: 5px; background: rgba(0,0,0,0.1); border-bottom: 1px solid var(--border-glass); }
.mini-dot { width: 8px; height: 8px; border-radius: 50%; }
.mini-dashboard { display: flex; flex: 1; padding: 10px; gap: 10px; }
.mini-side { width: 40px; background: var(--border-glass); border-radius: 6px; }
.mini-main { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.mini-title-bar { width: 60%; height: 14px; background: var(--border-glass); border-radius: 3px; }
.mini-cards { display: flex; gap: 6px; }
.mini-card-stat { flex: 1; height: 40px; background: var(--bg-card-inner); border: 1px solid var(--border-glass); border-radius: 6px; }
.mini-card-stat:nth-child(2) { background: var(--accent-transparent); border-color: var(--accent-glow); }
.mini-bars-large { display: flex; align-items: flex-end; gap: 6px; flex: 1; padding: 8px 4px; }
.mini-bars-large span { flex: 1; background: var(--accent); opacity: 0.7; border-radius: 3px 3px 0 0; }
.mini-bars-large span:nth-child(4) { background: var(--accent-secondary); opacity: 1; }

.device-tablet { width: 240px; }
.tablet-screen {
    width: 100%; height: 320px;
    border-radius: 22px;
    border: 6px solid #1a1f2e;
    padding: 10px;
    background: var(--bg-card);
    display: flex; flex-direction: column;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}
[data-theme="light"] .tablet-screen { border-color: #cbd5e1; }
.tablet-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.7rem; padding: 4px 8px; color: var(--text-muted); }
.tablet-status { display: flex; gap: 6px; }
.tablet-content { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tablet-content h5 { font-size: 0.85rem; margin: 0 0 4px; color: var(--text-main); }
.tab-slot { display: flex; align-items: center; gap: 10px; padding: 10px; }
.slot-time { font-size: 0.7rem; font-weight: 700; color: var(--accent); min-width: 36px; }
.slot-info { flex: 1; display: flex; flex-direction: column; }
.slot-info strong { font-size: 0.75rem; color: var(--text-main); line-height: 1.2; }
.slot-info span { font-size: 0.65rem; color: var(--text-muted); }
.slot-status { width: 8px; height: 8px; border-radius: 50%; }
.slot-status.confirmed { background: #10b981; box-shadow: 0 0 8px rgba(16,185,129,0.6); }
.slot-status.pending { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.6); }

.device-phone { width: 180px; }
.phone-frame {
    width: 100%; aspect-ratio: 9 / 19;
    background: #1a1f2e; border-radius: 30px; padding: 10px;
    position: relative; box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}
[data-theme="light"] .phone-frame { background: #1e293b; }
.phone-notch {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    width: 60px; height: 16px; background: #000;
    border-radius: 0 0 12px 12px; z-index: 2;
}
.phone-screen { width: 100%; height: 100%; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; }
.phone-status { display: flex; justify-content: space-between; align-items: center; padding: 18px 16px 8px; font-size: 0.65rem; color: var(--text-main); }
.phone-status > div { display: flex; gap: 4px; }
.phone-app { padding: 10px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.phone-greeting { font-size: 0.85rem; color: var(--text-main); }
.phone-card { padding: 16px 12px !important; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.phone-card i { font-size: 1.3rem; color: var(--accent); }
.phone-card strong { font-size: 0.78rem; }
.phone-card span { font-size: 0.7rem; color: var(--text-muted); }
.phone-actions { display: flex; gap: 6px; margin-top: auto; }
.phone-action {
    flex: 1; aspect-ratio: 1;
    background: var(--bg-card-inner); border: 1px solid var(--border-glass);
    border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.phone-action i { color: var(--accent); font-size: 1rem; }
.phone-action span { font-size: 0.55rem; color: var(--text-muted); }
.phone-home-bar {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    width: 80px; height: 4px; background: rgba(255,255,255,0.4); border-radius: 4px;
}
@media (max-width: 768px) {
    .device-showcase { gap: 20px; }
    .device-laptop { width: 100%; max-width: 380px; }
    .laptop-screen { height: 230px; }
    .device-tablet { display: none; }
    .device-phone { width: 150px; }
}

/* === COMO FUNCIONA === */
.howto-steps { display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; flex-wrap: wrap; }
.howto-step {
    flex: 1; min-width: 220px; max-width: 300px;
    padding: 32px 24px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    position: relative; transition: 0.3s ease;
}
.howto-step:hover { transform: translateY(-6px); border-color: var(--accent-glow); }
.step-number {
    position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 40px;
    background: var(--gradient-primary);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.85rem;
    box-shadow: 0 8px 20px var(--accent-glow);
}
[data-theme="dark"] .step-number { color: #000; }
.step-icon {
    font-size: 2.4rem;
    background: var(--gradient-text);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin: 16px 0 4px;
}
.howto-step h3 { font-size: 1.2rem; font-weight: 700; margin: 0; }
.howto-step p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.5; margin: 0; }
.step-arrow { color: var(--accent); font-size: 1.6rem; opacity: 0.5; }
@media (max-width: 768px) {
    .step-arrow { display: none; }
    .howto-step { width: 100%; max-width: 100%; }
}
.howto-cta { text-align: center; margin-top: 50px; width: 100%; }

/* === ANTES vs DEPOIS === */
.compare-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 30px; align-items: stretch;
    max-width: 1000px; margin: 0 auto; width: 100%;
}
.compare-col { padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.compare-col h3 { font-size: 1.4rem; margin: 0; display: flex; align-items: center; gap: 10px; }
.compare-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0; }
.compare-col li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.98rem; line-height: 1.5; }
.compare-col li i { margin-top: 4px; flex-shrink: 0; font-size: 0.9rem; }
.compare-before h3 { color: #ef4444; }
.compare-before li { color: var(--text-muted); }
.compare-before li i { color: #ef4444; }
.compare-after h3 { color: var(--accent); }
.compare-after li { color: var(--text-main); }
.compare-after li i { color: var(--accent); }
.compare-vs {
    align-self: center;
    width: 60px; height: 60px;
    background: var(--gradient-primary); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.1rem;
    box-shadow: 0 10px 30px var(--accent-glow);
    flex-shrink: 0;
}
[data-theme="dark"] .compare-vs { color: #000; }
@media (max-width: 768px) {
    .compare-grid { grid-template-columns: 1fr; gap: 20px; }
    .compare-vs { justify-self: center; }
}

@media (min-width: 992px) {
    .grid-features { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 991px) and (min-width: 600px) {
    .grid-features { grid-template-columns: repeat(2, 1fr) !important; }
}

.pricing-guarantee {
    margin: 30px auto 0;
    text-align: center;
    display: flex; justify-content: center; align-items: center; gap: 10px;
    color: var(--text-muted); font-size: 0.95rem;
    padding: 16px 24px;
    background: var(--bg-card-inner);
    border: 1px solid var(--border-glass);
    border-radius: 50px; max-width: 600px;
}
.pricing-guarantee i { color: var(--accent); font-size: 1.2rem; }
.popular-badge i { margin-right: 6px; }

/* === CTA FINAL === */
.cta-box { position: relative; overflow: hidden; }
.cta-glow {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, var(--accent-glow), transparent 60%);
    z-index: 0; pointer-events: none;
}
.cta-box > * { position: relative; z-index: 1; }
.cta-box h2 { font-size: 2.6rem !important; line-height: 1.15; }
.cta-buttons { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 6px; }
.cta-trust { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin-top: 14px; font-size: 0.88rem; color: var(--text-muted); }
.cta-trust span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 600px) {
    .cta-box h2 { font-size: 1.9rem !important; }
    .cta-buttons { flex-direction: column; width: 100%; }
    .cta-buttons .btn-primary { width: 100%; }
}

/* === FOOTER EXPANDIDO === */
footer { padding: 60px 10% 0; }
.footer-content {
    border-radius: 24px 24px 0 0;
    border: 1px solid var(--border-glass);
    border-bottom: none;
    padding: 60px 50px 30px;
    display: flex; flex-direction: column; gap: 40px;
}
.footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr 1fr;
    gap: 40px; text-align: left;
}
.footer-brand p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; max-width: 320px; margin: 0 0 20px; }
.footer-logo { width: 50px; height: 50px; object-fit: contain; margin-bottom: 16px; }
.footer-col h4 {
    color: var(--text-main); margin: 0 0 20px;
    text-transform: uppercase; letter-spacing: 1px;
    font-size: 0.85rem; font-weight: 700;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col li { font-size: 0.92rem; }
.footer-col a, .footer-col span {
    color: var(--text-muted); text-decoration: none; transition: 0.2s ease;
    display: inline-flex; align-items: center; gap: 8px;
}
.footer-col a:hover { color: var(--accent); transform: translateX(2px); }
.footer-col i { font-size: 0.85rem; width: 16px; color: var(--accent); }

.footer-social { display: flex; gap: 10px; margin-top: 4px; }
.footer-social a {
    width: 38px; height: 38px;
    background: var(--bg-card-inner);
    border: 1px solid var(--border-glass);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-main); font-size: 1rem;
    transition: 0.3s ease;
}
.footer-social a:hover {
    background: var(--gradient-primary); color: #fff;
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px var(--accent-glow);
}
[data-theme="dark"] .footer-social a:hover { color: #000; }

.footer-payments {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; padding: 20px 0;
    border-top: 1px solid var(--border-glass);
    border-bottom: 1px solid var(--border-glass);
    color: var(--text-muted); font-size: 0.85rem;
    flex-wrap: wrap;
}
.payment-icons { display: flex; gap: 14px; align-items: center; font-size: 1.6rem; color: var(--text-muted); }
.payment-icons i { transition: 0.2s; }
.payment-icons i:hover { color: var(--accent); transform: translateY(-2px); }
.footer-bottom {
    text-align: center; padding-top: 10px;
    color: var(--text-muted); font-size: 0.88rem;
    display: flex; flex-direction: column; gap: 4px;
    border-top: none;
}
.footer-cnpj { font-size: 0.78rem; opacity: 0.7; }
@media (max-width: 992px) {
    footer { padding: 40px 0 0; }
    .footer-content { padding: 40px 20px 20px; border-radius: 20px 20px 0 0; }
    .footer-top { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .footer-brand { grid-column: span 2; }
}
@media (max-width: 600px) {
    .footer-top { grid-template-columns: 1fr; text-align: center; }
    .footer-brand { grid-column: span 1; }
    .footer-brand p { margin: 0 auto 20px; }
    .footer-social { justify-content: center; }
    .footer-col ul { align-items: center; }
}

/* === BACK TO TOP === */
.back-to-top {
    position: fixed; bottom: 30px; left: 30px;
    width: 50px; height: 50px;
    background: var(--bg-card);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-main); font-size: 1.1rem;
    cursor: pointer; opacity: 0; visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 999;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--accent); color: #000; border-color: var(--accent); transform: translateY(-3px); }
[data-theme="light"] .back-to-top:hover { color: #fff; }
@media (max-width: 768px) { .back-to-top { left: 20px; bottom: 20px; width: 45px; height: 45px; } }

/* === WHATSAPP PULSE === */
.floating-wa { position: fixed; overflow: visible; }
.floating-wa-pulse {
    position: absolute; inset: 0; border-radius: 50%;
    background: #25D366; opacity: 0.5;
    animation: waPulse 2s ease-out infinite; z-index: -1;
}
@keyframes waPulse {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.6); opacity: 0; }
}

.reveal { transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1); }

@media (max-width: 992px) { .hero-text h1 { font-size: 2.6rem !important; } }
@media (max-width: 600px) { .hero-text h1 { font-size: 2.1rem !important; } }

.trusted-by { display: none; }

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


/* ==========================================================================
   ============== EXTENSOES v3 - AJUSTES FINAIS =============================
   - Remove paleta roxa: tudo em teal/cyan (mesma paleta do site)
   - Setas do carrossel + navegacao manual
   - Banner de 7 dias gratis nos planos
   - Dashboard financeiro aprimorado
   - Scroll offset (fix pagina pela metade)
   - Tesla-style scale-in scroll animations
   - Redes sociais sempre lado a lado
   ========================================================================== */

/* === SOBRESCREVE PALETA ROXA - VOLTA TUDO PRA TEAL/CYAN === */
:root {
    --gradient-primary: linear-gradient(135deg, #42E8E0 0%, #2BAFA8 100%);
    --gradient-text: linear-gradient(135deg, #42E8E0 0%, #2BAFA8 100%);
    --accent-secondary: #2BAFA8;
    --accent-secondary-glow: rgba(43, 175, 168, 0.25);
}
[data-theme="light"] {
    --gradient-primary: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
    --gradient-text: linear-gradient(135deg, #0F766E 0%, #0D9488 100%);
    --accent-secondary: #0F766E;
    --accent-secondary-glow: rgba(15, 118, 110, 0.2);
}

/* glow-3 agora teal */
.glow-3 { background: var(--accent-dark) !important; opacity: 0.15; }

/* === FIX SCROLL OFFSET (pagina pela metade) === */
html { scroll-padding-top: 110px; }
section[id], .fullscreen-section[id] {
    scroll-margin-top: 110px;
}
body.has-promo section[id], body.has-promo .fullscreen-section[id] {
    scroll-margin-top: 150px;
}

/* === BOTAO TRIAL DESTACADO - sem brilho roxo === */
.btn-trial {
    box-shadow: 0 4px 20px var(--accent-glow), 0 0 30px var(--accent-glow) !important;
}
.btn-cta-large {
    box-shadow: 0 8px 30px var(--accent-glow), 0 0 40px var(--accent-glow);
}

/* === SEGMENT ICON - teal === */
.segment-icon {
    background: var(--gradient-primary);
    color: #001819;
}

/* === CAROUSEL COM SETAS DE NAVEGACAO === */
.segments-carousel-wrap {
    position: relative;
    width: 100%;
    margin: 40px 0 30px;
}
.segments-carousel-wrap .segments-carousel { margin: 0; }

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    background: var(--bg-card);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: 50%;
    color: var(--text-main);
    font-size: 1rem;
    cursor: pointer;
    z-index: 10;
    display: flex; align-items: center; justify-content: center;
    transition: 0.25s ease;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}
.carousel-arrow:hover {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 8px 30px var(--accent-glow);
}
[data-theme="light"] .carousel-arrow:hover { color: #fff; }
.carousel-prev { left: 16px; }
.carousel-next { right: 16px; }
@media (max-width: 768px) {
    .carousel-arrow { width: 40px; height: 40px; font-size: 0.9rem; }
    .carousel-prev { left: 8px; }
    .carousel-next { right: 8px; }
}

/* Quando o carrossel é controlado manualmente, pausamos a animação */
.segments-track.user-paused { animation-play-state: paused !important; }

/* === BANNER 7 DIAS GRATIS NOS PLANOS === */
.trial-banner {
    max-width: 900px;
    margin: 30px auto 50px;
    padding: 24px 32px;
    background: linear-gradient(135deg, var(--accent-transparent) 0%, transparent 100%);
    border: 2px solid var(--accent-glow);
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    overflow: hidden;
}
.trial-banner::before {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, var(--accent-glow), transparent 70%);
    pointer-events: none;
}
.trial-banner-icon {
    width: 64px; height: 64px;
    background: var(--gradient-primary);
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    color: #001819;
    flex-shrink: 0;
    box-shadow: 0 10px 30px var(--accent-glow);
}
[data-theme="light"] .trial-banner-icon { color: #fff; }
.trial-banner-content { flex: 1; position: relative; z-index: 1; }
.trial-banner-content h3 {
    font-size: 1.4rem;
    margin: 0 0 4px;
    font-weight: 700;
    color: var(--text-main);
}
.trial-banner-content p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
}
.trial-banner-btn {
    flex-shrink: 0;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}
@media (max-width: 768px) {
    .trial-banner {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        gap: 16px;
    }
    .trial-banner-content h3 { font-size: 1.2rem; }
    .trial-banner-btn { width: 100%; justify-content: center; }
}

/* === DASHBOARD FINANCEIRO APRIMORADO === */
.dash-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.metric-card {
    flex: 1;
    padding: 16px;
    display: flex; flex-direction: column; gap: 6px;
    position: relative;
    overflow: hidden;
}
.metric-icon {
    position: absolute;
    top: 12px; right: 12px;
    width: 32px; height: 32px;
    background: var(--accent-transparent);
    color: var(--accent);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    border: 1px solid var(--accent-glow);
}
.metric-card span {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.metric-card h4 {
    font-size: 1.4rem;
    margin: 0;
    font-weight: 800;
    color: var(--text-main);
}
.chart-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px;
}
.chart-period {
    font-size: 0.7rem;
    color: var(--text-muted);
    padding: 3px 10px;
    background: var(--bg-card-inner);
    border-radius: 10px;
    border: 1px solid var(--border-glass);
}
.bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.bar-wrap .bar {
    width: 100%;
    background: var(--border-glass);
    border-radius: 4px 4px 0 0;
    transition: height 0.6s ease;
}
.bar-wrap .bar.highlight {
    background: var(--gradient-primary);
}
.bar-wrap span {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 600;
}
.dash-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-glass);
}
.dash-bottom-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
}
.bottom-icon {
    width: 32px; height: 32px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.bottom-icon.success { background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.3); }
.bottom-icon.warn { background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
.bottom-icon.danger { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
.bottom-info { display: flex; flex-direction: column; line-height: 1.2; }
.bottom-info strong { font-size: 0.75rem; color: var(--text-main); font-weight: 700; }
.bottom-info span { font-size: 0.7rem; color: var(--text-muted); }

@media (max-width: 768px) {
    .dash-metrics-grid { grid-template-columns: 1fr; }
    .dash-bottom { grid-template-columns: 1fr; }
}

/* === REDES SOCIAIS - SEMPRE LADO A LADO === */
.footer-social {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin-top: 16px;
    align-items: center;
    justify-content: flex-start;
}
.footer-social a {
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .footer-social { justify-content: center !important; }
}

/* === FOOTER PROFISSIONAL === */
.footer-bottom { gap: 6px !important; }
.footer-bottom p { margin: 0; }
.footer-cnpj { font-size: 0.78rem; opacity: 0.7; }

/* === ANIMACOES TESLA-STYLE (scale + fade no scroll) === */
.reveal {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Variantes tipo Tesla */
.reveal-zoom { transform: scale(0.85); }
.reveal-zoom.active { transform: scale(1); }

.reveal-left { transform: translateX(-60px); opacity: 0; }
.reveal-left.active { transform: translateX(0); opacity: 1; }

.reveal-right { transform: translateX(60px); opacity: 0; }
.reveal-right.active { transform: translateX(0); opacity: 1; }

/* Hero grande sem efeito de scale (so fade up) pra nao parecer estranho na primeira renderizacao */
.hero-text.reveal, .hero-3d-wrapper.reveal {
    transform: translateY(20px);
}
.hero-text.reveal.active, .hero-3d-wrapper.reveal.active {
    transform: translateY(0);
}

/* === STAT NUMBERS - tirar gradient text se confuso, manter em teal solido === */
.stat-item h3 {
    background: none;
    -webkit-text-fill-color: initial;
    color: var(--accent);
}

/* === HERO TEXT GRADIENT - so cyan, sem roxo === */
.text-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* === PRICING - destaque visual no card popular === */
.pricing-card.popular {
    box-shadow: 0 20px 60px var(--accent-glow);
}

/* === LIMPA REGRAS QUE POSSAM TER USADO ROXO === */
.popular-badge,
.step-number,
.compare-vs,
.btn-trial,
.segment-icon,
.trial-banner-icon,
.bar-wrap .bar.highlight,
.card-tag.tag-popular {
    background: var(--gradient-primary) !important;
}
.text-gradient,
.step-icon {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* === RESPONSIVO GERAL === */
@media (max-width: 992px) {
    .features-container { gap: 30px; }
}

/* === PHONE MOCKUP TEAL === */
.phone-card i { color: var(--accent); }
.phone-action i { color: var(--accent); }

/* === LAPTOP MOCK GLOW SUTIL === */
.laptop-screen { box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 80px var(--accent-glow); }
[data-theme="light"] .laptop-screen { box-shadow: 0 20px 50px rgba(0,0,0,0.15); }

/* === CTA TRUST PILLS - garante quebra ok === */
.cta-trust { font-size: 0.85rem; }

/* === SECTION TITLE H2 - tamanho responsivo === */
@media (max-width: 992px) {
    .section-title h2 { font-size: 2.1rem !important; }
    .feature-text h2 { font-size: 1.9rem !important; }
}
@media (max-width: 600px) {
    .section-title h2 { font-size: 1.8rem !important; }
}

/* ==========================================================================
   ============== EXTENSOES v4 - DASHBOARD SVG + CAROUSEL FIX + UX ==========
   - Metric cards sem absolute icon (texto visível)
   - SVG line chart (receita real, com curva e gradiente)
   - Status row (confirmados/pendentes/cancelados)
   - Carousel: remove hover-pause no desktop (sempre rola)
   - Trial-banner reposicionado (abaixo dos cards)
   ========================================================================== */

/* === CAROUSEL DESKTOP: rola sempre, sem pausar no hover === */
@media (min-width: 769px) {
    .segments-carousel:hover .segments-track {
        animation-play-state: running !important;
    }
}

/* === METRIC CARD V2 — sem icon absoluto, sem sobreposição === */
.metric-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}
.metric-head > span {
    font-size: 0.68rem !important;
    color: var(--text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600 !important;
    line-height: 1;
}
.metric-icon {
    position: static !important;
    width: 26px !important;
    height: 26px !important;
    top: auto !important;
    right: auto !important;
    background: var(--accent-transparent);
    color: var(--accent);
    border-radius: 8px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.78rem !important;
    border: 1px solid var(--accent-glow);
    flex-shrink: 0;
}
.metric-card {
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    overflow: hidden;
}
.metric-card h4 {
    font-size: 1.45rem !important;
    margin: 0 !important;
    font-weight: 800 !important;
    color: var(--text-main) !important;
    line-height: 1 !important;
}
.metric-card .trend {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
}
.metric-card .trend.up { color: #10b981 !important; }

/* === DASHBOARD LINE CHART (SVG) === */
.dash-line-chart {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.revenue-svg {
    width: 100%;
    height: 80px;
    display: block;
    overflow: visible;
}
.chart-badge-up {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.chart-week-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: var(--text-muted);
    padding: 0 2px;
    margin-top: -4px;
}

/* === DASHBOARD STATUS ROW === */
.dash-status-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border-glass);
}
.status-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 10px;
    background: var(--bg-card-inner);
    border: 1px solid var(--border-glass);
}
.status-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    flex-shrink: 0;
}
.status-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.status-info strong {
    font-size: 0.95rem;
    font-weight: 800;
}
.status-info span {
    font-size: 0.6rem;
    color: var(--text-muted);
}
.status-pill.success .status-icon {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.status-pill.success .status-info strong { color: #10b981; }
.status-pill.warn .status-icon {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.status-pill.warn .status-info strong { color: #f59e0b; }
.status-pill.danger .status-icon {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.status-pill.danger .status-info strong { color: #ef4444; }

/* Mobile dashboard */
@media (max-width: 768px) {
    .dash-metrics-grid { grid-template-columns: 1fr !important; }
    .dash-status-row { grid-template-columns: 1fr !important; }
    .revenue-svg { height: 60px; }
    .chart-week-labels { font-size: 0.55rem; }
}

/* === TRIAL BANNER: agora abaixo dos cards (margin ajustado) === */
.trial-banner {
    margin-top: 40px !important;
    margin-bottom: 0 !important;
}

/* === PRICING: melhora visual geral === */
.pricing-grid {
    margin-top: 24px !important;
}

/* === CHART TITLE com icone === */
.chart-title i {
    margin-right: 5px;
    font-size: 0.85em;
}

/* ==========================================================================
   ============== v4b - TRIAL TRUST CHIP (pricing cards) ====================
   Cardinho bonito dentro de cada plano: "sem cartão de crédito"
   ========================================================================== */

.trial-trust-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(66, 232, 224, 0.05);
    border: 1.5px dashed rgba(66, 232, 224, 0.35);
    border-radius: 12px;
    padding: 10px 14px;
    margin-top: 14px;
    transition: border-color 0.3s;
}
.trial-trust-chip:hover {
    border-color: rgba(66, 232, 224, 0.6);
    background: rgba(66, 232, 224, 0.08);
}
.trial-trust-chip-popular {
    background: rgba(66, 232, 224, 0.09);
    border-color: rgba(66, 232, 224, 0.5);
}
.trial-trust-chip-icon {
    width: 34px;
    height: 34px;
    background: rgba(66, 232, 224, 0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #42E8E0;
    font-size: 0.9rem;
    flex-shrink: 0;
    border: 1px solid rgba(66, 232, 224, 0.3);
}
.trial-trust-chip-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.trial-trust-chip-text b {
    font-size: 0.78rem;
    color: var(--text-main);
    font-weight: 700;
    line-height: 1.3;
}
.trial-trust-chip-text span {
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.3;
}

[data-theme="light"] .trial-trust-chip {
    background: rgba(13, 148, 136, 0.05);
    border-color: rgba(13, 148, 136, 0.3);
}
[data-theme="light"] .trial-trust-chip-icon {
    background: rgba(13, 148, 136, 0.1);
    color: #0D9488;
    border-color: rgba(13, 148, 136, 0.25);
}

/* ==========================================================================
   ============== v4c - DEVICE STAGE (SOBREPOSICAO) + PLANOS NOTE ===========
   Dispositivos sobrepostos em composicao visual premium.
   Nota simples "sem cartao" acima do botao dos planos.
   ========================================================================== */

/* === NOTA SEM CARTAO (acima do botao) === */
.no-card-note {
    font-size: 0.74rem;
    color: var(--text-muted);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0 0 6px;
    line-height: 1;
}
.no-card-note i {
    color: var(--accent);
    font-size: 0.8rem;
}

/* === DEVICE STAGE — composicao sobreposta === */
.device-stage {
    position: relative;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    height: 400px;
}

/* Laptop: fundo, esquerda */
.stage-laptop {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 68%;
    z-index: 1;
}
.stage-laptop .laptop-screen {
    height: 270px;
    box-shadow:
        0 30px 80px rgba(0,0,0,0.55),
        0 0 120px rgba(66,232,224,0.12),
        0 0 0 1px var(--border-glass);
}

/* Tablet: meio, direita sobreposta */
.stage-tablet {
    position: absolute;
    right: 13%;
    bottom: 40px;
    width: 23%;
    z-index: 2;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
}
.stage-tablet .tablet-screen {
    height: 300px;
    border: 5px solid #1a1f2e;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
[data-theme="light"] .stage-tablet .tablet-screen { border-color: #cbd5e1; }

/* Phone: frente, mais a direita */
.stage-phone {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 15%;
    z-index: 3;
    filter: drop-shadow(-8px 20px 40px rgba(0,0,0,0.6));
}
.stage-phone .phone-frame {
    box-shadow:
        -10px 20px 50px rgba(0,0,0,0.5),
        0 0 0 1px rgba(66,232,224,0.2);
}

/* Barra de URL mini no laptop */
.mini-url-bar {
    font-size: 0.5rem;
    color: var(--text-muted);
    background: var(--bg-card-inner);
    border: 1px solid var(--border-glass);
    border-radius: 6px;
    padding: 2px 8px;
    margin-left: 8px;
    opacity: 0.8;
}
/* Side items mini */
.mini-side { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.mini-side-item {
    height: 12px;
    background: var(--border-glass);
    border-radius: 4px;
    width: 100%;
}
.mini-side-item.active { background: var(--accent); opacity: 0.7; }
.mini-card-stat.accent-card {
    background: rgba(66,232,224,0.12);
    border-color: rgba(66,232,224,0.3);
}

/* === PHONE MINI STATS === */
.phone-mini-stats {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}
.phone-mini-stat {
    flex: 1;
    background: var(--bg-card-inner);
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 5px 3px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.phone-mini-stat strong {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
}
.phone-mini-stat span {
    font-size: 0.45rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.phone-mini-stat.accent strong { color: var(--accent); }

/* Greeting sem nome */
.phone-greeting span { font-size: 0.9em; }

/* === RESPONSIVO — mobile: layout em coluna centralizado === */
@media (max-width: 860px) {
    .device-stage {
        height: auto;
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .stage-laptop,
    .stage-tablet,
    .stage-phone {
        position: static;
        width: 100%;
        filter: none;
    }
    .stage-laptop { max-width: 420px; }
    .stage-laptop .laptop-screen { height: 220px; }
    .stage-tablet { max-width: 240px; order: 3; }
    .stage-tablet .tablet-screen { height: 260px; }
    .stage-phone { max-width: 180px; order: 2; }
    .stage-phone .phone-frame { box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
}
@media (max-width: 480px) {
    .stage-laptop { max-width: 340px; }
    .stage-laptop .laptop-screen { height: 180px; }
    .stage-tablet { display: none; }
    .stage-phone { max-width: 155px; }
}

/* ==========================================================================
   ============== v4d - DEV-COMP: DISPOSITIVOS REALISTAS EM COMPOSIÇÃO =======
   Substituição completa do device-stage. Prefixo "dev-" sem conflitos.
   Desktop: sobreposição absoluta (laptop + tablet + phone em camadas).
   Mobile: flex coluna, TODOS os 3 dispositivos sempre visíveis.
   ========================================================================== */

/* === CONTAINER PRINCIPAL === */
.dev-comp {
    width: 100%;
    max-width: 960px;
    margin: 40px auto 0;
    position: relative;
    height: 460px;
    overflow: visible;
}

/* === POSICIONAMENTO DESKTOP (absoluto, sobreposição) === */
@media (min-width: 861px) {
    .dev-laptop-wrap {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 65%;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .dev-tablet-wrap {
        position: absolute;
        right: 10%;
        bottom: 55px;
        width: 27%;
        z-index: 2;
        filter: drop-shadow(0 24px 48px rgba(0,0,0,0.55));
    }
    .dev-phone-wrap {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 13%;
        z-index: 3;
        filter: drop-shadow(-6px 18px 40px rgba(0,0,0,0.65));
    }
}

/* === LAPTOP === */
.dev-laptop {
    width: 100%;
    height: 290px;
    background: #13171f;
    border-radius: 12px 12px 0 0;
    border: 7px solid #1e2436;
    border-bottom: 4px solid #1e2436;
    box-shadow:
        0 32px 80px rgba(0,0,0,0.65),
        0 0 130px rgba(66,232,224,0.09),
        inset 0 1px 0 rgba(255,255,255,0.08);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
[data-theme="light"] .dev-laptop {
    background: #eef1f5;
    border-color: #c9d1dc;
    box-shadow: 0 32px 80px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.95);
}
.dev-cam-dot {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background: #050608;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 10;
}

/* Browser chrome */
.dev-chrome-bar {
    height: 22px;
    background: rgba(0,0,0,0.22);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    flex-shrink: 0;
}
[data-theme="light"] .dev-chrome-bar {
    background: rgba(0,0,0,0.05);
    border-bottom-color: rgba(0,0,0,0.08);
}
.dev-chrome-dots {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.dev-chrome-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: block;
}
.dev-address-bar {
    flex: 1;
    max-width: 200px;
    margin: 0 auto;
    height: 13px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    font-size: 0.42rem;
    color: rgba(255,255,255,0.38);
    display: flex;
    align-items: center;
    padding: 0 6px;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: 0.2px;
}
[data-theme="light"] .dev-address-bar {
    background: rgba(255,255,255,0.85);
    border-color: rgba(0,0,0,0.1);
    color: rgba(0,0,0,0.45);
}

/* Dashboard layout */
.dev-dash-content {
    flex: 1;
    display: flex;
    min-height: 0;
}
.dev-sidebar {
    width: 36px;
    background: rgba(0,0,0,0.18);
    border-right: 1px solid rgba(255,255,255,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    gap: 7px;
    flex-shrink: 0;
}
[data-theme="light"] .dev-sidebar {
    background: rgba(0,0,0,0.04);
    border-right-color: rgba(0,0,0,0.07);
}
.dev-sidebar-logo {
    width: 20px;
    height: 20px;
    background: #42E8E0;
    border-radius: 5px;
    margin-bottom: 8px;
    opacity: 0.9;
}
[data-theme="light"] .dev-sidebar-logo { background: #0D9488; }
.dev-nav-item {
    width: 22px;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
}
[data-theme="light"] .dev-nav-item { background: rgba(0,0,0,0.1); }
.dev-nav-item.active {
    background: rgba(66,232,224,0.55);
    box-shadow: 0 0 6px rgba(66,232,224,0.3);
}
[data-theme="light"] .dev-nav-item.active { background: rgba(13,148,136,0.55); }

.dev-main-area {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    min-width: 0;
}
.dev-page-title {
    width: 42%;
    height: 10px;
    background: rgba(255,255,255,0.11);
    border-radius: 3px;
    margin-bottom: 2px;
}
[data-theme="light"] .dev-page-title { background: rgba(0,0,0,0.1); }

/* KPI cards */
.dev-kpi-row {
    display: flex;
    gap: 7px;
}
.dev-kpi-card {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 9px;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.dev-kpi-card.accent {
    background: rgba(66,232,224,0.07);
    border-color: rgba(66,232,224,0.22);
}
[data-theme="light"] .dev-kpi-card {
    background: rgba(255,255,255,0.85);
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .dev-kpi-card.accent {
    background: rgba(13,148,136,0.07);
    border-color: rgba(13,148,136,0.28);
}
.dev-kpi-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(66,232,224,0.14);
    color: #42E8E0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.54rem;
    flex-shrink: 0;
}
.dev-kpi-icon.sec { background: rgba(139,92,246,0.15); color: #8b5cf6; }
.dev-kpi-icon.ter { background: rgba(245,158,11,0.15); color: #f59e0b; }
[data-theme="light"] .dev-kpi-icon { background: rgba(13,148,136,0.12); color: #0D9488; }
.dev-kpi-vals {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
}
.dev-kpi-label {
    font-size: 0.4rem;
    color: rgba(255,255,255,0.38);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
[data-theme="light"] .dev-kpi-label { color: rgba(0,0,0,0.38); }
.dev-kpi-num {
    font-size: 0.72rem;
    font-weight: 800;
    color: rgba(255,255,255,0.9);
    line-height: 1;
    white-space: nowrap;
}
[data-theme="light"] .dev-kpi-num { color: rgba(0,0,0,0.82); }
.dev-kpi-trend {
    font-size: 0.38rem;
    color: #10b981;
    font-weight: 700;
}

/* Chart area */
.dev-chart-area {
    flex: 1;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 9px;
    padding: 8px 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 0;
    overflow: hidden;
}
[data-theme="light"] .dev-chart-area {
    background: rgba(255,255,255,0.9);
    border-color: rgba(0,0,0,0.06);
}
.dev-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.dev-chart-title {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
[data-theme="light"] .dev-chart-title { color: rgba(0,0,0,0.45); }
.dev-chart-badge {
    background: rgba(16,185,129,0.14);
    color: #10b981;
    font-size: 0.42rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    border: 1px solid rgba(16,185,129,0.28);
}
.dev-chart-svg {
    flex: 1;
    width: 100%;
    min-height: 32px;
    display: block;
    overflow: visible;
}
.dev-chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.35rem;
    color: rgba(255,255,255,0.22);
    flex-shrink: 0;
}
[data-theme="light"] .dev-chart-labels { color: rgba(0,0,0,0.28); }

/* Laptop base (teclado) */
.dev-laptop-base {
    width: 110%;
    height: 13px;
    background: linear-gradient(180deg, #1e2436 0%, #13171f 100%);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    margin-left: -5%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-theme="light"] .dev-laptop-base {
    background: linear-gradient(180deg, #bfc8d4 0%, #a4afbb 100%);
}
.dev-laptop-notch {
    width: 64px;
    height: 4px;
    background: rgba(0,0,0,0.28);
    border-radius: 0 0 5px 5px;
}

/* === TABLET === */
.dev-tablet {
    width: 100%;
    background: #13171f;
    border-radius: 18px;
    border: 7px solid #1e2436;
    box-shadow:
        0 24px 64px rgba(0,0,0,0.58),
        inset 0 1px 0 rgba(255,255,255,0.07);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
[data-theme="light"] .dev-tablet {
    background: #f0f4f8;
    border-color: #c4cdd8;
    box-shadow: 0 24px 64px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.95);
}
.dev-tablet-cam {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background: #050608;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 10;
}
@media (min-width: 861px) {
    .dev-tablet { height: 340px; }
}

/* Tablet content */
.dev-tablet-content {
    flex: 1;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
    min-height: 0;
}
.dev-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.55rem;
    color: rgba(255,255,255,0.45);
    padding: 4px 2px 0;
    flex-shrink: 0;
}
[data-theme="light"] .dev-status-bar { color: rgba(0,0,0,0.45); }
.dev-status-icons {
    display: flex;
    gap: 4px;
    font-size: 0.5rem;
}
.dev-agenda-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
[data-theme="light"] .dev-agenda-header { border-bottom-color: rgba(0,0,0,0.08); }
.dev-agenda-title {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255,255,255,0.88);
}
[data-theme="light"] .dev-agenda-title { color: rgba(0,0,0,0.8); }
.dev-agenda-count {
    font-size: 0.5rem;
    color: #42E8E0;
    font-weight: 600;
}
[data-theme="light"] .dev-agenda-count { color: #0D9488; }

/* Slots de agenda */
.dev-slot {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
[data-theme="light"] .dev-slot {
    background: rgba(255,255,255,0.8);
    border-color: rgba(0,0,0,0.07);
}
.dev-slot-time {
    font-size: 0.55rem;
    font-weight: 700;
    color: #42E8E0;
    min-width: 28px;
    flex-shrink: 0;
}
[data-theme="light"] .dev-slot-time { color: #0D9488; }
.dev-slot-bar {
    width: 3px;
    height: 22px;
    border-radius: 2px;
    flex-shrink: 0;
}
.dev-slot-bar.confirmed { background: #10b981; }
.dev-slot-bar.pending { background: #f59e0b; }
.dev-slot-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
}
.dev-slot-info strong {
    font-size: 0.58rem;
    color: rgba(255,255,255,0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
[data-theme="light"] .dev-slot-info strong { color: rgba(0,0,0,0.8); }
.dev-slot-info span {
    font-size: 0.45rem;
    color: rgba(255,255,255,0.32);
}
[data-theme="light"] .dev-slot-info span { color: rgba(0,0,0,0.38); }
.dev-slot-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dev-slot-dot.confirmed { background: #10b981; box-shadow: 0 0 5px rgba(16,185,129,0.55); }
.dev-slot-dot.pending { background: #f59e0b; box-shadow: 0 0 5px rgba(245,158,11,0.55); }

/* Stats bottom do tablet */
.dev-tab-stats {
    display: flex;
    gap: 5px;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
[data-theme="light"] .dev-tab-stats { border-top-color: rgba(0,0,0,0.07); }
.dev-tab-stat {
    flex: 1;
    text-align: center;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    padding: 4px 2px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
[data-theme="light"] .dev-tab-stat { background: rgba(0,0,0,0.04); }
.dev-tab-stat strong {
    font-size: 0.62rem;
    font-weight: 800;
    color: rgba(255,255,255,0.88);
    line-height: 1;
}
[data-theme="light"] .dev-tab-stat strong { color: rgba(0,0,0,0.8); }
.dev-tab-stat span {
    font-size: 0.42rem;
    color: rgba(255,255,255,0.28);
    text-transform: uppercase;
}
[data-theme="light"] .dev-tab-stat span { color: rgba(0,0,0,0.32); }
.dev-tab-stat.hi strong { color: #42E8E0; }
[data-theme="light"] .dev-tab-stat.hi strong { color: #0D9488; }

/* Home pill (tablet) */
.dev-home-pill {
    width: 38%;
    height: 4px;
    background: rgba(255,255,255,0.22);
    border-radius: 4px;
    margin: 6px auto 8px;
    flex-shrink: 0;
}

/* === CELULAR === */
.dev-phone {
    width: 100%;
    aspect-ratio: 9 / 19.5;
    background: #13171f;
    border-radius: 30px;
    border: 7px solid #1e2436;
    box-shadow:
        0 24px 64px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,255,255,0.09),
        0 0 0 1px rgba(66,232,224,0.12);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
[data-theme="light"] .dev-phone {
    background: #f0f4f8;
    border-color: #c4cdd8;
    box-shadow: 0 24px 64px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.95);
}

/* Dynamic island */
.dev-dynamic-island {
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 36%;
    height: 9px;
    background: #000;
    border-radius: 8px;
    z-index: 10;
}

/* Phone content */
.dev-phone-content {
    flex: 1;
    padding: 6px 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    min-height: 0;
}
.dev-phone-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.5rem;
    color: rgba(255,255,255,0.45);
    padding-top: 12px;
    flex-shrink: 0;
}
[data-theme="light"] .dev-phone-status { color: rgba(0,0,0,0.45); }
.dev-phone-status > div {
    display: flex;
    gap: 3px;
    font-size: 0.44rem;
}
.dev-phone-greet {
    font-size: 0.58rem;
    font-weight: 700;
    color: rgba(255,255,255,0.88);
    flex-shrink: 0;
}
[data-theme="light"] .dev-phone-greet { color: rgba(0,0,0,0.8); }

/* Phone KPIs */
.dev-phone-kpis {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}
.dev-phone-kpi {
    flex: 1;
    text-align: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 5px 2px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
[data-theme="light"] .dev-phone-kpi {
    background: rgba(255,255,255,0.85);
    border-color: rgba(0,0,0,0.08);
}
.dev-phone-kpi strong {
    font-size: 0.55rem;
    font-weight: 800;
    color: rgba(255,255,255,0.9);
    line-height: 1;
}
[data-theme="light"] .dev-phone-kpi strong { color: rgba(0,0,0,0.82); }
.dev-phone-kpi span {
    font-size: 0.38rem;
    color: rgba(255,255,255,0.28);
    text-transform: uppercase;
    letter-spacing: 0.2px;
}
[data-theme="light"] .dev-phone-kpi span { color: rgba(0,0,0,0.35); }
.dev-phone-kpi.hi strong { color: #42E8E0; }
[data-theme="light"] .dev-phone-kpi.hi strong { color: #0D9488; }

/* Próximo agendamento */
.dev-phone-next {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(66,232,224,0.07);
    border: 1px solid rgba(66,232,224,0.18);
    border-radius: 11px;
    padding: 7px 9px;
    flex-shrink: 0;
}
[data-theme="light"] .dev-phone-next {
    background: rgba(13,148,136,0.07);
    border-color: rgba(13,148,136,0.22);
}
.dev-phone-next > i {
    font-size: 0.95rem;
    color: #42E8E0;
    flex-shrink: 0;
}
[data-theme="light"] .dev-phone-next > i { color: #0D9488; }
.dev-phone-next > div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.dev-phone-next strong {
    font-size: 0.52rem;
    color: rgba(255,255,255,0.88);
    font-weight: 700;
    line-height: 1;
}
[data-theme="light"] .dev-phone-next strong { color: rgba(0,0,0,0.8); }
.dev-phone-next span {
    font-size: 0.44rem;
    color: rgba(255,255,255,0.38);
}
[data-theme="light"] .dev-phone-next span { color: rgba(0,0,0,0.4); }

/* Ações rápidas */
.dev-phone-actions {
    display: flex;
    gap: 4px;
    margin-top: auto;
    flex-shrink: 0;
}
.dev-phone-action {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 9px;
    padding: 7px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
[data-theme="light"] .dev-phone-action {
    background: rgba(255,255,255,0.85);
    border-color: rgba(0,0,0,0.08);
}
.dev-phone-action i {
    font-size: 0.75rem;
    color: #42E8E0;
}
[data-theme="light"] .dev-phone-action i { color: #0D9488; }
.dev-phone-action span {
    font-size: 0.35rem;
    color: rgba(255,255,255,0.32);
    text-transform: uppercase;
    letter-spacing: 0.2px;
}
[data-theme="light"] .dev-phone-action span { color: rgba(0,0,0,0.4); }

/* Home bar (celular) */
.dev-home-bar {
    width: 38%;
    height: 3px;
    background: rgba(255,255,255,0.28);
    border-radius: 3px;
    margin: 5px auto 6px;
    flex-shrink: 0;
}

/* === LAYOUT MOBILE: flex coluna, todos visíveis === */
@media (max-width: 860px) {
    .dev-comp {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 28px;
        padding: 0 12px;
    }
    .dev-laptop-wrap {
        width: 100%;
        max-width: 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .dev-laptop { height: 250px; }
    .dev-tablet-wrap {
        width: 100%;
        max-width: 300px;
        filter: none;
    }
    .dev-phone-wrap {
        width: 100%;
        max-width: 210px;
        filter: none;
    }
}
@media (max-width: 480px) {
    .dev-comp { gap: 22px; padding: 0 8px; }
    .dev-laptop-wrap { max-width: 380px; }
    .dev-laptop { height: 210px; }
    .dev-tablet-wrap { max-width: 260px; }
    .dev-phone-wrap { max-width: 175px; }
}

/* ==========================================================================
   ============== v4e - NAV LIGHT MODE: paleta correta em todas as telas =====
   Dark: fundo #070D14 opaco. Light: fundo --bg-main (#F3F4F6) com sombra.
   Mobile: menu lateral segue a mesma paleta do tema ativo.
   ========================================================================== */

/* Pill nav - light mode com mais definição */
[data-theme="light"] .glass-panel-nav {
    background: rgba(243, 244, 246, 0.97) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.05) !important;
    border: 1px solid rgba(0,0,0,0.09) !important;
}
/* Pill nav - dark mode explícito */
[data-theme="dark"] .glass-panel-nav {
    background: rgba(7, 13, 20, 0.96) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Mobile menu: mesma paleta do tema */
@media (max-width: 992px) {
    /* DARK mobile menu */
    [data-theme="dark"] .nav-links {
        background: rgba(7, 13, 20, 0.99) !important;
        border-left: 1px solid rgba(255,255,255,0.08) !important;
        box-shadow: -8px 0 40px rgba(0,0,0,0.5) !important;
    }
    [data-theme="dark"] .nav-links > a {
        border-bottom-color: rgba(255,255,255,0.06) !important;
        color: #ffffff !important;
    }
    [data-theme="dark"] .close-menu-btn { color: #ffffff; }

    /* LIGHT mobile menu */
    [data-theme="light"] .nav-links {
        background: rgba(243, 244, 246, 0.99) !important;
        border-left: 1px solid rgba(0,0,0,0.08) !important;
        box-shadow: -8px 0 40px rgba(0,0,0,0.12) !important;
    }
    [data-theme="light"] .nav-links > a {
        border-bottom-color: rgba(0,0,0,0.07) !important;
        color: #1F2937 !important;
    }
    [data-theme="light"] .close-menu-btn { color: #1F2937; }
    [data-theme="light"] .menu-btn { color: #1F2937; }
    [data-theme="light"] .nav-links > a:hover { color: #0D9488 !important; opacity: 1 !important; }

    /* Botões dentro do menu mobile - light mode */
    [data-theme="light"] .btn-outline {
        background: transparent;
        border-color: rgba(0,0,0,0.18) !important;
        color: #1F2937 !important;
    }
    [data-theme="light"] .btn-outline:hover {
        background: rgba(13,148,136,0.08) !important;
        border-color: #0D9488 !important;
        color: #0D9488 !important;
    }
    [data-theme="light"] .theme-btn { color: #1F2937; }
}