/* Global Vars & Reset */
:root {
    --primary-blue: #2858A4;
    --dark-blue: #00264d;
    --light-blue-bg: #e6f0ff;
    --highlight-yellow: #ffcc00;
    --highlight-yellow-hover: #e6b800;
    --text-color: #333333;
    --light-grey: #f5f5f5;
    --white: #ffffff;
    --font-main: 'Poppins', sans-serif;
    --max-width: 1200px;
}

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

body {
    font-family: var(--font-main);
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--white);
    scroll-behavior: smooth;
}

h1,
h2,
h3,
h4 {
    font-weight: 700;
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Navbar */
/* Navbar */
.navbar {
    background-color: var(--white);
    position: absolute;
    /* Overlay on hero but opaque now */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    /* If removing text styles, ensure layout is kept */
    max-width: 150px;
}

.logo-img {
    width: 100%;
    /* border-radius: 5px; Removed radius if it has white bg to blend better */
    display: block;
}

.btn-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
    padding: 0.6rem 1.5rem;
    /* Slightly adjusted padding */
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s;
    font-family: inherit;
    /* Ensure button inherits font */
    font-size: 0.9rem;
    /* standard size */
    line-height: 1;
    /* Fix vertical alignment */
    cursor: pointer;
    text-decoration: none;
    /* For link */
}

/* Mobile Nav Toggle */
.mobile-nav-toggle {
    display: none;
    background: transparent;
    border: none;
    color: var(--primary-blue);
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 101;
}

.btn-nav:hover {
    background: var(--primary-blue);
    color: var(--white);
}

/* Hero Section */
.hero {
    background: linear-gradient(180deg, var(--dark-blue) 0%, var(--primary-blue) 100%);
    color: var(--white);
    padding: 180px 0 100px;
    /* Top padding for navbar space */
    text-align: center;
}

