/* --- GLOBAIS E VARIÁVEIS --- */
:root {
    --bg-deep-space: #0a0514;
    --accent-violet: #9E47FF;
    --accent-cyan: #00F2EA;
    --text-primary: #EAE2FF;
    --text-secondary: #a79cb8;
    --font-family: 'Sora', sans-serif;
    --glow-violet: 0 0 15px rgba(158, 71, 255, 0.6);
}

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

/* --- ESTRUTURA E LAYOUT BASE --- */
html {
    background-color: var(--bg-deep-space);
}
html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
body {
    font-family: var(--font-family);
    background-color: var(--bg-deep-space);
    color: var(--text-primary);
    position: relative; 
    overflow-y: auto;
}
main {
    /* O conteúdo começa do topo */
}
.container { 
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 0 20px; 
    position: relative; 
    z-index: 10; 
}

/* --- EFEITOS DE FUNDO (HOLOFOTE + GRADE ESTÁTICA) --- */
body::before {
    /* Camada 1: A Grade (estática) */
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 1;
    pointer-events: none;
    background-image: 
        linear-gradient(rgba(158, 71, 255, 0.2) 1px, transparent 1px),
        linear-gradient(to right, rgba(158, 71, 255, 0.2) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.2;
}
body::after {
    /* Camada 2: O Holofote do Mouse */
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(
        circle 700px at var(--mouse-x) var(--mouse-y),
        rgba(158, 71, 255, 0.15) 0%,
        transparent 40%
    );
}

/* --- EFEITO VISUAL: ESTRELAS PULSANTES --- */
.estrelas-pulsantes-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
}
.estrela-pulsante {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: var(--text-primary);
    animation: animar-estrela-pulsante infinite ease-in-out;
}
/* Distribuindo as estrelas aleatoriamente com delays e durações diferentes e mais rápidas */
.estrela-pulsante:nth-child(1) { top: 76%; left: 81%; animation-duration: 3.5s; animation-delay: 2s; }
.estrela-pulsante:nth-child(2) { top: 43%; left: 33%; animation-duration: 2.5s; animation-delay: 4s; }
.estrela-pulsante:nth-child(3) { top: 12%; left: 15%; animation-duration: 4.5s; animation-delay: 1s; }
.estrela-pulsante:nth-child(4) { top: 88%; left: 52%; animation-duration: 4s; animation-delay: 5s; }
.estrela-pulsante:nth-child(5) { top: 25%; left: 90%; animation-duration: 3s; animation-delay: 3s; }
.estrela-pulsante:nth-child(6) { top: 5%; left: 50%; animation-duration: 5s; animation-delay: 0s; }
.estrela-pulsante:nth-child(7) { top: 60%; left: 5%; animation-duration: 3.5s; animation-delay: 6s; }
.estrela-pulsante:nth-child(8) { top: 95%; left: 95%; animation-duration: 2.5s; animation-delay: 2s; width: 3px; height: 3px; }
.estrela-pulsante:nth-child(9) { top: 33%; left: 67%; animation-duration: 4s; animation-delay: 7s; }
.estrela-pulsante:nth-child(10) { top: 70%; left: 20%; animation-duration: 4.5s; animation-delay: 3s; }
.estrela-pulsante:nth-child(11) { top: 18%; left: 78%; animation-duration: 3s; animation-delay: 5s; }
.estrela-pulsante:nth-child(12) { top: 82%; left: 8%; animation-duration: 5s; animation-delay: 1s; }
.estrela-pulsante:nth-child(13) { top: 2%; left: 22%; animation-duration: 3.5s; animation-delay: 6s; }
.estrela-pulsante:nth-child(14) { top: 55%; left: 98%; animation-duration: 4s; animation-delay: 4s; }
.estrela-pulsante:nth-child(15) { top: 48%; left: 42%; animation-duration: 4.5s; animation-delay: 2s; width: 1px; height: 1px; }
.estrela-pulsante:nth-child(16) { top: 92%; left: 30%; animation-duration: 2.5s; animation-delay: 7s; }
.estrela-pulsante:nth-child(17) { top: 8%; left: 9%; animation-duration: 3s; animation-delay: 1s; }
.estrela-pulsante:nth-child(18) { top: 65%; left: 85%; animation-duration: 5s; animation-delay: 5s; }
.estrela-pulsante:nth-child(19) { top: 38%; left: 25%; animation-duration: 4s; animation-delay: 3s; }
.estrela-pulsante:nth-child(20) { top: 75%; left: 60%; animation-duration: 3.5s; animation-delay: 0s; width: 3px; height: 3px; }
.estrela-pulsante:nth-child(21) { top: 22%; left: 4%; animation-duration: 4.5s; animation-delay: 6s; }
.estrela-pulsante:nth-child(22) { top: 4%; left: 65%; animation-duration: 3s; animation-delay: 2s; }
.estrela-pulsante:nth-child(23) { top: 98%; left: 45%; animation-duration: 4s; animation-delay: 5s; }
.estrela-pulsante:nth-child(24) { top: 30%; left: 55%; animation-duration: 3.5s; animation-delay: 1s; }
.estrela-pulsante:nth-child(25) { top: 68%; left: 92%; animation-duration: 4.5s; animation-delay: 4s; width: 1px; height: 1px; }
.estrela-pulsante:nth-child(26) { top: 15%; left: 35%; animation-duration: 5s; animation-delay: 3s; }
.estrela-pulsante:nth-child(27) { top: 85%; left: 75%; animation-duration: 3s; animation-delay: 7s; }
.estrela-pulsante:nth-child(28) { top: 45%; left: 12%; animation-duration: 4s; animation-delay: 0s; }
.estrela-pulsante:nth-child(29) { top: 28%; left: 88%; animation-duration: 3.5s; animation-delay: 5s; }
.estrela-pulsante:nth-child(30) { top: 90%; left: 68%; animation-duration: 4.5s; animation-delay: 2s; }
.estrela-pulsante:nth-child(31) { top: 58%; left: 38%; animation-duration: 3s; animation-delay: 6s; }
.estrela-pulsante:nth-child(32) { top: 7%; left: 96%; animation-duration: 5s; animation-delay: 1s; }
.estrela-pulsante:nth-child(33) { top: 72%; left: 18%; animation-duration: 4s; animation-delay: 4s; }
.estrela-pulsante:nth-child(34) { top: 35%; left: 3%; animation-duration: 3.5s; animation-delay: 2s; }
.estrela-pulsante:nth-child(35) { top: 10%; left: 58%; animation-duration: 4.5s; animation-delay: 7s; }
.estrela-pulsante:nth-child(36) { top: 50%; left: 80%; animation-duration: 3s; animation-delay: 1s; }
.estrela-pulsante:nth-child(37) { top: 80%; left: 48%; animation-duration: 4s; animation-delay: 5s; }
.estrela-pulsante:nth-child(38) { top: 20%; left: 28%; animation-duration: 5s; animation-delay: 3s; }
.estrela-pulsante:nth-child(39) { top: 95%; left: 2%; animation-duration: 3.5s; animation-delay: 6s; }
.estrela-pulsante:nth-child(40) { top: 5%; left: 85%; animation-duration: 4.5s; animation-delay: 0s; }


