/* =========================================================
   VARIÁVEIS E RESET
========================================================= */
:root {
    --primary-green: #00E676; 
    --primary-hover: #00C853;
    --dark-bg: #050505;
    --dark-surface: #111111;
    --light-bg: #FFFFFF;
    --gray-bg: #F8F9FA;
    --border-light: #E5E7EB;
    --text-dark: #111827;
    --text-muted-dark: #4B5563;
    --text-light: #F9FAFB;
    --text-muted-light: #9CA3AF;
    --shadow-sm: 0 4px 6px rgba(0,0,0,0.05);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.08);
    --shadow-green: 0 8px 30px rgba(0, 230, 118, 0.25);
    --radius-lg: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1.6; overflow-x: hidden; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
section { padding: 100px 0; position: relative; }
.mt-4 { margin-top: 48px; }
.text-center { text-align: center; }

h1, h2, h3 { font-weight: 700; line-height: 1.2; }
h2 { font-size: 2.5rem; margin-bottom: 16px; }

.text-green { color: var(--primary-green); }
.highlight-black { color: var(--text-dark); position: relative; z-index: 1; }
.highlight-black::after {
    content: ''; position: absolute; bottom: 4px; left: 0; width: 100%; height: 12px;
    background-color: var(--primary-green); opacity: 0.3; z-index: -1;
}

.dark-section { background-color: var(--dark-bg); color: var(--text-light); }
.light-section { background-color: var(--light-bg); color: var(--text-dark); }
.gray-section { background-color: var(--gray-bg); color: var(--text-dark); }
.section-subtitle { font-size: 1.125rem; color: var(--text-muted-dark); max-width: 600px; margin: 0 auto; }

/* =========================================================
   BOTÕES E HEADER
========================================================= */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 700; font-size: 1rem; padding: 16px 32px; border-radius: 50px;
    transition: all 0.3s ease; border: none; text-decoration: none; cursor: pointer;
}
.btn-primary { background-color: var(--primary-green); color: var(--dark-bg); box-shadow: var(--shadow-green); }
.btn-primary:hover { background-color: var(--primary-hover); transform: translateY(-2px); }
.btn-sm { padding: 10px 20px; font-size: 0.875rem; }
.btn-large { padding: 20px 48px; font-size: 1.125rem; }