.hero h1 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.hero .subtitle {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    opacity: 0.9;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 5px;
    font-weight: 700;
    text-transform: uppercase;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    cursor: pointer;
    border: none;
    font-size: 1rem;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-primary {
    background-color: var(--primary-blue);
    color: var(--white);
    border: 2px solid var(--highlight-yellow);
    /* To make it pop on blue? Or just blue? Prompt says "Botões principais em azul intenso" but on blue background might need contrast. Let's act strictly on "Azul intenso button" maybe with a white border or yellow? 
    Wait, prompt says "Botões principais em azul intenso com texto branco". On a blue hero, this might blend. 
    However, usually on Hero, the button is often the Highlight color (Yellow) OR White.
    Let's check the prompt again: "Seção 1... Botão principal grande... 'FAZER...'. Seção 8 Botão de destaque central... texto em amarelo e branco...".
    General Rule: "Botões principais em azul intenso ...".
    But for Hero, good UX suggests contrast. I will try a very intense Blue button with white text, perhaps a lighter/brighter blue or just adhere to the prompt.
    Actually, let's make the Hero button Yellow or White for contrast against Blue bg, or if I must use Blue button, the bg must be light enough?
    The prompt says "Fundo principal do hero: degradê... azul escuro no topo e azul médio na parte inferior."
    Then "Botões principais em azul intenso...". This implies the button is blue.
    It might look low contrast. 
    However, the "Seção 8 - Chamada de urgência" is Blue BG with Yellow Text.
    Let's stick to the prompt description but ensure visibility. I'll add a white border or shadow.
    Re-reading: "Cor de destaque: amarelo vivo para ícones... e textos de urgência".
    Lets use Yellow for HERO button to ensure high conversion, as it is a common pattern, OR strictly follow "Botões principais em azul intenso".
    I will stick to "Botões principais em azul intenso" for the general rule, but for the Hero on Blue BG, if it looks bad, I'd change. 
    Actually, let's look at "Seção 8" again: "Botão de destaque central: 'QUERO REDUZIR...'". It doesn't specify color there, but the section is Blue.
    Let's try: Hero Button -> Yellow (Primary CTA logic on dark bg). General Buttons -> Blue.
    Prompt says: "Botões principais em azul intenso com texto branco...". This is under "Tipografia e UI", generic rules.
    If I put a blue button on a blue hero, it disappears.
    I will take a creative liberty to make the Hero Button the "Highlight Color" (Yellow) for better specific user goal (Conversion), or White.
    Let's use the Yellow for high contrast as defined in "Cor de destaque".
    Wait, let's look at CSS variables. I defined --highlight-yellow.
    I'll make .btn-primary Blue, and .btn-warning Yellow.
    I'll use .btn-warning for the Hero CTA for visibility, assuming "Botão principal" in UI section referred to buttons on light backgrounds.
    */
    background-color: var(--primary-blue);
    /* Intense blue */
    color: white;
}

.btn-large {
    font-size: 1.2rem;
    padding: 1.2rem 2.5rem;
}

/* Specific Hero Button Override for visibility if needed, or I'll use a class .btn-hero */
.hero .btn {
    background-color: var(--highlight-yellow);
    color: var(--dark-blue);
}

.hero .btn:hover {
    background-color: var(--highlight-yellow-hover);
}

.support-text {
    font-size: 0.9rem;
    margin-top: 0.8rem;
    font-weight: 300;
}

.badges {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.badge {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.badge i {
    color: var(--highlight-yellow);
}

/* Sections General */
section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: var(--primary-blue);
}

.section-subtitle {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 1.1rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: #666;
}

/* Problem Section */
.problem-section {
    background-color: var(--white);
}

.problem-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    text-align: center;
}

.problem-item {
    flex: 1;
    min-width: 250px;
    max-width: 300px;
}

.icon-circle {
    width: 80px;
    height: 80px;
    background-color: var(--light-blue-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: var(--primary-blue);
}

.problem-icon i {
    color: var(--primary-blue);
    /* Or Red for problem? Prompt says Blue or Yellow circles. Let's stick to Blue/Yellow palette. */
}

/* Solution Section */
.solution-section {
    background-color: var(--light-grey);
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    background: var(--white);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s;
}

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

.card .icon-container {
    font-size: 2.5rem;
    color: var(--highlight-yellow);
    /* Yellow inputs */
    margin-bottom: 1.5rem;
}

.card h3 {
    color: var(--primary-blue);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

/* Steps Section */
.steps-section {
    background-color: var(--white);
}

.steps-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 800px;
    margin: 0 auto 3rem;
}

/* Desktop layout for steps: Horizontal or Vertical?
   "Criar três passos numerados com ícones"
   Let's try horizontal for desktop.
*/
@media (min-width: 768px) {
    .steps-container {
        flex-direction: row;
        text-align: center;
    }

    .step {
        flex: 1;
    }

    .step-number {
        margin: 0 auto 1rem;
    }
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center on mobile too */
    text-align: center;
}

.step-number {
    width: 50px;
    height: 50px;
    background-color: var(--highlight-yellow);
    color: var(--dark-blue);
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.center-btn {
    text-align: center;
}

.btn-secondary {
    background-color: var(--primary-blue);
    color: var(--white);
    /* As requested: Botões principais em azul intenso com texto branco */
}

.btn-secondary:hover {
    background-color: var(--dark-blue);
}


/* Benefits Section */
.benefits-section {
    background-color: var(--primary-blue);
    /* Let's vary bg? Prompt says "Azul... aplicada em fundo de seções-chave". 
    Actually, prompt says "Cor principal: azul... aplicada em fundo de seções-chave...".
    Problem was white, Solution light grey, Steps white. Let's make Benefits Blue background with White text?
    Wait, "Seção 5 - Benefícios em cards...". Usually cards are white on a colored bg or vice versa.
    Prompt: "Cor de contraste: branco como fundo de cards..."
    Let's make Benefits Section Blue BG, Cards White.
    */
    background-color: var(--primary-blue);
    color: var(--white);
}

.benefits-section .section-title {
    color: var(--white);
}

.benefits-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.benefit-card {
    background: var(--white);
    color: var(--text-color);
    padding: 2rem;
    border-radius: 8px;
    width: 300px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.benefit-icon {
    font-size: 2rem;
    color: var(--primary-blue);
}

/* About Section */
.about-section {
    background-color: var(--white);
    text-align: center;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
}

.lead-text {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--primary-blue);
}

/* Results Section */
.results-section {
    background-color: var(--light-grey);
}

.results-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
}

.result-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    flex: 1;
    min-width: 250px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-top: 4px solid var(--highlight-yellow);
}

.result-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
}

.result-label {
    font-size: 1rem;
    color: #666;
}

