/* =========================================
   GOD-TIER DESIGN SYSTEM (1% ELITE)
========================================= */

:root {
    --bg-dark: #050510;
    --acc_blue: #0066FF;
    --acc_purple: #5E6AD2;
    --text-primary: #EAEAEA;
    --text-secondary: #8A8F98;
    --border-subtle: rgba(255, 255, 255, 0.08);
}

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

/* Oculta o cursor nativo APENAS se a página for mapeada para o cursor customizado */
body.has-custom-cursor,
body.has-custom-cursor * {
    cursor: none !important;
}

/* Ocultar elementos exclusivos de mobile no Desktop */
.mobile-sticky-cta,
.mobile-conversion-accelerator {
    display: none;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    width: 100%;
    max-width: 100vw;
    overflow-x: clip; /* Fix: allow position sticky to work globally */
}

body {
    background-color: var(--bg-dark);
    color: #EAEAEA;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
    overflow-x: clip; /* Fix: allow position sticky to work globally */
    -webkit-overflow-scrolling: touch;
}

/* =========================================
   TYPOGRAPHY HIERARCHY (APPLE LUXURY)
========================================= */
h1, h2, h3, h4, h5, h6, .hero-title, .section-title, .cover-h2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #FFF;
}

h1, .hero-title {
    font-weight: 700;
}

p, .hero-subtitle, .faq-answer p, .testimonial-card p, li {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    line-height: 1.7;
}

.badge, .micro-copy, .cover-tag, .prod-badge, .discount-badge, .module-tag {
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.1em;
}

/* =========================================
   THE BLUEPRINT FRAME (ENG AESTHETIC)
========================================= */

.blueprint-frame {
    position: fixed;
    top: 3vw;
    left: 3vw;
    right: 3vw;
    bottom: 3vw;
    border: 1px solid rgba(255, 255, 255, 0.03);
    pointer-events: none;
    z-index: 9000;
}

.crosshair {
    position: absolute;
    width: 13px;
    height: 13px;
}

.crosshair::before,
.crosshair::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
}

.crosshair::before {
    width: 100%;
    height: 1px;
    top: 6px;
    left: 0;
}

.crosshair::after {
    width: 1px;
    height: 100%;
    top: 0;
    left: 6px;
}

.tl {
    top: -6px;
    left: -6px;
}

.tr {
    top: -6px;
    right: -6px;
}

.bl {
    bottom: -6px;
    left: -6px;
}

.br {
    bottom: -6px;
    right: -6px;
}

/* =========================================
   BACKGROUND: ELITE AURA & NOISE
========================================= */

.aura-container {
    position: fixed;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    background-color: var(--bg-dark);
    /* Mescla pesada de preto com azul no fundo geral da tela */
    background-image: radial-gradient(circle at 40% 10%, rgba(0, 50, 120, 0.12) 0%, transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(0, 150, 200, 0.05) 0%, transparent 50%);
}

.aura-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none;
}

.cyan-orb {
    width: 65vw;
    height: 65vh;
    background: rgba(0, 160, 255, 0.07);
    top: -10%;
    left: -5%;
    animation: drift 25s infinite alternate ease-in-out;
}

.purple-orb {
    width: 75vw;
    height: 75vh;
    background: rgba(0, 80, 200, 0.05);
    /* Tonalidade de azul mais escuro e profundo */
    bottom: -20%;
    right: -10%;
    animation: drift 30s infinite alternate-reverse ease-in-out;
}

@keyframes drift {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(5vw, 5vh);
    }
}

.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: 0.025;
    background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)"/%3E%3C/svg%3E');
}

/* =========================================
   CURSOR LINEAR / APPLE STYLE
========================================= */

.cursor-dot,
.cursor-aura {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
}

.cursor-dot {
    width: 6px;
    height: 6px;
    background: var(--acc_blue);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px var(--acc_blue);
}

.cursor-aura {
    width: 32px;
    height: 32px;
    border: 1px solid var(--acc_blue);
    box-shadow: 0 0 8px rgba(0, 102, 255, 0.3), inset 0 0 8px rgba(0, 102, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s, transform 0.1s;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

/* =========================================
   LAYOUT & NAV
========================================= */

.page-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 5%;
    position: relative;
}

.nav-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 5%;
    display: flex;
    justify-content: center;
    z-index: 8500;
    pointer-events: none;
}

.premium-nav {
    pointer-events: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(10, 10, 10, 0.45);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: none;
    border-radius: 100px;
    padding: 0.6rem 0.6rem 0.6rem 1.5rem;
    width: 100%;
    max-width: 700px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease;
}

.premium-nav:hover {
    background: rgba(15, 15, 15, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
}

.logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.logo::before {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.6;
    transition: all 0.5s ease;
    pointer-events: none;
}

@keyframes logoPulse {
    0% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1); opacity: 0.6; }
}

.logo:hover::before {
    animation: logoPulse 2s infinite ease-in-out;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.5) 0%, transparent 70%);
}

.logo img {
    height: 85px;
    margin: -26px 0;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(0, 102, 255, 0.2));
    transition: filter 0.3s ease, transform 0.3s ease;
    z-index: 1;
}

.logo:hover {
    transform: translateY(-2px);
}

.logo:hover img {
    filter: drop-shadow(0 0 25px rgba(0, 102, 255, 0.6));
    transform: scale(1.05);
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.nav-link:hover {
    color: var(--acc_blue);
    text-shadow: 0 0 15px rgba(0, 102, 255, 0.6), 0 0 30px rgba(0, 102, 255, 0.3);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: var(--acc_blue);
    box-shadow: 0 0 10px var(--acc_blue);
    transition: width 0.4s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-cta {
    position: relative;
    overflow: hidden;
    background: rgba(0, 102, 255, 0.05);
    border: 1px solid rgba(0, 102, 255, 0.4);
    color: #EAEAEA;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    border-radius: 100px;
    /* transition removed to prevent GSAP ghosting bug */
    backdrop-filter: blur(5px);
    box-shadow: 0 0 15px rgba(0, 102, 255, 0.2), inset 0 0 10px rgba(0, 102, 255, 0.1);
}

.nav-cta:hover {
    background: rgba(0, 102, 255, 0.15);
    border-color: rgba(0, 102, 255, 0.8);
    box-shadow: 0 0 25px rgba(0, 102, 255, 0.4), inset 0 0 15px rgba(0, 102, 255, 0.2);
    transform: translateY(-2px);
}

/* =========================================
   HERO: TIPOGRAFIA CIRÚRGICA & REVEAL
========================================= */

.hero-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80vh;
    padding-top: 15vh;
    gap: 4rem; /* Maior respiro entre o texto e o livro 3D */
    position: relative;
}

.hero-left {
    flex: 1.5; /* Dá muito mais espaço proporcional para a coluna de texto */
    position: relative;
    /* relative for absolute elements */
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 2rem;
}

.badge-dot {
    width: 6px;
    height: 6px;
    background-color: var(--acc_blue);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--acc_blue);
}

.badge-text {
    background: linear-gradient(90deg, #A1A1AA 0%, #FFFFFF 50%, #A1A1AA 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmerBadge 3s linear infinite;
}

@keyframes shimmerBadge {
    to {
        background-position: 200% center;
    }
}


.hero-title {
    font-size: clamp(2rem, 3.5vw, 3.2rem); /* Ligeiro ajuste de escala para garantir as 2 linhas */
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    text-wrap: nowrap; /* Força agressivamente o texto a não quebrar antes da tag <br> no Desktop */
}

.line-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 8px;
    margin-bottom: -8px;
}

.reveal {
    display: inline-block;
}

.metallic-text {
    background: linear-gradient(180deg, #FFFFFF 0%, #A1A1AA 100%);
    -webkit-background-clip: text;
    color: transparent;
}

.neon-pulse {
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--acc_blue) 100%);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 0 30px rgba(0, 102, 255, 0.15);
    animation: breathing 4s infinite alternate ease-in-out;
}

@keyframes breathing {
    0% {
        filter: drop-shadow(0 0 5px rgba(0, 102, 255, 0.1));
    }

    100% {
        filter: drop-shadow(0 0 15px rgba(3, 59, 138, 0.2));
    }
}

.hero-subtitle {
    font-size: 1.1rem;
    color: #EAEAEA;
    line-height: 1.6;
    margin-bottom: 3rem;
    font-weight: 400;
    max-width: 750px;
}

/* Scroll Line Indicator */
.scroll-indicator {
    position: absolute;
    bottom: -8vh;
    left: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    padding-top: 1rem;
}

.premium-emoji {
    filter: grayscale(100%) opacity(0.85);
    display: inline-block;
    mix-blend-mode: luminosity;
    transform: translateY(1px);
    font-size: 1.1em;
    margin-left: 2px;
}