header { position: fixed; top: 0; width: 100%; z-index: 100; transition: all 0.3s ease; padding: 20px 0; }
header.scrolled { background: rgba(5, 5, 5, 0.9); backdrop-filter: blur(10px); padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.nav-content { display: flex; justify-content: space-between; align-items: center; }
.logo-main { height: 32px; width: auto; }

/* =========================================================
   HERO & PAIN
========================================================= */
.hero { padding-top: 160px; padding-bottom: 80px; text-align: center; }
.glow-effect { position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 800px; height: 800px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 230, 118, 0.15) 0%, rgba(5,5,5,0) 70%); z-index: 0; }
.hero-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.badge { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 8px 16px; border-radius: 50px; font-size: 0.875rem; font-weight: 600; color: var(--primary-green); margin-bottom: 24px; }
.hero h1 { font-size: 4rem; letter-spacing: -1.5px; max-width: 900px; margin-bottom: 24px; }
.hero .sub-headline { font-size: 1.25rem; color: var(--text-muted-light); max-width: 700px; margin-bottom: 40px; }
.micro-copy { display: block; margin-top: 12px; font-size: 0.875rem; color: var(--text-muted-light); }
.trust-brands { margin-top: 64px; }
.trust-brands p { font-size: 0.875rem; color: var(--text-muted-light); margin-bottom: 24px; text-transform: uppercase; }
.brand-logos-container { display: flex; gap: 48px; justify-content: center; align-items: center; }
.logo-partner { height: 28px; opacity: 0.7; transition: opacity 0.2s; }
.logo-partner:hover { opacity: 1; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.align-center { align-items: center; }
.pain-text p { font-size: 1.125rem; color: var(--text-muted-dark); margin-bottom: 16px; }

.mockup-card { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-md); position: relative; }
.mockup-header { font-weight: 700; font-size: 1.25rem; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border-light); }
.mockup-row { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 1rem; color: var(--text-muted-dark); }
.mockup-row.red { color: #EF4444; font-weight: 500; }
.mockup-divider { height: 1px; background: var(--border-light); margin: 16px 0; }
.mockup-row.total { font-weight: 800; font-size: 1.25rem; color: var(--text-dark); }
.mockup-row.wait { justify-content: flex-start; gap: 8px; color: #F59E0B; font-weight: 600; font-size: 0.875rem; margin-top: 24px; background: rgba(245, 158, 11, 0.1); padding: 8px 12px; border-radius: 8px; }

/* =========================================================
   MOCKUP CHECKOUT ANIMADO 
========================================================= */
.benefit-list { list-style: none; }
.benefit-list li { display: flex; align-items: center; gap: 12px; font-size: 1.1rem; margin-bottom: 16px; color: var(--text-muted-dark); font-weight: 500; }
.benefit-list i { font-size: 1.5rem; }

.checkout-animation-wrapper { display: flex; justify-content: center; perspective: 1000px; }
.phone-mockup {
    width: 255px; height: 490px; 
    background: #fff; border-radius: 36px;
    border: 10px solid #111; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    position: relative; overflow: hidden; transform: rotateY(-5deg) rotateX(5deg);
    transition: transform 0.5s ease;
}
.phone-mockup:hover { transform: rotateY(0) rotateX(0); }
.phone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 20px; background: #111; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; z-index: 10; }
.phone-screen { padding: 34px 16px 16px; height: 100%; display: flex; flex-direction: column; background: #FAFAFA; }
.chk-header { font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; gap: 6px; margin-bottom: 16px; justify-content: center; }
.chk-product { background: #fff; padding: 12px; border-radius: 12px; border: 1px solid var(--border-light); display: flex; gap: 12px; margin-bottom: 20px; }
.chk-img { width: 40px; height: 40px; background: #f0f0f0; border-radius: 8px; }
.chk-price { display: block; color: var(--text-dark); font-weight: 700; margin-top: 2px; font-size: 0.95rem; }

.chk-inputs { margin-bottom: 20px; }
.chk-tabs { display: flex; gap: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border-light); padding-bottom: 6px;}
.chk-tabs span { font-size: 0.8rem; color: var(--text-muted-light); display: flex; align-items: center; gap: 4px; }
.chk-tabs span.active { color: var(--text-dark); font-weight: 700; border-bottom: 2px solid var(--primary-green); padding-bottom: 4px; margin-bottom: -7px;}

.chk-card-input { 
    height: 38px; background: #fff; border: 1px solid var(--border-light); 
    border-radius: 8px; margin-bottom: 8px; width: 100%; 
    display: flex; align-items: center; padding: 0 10px;
    font-size: 0.8rem; color: var(--text-muted-light); font-family: monospace;
    transition: all 0.2s;
}
.chk-card-row { display: flex; gap: 10px; }
.chk-card-input.short { flex: 1; }
.chk-card-input.filled { border-color: var(--primary-green); color: var(--text-dark); font-weight: 600; background: rgba(0, 230, 118, 0.05); }

.chk-btn {
    background: var(--primary-green); color: #000; padding: 14px; border-radius: 10px; font-weight: 700; font-size: 0.95rem;
    text-align: center; margin-top: auto; display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden; transition: all 0.3s;
}
.chk-btn i { position: absolute; font-size: 1.5rem; opacity: 0; transition: opacity 0.3s; }
.chk-btn .icon-loading { animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.chk-btn.state-loading .btn-text { opacity: 0; }
.chk-btn.state-loading .icon-loading { opacity: 1; }
.chk-btn.state-success { background: #111; color: var(--primary-green); }
.chk-btn.state-success .btn-text, .chk-btn.state-success .icon-loading { opacity: 0; }
.chk-btn.state-success .icon-success { opacity: 1; }

/* =========================================================
   CARDS & TABELA (Larga com conteúdo compacto horizontalmente)
========================================================= */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.card { background: #fff; padding: 40px 32px; border-radius: 12px; border: 1px solid var(--border-light); text-align: left; }
.icon-wrapper { width: 56px; height: 56px; background: rgba(0, 230, 118, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; color: var(--primary-green); font-size: 2rem; }

/* Tabela em Largura Total do Container */
.table-container { 
    background: #fff; 
    border-radius: var(--radius-lg); 
    border: 1px solid var(--border-light); 
    box-shadow: var(--shadow-md); 
    margin-top: 48px; 
    width: 100%; /* Preenche todo o espaço possível das margens */
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
}
.modern-table { 
    width: 100%; 
    min-width: 500px; /* Reduzimos aqui para compactar e caber mais fácil na tela mobile */
    border-collapse: collapse; 
    text-align: left; 
}
.modern-table th, .modern-table td { 
    padding: 24px 16px; /* Mais altura (24px), mas largura espremida (16px) */
    border-bottom: 1px solid var(--border-light); 
    font-size: 1rem;
}
.modern-table th { 
    background: var(--gray-bg); 
    font-weight: 700; 
}
.highlight-col { background-color: rgba(0, 230, 118, 0.05); color: var(--primary-green); }
.bold { font-weight: 700; }

/* =========================================================
   CTA & FOOTER
========================================================= */
.cta-section { padding: 120px 0; text-align: center; }
.cta-content-refine { display: flex; flex-direction: column; align-items: center; max-width: 800px; margin: 0 auto; }
.cta-logo-divider { margin-bottom: 32px; }
.logo-cta, .logo-footer { height: 40px; width: auto; opacity: 0.9; filter: brightness(0) invert(1); }
.cta-section h2 { font-size: 3rem; margin-bottom: 24px; }
.cta-section p { font-size: 1.25rem; color: var(--text-muted-light); margin-bottom: 48px; max-width: 600px; }

.footer-section { background-color: var(--dark-surface); color: var(--text-muted-light); padding: 48px 0; border-top: 1px solid rgba(255,255,255,0.05); text-align: center; }
.footer-content { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.logo-footer { height: 28px; opacity: 0.7; }
.footer-content p { font-size: 0.875rem; color: rgba(255,255,255,0.4); }

/* =========================================================
   RESPONSIVIDADE (MOBILE & TABLETS)
========================================================= */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.5rem; }
    .grid-2 { grid-template-columns: 1fr; gap: 40px; }
    .checkout-animation-wrapper { order: -1; } 
    .cta-section h2 { font-size: 2rem; }
    .brand-logos-container { flex-wrap: wrap; gap: 24px; }
    .logo-partner { height: 20px; }

    /* Forçando o conteúdo da tabela a ficar extremamente compacto na horizontal */
    .modern-table th, .modern-table td {
        padding: 16px 12px; /* Espaço horizontal muito pequeno para tentar não criar scroll */
        font-size: 0.85rem;
    }
}