/* --- COMPONENTES DA PÁGINA --- */
/* O .main-header foi removido */

/* SEÇÃO DE VÍDEO EM DESTAQUE */
.hero-video-section {
    padding-top: 100px; /* Espaçamento no topo da página */
    padding-bottom: 60px;
}
.video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    max-width: 900px;
    margin: 40px auto 0 auto; /* Espaçamento acima do vídeo */
    border: 1px solid rgba(var(--accent-violet), 0.5);
    box-shadow: 0 0 25px rgba(158, 71, 255, 0.4), 0 0 15px rgba(0, 242, 234, 0.2);
    border-radius: 10px;
    overflow: hidden;
    will-change: transform, box-shadow;
}
.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* SEÇÃO DE TEXTO HEROI */
.hero-text-section { 
    min-height: auto;
    padding: 60px 0;
    display: flex; 
    align-items: center; 
    text-align: center; 
}
.hero-content { 
    max-width: 700px; 
    margin: 0 auto; 
}
.hero-text-section h1 { 
    font-size: 4rem; 
    font-weight: 700; 
    margin-bottom: 1.5rem; 
    text-shadow: 0 0 8px rgba(158, 71, 255, 0.7); 
    line-height: 1.2; 
}
.hero-text-section p { 
    color: var(--text-secondary); 
    font-size: 1.2rem; 
    margin-bottom: 2.5rem; 
}