.scroll-line {
    width: 1px;
    height: 35px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    animation: scrollDrop 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes scrollDrop {
    0% {
        top: -100%;
    }

    50%,
    100% {
        top: 100%;
    }
}

/* =========================================
   CTA BUTTON (GLASS SATURATE)
========================================= */

.cta-wrapper {
    position: relative;
    display: inline-block;
}

@keyframes reactorPulse {
    0%, 100% {
        box-shadow: 
            0 0 15px rgba(0, 102, 255, 0.6), 
            0 0 35px rgba(0, 102, 255, 0.4), 
            0 0 60px rgba(0, 102, 255, 0.2);
    }
    50% {
        box-shadow: 
            0 0 20px rgba(0, 102, 255, 0.6), 
            0 0 50px rgba(0, 102, 255, 0.4), 
            0 0 90px rgba(0, 102, 255, 0.2);
    }
}

.cta-button {
    position: relative;
    overflow: hidden;
    background: var(--acc_blue);
    border: none;
    border-radius: 8px;
    color: #FFF;
    text-transform: uppercase;
    padding: 0.9rem 1.8rem;
    font-size: 0.95rem;
    font-weight: 800;
    box-shadow: 
        0 0 15px rgba(0, 102, 255, 0.6), 
        0 0 35px rgba(0, 102, 255, 0.4), 
        0 0 60px rgba(0, 102, 255, 0.2);
    animation: reactorPulse 3.5s infinite ease-in-out;
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    /* transition removed to prevent GSAP ghosting bug */
}

.cta-content {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 8px rgba(0, 102, 255, 0.8);
}

@media (hover: hover) and (pointer: fine) {
    .cta-button:hover {
        background: #1A75FF;
        box-shadow: 
            0 0 20px rgba(0, 102, 255, 0.8), 
            0 0 60px rgba(0, 102, 255, 0.6), 
            0 0 120px rgba(0, 102, 255, 0.4);
        transform: translateY(-2px);
    }
}

.cta-button:active {
    transform: scale(0.98);
}

/* =========================================
   MOCKUP 3D - PARALLAX RESPONSIVO
========================================= */

.hero-right {
    flex: 1;
    display: flex;
    justify-content: center; /* Centraliza o livro para harmonizar com o gap */
    perspective: 5000px;
    padding-right: 4rem; /* Respiro substancial para a imagem não colar na borda */
}

.book-wrapper,
.book-parallax {
    transform-style: preserve-3d;
}

.book-container {
    width: 330px;
    height: 457px;
    transform-style: preserve-3d;
    transform: rotateY(-26deg) rotateX(8deg) translateZ(0) scale(0.9);
    will-change: transform;
    /* Brilho Premium contornando o livro em 3D */
    filter: drop-shadow(0 0 15px rgba(0, 102, 255, 0.4)) drop-shadow(0 0 35px rgba(0, 102, 255, 0.2));
}

.book {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d !important;
}

.b-cover-front {
    position: absolute;
    inset: 0;
    transform-origin: left;
    transform-style: preserve-3d !important;
    z-index: 10;
    will-change: transform;
}

.b-cover-front::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #0A0A0A;
    border: none;
    border-radius: 2px 4px 4px 2px;
    box-shadow: inset 15px 0 30px rgba(255, 255, 255, 0.03);
    backface-visibility: visible;
}

.premium-html-cover {
    position: absolute;
    inset: 0;
    background: #030303;
    border-radius: 2px 4px 4px 2px;
    overflow: hidden;
    transform: translateZ(1px);
    border: none;
    box-shadow: 0 0 15px rgba(3, 59, 138, 0.2);
}

/* Brilho e Sombra sobre a Imagem para 3D Realista */
.premium-html-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.5) 100%);
    z-index: 10;
    pointer-events: none;
}

/* Hinge (Vinco da Capa) */
.premium-html-cover::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 8px; /* Mais perto da borda no formato Death Note */
    width: 2px;
    background: transparent;
    box-shadow: -1px 0 3px rgba(0,0,0,0.9), 1px 0 3px rgba(255,255,255,0.03);
    z-index: 20;
    pointer-events: none;
}

/* EFEITO HOVER (ABRIR LIVRO) */
.book-container:hover .book {
    transform: rotateY(-15deg) rotateX(10deg);
}

.book-container:hover .b-cover-front,
.book-container.is-open .b-cover-front {
    transform: rotateY(-160deg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}

/* Sombra e iluminação dinâmica na capa quando abre */
.book-container:hover .b-cover-front::before,
.book-container.is-open .b-cover-front::before {
    box-shadow: inset 10px 0 20px rgba(255, 255, 255, 0.08);
}

/* Efeito de luz varrendo a capa ao abrir */
.premium-html-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.4s, transform 0.6s;
    transform: translateX(-100%);
    z-index: 25;
    pointer-events: none;
}

.book-container:hover .premium-html-cover::after {
    opacity: 1;
    transform: translateX(100%);
    transition: transform 1.2s ease-out;
}

.cover-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 50% 30%, rgba(0, 102, 255, 0.1) 0%, transparent 60%);
    z-index: 1;
    pointer-events: none;
}

.cover-content {
    position: relative;
    z-index: 2;
    padding: 2.2rem 1.2rem 1.5rem 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
}

.cover-tag {
    align-self: flex-start;
    background: #051a4a;
    color: #5c97ff;
    font-size: 0.5rem;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    border-radius: 2px;
    text-transform: uppercase;
    margin-bottom: 2rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.cover-graphic {
    position: absolute;
    inset: 0;
    opacity: 1;
    z-index: -1;
    pointer-events: none;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 10px rgba(0, 102, 255, 0.4));
}

.cover-graphic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center 25%;
}

.cover-title-area {
    margin-top: 70px;
    margin-bottom: auto;
    width: 100%;
    position: relative;
    z-index: 10;
    padding: 0 5px;
    box-sizing: border-box;
}

.cover-h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #FFF;
    text-shadow: 0 10px 40px rgba(0, 0, 0, 1);
    text-align: center;
    margin: 0;
}

.cover-h2 span {
    display: block;
    font-size: 2.25rem;
    font-weight: 900;
    color: #FFF;
    letter-spacing: -0.02em;
    text-transform: none;
    margin-top: 5px;
}

.cover-footer {
    text-align: center;
    width: 100%;
    position: relative;
    z-index: 10;
    margin-bottom: 1.2rem;
}

.cover-author {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    color: #FFF;
    letter-spacing: 0.05em;
    text-transform: none;
    opacity: 0.9;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.9);
}

.book-glow {
    position: absolute;
    width: 500px;
    height: 550px;
    background: var(--acc_blue);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(140px);
    opacity: 0.65;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    animation: neon-pulse 5s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

@keyframes neon-pulse {
    0% {
        opacity: 0.45;
        filter: blur(120px);
        transform: translate(-50%, -50%) scale(0.95);
    }

    100% {
        opacity: 0.85;
        filter: blur(160px);
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* --- ENGENHARIA HARDCOVER 3D --- */
.b-cover-front::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #080808;
    border-radius: 2px 4px 4px 2px;
    transform: translateZ(-2px);
    box-shadow: inset -5px 0 15px rgba(0, 0, 0, 0.9);
}

.b-spine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 12px;
    transform-origin: left;
    transform: rotateY(-90deg);
    background: linear-gradient(to right, #010101, #1a1a1a);
    border-radius: 2px 0 0 2px;
    border: none;
}

.b-cover-back {
    position: absolute;
    inset: 0;
    transform: translateZ(-12px);
    background: #010101;
    border-radius: 2px 4px 4px 2px;
    border: none;
    box-shadow: 20px 30px 50px rgba(0, 0, 0, 0.9), 0 0 15px rgba(3, 59, 138, 0.2);
}

.b-cover-back::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #050505;
    border-radius: 2px 4px 4px 2px;
    transform: translateZ(2px);
    box-shadow: inset 5px 0 15px rgba(0, 0, 0, 0.8);
}

.b-pages {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    right: 4px;
    transform: translateZ(-6px);
    transform-style: preserve-3d;
}

.b-pages::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 10px;
    transform-origin: right;
    transform: rotateY(90deg);
    background: repeating-linear-gradient(to bottom, #cfcfcf 0px, #e4e4e4 1px, #fafafa 2px, #b0b0b0 3px);
    box-shadow: inset 4px 0 10px rgba(0, 0, 0, 0.6);
}

.b-pages::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    transform-origin: top;
    transform: rotateX(90deg);
    background: repeating-linear-gradient(to right, #cfcfcf 0px, #e4e4e4 1px, #fafafa 2px, #b0b0b0 3px);
    box-shadow: inset 0 -4px 10px rgba(0, 0, 0, 0.6);
}

.b-page-content {
    position: absolute;
    top: 4px;
    left: 15px;
    right: 4px;
    bottom: 4px;
    background: #F2F2F2;
    border-radius: 2px 10px 10px 2px;
    transform: translateZ(-2px);
    padding: 3rem 2rem;
    box-shadow: inset 15px 0 30px rgba(0, 0, 0, 0.08), inset -2px 0 5px rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.b-page-content::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.05;
    pointer-events: none;
    background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.6" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)"/%3E%3C/svg%3E');
}

.b-page-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.b-page-content p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
}


/* =========================================
   DIVIDER DA SEÇÃO (LAYOUT REFINEMENT)
========================================= */