/* Urgency Section */
.urgency-section {
    background-color: var(--primary-blue);
    /* Updated to brand blue */
    text-align: center;
    color: var(--white);
}

.urgency-title {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.btn-warning {
    background-color: var(--highlight-yellow);
    color: var(--dark-blue);
}

.btn-warning:hover {
    background-color: var(--highlight-yellow-hover);
}

.pulsate {
    animation: pulsate 2s infinite;
}

@keyframes pulsate {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(255, 204, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 204, 0, 0);
    }
}

/* FAQ Section */
.faq-section {
    background-color: var(--white);
}

.accordion {
    max-width: 800px;
    margin: 0 auto;
}

.accordion-item {
    border-bottom: 1px solid #ddd;
}

.accordion-header {
    width: 100%;
    padding: 20px;
    background: none;
    border: none;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-blue);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 20px;
}

.accordion-body p {
    padding-bottom: 20px;
}

.accordion-item.active .accordion-body {
    max-height: 200px;
    /* simple fixed height or JS dynamic */
}

.accordion-item.active .accordion-header i {
    transform: rotate(180deg);
}

/* Footer */
.footer {
    background-color: var(--primary-blue);
    /* Very dark blue - Updated to Brand Blue */
    color: var(--white);
    padding: 50px 0 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 30px;
    margin-bottom: 20px;
}

.footer-logo {
    max-width: 90px;
    margin-bottom: 1.5rem;
    display: block;
}

.footer-info h3 {
    color: var(--highlight-yellow);
    margin-bottom: 1rem;
}

.footer-info p {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.footer-info i {
    width: 20px;
    color: var(--highlight-yellow);
}

.footer-social a {
    color: var(--white);
    font-size: 1.5rem;
    margin-left: 20px;
    transition: color 0.3s;
}

.footer-social a:hover {
    color: var(--highlight-yellow);
}

.footer-bottom {
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
    }

    .nav-container {
        /* flex-direction: column;  Remove this simple stack */
        flex-wrap: wrap;
    }

    .mobile-nav-toggle {
        display: block;
    }

    .nav-buttons {
        position: fixed;
        top: 0;
        right: -100%;
        /* Hidden off-screen */
        height: 100vh;
        width: 70%;
        background-color: var(--dark-blue);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        transition: right 0.3s ease;
        padding: 20px;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
        z-index: 99;
    }

    .nav-buttons.active {
        right: 0;
        /* Slide in */
    }

    .btn-nav {
        width: 100%;
        text-align: center;
        max-width: 250px;
    }

    .problem-grid,
    .cards-grid,
    .benefits-grid,
    .results-grid {
        flex-direction: column;
        align-items: center;
    }

    .card,
    .benefit-card,
    .result-card {
        width: 100%;
        max-width: 400px;
    }

    .step-number {
        margin: 0 auto 10px;
    }

    .accordion-header {
        font-size: 1rem;
    }
}

/* Navbar Buttons Group */
.nav-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Space between buttons */
}

/* Highlight Button */
.btn-highlight {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--white);
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-highlight:hover {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
    color: var(--white);
}

/* Login Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: none;
    /* Hidden by default */
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: var(--white);
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2rem;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
}

.close-modal:hover {
    color: #000;
}

/* Modal Form Utilities (Mimicking Bootstrap where needed) */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

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

.col-md-8 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    flex: 0 0 100%;
    max-width: 100%;
}

/* On larger screens make it behave like col-md-8 if wanted, though 100% is fine for modal width */

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.d-flex {
    display: flex !important;
}

.align-items-center {
    align-items: center !important;
}

.ml-auto {
    margin-left: auto !important;
}

.text-secondary {
    color: #6c757d !important;
    text-align: center;
}

.text-white {
    color: #fff !important;
}

.form-group {
    margin-bottom: 1rem;
}

/* Input Styles */
.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    height: 50px;
    /* Taller inputs */
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

/* Button Styles */
.btn-block {
    display: block;
    width: 100%;
}

.btn-azul-cred {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    padding: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    border: none;
    transition: background-color 0.3s;
}

.btn-azul-cred:hover {
    background-color: var(--dark-blue);
}

.forgot-pass {
    color: #6c757d;
    font-size: 0.9rem;
}

.forgot-pass:hover {
    color: var(--primary-blue);
    text-decoration: underline;
}