.cta-button { background: linear-gradient(90deg, var(--accent-violet), var(--accent-cyan)); color: #fff; padding: 18px 35px; text-decoration: none; font-weight: 700; border-radius: 8px; transition: all 0.3s ease; box-shadow: 0 0 15px rgba(158, 71, 255, 0.5); border: none; cursor: pointer; animation: pulse-glow 4s infinite ease-in-out; }
.cta-button:hover { transform: scale(1.05); box-shadow: 0 0 25px rgba(158, 71, 255, 0.8); }
.interactive-book-container { flex-basis: 40%; perspective: 1500px; display: flex; justify-content: center; }
#interactive-book { width: 280px; transition: transform 0.1s ease-out; transform: rotateY(var(--rotateY, 0)) rotateX(var(--rotateX, 0)); box-shadow: 0 20px 50px rgba(0,0,0,0.5); border-radius: 5px; }
section { padding: 100px 0; text-align: center; }
h2 { font-size: 2.8rem; margin-bottom: 1.5rem; text-shadow: var(--glow-violet); }
.subtitle { color: var(--text-secondary); max-width: 600px; margin: 0 auto 3rem auto; }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 4rem; }
.problem-card { background: rgba(15, 8, 30, 0.7); border: 1px solid rgba(158, 71, 255, 0.3); padding: 30px; border-radius: 10px; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; will-change: transform; }
.problem-card:hover { transform: translateY(-10px); border-color: var(--accent-cyan); box-shadow: 0 0 15px rgba(0, 242, 234, 0.5); }
.solution-content { display: flex; align-items: center; gap: 50px; text-align: left; }
.solution-text { flex: 1; }
.solution-text h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--accent-cyan); }
.solution-text ul { list-style: none; }
.solution-text li { margin-bottom: 0.75rem; padding-left: 1.5rem; position: relative; }
.solution-text li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-violet); }
.solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: left; }
.solution-card { background-color: rgba(15, 8, 30, 0.8); padding: 30px; border-radius: 10px; border: 1px solid transparent; transition: all 0.3s ease; }
.solution-card:hover { border-color: var(--accent-violet); transform: translateY(-5px); }
.solution-card h3 { color: var(--accent-violet); margin-bottom: 1rem; }
.offer-box { max-width: 600px; margin: 0 auto; background: linear-gradient(rgba(15, 8, 30, 0.9), rgba(10, 5, 20, 0.9)); border: 1px solid var(--accent-violet); box-shadow: var(--glow-violet); padding: 50px; border-radius: 15px; will-change: transform; }
.offer-box .price { margin: 1.5rem 0 2.5rem 0; font-size: 1.5rem; }
.offer-box .price strong { color: var(--accent-cyan); font-size: 2rem; }
.guarantee-text { display: block; margin-top: 1.5rem; font-size: 0.9rem; color: var(--text-secondary); }

/* --- ANIMAÇÕES (KEYFRAMES) --- */
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
.reveal-text { opacity: 0; transform: translateY(20px); animation: reveal 1s forwards; animation-delay: 0.5s; }
.fade-in { opacity: 0; transition: opacity 1s ease-in-out; }
.fade-in.visible { opacity: 1; }
body.is-scrolling .fade-in { transition: none !important; }
@keyframes pulse-glow {
    0% { box-shadow: 0 0 15px rgba(158, 71, 255, 0.5); }
    50% { box-shadow: 0 0 25px rgba(158, 71, 255, 0.8); }
    100% { box-shadow: 0 0 15px rgba(158, 71, 255, 0.5); }
}
@keyframes animar-estrela-pulsante {
    0%, 100% {
        transform: scale(1);
        opacity: 0.2;
    }
    50% {
        transform: scale(1.5);
        opacity: 1;
        box-shadow: 0 0 7px var(--accent-violet);
    }
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 900px) {
    .solution-content {
        flex-direction: column;
        text-align: center;
    }
}
@media (max-width: 768px) {
    .hero-text-section h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    .problem-grid, .solution-grid { grid-template-columns: 1fr; }
}