.hero-divider {
    width: 100%;
    height: 1px;
    margin: 4rem 0 4rem 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

.micro-copy {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 10px;
    letter-spacing: 0.05em;
    text-align: center;
}

/* =========================================
   MÓDULOS: ELITE SPOTLIGHT + FROSTED GRAIN
========================================= */

.modules-section {
    margin-top: 18vh;
    padding: 4rem 0 12rem 0;
    position: relative;
    z-index: 20;
}

.modules-header {
    margin-bottom: 4rem;
    max-width: 600px;
}

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

.section-subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.modules-grid {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40vh; /* Espaço reduzido de 80vh para 40vh */
    padding-bottom: 20vh;
}

.module-card:nth-child(1) { top: 15vh; }
.module-card:nth-child(2) { top: 18vh; }
.module-card:nth-child(3) { top: 21vh; }

.module-card {
    position: sticky;
    /* Estilo Escadinha - desktop */
    top: 15vh;
    width: 100%;
    max-width: 800px;
    min-height: 400px;
    /* Efeito Azul Neon translucido (Vidro Fosco) na base */
    background: radial-gradient(circle at 50% 0%, rgba(3, 59, 138, 0.25) 0%, rgba(8, 9, 10, 0.65) 60%), rgba(8, 9, 10, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 12px;
    padding: 3rem;
    border: 1px solid rgba(3, 59, 138, 0.3); /* Borda com leve realce */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    will-change: transform;
    /* Glow neon azul sutil pra fora e pra dentro */
    box-shadow: 0 0 40px rgba(3, 59, 138, 0.05), inset 0 0 20px rgba(3, 59, 138, 0.05);
}

.module-card:hover, .module-card.auto-animate {
    border-color: rgba(3, 59, 138, 0.4);
    /* Neon intensificado no hover */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 60px rgba(3, 59, 138, 0.2), inset 0 0 30px rgba(3, 59, 138, 0.1);
}

/* Ilustrações Geométricas 3D (Estilo Linear) */
.card-bg-icon {
    position: absolute;
    top: 3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 220px;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.linear-svg {
    width: 100%;
    height: 100%;
    stroke-width: 0.8;
    fill: none;
    color: rgba(0, 163, 255, 0.8); /* Azul neon base bem visível e sólido (não transparente) */
    stroke: currentColor;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Transições Base das partes internas */
.linear-svg .orbit, .linear-svg .tiny-cube, .linear-svg .core-shape,
.linear-svg .bar, .linear-svg .bar-cap,
.linear-svg .layer, .linear-svg .layer-side, .linear-svg .layer-element,
.linear-svg .crowd, .linear-svg .the-self, .linear-svg .true-friend {
    transition: all 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); /* Transição longa e suave */
    transform-origin: center center;
}

.friendship-line {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    stroke: rgba(3, 59, 138, 0);
    transition: all 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: 0.3s; /* Aparece depois que os outros somem */
}

/* ------------------------------------- */
/* ANIMAÇÃO HOVER - CARD 1 (A MULTIDÃO E A DUPLA) */
/* ------------------------------------- */
/* A multidão se afasta em várias direções e some */
.module-card:hover .crowd.c-1, .module-card.auto-animate .crowd.c-1 { transform: translate(-30px, -20px); opacity: 0; }
.module-card:hover .crowd.c-2, .module-card.auto-animate .crowd.c-2 { transform: translate(-40px, 10px); opacity: 0; }
.module-card:hover .crowd.c-3, .module-card.auto-animate .crowd.c-3 { transform: translate(-20px, 30px); opacity: 0; }
.module-card:hover .crowd.c-4, .module-card.auto-animate .crowd.c-4 { transform: translate(30px, -30px); opacity: 0; }
.module-card:hover .crowd.c-5, .module-card.auto-animate .crowd.c-5 { transform: translate(40px, 0px); opacity: 0; }
.module-card:hover .crowd.c-6, .module-card.auto-animate .crowd.c-6 { transform: translate(25px, 35px); opacity: 0; }
.module-card:hover .crowd.c-7, .module-card.auto-animate .crowd.c-7 { transform: translate(0px, -30px); opacity: 0; }

/* A Dupla se aproxima e brilha */
.module-card:hover .the-self, .module-card.auto-animate .the-self {
    transform: translateX(10px) scale(1.1);
    stroke: rgba(0, 163, 255, 1);
    color: rgba(0, 163, 255, 1);
    filter: drop-shadow(0 0 10px rgba(0, 163, 255, 0.4));
}

.module-card:hover .true-friend, .module-card.auto-animate .true-friend {
    transform: translateX(-10px) scale(1.1);
    stroke: rgba(0, 163, 255, 1);
    color: rgba(0, 163, 255, 1);
    filter: drop-shadow(0 0 10px rgba(0, 163, 255, 0.4));
}

/* O laço de amizade se conecta */
.module-card:hover .friendship-line, .module-card.auto-animate .friendship-line {
    stroke-dashoffset: 0;
    stroke: rgba(0, 163, 255, 0.8);
}

/* A Ideia (Lâmpada surge e acende) */
.linear-svg .idea-bulb {
    opacity: 0;
    transform: translateY(15px) scale(0.5);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: 100px 70px;
}
.linear-svg .idea-bulb .ray {
    stroke-dasharray: 4;
    stroke-dashoffset: 4;
    transition: stroke-dashoffset 0.6s ease;
}

.module-card:hover .idea-bulb, .module-card.auto-animate .idea-bulb {
    opacity: 1;
    transform: translateY(0) scale(1);
    stroke: rgba(0, 163, 255, 1);
    filter: drop-shadow(0 0 12px rgba(0, 163, 255, 0.6));
    transition-delay: 0.6s;
}

.module-card:hover .idea-bulb .ray, .module-card.auto-animate .idea-bulb .ray {
    stroke-dashoffset: 0;
    transition-delay: 1.0s;
}

/* ------------------------------------- */
/* ANIMAÇÃO HOVER - CARD 2 (A JORNADA DA FORÇA) */
/* ------------------------------------- */
.story-svg .scene {
    opacity: 0;
    transition: opacity 0.5s ease;
    transform-origin: center center;
}
.story-svg .s1 {
    opacity: 1;
}

.module-card:hover .story-svg .s1, .module-card.auto-animate .story-svg .s1 {
    animation: s1Anim 3s forwards;
}
.module-card:hover .story-svg .s2, .module-card.auto-animate .story-svg .s2 {
    animation: s2Anim 3s forwards;
}
.module-card:hover .story-svg .s3, .module-card.auto-animate .story-svg .s3 {
    animation: s3Anim 3s forwards;
}

/* 0s to 0.6s (20%) */
@keyframes s1Anim {
    0% { opacity: 1; transform: scale(1); stroke: rgba(0, 163, 255, 0.8); color: rgba(0, 163, 255, 0.8); }
    15% { opacity: 1; transform: scale(1.02); stroke: rgba(0, 163, 255, 1); color: rgba(0, 163, 255, 1); filter: drop-shadow(0 0 5px rgba(0, 163, 255, 0.2)); }
    20% { opacity: 0; transform: scale(1.05); stroke: rgba(0, 163, 255, 1); color: rgba(0, 163, 255, 1); }
    100% { opacity: 0; stroke: rgba(0, 163, 255, 1); color: rgba(0, 163, 255, 1); }
}

/* 0.6s to 1.8s (20% to 60%) */
@keyframes s2Anim {
    0%, 15% { opacity: 0; transform: scale(0.95); stroke: rgba(0, 163, 255, 0.8); color: rgba(0, 163, 255, 0.8); }
    25% { opacity: 1; transform: scale(1); stroke: rgba(0, 163, 255, 0.8); color: rgba(0, 163, 255, 0.8); filter: drop-shadow(0 0 8px rgba(0, 163, 255, 0.3));}
    50% { opacity: 1; transform: scale(1.02); stroke: rgba(0, 163, 255, 0.8); color: rgba(0, 163, 255, 0.8); }
    60% { opacity: 0; transform: scale(1.05); stroke: rgba(0, 163, 255, 0.8); color: rgba(0, 163, 255, 0.8); }
    100% { opacity: 0; stroke: rgba(0, 163, 255, 0.8); color: rgba(0, 163, 255, 0.8); }
}

/* 1.8s onwards (60% to 100%) */
@keyframes s3Anim {
    0%, 55% { opacity: 0; transform: scale(0.95); stroke: rgba(0, 163, 255, 1); color: rgba(0, 163, 255, 1); }
    65% { opacity: 1; transform: scale(1); stroke: rgba(0, 163, 255, 1); color: rgba(0, 163, 255, 1); filter: drop-shadow(0 0 15px rgba(0, 163, 255, 0.5)); }
    100% { opacity: 1; transform: scale(1.05); stroke: rgba(0, 163, 255, 1); color: rgba(0, 163, 255, 1); filter: drop-shadow(0 0 15px rgba(0, 163, 255, 0.5)); }
}

/* ------------------------------------- */
/* ANIMAÇÃO HOVER - CARD 3 (CAMADAS)    */
/* ------------------------------------- */
.module-card:hover .layer-1, .module-card.auto-animate .layer-1 { transform: translateY(8px); stroke: rgba(0, 163, 255, 0.15); }
.module-card:hover .layer-2, .module-card.auto-animate .layer-2 { transform: translateY(0px); stroke: rgba(0, 163, 255, 0.4); }
.module-card:hover .layer-3, .module-card.auto-animate .layer-3 { transform: translateY(-12px); stroke: rgba(0, 163, 255, 0.8); }
.module-card:hover .layer-element, .module-card.auto-animate .layer-element { transform: translateY(-12px); stroke: rgba(0, 163, 255, 1); filter: drop-shadow(0 0 10px rgba(0, 163, 255, 0.3)); }

/* Frosted Grain interno da glass */
.module-card::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
    background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="c"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="1" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23c)"/%3E%3C/svg%3E');
}

.card-spotlight {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(500px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.04), transparent 40%);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.card-border {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(300px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.4), transparent 30%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.module-card:hover .card-spotlight, .module-card.auto-animate .card-spotlight,
.module-card:hover .card-border, .module-card.auto-animate .card-border {
    opacity: 1;
}

.card-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

.module-tag {
    font-weight: 700;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: none;
    backdrop-filter: blur(10px);
}
.tag-blue { background: rgba(0, 102, 255, 0.05); color: #0066FF; border-color: rgba(0, 102, 255, 0.15); }
.tag-purple { background: rgba(147, 51, 234, 0.05); color: #b46bfa; border-color: rgba(147, 51, 234, 0.15); }

.module-icon {
    width: 54px;
    height: 54px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.card-text {
    margin-top: auto; /* Empurra o texto pro fundo do card */
    padding-top: 18rem; /* Espaço bastante ampliado para afastar o ícone no topo do texto */
    z-index: 2;
    position: relative;
}

.module-card h3 {
    font-size: 1.35rem;
    font-weight: 600;
    color: #8b949e; /* Cinza suave requisitado para contraste magnético */
    margin-bottom: 0.8rem;
    letter-spacing: -0.02em;
    transition: color 0.3s ease;
}

.module-card p {
    font-size: 0.95rem;
    color: #8b949e; /* Cinza suave requisitado para contraste magnético */
    line-height: 1.5;
    font-weight: 400;
    transition: color 0.3s ease;
}

/* Integração do texto com a atmosfera neon no hover */
.module-card:hover h3, .module-card.auto-animate h3 {
    color: #FFF;
}
.module-card:hover p, .module-card.auto-animate p {
    color: #EAEAEA;
}

.module-card:hover h3, .module-card.auto-animate h3 {
    text-shadow: 0 0 15px rgba(0, 163, 255, 0.4); /* Leve brilho azul no título mantido */
}

/* =========================================
   AUTHOR SECTION (MCLAREN SCANNER EFFECT)
======================================== */
.author-section {
    padding: 6rem 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 10;
}

.author-title {
    font-size: clamp(1.4rem, 3vw, 2rem);
    text-align: center;
    text-wrap: balance;
    max-width: 750px;
    margin: 0 auto 3rem auto;
    line-height: 1.6;
    letter-spacing: -0.01em;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    position: relative;
    z-index: 2;
}

.title-normal {
    font-weight: inherit;
    color: #FFF;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.title-italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    color: #FFF;
    padding: 0 4px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}

.title-bold-glow {
    font-weight: 900;
    color: transparent;
    background: linear-gradient(135deg, #ffffff 0%, var(--acc_blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 35px rgba(0, 102, 255, 0.5);
    letter-spacing: -0.04em;
    padding: 0 5px;
}

.title-dim {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75em;
    letter-spacing: normal;
}

/* Before Photo - Vintage / Raw Style */


.before-img img {
    object-position: center 50%;
}

/* After Photo - Masked */


@keyframes energyPulse {
    0% { box-shadow: 0 0 15px #0066FF, 0 0 5px #fff; opacity: 0.7; background: #0066FF; }
    50% { box-shadow: 0 0 40px #0066FF, 0 0 20px #fff, 0 0 60px #0066FF; opacity: 1; background: #fff; }
    100% { box-shadow: 0 0 15px #0066FF, 0 0 5px #fff; opacity: 0.7; background: #0066FF; }
}

@keyframes energyTravel {
    0% { top: -20px; opacity: 0; }
    20% { opacity: 1; height: 100px; }
    80% { opacity: 1; height: 100px; }
    100% { top: 100%; opacity: 0; }
}



.scanner-line::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 15px #fff, 0 0 30px #0066FF;
    animation: energyTravel 2.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fallback transitions para o clippath no CSS var update */




/* =========================================
   PREMIUM OFFER & VALUE STACK
========================================= */

.premium-enter {
    will-change: transform, opacity, filter;
}

.premium-offer {
    padding: 6rem 0;
    position: relative;
    z-index: 10;
}

.offer-header {
    text-align: center;
    margin-bottom: 4rem;
}

.offer-header h2 {
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    margin-bottom: 1rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #A1A1AA 100%);
    -webkit-background-clip: text;
    color: transparent;
}

.offer-header p {
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.1rem;
}

.offer-bento-container {
    display: grid;
    grid-template-columns: 1fr 480px; /* Alargado ligeiramente o card direito */
    gap: 4rem; /* Maior respiro */
    align-items: start; /* Necessário para o sticky funcionar corretamente do topo */
    position: relative;
    max-width: 1250px;
    margin: 0 auto;
}


/* DESKTOP COVER RESTORATION */
.premium-html-cover {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid rgba(30, 58, 138, 0.3);
    border-radius: 4px;
    box-shadow: 0 0 40px rgba(37, 99, 235, 0.3);
    z-index: 20;
}
.hero-book-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.15);
}

@media (max-width: 900px) {
    /* Extreme Mobile Performance Hacks */
    * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .module-card, .testimonial-card, .pricing-overlap-card {
        box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
    }
    .aura-container, .book-glow {
        display: none !important; /* Disable glowing blurred orbs and 120px book glow on mobile */
    }
    
    /* GSAP Optimization */
    .book-wrapper {
        will-change: transform, opacity !important;
    }

    

    .book-wrapper, .book-parallax {
        width: max-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .offer-bento-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/* Timeline (Roadmap Visual) */
.value-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-left: 2rem;
}

.timeline-rail {
    position: absolute;
    top: 2rem;
    bottom: 2rem;
    left: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.rail-glow {
    position: absolute;
    top: 0;
    left: -1px;
    width: 4px;
    height: 30%;
    background: linear-gradient(180deg, transparent, var(--acc_blue), transparent);
    animation: timelineFlow 4s ease-in-out infinite;
    box-shadow: 0 0 20px var(--acc_blue);
}

@keyframes timelineFlow {
    0% { top: -10%; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Base style for the new Dark Matte aesthetic */
.dark-glass {
    background: radial-gradient(circle at 50% 0%, rgba(3, 59, 138, 0.15) 0%, rgba(8, 9, 10, 1) 60%), #08090A;
    border: 1px solid rgba(3, 59, 138, 0.15);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    box-shadow: 
        inset 0px 0px 0px 1px rgba(255, 255, 255, 0.03), 
        inset 0px 1px 0px 0px rgba(255, 255, 255, 0.04), 
        0px 0px 0px 1px rgba(0, 0, 0, 0.6), 
        0px 4px 4px 0px rgba(0, 0, 0, 0.1);
}

/* Frosted Grain Texturizado */
.dark-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
    background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="c"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23c)"/%3E%3C/svg%3E');
}

.stack-item {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 3rem; /* Increase padding to match the tall visual of the image */
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    background: #111827 !important; /* Padronização Matte Dark */
}

.dark-glass > * {
    position: relative;
    z-index: 2; /* Garante que o conteúdo fique acima do grain */
}

.stack-item .stack-item-mockup {
    z-index: 5; /* Preserva o z-index original do mockup */
}

/* Efeito Glow Interno Superior (Light Leak) */
.dark-glass::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 60%; 
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.7), transparent);
    box-shadow: 0 2px 20px 2px rgba(0, 102, 255, 0.4);
    pointer-events: none;
    z-index: 1;
}

.stack-item:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Novo Badge "Produto principal" */
.prod-badge {
    align-self: flex-start;
    background: rgba(0, 102, 255, 0.1);
    border: 1px solid rgba(0, 102, 255, 0.4);
    color: #0066FF; /* Azul ciano luminoso */
    font-weight: 600;
    box-shadow: 0 0 15px rgba(0, 102, 255, 0.15), inset 0 0 10px rgba(0, 102, 255, 0.1);
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.stack-icon {
    width: 55px;
    height: 55px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(0, 102, 255, 0.05);
    border: 1px solid rgba(0, 102, 255, 0.4);
    box-shadow: 0 0 15px rgba(0, 102, 255, 0.15), inset 0 0 10px rgba(0, 102, 255, 0.1);
    color: #0066FF !important; /* Força que todos os ícones fiquem azuis ignorando outras classes CSS */
}

.stack-icon svg {
    width: 24px;
    height: 24px;
    opacity: 1;
}

.stack-content {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.stack-content h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #FFF;
    letter-spacing: -0.01em;
}

.stack-content p {
    color: #D1D5DB !important; /* Calibragem Antiofuscamento (off-white) */
    font-size: 1rem;
    line-height: 1.6;
}

.stack-price {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    color: rgba(255,255,255,0.5);
    margin-top: 0.5rem;
}

.stack-price strong {
    color: var(--acc_blue);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.8rem;
    background: rgba(0, 102, 255, 0.05);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(0, 102, 255, 0.1);
}

.card-footer {
    margin-top: auto;
    padding-top: 2.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.5px;
}

/* 3D Mockup Integrado no Bento (Efeito Vercel Física Imaterial) */
.stack-item {
    position: relative;
}

.stack-item.has-mockup {
    padding-right: 170px; /* Abrir espaço reservado para a capa flutuante na direita */
}

.stack-item-mockup {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 140px;
    perspective: 1200px; /* Profundidade do canvas 3D */
    z-index: 5;
    pointer-events: none; /* Não atrapalhar cliques em textos longos */
}

.mockup-img {
    width: 100%;
    height: auto;
    transform: rotateY(-15deg) rotateX(10deg) scale(1);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.05));
    border-radius: 8px; /* Arredondamento mínimo caso imagem seja dura */
}

.stack-item:hover .mockup-img {
    transform: rotateY(-5deg) rotateX(5deg) scale(1.05) translateY(-5px);
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 1)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.1));
}

/* Variações Holográficas para os Bônus (Reaproveitamento de Asset Mágico) */
.mockup-cyan {
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 20px rgba(0, 102, 255, 0.3)) saturate(1.5) hue-rotate(10deg);
}
.stack-item:hover .mockup-cyan {
    filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 30px rgba(0, 102, 255, 0.5)) saturate(1.8) hue-rotate(10deg);
}

.mockup-purple {
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 20px rgba(130, 140, 255, 0.3)) saturate(1.2) hue-rotate(-60deg);
}
.stack-item:hover .mockup-purple {
    filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 30px rgba(130, 140, 255, 0.5)) saturate(1.5) hue-rotate(-60deg);
}

/* Pricing Card Overlap (A Decisão Flutuante off-grid) */
@keyframes cardPulseNeon {
    0% {
        box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 10px rgba(0, 102, 255, 0.1);
    }
    50% {
        box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 40px rgba(0, 102, 255, 0.35);
    }
    100% {
        box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 10px rgba(0, 102, 255, 0.1);
    }
}

.pricing-overlap-card {
    position: sticky;
    top: 100px;
    z-index: 10;
    transform: scale(1.02); /* Escala reduzida para manter simetria elegante da imagem */
    padding: 3.5rem 3rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    animation: cardPulseNeon 4s infinite ease-in-out;
    background: #111827 !important; /* Padronização Matte Dark */
}

.pricing-overlap-card p {
    color: #D1D5DB !important; /* Calibragem Antiofuscamento */
}

@media (hover: hover) and (pointer: fine) {
    .pricing-overlap-card:hover {
        transform: scale(1.04) translateY(-5px);
        animation: none; /* Remove pulso animado para assumir estado sólido */
        box-shadow: 0 40px 80px rgba(0,0,0,0.9), 0 0 50px rgba(0, 102, 255, 0.5); 
    }
}

@media (max-width: 900px) {
    .pricing-overlap-card {
        position: relative;
        top: 0;
        transform: scale(1) translateY(0);
        padding: 3rem 2.5rem;
    }
    .pricing-overlap-card:hover {
        transform: scale(1.02) translateY(-5px);
    }
}

.pricing-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 2rem;
}

.discount-badge {
    background: rgba(0, 102, 255, 0.1); 
    border: 1px solid rgba(0, 102, 255, 0.4);
    color: #0066FF; /* Azul Ciano Neon */
    font-weight: 700;
    box-shadow: 0 0 15px rgba(0, 102, 255, 0.15), inset 0 0 10px rgba(0, 102, 255, 0.1);
    padding: 8px 20px;
    border-radius: 100px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.pricing-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.95rem;
    margin-bottom: 2.5rem;
    margin-top: -1.5rem;
}

.pricing-total {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.pricing-total del {
    color: rgba(255, 255, 255, 0.4);
    margin-left: 5px;
}

.price-neon {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 2.5rem;
    text-shadow: 0 0 50px rgba(0, 102, 255, 0.6);
}

.currency {
    font-size: 1.5rem;
    color: rgba(255,255,255,0.8);
    margin-top: 0.8rem;
    margin-right: 2px;
}

.amount {
    font-size: 6rem;
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: #FFF;
}

.cents {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--acc_blue);
    margin-top: 0.3rem;
}

.btn-checkout-neon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1.2rem;
    background: var(--acc_blue);
    border-radius: 8px;
    text-decoration: none;
    overflow: hidden;
    margin-bottom: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.2);
}

.btn-checkout-neon.hollow {
    background: rgba(0, 102, 255, 0.05);
    border: 1px solid rgba(0, 102, 255, 0.4);
}

.btn-checkout-neon:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 102, 255, 0.4);
    background: rgba(0, 102, 255, 0.1);
}

.btn-text {
    position: relative;
    z-index: 2;
    color: #FFF;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 102, 255, 0.5);
}

/* Partículas interagindo com o botão */
.particles-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.particle-fx {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 15px #fff, 0 0 30px var(--acc_blue);
    opacity: 0;
}

.particles-container .particle-fx:nth-child(1) { animation: flyUp 0.8s ease-out infinite; left: 10%; bottom: -10px; }
.particles-container .particle-fx:nth-child(2) { animation: flyUp 1.0s ease-out infinite 0.2s; left: 30%; bottom: -10px; }
.particles-container .particle-fx:nth-child(3) { animation: flyUp 0.7s ease-out infinite 0.4s; left: 50%; bottom: -10px; }
.particles-container .particle-fx:nth-child(4) { animation: flyUp 0.9s ease-out infinite 0.1s; left: 70%; bottom: -10px; }
.particles-container .particle-fx:nth-child(5) { animation: flyUp 0.8s ease-out infinite 0.3s; left: 90%; bottom: -10px; }
.particles-container .particle-fx:nth-child(6) { animation: flyUp 1.1s ease-out infinite 0.5s; left: 20%; bottom: -10px; }

@keyframes flyUp {
    0% { transform: translateY(0) scale(1.3); opacity: 1; }
    50% { opacity: 0.8; }
    100% { transform: translateY(-90px) scale(0); opacity: 0; }
}

.checkout-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.checkout-secure svg {
    width: 14px;
    height: 14px;
    color: rgba(255,255,255,0.4);
}

/* Guarantee Section */
.guarantee-box {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.guarantee-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.guarantee-icon svg {
    width: 20px;
    height: 20px;
    color: #FFF;
}

.guarantee-text h5 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #FFF;
    margin-bottom: 4px;
}

.guarantee-text p {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.4;
}

/* =========================================
   FAQ (POSSÍVEIS DÚVIDAS)
========================================= */

.faq-section {
    padding: 6rem 0;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.faq-title {
    text-align: center;
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    margin-bottom: 3rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #A1A1AA 100%);
    -webkit-background-clip: text;
    color: transparent;
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    border-radius: 12px;
    overflow: hidden;
    background: rgba(15, 15, 15, 0.4);
    border: 1px solid rgba(255,255,255,0.06);
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* =========================================
   BOTTOM FUNNEL (Authority, Social Proof, Final Offer, FAQ)
========================================= */

/* 1. ARCHITECT SECTION */
.architect-section {
    background: #07090f; /* Grafite absoluto com levíssimo toque azul */
    padding: 6rem 5%;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    margin: 0 auto;
    max-width: 1000px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.5);
}

.architect-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.architect-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.architect-photo {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
}

.photo-placeholder svg {
    width: 64px;
    height: 64px;
    opacity: 0.2;
    color: #FFF;
}

.architect-text p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-top: 1.5rem;
    
    /* Destruição do Gargalo e Expansão (w-full) */
    width: 100% !important;
    max-width: none !important;
    text-align: justify !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
}

/* 2. SOCIAL PROOF SECTION */
.social-proof-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 5%;
}

.social-header {
    text-align: center;
    margin-bottom: 4rem;
}

.testimonials-carousel {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
    padding: 20px 0;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.testimonials-grid {
    display: inline-flex;
    gap: 2rem;
    animation: scrollTestimonials 32s linear infinite;
}

@media (hover: hover) and (pointer: fine) {
    .testimonials-grid:hover {
        animation-play-state: paused;
    }

    /* Efeito de foco (Diminuir os não focados e destacar o hover) */
    .testimonials-grid:hover .testimonial-card {
        opacity: 0.3;
        transform: scale(0.95);
        filter: blur(2px);
    }

    .testimonials-grid .testimonial-card:hover {
        opacity: 1;
        transform: scale(1.05);
        filter: blur(0);
        z-index: 10;
        box-shadow: 0 0 30px rgba(0, 102, 255, 0.3);
        border-color: rgba(0, 102, 255, 0.4);
    }
}

/* Classes controladas por JS para Mobile/Touch */
.testimonials-grid.is-paused {
    animation-play-state: paused;
}

.testimonials-grid.is-paused .testimonial-card {
    opacity: 0.3;
    transform: scale(0.95);
    filter: blur(2px);
}

.testimonials-grid .testimonial-card.is-focused {
    opacity: 1;
    transform: scale(1.05);
    filter: blur(0);
    z-index: 10;
    box-shadow: 0 0 30px rgba(0, 102, 255, 0.3);
    border-color: rgba(0, 102, 255, 0.4);
}

@keyframes scrollTestimonials {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 1rem)); }
}

.testimonial-card {
    flex: 0 0 350px;
    white-space: normal;
    padding: 3rem 2.5rem;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Calibragem de Contraste e Isolamento Tático */
    background: #111827 !important; /* Fundo grafite escuro (sem pretos puros) */
    border: 1px solid rgba(255, 255, 255, 0.05) !important; /* Borda extremamente sutil */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; /* Sombreamento leve (shadow-lg) */
}

.quote-mark {
    display: none;
}

.testimonial-card p {
    position: relative;
    z-index: 2;
    font-size: 1.15rem;
    font-style: italic;
    color: #D1D5DB; /* text-gray-300: off-white/cinza médio */
    line-height: 1.6;
    margin: 0;
    text-align: justify;
}

/* Hierarquia de Nomes e Cargos */
.testimonial-card h5 {
    color: var(--acc_blue) !important; /* Azul principal da marca para ponto focal */
    font-weight: 600 !important; /* Semibold para garantir massa visual na cor */
}

.testimonial-card span {
    color: #6B7280 !important; /* text-gray-500 para recuo do cargo */
}

/* 3. FINAL OFFER SECTION */
.final-offer-section {
    text-align: center;
    padding: 0 5%;
}

.final-offer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.zero-risk-badge {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 650px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.badge-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 163, 255, 0.05);
    border: 1px solid rgba(0, 163, 255, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #00a3ff;
}

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

.zero-risk-badge p {
    text-align: left;
    font-size: 0.95rem;
    color: #94A3B8;
    line-height: 1.6;
    margin: 0;
}

/* 4. GLASS FAQ SECTION */
.glass-accordion {
    margin-bottom: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: background 0.3s ease;
}

.glass-accordion:hover {
    background: rgba(255, 255, 255, 0.03);
}

.glass-accordion summary {
    padding: 1.5rem 2rem;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none; /* remove seta padrão */
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #F8FAFC;
}

.glass-accordion summary::-webkit-details-marker {
    display: none; /* remove no Chrome/Safari antigos */
}

/* Custom + / - icon */
.glass-accordion summary::after {
    content: '+';
    font-size: 1.5rem;
    color: rgba(255,255,255,0.4);
    transition: transform 0.3s ease;
    line-height: 1;
}

.glass-accordion[open] summary::after {
    content: '−';
    transform: rotate(180deg);
}

.glass-accordion .faq-body {
    padding: 0 2rem 1.5rem 2rem;
    animation: fadeDown 0.4s ease forwards;
}

.glass-accordion .faq-body p {
    color: #94A3B8;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   RESPONSIVIDADE GERAL
========================================= */
@media (max-width: 900px) {
    .blueprint-frame {
        display: none;
    }

    /* NAV BAR */
    .nav-container {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .nav-links {
        display: none; /* Em tablet/mobile só deixamos logo e cta */
    }
    .premium-nav {
        padding: 0.4rem 0.4rem 0.4rem 1rem;
    }
    .logo img {
        height: 90px;
    }
    .nav-cta {
        padding: 0.5rem 1rem;
        font-size: 0.70rem; /* Botão reduzido para fluidez mobile */
    }
    opacity: 1;
    transform: scale(1.05);
    filter: blur(0);
    z-index: 10;
    box-shadow: 0 0 30px rgba(0, 102, 255, 0.3);
    border-color: rgba(0, 102, 255, 0.4);
}

@keyframes scrollTestimonials {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 1rem)); }
}

.testimonial-card {
    flex: 0 0 350px;
    white-space: normal;
    padding: 3rem 2.5rem;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Calibragem de Contraste e Isolamento Tático */
    background: #111827 !important; /* Fundo grafite escuro (sem pretos puros) */
    border: 1px solid rgba(255, 255, 255, 0.05) !important; /* Borda extremamente sutil */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; /* Sombreamento leve (shadow-lg) */
}

.quote-mark {
    display: none;
}

.testimonial-card p {
    position: relative;
    z-index: 2;
    font-size: 1.15rem;
    font-style: italic;
    color: #D1D5DB; /* text-gray-300: off-white/cinza médio */
    line-height: 1.6;
    margin: 0;
    text-align: justify;
}

/* 4. GLASS FAQ SECTION */
.glass-accordion {
    margin-bottom: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: background 0.3s ease;
}

.glass-accordion:hover {
    background: rgba(255, 255, 255, 0.03);
}

.glass-accordion summary {
    padding: 1.5rem 2rem;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none; /* remove seta padrão */
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #F8FAFC;
}

.glass-accordion summary::-webkit-details-marker {
    display: none; /* remove no Chrome/Safari antigos */
}

/* Custom + / - icon */
.glass-accordion summary::after {
    content: '+';
    font-size: 1.5rem;
    color: rgba(255,255,255,0.4);
    transition: transform 0.3s ease;
    line-height: 1;
}

.glass-accordion[open] summary::after {
    content: '−';
    transform: rotate(180deg);
}

.glass-accordion .faq-body {
    padding: 0 2rem 1.5rem 2rem;
    animation: fadeDown 0.4s ease forwards;
}

.glass-accordion .faq-body p {
    color: #94A3B8;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   RESPONSIVIDADE GERAL
========================================= */
@media (max-width: 900px) {
    .blueprint-frame {
        display: none;
    }

    /* NAV BAR */
    .nav-container {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .nav-links {
        display: none; /* Em tablet/mobile só deixamos logo e cta */
    }
    .premium-nav {
        padding: 0.4rem 0.4rem 0.4rem 1rem;
    }
    .logo img {
        height: 90px;
    }
    .nav-cta {
        padding: 0.5rem 1rem;
        font-size: 0.70rem; /* Botão reduzido para fluidez mobile */
    }

    /* HERO */
    .hero-section {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem; /* Reduzido o espaço entre os blocos */
        padding-top: 100px; /* Reduzido o topo para subir o conteúdo */
    }

    .hero-title {
        font-size: 32px;
        line-height: 1.1;
        margin-bottom: 1rem;
        text-align: justify !important;
        text-align-last: center; /* Estética premium na última linha */
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 100%;
        width: 100%;
        padding: 0 1rem;
        margin-left: auto;
        margin-right: auto;
        hyphens: auto; /* Previne buracos gigantes entre as palavras */
        -webkit-hyphens: auto;
    }

    .hero-left {
        max-width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 10px;
    }

    .hero-right {
        width: 100%;
        display: flex;
        flex-direction: column; /* FORÇA EMPILHAMENTO (CORREÇÃO DE EIXO) */
        align-items: center; /* REMOVE O STRETCH VERTICAL DO CTA */
        justify-content: center;
        gap: 1.5rem; /* mt-8 / gap-6 */
        padding-top: 0;
        margin-top: 2rem;
        padding-right: 0;
    }

    .line-mask {
        white-space: normal !important;
        padding-right: 0 !important;
        text-align: center;
        display: inline-block;
    }

    .hero-title br,
    .hero-subtitle br {
        display: none;
    }

    .hero-subtitle {
        font-size: 15px;
        margin: 0 auto 1rem auto;
        padding: 0 1.5rem;
        width: 100%;
        max-width: 28rem;
        text-align: center;
        hyphens: none;
        -webkit-hyphens: none;
        line-height: 1.5;
    }

    .badge {
        margin-bottom: 2rem;
        line-height: 1.4; /* Evitar que as duas linhas colidam no mobile */
        padding: 8px 16px;
        text-wrap: balance; /* Faz a quebra de linha ser centralizada harmoniosamente */
    }

    .scroll-indicator {
        display: none;
    }

    /* BOOK 3D */
    .book-container {
        transform: rotateY(0deg) rotateX(10deg) scale(0.454); /* Travado em ~150px de largura visual */
        height: 506px; /* 230 / 0.454 = 506. Força o visual de 230px de altura */
    }

    /* ARSENAL (Modules Grid) */
    .modules-grid {
        grid-template-columns: 1fr;
        gap: 25vh; /* Gap reduzido para não ficarem "muito separados" */
        padding-bottom: 10vh;
    }
    
    .module-card {
        padding: 1.8rem;
    }
    /* Estilo "Escadinha" */
    .module-card:nth-child(1) { top: 15vh; }
    .module-card:nth-child(2) { top: 18vh; }
    .module-card:nth-child(3) { top: 21vh; }

    /* AUTHOR SCANNER */
    
    
    
    

    /* OFERTA (Value Stack Mobile) */
    .offer-bento-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .value-timeline {
        padding-left: 0;
        gap: 0.8rem; /* Stack compacto */
    }
    .timeline-rail {
        display: none; /* Remove linha vertical */
    }
    .stack-item {
        padding: 1.25rem;
        flex-direction: column; /* Altera para coluna para acomodar bem as descrições */
        align-items: flex-start;
        gap: 0.8rem;
    }
    /* Mostrar parágrafos dos bônus e organizar o texto */
    .stack-item:not(.has-mockup) p {
        display: block;
        text-align: justify; /* Justificado conforme solicitado */
        font-size: 0.9rem;
        margin-top: 0.25rem;
        margin-bottom: 0.75rem;
        line-height: 1.6;
        color: #A0AEC0; /* Cor suave para não cansar a leitura */
    }
    .stack-content {
        width: 100%;
    }
    .stack-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        padding: 0.5rem;
        margin-bottom: 0;
    }
    .prod-badge {
        font-size: 0.65rem;
        padding: 0.2rem 0.5rem;
        margin-bottom: 0.2rem;
        display: inline-block;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .stack-content h4 {
        font-size: 1.05rem;
        margin-bottom: 0.2rem;
        line-height: 1.2;
    }
    .stack-price {
        font-size: 0.85rem;
        margin-top: 0;
    }
    
    /* Configuração Exclusiva para o Produto Principal (E-book) */
    .stack-item.has-mockup {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem 1rem; /* Reset do padding-right gigante do desktop */
        gap: 0;
    }
    .stack-item.has-mockup .stack-item-mockup {
        display: block; /* Volta a exibir o 3D */
        position: relative;
        top: 0;
        right: 0;
        transform: none; /* Reseta o translate vertical do desktop */
        width: 100%;
        max-width: 180px;
        margin: 0 auto 1rem auto;
    }
    .stack-item.has-mockup .stack-icon {
        display: none; /* Esconde o ícone pois já temos a imagem */
    }
    .stack-item.has-mockup p {
        display: block;
        text-align: justify; /* Justificado conforme solicitado */
        font-size: 0.9rem;
        margin-top: 0.5rem;
        line-height: 1.6;
        color: #A0AEC0;
    }
    .stack-item.has-mockup .stack-price {
        margin-top: 0.5rem;
    }

    .pricing-overlap-card {
        position: relative;
        top: 0;
        transform: scale(1) translateY(0);
        padding: 2rem 1.5rem;
        margin-top: 1rem;
    }
    .pricing-overlap-card:hover {
        transform: scale(1) translateY(0);
    }

    /* FAQ */
    .faq-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    /* FINAL OFFER / GUARANTEE */
    .zero-risk-badge {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }
    .zero-risk-badge p {
        text-align: center;
    }

    /* FAT FINGER OPTIMIZATION (Áreas de toque) */
    .cta-button, .nav-cta, .glass-accordion summary {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .glass-accordion summary {
        display: flex; /* Override do inline-flex para o faq */
        justify-content: space-between;
    }

    /* ARCHITECT / CONTACT SECTION */
    .architect-section {
        padding: 3rem 5%;
    }
    .architect-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    .architect-photo {
        max-width: 250px;
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    /* Ajustes Finos para Celulares Clássicos/Pequenos */
    .hero-title {
        font-size: 32px; /* Uniformizando para text-3xl */
    }
    /* removed bad square block */

    

    .amount {
        font-size: 4rem; /* Reduz preco massivo */
    }
    .cents {
        font-size: 1.8rem;
    }

    /* MOBILE STICKY CTA */
    .mobile-sticky-cta {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 1rem;
        background: linear-gradient(to top, rgba(7, 9, 15, 1) 50%, rgba(7, 9, 15, 0));
        z-index: 9999;
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
    }
    .mobile-sticky-cta.visible {
        transform: translateY(0);
        pointer-events: auto;
    }

    /* MOBILE CONVERSION ACCELERATOR */
    .mobile-conversion-accelerator {
        display: flex !important;
    }

    /* SCANNABILITY - Melhorar espaçamento do texto no mobile */
    p, .hero-subtitle, .module-card p, .faq-body p {
        line-height: 1.6 !important;
    }

    /* SHRINK MODULES - Diminuir as cartas */
    .module-card {
        padding: 1.2rem;
        top: 10vh;
    }
    .module-card h3 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }
    .module-card p {
        font-size: 0.9rem;
    }
    body::before,
    .b-page-content::before,
    .module-card::after,
    .stack-card::before,
    .glow-orb {
        background-image: none !important;
        opacity: 0 !important;
    }
    
    .book-container {
        /* Drop shadow em objetos 3D móveis mata a performance do mobile */
        filter: none !important;
    }
}





/* Ignite CTA Mobile */
.ignite-cta-mobile {
    display: none;
}
@media (max-width: 900px) {
    .ignite-cta-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative; /* Âncora para as partículas */
        overflow: hidden; /* Corta as partículas */
        z-index: 5; /* Fica por baixo da modules-section */
        width: 75%;
        max-width: 240px;
        height: auto;
        margin: 0 auto;
        padding: 0.75rem 0; /* py-3 */
        background-color: #2563eb;
        color: #FFF;
        text-align: center;
        font-weight: 700;
        font-size: 14px; /* text-sm */
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-radius: 0.25rem;
        box-shadow: 0 0 15px rgba(0, 102, 255, 0.6), 0 0 35px rgba(0, 102, 255, 0.4);
        animation: reactorPulse 3.5s infinite ease-in-out;
        /* transition removed to prevent GSAP ghosting bug */
        text-decoration: none;
    }
    /* .ignite-cta-mobile hover removed for mobile scroll stability */
    .ignite-cta-mobile .cta-content {
        position: relative;
        z-index: 10;
    }
    
    /* Removido o bloco branco no mobile */
}

@media (max-width: 900px) {
    .book-container {
        width: 330px !important;
        height: 457px !important;
        transform: rotateY(0deg) rotateX(10deg) scale(0.92) !important; /* Muito maior */
        filter: none !important;
    }
    
    .book-parallax {
        margin-top: -30px !important;
        margin-bottom: -80px !important; /* Pulls the button up to be visible on first screen */
    }
}


/* Fix ghosting for transparent images */










/* Gatilho para Hover no PC e Active/Tap no Mobile */
.crossfade-container:hover .reveal-img,
.crossfade-container:active .reveal-img {
    opacity: 1;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}



@media (max-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}


/* Comparsion Grid - Holographic Fusion */
.comparison-grid {
    background: transparent;
    border: none;
}





/* Comparsion Grid - Pure Hologram Enhancement */
.comparison-grid {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: relative;
}
/* Escurecimento sutil atrs do grid para realce do Screen (Holograma) */
.comparison-grid::before {
    content: '';
    position: absolute;
    inset: -50px;
    background: radial-gradient(circle, rgba(5,5,16,0.8) 0%, rgba(5,5,16,0) 70%);
    z-index: -1;
    pointer-events: none;
}


/* HTML Cards Brutalistas */
.brutalist-card {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-height: 400px;
}

/* Card 1 (Caos) */
.card-caos { 
    border: 1px solid rgba(255, 255, 255, 0.25) !important; 
    box-shadow: 0 0 30px rgba(200, 200, 200, 0.15), inset 0 0 35px rgba(255, 255, 255, 0.08) !important;
}

/* Card 2 (Engenharia) */
.card-engenharia { 
    border: 1px solid rgba(0, 163, 255, 0.6) !important; 
    box-shadow: 0 0 35px rgba(0, 163, 255, 0.35), inset 0 0 25px rgba(0, 163, 255, 0.15) !important;
}

/* Espao Central para Arte */
.card-art {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px; /* fallback ate ter imagem */
}
.card-art img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Tipografia e Listas */


.card-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: auto;
    padding: 0;
}



.card-list svg {
    flex-shrink: 0;
}


/* Artes Centrais dos Cards - Projeção Holográfica */
.card-art .art-caos {
    width: 100%;
    max-width: 280px;
    margin: 32px auto;
    display: block;
    /* Brilho cinza denso e levemente mais forte */
    filter: drop-shadow(0px 0px 45px rgba(220, 220, 220, 0.65)) !important;
    mix-blend-mode: screen;
    object-fit: contain;
}

.card-art .art-engenharia {
    width: 100%;
    max-width: 280px;
    margin: 32px auto;
    display: block;
    /* Aura neon cibernética azul atrás da rede neural */
    filter: drop-shadow(0px 0px 45px rgba(0, 170, 255, 0.65));
    mix-blend-mode: screen;
    object-fit: contain;
}

/* Brilho Sutil Azul atrás da Arte da Engenharia do Limbo */
.card-engenharia .card-art {
    background: radial-gradient(circle at center, rgba(0, 120, 255, 0.18) 0%, rgba(0, 102, 255, 0) 65%);
    position: relative;
    border-radius: 50%; /* Garante um halo redondo e suave */
}

.card-art .art-engenharia {
    /* Chaining de 2 drop-shadows para dar densidade em linhas finas */
    filter: drop-shadow(0px 0px 12px rgba(0, 170, 255, 0.9)) drop-shadow(0px 0px 35px rgba(0, 102, 255, 0.6)) !important;
}

/* Tipografia Exata do Site para os Cards de Comparação */
.card-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    text-align: center;
    margin: 0;
}

.card-caos .card-title {
    color: #A0A0A0;
}

.card-engenharia .card-title {
    color: var(--acc_blue);
    text-shadow: 0 0 15px rgba(0, 163, 255, 0.4);
}

.card-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #EAEAEA !important;
    font-size: 0.95rem !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.6 !important;
    text-transform: none !important;
}

.card-list li span {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 500 !important;
}


/* =========================================
   RODAPÉ LEGAL & INSTITUCIONAL (PREMIUM BLACK)
========================================= */
.site-footer {
    background: #000000;
    border-top: 1px solid rgba(0, 229, 255, 0.15);
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.9);
    padding: 5rem 5% 3rem 5%;
    margin-top: 8vh;
    position: relative;
    z-index: 10;
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 3rem;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 400px;
}

.footer-logo {
    max-height: 100px;
    filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.3));
    margin-bottom: 15px;
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.footer-nav-title {
    color: #00e5ff;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin: 0 0 1.2rem 0;
    font-weight: 800;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-end;
}

.footer-links a,
.footer-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: inline-block;
}

.footer-links a:hover,
.footer-link:hover {
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.1);
    border-color: rgba(0, 229, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.2);
}

.footer-disclaimer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 2.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    align-items: center;
}

.footer-disclaimer .disclaimer-text {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    line-height: 1.6;
    max-width: 850px;
    margin: 0;
}

.footer-disclaimer .copyright-text {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.5;
}

.footer-separator {
    margin: 0 8px;
    color: #00e5ff;
    opacity: 0.7;
}

.support-email {
    color: #00e5ff;
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.support-email:hover {
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
}

@media (max-width: 768px) {
    .site-footer {
        padding: 4rem 5% 2.5rem 5%;
    }
    .footer-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2.5rem;
    }
    .footer-brand {
        align-items: center;
        text-align: center;
        max-width: 100%;
    }
    .footer-nav {
        align-items: center;
        width: 100%;
    }
    .footer-links {
        justify-content: center;
        gap: 0.8rem;
    }
    .footer-links a,
    .footer-link {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }
    .footer-disclaimer .copyright-text {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .footer-separator {
        display: none;
    }
}


/* =========================================
   MAXIMUM PERFORMANCE OPTIMIZATIONS (DESKTOP & MOBILE)
========================================= */

/* Desktop GPU Acceleration for 2D UI elements only */
.module-card, .testimonial-card, .fade-up-target {
    will-change: transform, opacity;
}

@media (max-width: 900px) {
    /* Desativa filtros SVG pesados e fundos de alta demanda de processamento */
    body::before,
    .b-page-content::before,
    .module-card::after,
    .stack-card::before,
    .glow-orb {
        background-image: none !important;
        opacity: 0 !important;
    }

    /* O livro 3D e elementos grandes perdem sombras complexas que engasgam o ScrollTrigger */
    .book-container, .b-cover-front {
        filter: none !important;
        box-shadow: none !important;
    }

    /* Remove backdrop-filter globalmente no mobile para evitar FPS drops severos (renderização pesada no Chrome/Safari Mobile) */
    .module-card, .glass-card, .site-header, .testimonial-card, .faq-item {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Otimiza a rolagem nativa */
    .modules-section, .comparison-grid, .testimonials-carousel, .faq-container {
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 900px) {
    /* CORRECAO: Fundo totalmente opaco para os cards que se sobrepoem,
       ja que o vidro fosco foi desativado por performance e eles estavam transparentes */
    .module-card {
        background: #040812 !important;
    }
}


/* =========================================
   SLOW ANIMATIONS FOR CARDS (USER REQUEST)
========================================= */
.module-card .linear-svg .crowd, 
.module-card .linear-svg .the-self, 
.module-card .linear-svg .true-friend,
.module-card .friendship-line {
    transition-duration: 2.2s !important;
}
.module-card .friendship-line {
    transition-delay: 0.6s !important;
}

.module-card .idea-bulb {
    transition-duration: 1.5s !important;
}
.module-card:hover .idea-bulb, .module-card.auto-animate .idea-bulb {
    transition-delay: 0.8s !important;
}
.module-card:hover .idea-bulb .ray, .module-card.auto-animate .idea-bulb .ray {
    transition-delay: 1.5s !important;
}

.module-card:hover .story-svg .s1, .module-card.auto-animate .story-svg .s1,
.module-card:hover .story-svg .s2, .module-card.auto-animate .story-svg .s2,
.module-card:hover .story-svg .s3, .module-card.auto-animate .story-svg .s3 { 
    animation-duration: 4.5s !important; 
}

.module-card .layer-1, .module-card .layer-2, .module-card .layer-3, .module-card .layer-element {
    transition: transform 2.0s cubic-bezier(0.2, 0.8, 0.2, 1), stroke 2.0s ease, filter 2.0s ease !important;
}




/* =========================================
   COMPARISON GRID MOBILE (LADO A LADO)
========================================= */
@media (max-width: 900px) {
    .comparison-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 2px !important; /* Gap absoluto minimo */
        padding: 0 !important;
        /* Encosta fisicamente nas bordas do celular */
        width: calc(100% + 10vw) !important;
        margin-left: -5vw !important;
        margin-right: -5vw !important;
        max-width: none !important;
    }
    
    .brutalist-card {
        padding: 18px 6px !important; /* Mais padding vertical, minimo absoluto horizontal */
        gap: 16px !important;
        min-height: 400px !important; /* Mais alto e imponente */
    }
    
    .card-art {
        min-height: 165px !important;
    }
    .card-art .art-caos, .card-art .art-engenharia {
        max-width: 175px !important; /* Gigante */
        margin: 4px auto !important;
    }
    
    .card-title {
        font-size: 1.35rem !important; /* Maximo possivel sem quebrar letras */
        line-height: 1.15 !important;
        letter-spacing: -0.04em !important;
    }
    
    .card-list {
        gap: 12px !important;
    }
    
    .card-list li {
        font-size: 0.95rem !important; /* Maximo absoluto */
        line-height: 1.25 !important;
        gap: 4px !important;
        align-items: flex-start !important;
        letter-spacing: -0.03em !important;
    }
    
    .card-list svg {
        width: 20px !important; /* Maximo absoluto */
        height: 20px !important;
        margin-top: 0px !important;
        flex-shrink: 0 !important;
    }
}

/* Gap minimo para maximizar os cards */
        padding: 0 !important;
        /* Rompe o padding do container pai para esticar quase ate a borda da tela */
        width: calc(100% + 6vw) !important;
        margin-left: -3vw !important;
        margin-right: -3vw !important;
        max-width: none !important;
    }
    
    .brutalist-card {
        padding: 16px 8px !important; /* Menos padding lateral para os textos crescerem */
        gap: 16px !important;
        min-height: 380px !important; /* Mais alto */
    }
    
    .card-art {
        min-height: 150px !important;
    }
    .card-art .art-caos, .card-art .art-engenharia {
        max-width: 155px !important; /* Imagens ainda maiores */
        margin: 8px auto !important;
    }
    
    .card-title {
        font-size: 1.25rem !important; /* Titulo maior */
        line-height: 1.15 !important;
        letter-spacing: -0.03em !important;
    }
    
    .card-list {
        gap: 12px !important;
    }
    
    .card-list li {
        font-size: 0.90rem !important; /* Texto da lista maior */
        line-height: 1.3 !important;
        gap: 6px !important;
        align-items: flex-start !important;
        letter-spacing: -0.02em !important;
    }
    
    .card-list svg {
        width: 18px !important; /* Icones maiores */
        height: 18px !important;
        margin-top: 1px !important;
        flex-shrink: 0 !important;
    }
}

/* Gap levemente menor para dar mais espaço aos cartões */
        padding: 0 2px !important; /* Remove quase todo o padding lateral para esticar ao máximo */
        width: 100% !important;
    }
    
    .brutalist-card {
        padding: 16px 10px !important; /* Menos padding interno para os textos crescerem */
        gap: 16px !important;
        min-height: 350px !important; /* Levemente mais alto */
    }
    
    .card-art {
        min-height: 140px !important;
    }
    .card-art .art-caos, .card-art .art-engenharia {
        max-width: 140px !important; /* Arte 20px maior */
        margin: 8px auto !important;
    }
    
    .card-title {
        font-size: 1.15rem !important; /* Titulo 15% maior */
        line-height: 1.2 !important;
    }
    
    .card-list {
        gap: 12px !important;
    }
    
    .card-list li {
        font-size: 0.85rem !important; /* Texto da lista maior e mais legível */
        line-height: 1.35 !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
    
    .card-list svg {
        width: 16px !important; /* Icones maiores */
        height: 16px !important;
        margin-top: 1px !important;
    }
}

/* =========================================
   HERO TEXT MOBILE (CENTERED & 2-LINE TITLE)
========================================= */
@media (max-width: 900px) {
    .hero-left {
        align-items: center !important;
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .badge {
        justify-content: center !important;
        margin: 0 auto 1.5rem auto !important;
    }
    
    /* Titulo em exatas duas linhas lógicas */
    .hero-title {
        text-align: center !important;
        /* Fonte fluida exata para caber 'A estagnação é uma falha sistêmica.' (35 caracteres) em 100vw sem quebrar.
           Estimativa segura: ~5.3vw para garantir que caiba ate nos menores iPhones (320px) */
        font-size: min(1.4rem, 5.2vw) !important; 
        line-height: 1.15 !important;
        margin: 0 auto 1rem auto !important;
        letter-spacing: -0.02em !important;
        width: 100%;
        padding: 0 !important;
    }
    
    /* Força as frases a NÃO quebrarem internamente. O unico break é o <br> do HTML */
    .hero-title .line-mask {
        display: inline-block !important;
        white-space: nowrap !important;
    }
    
    .hero-title br {
        display: block !important;
    }
    
    /* Subtitulo: Mais estreito, mais padding lateral, maior espaçamento entre linhas */
    .hero-subtitle {
        text-align: center !important;
        /* Padding aumentado significativamente (ex: 20px ou mais) para afastar das bordas */
        padding: 0 25px !important; 
        margin: 0 auto 2.5rem auto !important;
        border: none !important;
        font-size: 0.95rem !important;
        line-height: 1.7 !important; /* Aumentado de 1.5 para 1.7 como solicitado */
        color: #9CA3AF !important; /* Cor mais suave para n ficar tao denso */
    }
    
    .hero-subtitle br {
        display: none !important;
    }
    
    .scroll-indicator {
        align-self: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 auto !important;
    }
}
/* =========================================
   MOBILE BOOK PLACEMENT & SCROLL FIX
========================================= */
@media (max-width: 900px) {
    .hero-right {
        margin-top: 30vh !important; /* Joga o livro bem mais para baixo (30% da tela) */
    }
}


/* =========================================
   MOBILE BOOK TEXT UPSCALING
========================================= */
@media (max-width: 900px) {
    .b-page-content h3 {
        font-size: 1.65rem !important; /* Titulo do livro maior */
        line-height: 1.15 !important;
        margin-bottom: 1.2rem !important;
    }
    .b-page-content p {
        font-size: 1.05rem !important; /* Paragrafo do livro mais legível */
        line-height: 1.6 !important;
        color: #444 !important; /* Mais escuro para dar contraste e facilitar leitura no claro */
        font-weight: 500 !important;
    }
}

/* =========================================
   MOBILE CTA BUTTON SPACING FIX
========================================= */
@media (max-width: 900px) {
    .ignite-cta-mobile {
        margin-top: 90px !important; /* Compensa o aumento da escala do livro para nao sobrepor */
        margin-bottom: 30px !important;
    }
}

/* =========================================
   AUTHOR PHOTO MOBILE UPSCALING
========================================= */
@media (max-width: 900px) {
    .architect-photo {
        max-width: 320px !important; /* Aumentado de 250px para 320px */
        width: 100% !important;
        margin: 0 auto 1.5rem auto !important;
    }
}

/* =========================================
   DESKTOP UPSCALE FOR COMPARISON CARDS
========================================= */
@media (min-width: 901px) {
    .comparison-grid {
        max-width: 1250px !important; /* Aumenta a largura maxima de 1000px para 1250px */
        gap: 60px !important;
    }
    
    .brutalist-card {
        padding: 50px 40px !important; /* Mais espaco interno */
        min-height: 500px !important; /* Cartoes mais altos */
        gap: 40px !important;
    }
    
    .card-art {
        min-height: 250px !important;
    }
    
    .card-art .art-caos, .card-art .art-engenharia {
        max-width: 280px !important; /* Artes maiores */
    }
    
    .card-title {
        font-size: 1.8rem !important; /* Titulos imponentes */
    }
    
    .card-list {
        gap: 20px !important;
    }
    
    .card-list li {
        font-size: 1.15rem !important; /* Texto extremamente legivel no desktop */
        gap: 15px !important;
    }
    
    .card-list svg {
        width: 24px !important;
        height: 24px !important;
    }
}