/* RESET GLOBAL (Step 444) */
* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Global Styles */
:root {
    --primary-color: #FCA311;
    /* Strong Orange */
    --secondary-color: #E68A00;
    /* Dark Orange */
    --dark-bg: #0b1320;
    --card-bg: rgba(30, 10, 5, 0.7);
    --text-color: #ffffff;
    --text-muted: #a0a0a0;
    --gradient-main: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --glow-shadow: 0 0 15px rgba(252, 163, 17, 0.5);
    --font-heading: 'Rajdhani', sans-serif;
    --font-body: 'Outfit', sans-serif;
}

html {
    scroll-behavior: smooth;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--dark-bg);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

section {
    position: relative;
    overflow: hidden;
}

/* Typography */
h1,
h2,
/* RESET GLOBAL (Step 444) */
* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Global Styles */
:root {
    --primary-color: #FCA311;
    /* Strong Orange */
    --secondary-color: #E68A00;
    /* Dark Orange */
    --dark-bg: #0b1320;
    --card-bg: rgba(30, 10, 5, 0.7);
    --text-color: #ffffff;
    --text-muted: #a0a0a0;
    --gradient-main: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --glow-shadow: 0 0 15px rgba(252, 163, 17, 0.5);
    --font-heading: 'Rajdhani', sans-serif;
    --font-body: 'Outfit', sans-serif;
}

html {
    scroll-behavior: smooth;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--dark-bg);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

section {
    position: relative;
    overflow: hidden;
}

/* Typography */
h1,
h2,
h3 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 700;
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    margin-bottom: 20px;
}

h2.section-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin-bottom: 10px;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

p {
    margin-bottom: 15px;
    color: #cbd5e1;
}

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

/* Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(5, 10, 20, 0.9);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0;
    /* Removed vertical padding completely to control height via height prop */
    height: 80px;
    /* Fixed height to "raise the line" */
    transition: 0.3s;
    overflow: visible;
    /* Allow logo to hang out */
    display: flex;
    align-items: center;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    gap: 12px;
}


/* Global Image Safety */
/* Global Image Safety */
img {
    max-width: 100%;
}

.logo-img {
    height: 160px;
    width: 160px;
    max-width: 160px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--primary-color);
    box-shadow: 0 0 35px rgba(252, 163, 17, 0.9);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-right: 15px;
    position: relative;
    top: 50px;
    /* RESTORED HANGING EFFECT */
    z-index: 1001;
}

.logo-link:hover .logo-img {
    transform: scale(1.1);
    box-shadow: 0 0 60px rgba(252, 163, 17, 1), 0 0 30px #fff;
    border-color: #ffffff;
    z-index: 1002;
}

.logo-text {
    font-size: 38px;
    font-weight: 400;
    font-family: 'Russo One', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(252, 163, 17, 0.5);
    background: linear-gradient(to right, #ffffff, #ffecd2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Orphaned styles removed */


.logo-link:hover .logo-img {
    transform: scale(1.3);
    /* Grows significantly but keeps orientation ("normal") */
    box-shadow: 0 0 60px rgba(252, 163, 17, 1), 0 0 30px #fff;
    border-color: #ffffff;
    z-index: 1002;
}

.logo-link:hover .logo-text {
    background: var(--primary-color);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(252, 163, 17, 0.4);
    transition: 0.3s;
}

.logo-link:hover .logo-text .highlight {
    background: #FFD700;
    /* Gold color for Maximus */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
    transition: 0.3s;
}

.logo-text {
    font-size: 38px;
    /* Bigger robust text */
    font-weight: 400;
    /* Russo One provides the weight */
    font-family: 'Russo One', sans-serif;
    /* Robust font */
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(252, 163, 17, 0.5);
    background: linear-gradient(to right, #ffffff, #ffecd2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-left: 0;
    /* Removed spacing as margin is now on image */
}

.logo-text .highlight {
    color: var(--primary-color);
}


.nav-links {
    display: flex;
    gap: 40px;
    /* Increased separation ("divisoes") */
    align-items: center;
}

.nav-links a {
    font-weight: 500;
    font-size: 16px;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: 0.3s;
}

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

.mobile-menu-btn {
    display: none;
    font-size: 24px;
    cursor: pointer;
}

/* Buttons */
/* Button Enhancements for "Premium" Feel */
.cta-button {
    background: var(--gradient-main);
    color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-family: var(--font-heading);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.5s;
    z-index: -1;
}

.cta-button:hover::before {
    left: 100%;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(252, 163, 17, 0.6), 0 0 40px rgba(252, 163, 17, 0.3);
}

.cta-button.outline {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: #fff;
}

.cta-button.outline:hover {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 0 15px var(--primary-color);
}

.cta-button.glow {
    box-shadow: 0 0 15px rgba(252, 163, 17, 0.4);
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 15px rgba(252, 163, 17, 0.4);
    }

    50% {
        box-shadow: 0 0 25px rgba(252, 163, 17, 0.7);
    }

    100% {
        box-shadow: 0 0 15px rgba(252, 163, 17, 0.4);
    }
}

.cta-button.small {
    padding: 8px 20px;
    font-size: 0.9rem;
}

.cta-button.big-button {
    font-size: 1.2rem;
    padding: 15px 40px;
}

.cta-button.full-width {
    width: 100%;
    display: block;
    text-align: center;
}


/* Hero Section */
.hero {
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    background: url('assets/hero-bg-new.png') no-repeat center center/cover;
    position: relative;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(30, 10, 5, 0.4) 0%, rgba(5, 10, 20, 1) 90%);
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 700px;
}

.date-badge {
    background: rgba(252, 163, 17, 0.1);
    color: var(--primary-color);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid rgba(252, 163, 17, 0.3);
    margin-bottom: 20px;
    display: inline-block;
}

.hero-sub {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #fff;
}

.hero-description {
    font-size: 1.1rem;
    margin-bottom: 30px;
    max-width: 600px;
}

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

/* Section Padding */
.section-padding {
    padding: 80px 0;
}

.dark-bg-2 {
    background: #081020;
}

/* Features / Devices */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.col-text,
.col-image {
    flex: 1;
    min-width: 300px;
}

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

.glass-card {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.device-list {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
}

.device-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: 0.3s;
}

.device-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
}

.device-item i {
    font-size: 24px;
    color: var(--primary-color);
    margin-bottom: 10px;
    display: block;
}

.app-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.badge-app {
    padding: 5px 15px;
    background: #1a2639;
    border-radius: 5px;
    font-size: 0.9rem;
    border: 1px solid #334;
}

/* Pricing */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.pricing-card {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
}

.pricing-card.featured {
    border: 2px solid var(--primary-color);
    background: rgba(252, 163, 17, 0.05);
    transform: scale(1.05);
    z-index: 2;
    box-shadow: 0 0 30px rgba(252, 163, 17, 0.1);
}

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

.pricing-card.featured:hover {
    transform: scale(1.05) translateY(-5px);
}

.popular-tag {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-main);
    color: #000;
    padding: 5px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.pricing-card h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.pricing-card .price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.pricing-card ul {
    text-align: left;
    margin-bottom: auto;
    /* Pushes button to bottom */
}

.pricing-card li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pricing-card li i {
    color: var(--primary-color);
}

/* Form Section */
.glow-bg {
    position: relative;
}

.glow-bg::before {
    content: '';
    position: absolute;
    top: 20%;
    right: 0;
    width: 300px;
    height: 300px;
    background: var(--secondary-color);
    filter: blur(150px);
    opacity: 0.2;
    z-index: -1;
}

.form-wrapper {
    max-width: 600px;
    margin: 0 auto;
    background: var(--card-bg);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
}

.modern-form .form-group {
    margin-bottom: 20px;
}

.modern-form input {
    width: 100%;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 10px;
    font-family: inherit;
    transition: 0.3s;
}

.modern-form input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 10px rgba(252, 163, 17, 0.2);
}

/* FAQ */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

details {
    margin-bottom: 15px;
    background: #0f172a;
    border-radius: 10px;
    padding: 15px 20px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: 0.3s;
}

details[open] {
    background: #162035;
    border-color: rgba(252, 163, 17, 0.2);
}

summary {
    font-weight: 600;
    font-size: 1.1rem;
    list-style: none;
    /* Hide default triangle in some browsers */
    position: relative;
    padding-right: 30px;
}

summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 0;
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1;
}

details[open] summary::after {
    content: '-';
}

details p {
    margin-top: 15px;
    color: #cbd5e1;
}

/* Footer */
footer {
    background: #020408;
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* WhatsApp Float */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px !important;
    height: 60px !important;
    background: #25d366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    transition: 0.3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.6);
}

/* Responsive */
@media (max-width: 768px) {

    /* Mobile Navigation */
    .nav-links {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        background: rgba(5, 10, 20, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 50px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border-top: 1px solid rgba(252, 163, 17, 0.1);
        gap: 30px;
    }

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

    .nav-links li {
        width: 100%;
        text-align: center;
        transform: translateY(20px);
        opacity: 0;
        transition: 0.3s;
    }

    .nav-links.active li {
        transform: translateY(0);
        opacity: 1;
    }

    /* Staggered animation for menu items */
    .nav-links.active li:nth-child(1) {
        transition-delay: 0.1s;
    }

    .nav-links.active li:nth-child(2) {
        transition-delay: 0.2s;
    }

    .nav-links.active li:nth-child(3) {
        transition-delay: 0.3s;
    }

    .nav-links.active li:nth-child(4) {
        transition-delay: 0.4s;
    }

    .nav-links.active li:nth-child(5) {
        transition-delay: 0.5s;
    }

    .nav-links a {
        font-size: 1.5rem;
        display: block;
        padding: 10px;
    }

    .mobile-menu-btn {
        display: block;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
        transition: 0.3s;
    }

    .mobile-menu-btn:active {
        background: rgba(252, 163, 17, 0.2);
        transform: scale(0.95);
    }

    .desktop-only {
        display: none !important;
    }

    /* Hero Optimization */
    .hero {
        min-height: 100vh;
        min-height: 100svh;
        padding-top: 100px;
        /* More space for header */
        align-items: center;
    }

    .hero-content h1 {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }

    /* General Layout */
    .section-padding {
        padding: 60px 0;
    }

    .pricing-card.featured {
        transform: scale(1);
        border: 2px solid var(--primary-color);
        box-shadow: 0 0 20px rgba(252, 163, 17, 0.2);
    }

    .feature-grid,
    .pricing-grid,
    .blog-grid {
        gap: 30px;
    }

    /* Fixed Elements */
    .whatsapp-float {
        width: 50px !important;
        height: 50px !important;
        font-size: 24px;
        bottom: 90px;
        right: 20px;
    }

    .sticky-footer.mobile-only {
        display: block;
        padding: 12px;
    }

    .sticky-btn {
        font-size: 0.9rem;
    }

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

    /* Mobile Logo Adjustments */
    /* Mobile Logo Adjustments - FIX */
    .logo-img {
        width: 60px !important;
        height: 60px !important;
        max-width: 60px !important;
        top: 0 !important;
        margin-right: 8px !important;
        border-width: 2px !important;
        box-shadow: 0 0 15px rgba(252, 163, 17, 0.6);
        position: static !important;
        transform: none !important;
        border-radius: 50% !important;
    }

    .logo-link {
        gap: 0;
    }

    .logo-text {
        font-size: 1.2rem !important;
        line-height: 1;
        display: flex;
        flex-direction: row;
        /* Keep on one line if space permits, or column if preferred */
        align-items: center;
        white-space: nowrap;
        /* Prevent breaking */
    }

    .logo-text .highlight {
        font-size: 1.2rem;
    }
}

/* Blog Section */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.blog-card {
    background: var(--card-bg);
    border: 1px solid rgba(252, 163, 17, 0.1);
    /* Orange border */
    border-radius: 15px;
    padding: 0;
    transition: 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.blog-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: 0.5s;
}

.blog-card:hover .blog-image {
    transform: scale(1.05);
}

.blog-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
}

.blog-date {
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
}

.blog-content h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    min-height: 3rem;
}

.blog-excerpt {
    font-size: 0.95rem;
    color: #cbd5e1;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    backdrop-filter: blur(5px);
}

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

.modal-content {
    background: #0f172a;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    padding: 40px;
    border-radius: 20px;
    position: relative;
    border: 1px solid var(--primary-color);
    overflow-y: auto;
    box-shadow: 0 0 50px rgba(252, 163, 17, 0.2);
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    cursor: pointer;
    color: #fff;
    transition: 0.3s;
}

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

#modal-body h2 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.modal-date {
    color: var(--secondary-color);
    font-weight: 600;
    margin-bottom: 20px;
}

.modal-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #cbd5e1;
}

.modal-text h4,
.modal-text h5 {
    color: #fff;
    margin-top: 20px;
    margin-bottom: 10px;
}

.modal-footer {
    margin-top: 30px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

/* Article Page Layout with Sidebar */
.article-section {
    padding-top: 120px;
    /* Space for fixed header */
    padding-bottom: 80px;
}

.article-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.article-main {
    flex: 2;
    background: var(--card-bg);
}

.article-sidebar {
    flex: 1;
    min-width: 300px;
    max-width: 400px;
}

.sidebar-widget {
    background: var(--card-bg);
    border: 1px solid rgba(252, 163, 17, 0.1);
    /* Subtle orange border */
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
}

.sidebar-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    text-transform: uppercase;
}

.recent-posts-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.recent-post-card {
    display: flex;
    gap: 15px;
    align-items: center;
    transition: 0.3s;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.recent-post-card:hover {
    background: rgba(252, 163, 17, 0.1);
}

.recent-post-thumb {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    object-fit: cover;
}

.recent-post-info h4 {
    font-size: 1rem;
    margin-bottom: 5px;
    color: #fff;
}

.recent-post-info time {
    font-size: 0.8rem;
    color: var(--primary-color);
}

/* =========================================
   New Enhancements (Hero, WA, Conversion)
   ========================================= */

/* Social Proof Text */
.social-proof-text {
    font-size: 0.9rem;
    color: #cbd5e1;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cta-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center the buttons and text */
}

/* WhatsApp Message Cards (Fake Prints) */
.whatsapp-card {
    background: #0b141a;
    /* Dark Mode Background */
    border-radius: 12px;
    padding: 15px;
    width: 340px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    font-family: Helvetica, Arial, sans-serif;
    position: relative;
    display: flex;
    flex-direction: column;
}

.wa-header {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.wa-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.wa-info {
    display: flex;
    flex-direction: column;
}

.wa-name {
    color: #e9edef;
    font-weight: 600;
    font-size: 1rem;
}

.wa-status {
    color: #8696a0;
    font-size: 0.8rem;
}

.wa-body {
    padding-bottom: 5px;
}

.wa-message {
    background: #202c33;
    color: #e9edef;
    padding: 12px 16px;
    border-radius: 0 12px 12px 12px;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.5;
    display: inline-block;
    width: 100%;
}

.wa-time {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: #8696a0;
    margin-top: 5px;
}

.link-styled {
    color: var(--primary-color);
    text-decoration: underline;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Sticky Footer (Mobile) */
.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #25d366;
    /* WhatsApp Green */
    padding: 15px;
    z-index: 2000;
    text-align: center;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3);
    display: none;
    /* Hidden by default on desktop */
}

.sticky-btn {
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.5px;
}

.sticky-btn i {
    font-size: 1.5rem;
}

/* Float Tooltip */
.float-tooltip {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    color: #333;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    pointer-events: none;
}

.whatsapp-float:hover .float-tooltip,
.whatsapp-float .float-tooltip {
    /* Show by default */
    opacity: 1;
    visibility: visible;
}

.float-tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #fff;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .sticky-footer.mobile-only {
        display: block;
    }

    .whatsapp-float {
        bottom: 90px;
        /* Push up to avoid overlap with sticky footer */
    }

    .pricing-grid {
        gap: 40px;
    }

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

/* Pagination Styles */
/* Pagination Styles */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 50px;
    padding: 20px 0;
    flex-wrap: wrap;
}

.pagination-btn {
    background: #0b141a;
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 45px;
    height: 45px;
    padding: 0 15px;
    /* Adjust padding for numbers */
    border-radius: 8px;
    /* Slightly rounded square looks more modern */
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-heading);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
    /* Fallback for gap */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.pagination-btn:hover:not(:disabled) {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 0 15px rgba(252, 163, 17, 0.6);
    border-color: var(--primary-color);
}

.pagination-btn.active {
    background: var(--gradient-main);
    color: #000;
    border-color: transparent;
    box-shadow: 0 0 20px rgba(252, 163, 17, 0.4);
    transform: scale(1.1);
}

.pagination-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.02);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* FORCE STANDARDIZED IMAGE SIZES */
.blog-featured-image,
.article-featured-image,
.blog-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: 0.5s;
}

.blog-card:hover .blog-featured-image {
    transform: scale(1.05);
}
.nav-highlight {
    background: rgba(252, 163, 17, 0.1);
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color);
    padding: 8px 15px;
    border-radius: 20px;
    transition: all 0.3s ease;
    display: inline-block;
}

.nav-highlight:hover {
    background: var(--primary-color);
    color: #fff !important;
    box-shadow: 0 0 15px rgba(252, 163, 17, 0.4);
    transform: translateY(-2px);
}

.nav-highlight::after {
    display: none !important; /* Remove the underline effect from default nav links */
}
/* =========================================
   MOBILE FIXES (Step Id: 256)
   ========================================= */
@media (max-width: 768px) {

    /* 1. GENERAL RESPONSIVENESS */
    html,
    body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }

    /* 2. HEADER MOBILE */
    header {
        height: 70px;
        /* Reduced height */
        padding: 0;
        display: flex;
        align-items: center;
    }

    .nav-container {
        padding: 0 15px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo {
        display: flex;
        align-items: center;
        max-width: 70%;
        /* Prevent overflow */
    }

    .logo-link {
        display: flex;
        align-items: center;
        gap: 8px;
        /* Reduced gap */
    }

    .logo-img {
        height: 45px !important;
        /* Force small size */
        width: 45px !important;
        max-width: 45px !important;
        border-width: 2px;
        /* Thinner border */
        top: 0 !important;
        /* Remove hanging effect */
        margin-right: 0 !important;
        position: relative !important;
        /* Reset position */
        box-shadow: none !important;
        /* Cleaner look */
    }

    .logo-text {
        font-size: 18px !important;
        /* Smaller text */
        letter-spacing: 0.5px;
        white-space: nowrap;
        /* Prevent unnecessary break */
    }

    .logo-text .highlight {
        display: inline-block;
    }

    /* Hide desktop CTA in header to save space if needed, 
       but user didn't ask to hide it. However, usually it breaks layout.
       Let's keep it if space allows, or hide text. 
       Usually the mobile menu button takes precedence. */
    .cta-button.desktop-only {
        display: none !important;
    }

    .mobile-menu-btn {
        display: block;
        /* Ensure it's visible */
        font-size: 1.5rem;
        cursor: pointer;
        z-index: 1002;
    }

    /* 3. HERO SECTION MOBILE */
    .hero {
        padding-top: 100px !important;
        /* Top padding for fixed header */
        padding-bottom: 40px !important;
        min-height: auto !important;
    }

    .hero-content {
        padding: 0 20px;
        /* Lateral padding */
        text-align: center;
    }

    .hero-content h1 {
        font-size: 28px !important;
        /* Responsive H1 */
        line-height: 1.2 !important;
        margin-bottom: 15px;
        word-wrap: break-word;
        /* Prevent overflow */
    }

    .hero-sub {
        font-size: 1rem !important;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .hero-description {
        font-size: 0.95rem;
        padding: 0 10px;
    }

    /* 4. LAYOUT SAFETY */
    .container {
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
        overflow: hidden;
        /* Prevent child overflow */
    }

    .section-padding {
        padding: 50px 0;
    }

    /* Adjust buttons */
    .cta-button {
        width: 100%;
        /* Full width buttons on mobile usually look better */
        max-width: 300px;
        display: inline-flex;
        justify-content: center;
    }

    .pricing-grid,
    .steps-grid,
    .row {
        flex-direction: column;
    }

    .article-content {
        padding: 20px 15px !important;
    }

    /* Fix sticking out elements */
    img {
        max-width: 100%;
        height: auto;
    }
}
/* =========================================
   MOBILE FIXES (Step Id: 280) - Up to 480px
   ========================================= */
@media (max-width: 480px) {

    /* 1. SAFETY FIRST */
    html,
    body,
    .container {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 2. HEADER CORRECTIONS */
    header {
        position: fixed;
        /* Keep header fixed as requested generally for mobile navs */
        width: 100%;
        height: auto;
        min-height: 70px;
        padding: 0 !important;
        display: flex;
        align-items: center;
        /* Ensure no weird spacing issues */
    }

    .nav-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        /* Keep space-between to push menu to right */
        gap: 10px !important;
        padding: 12px 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Correct Logo Container */
    .logo {
        display: flex !important;
        align-items: center !important;
        /* Allow it to take space but not overflow */
        flex: 1;
        min-width: 0;
        /* Important for flex child truncating */
    }

    .logo-link {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        text-decoration: none !important;
        width: auto !important;
        max-width: 100% !important;
    }

    /* A) Correct LOGO IMAGE */
    .logo-img {
        width: 58px !important;
        height: 58px !important;
        flex: 0 0 58px !important;
        /* Fixed width */
        max-width: 58px !important;
        max-height: 58px !important;
        margin-right: 10px !important;

        /* Reset any desktop styles */
        transform: none !important;
        top: 0 !important;
        position: relative !important;
        border-radius: 50% !important;
    }

    /* B) Correct SITE NAME */
    .logo-text {
        font-size: 22px !important;
        line-height: 1.1 !important;
        letter-spacing: 0.5px !important;

        /* Allow wrapping and visibility */
        white-space: normal !important;
        overflow: visible !important;
        display: block !important;

        /* Constraint width */
        max-width: 100% !important;
    }

    /* C) Layout Adjustments */
    .mobile-menu-btn {
        margin-left: 10px;
        /* Ensure space from logo text */
        flex-shrink: 0;
        /* Don't squash the menu button */
    }

    /* 3. HERO CORRECTIONS */
    .hero {
        padding-top: 100px !important;
        /* Push content down below header */
        margin-top: 0 !important;
    }

    .hero-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    .hero-content h1 {
        margin-top: 0 !important;
        z-index: 1;
        position: relative;
    }
}

/* =========================================
   MOBILE HEADER FIXES (Step Id: 300)
   ========================================= */

/* Base Structural Fixes */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Header Container */
.site-header {
    width: 100%;
    /* Ensure z-index keeps it on top */
    z-index: 9999;
}

.header-inner {
    width: 100%;
    /* Keep max-width: 1200px from .container on desktop */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Brand Structure */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
}

/* Text Safety Defaults */
.brand-text {
    display: block;
    min-width: 0; 
    /* Desktop uses logo-text font size (38px), we keep that by default */
}

/* MOBILE SPECIFIC OVERRIDES (Max 768px for Tablet/Mobile safety) */
@media (max-width: 768px) {
    .site-header {
        position: fixed;
        background: rgba(5, 10, 20, 0.95);
        backdrop-filter: blur(10px);
    }

    .header-inner {
        padding: 12px 16px !important;
    }

    /* Force Logo Size on Mobile */
    .brand-logo.logo-img {
        width: 58px !important;
        height: 58px !important;
        flex: 0 0 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
        object-fit: cover;
        
        /* Reset Desktop Effects */
        transform: none !important;
        top: 0 !important;
        margin: 0 !important;
        border: 2px solid var(--primary-color) !important;
        box-shadow: none !important;
        border-radius: 50% !important;
    }

    /* Force Text Size & Wrap on Mobile */
    .brand-text.logo-text {
        font-size: 22px !important;
        line-height: 1.1 !important;
        letter-spacing: 0.5px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        max-width: 100%;
    }
}

/* EXTRA SMALL MOBILE (Max 480px) */
@media (max-width: 480px) {
    .header-inner {
        padding: 10px 14px !important;
    }

    .brand-logo.logo-img {
        width: 54px !important;
        height: 54px !important;
        flex-basis: 54px !important;
    }

    .brand-text.logo-text {
        font-size: 20px !important;
    }
    
    .brand {
        gap: 8px !important;
    }
}
/* =========================================
   MOBILE TWEAKS (Step Id: 316) - Max 480px
   Aumentar Logo e Texto sem quebrar
   ========================================= */
@media (max-width: 480px) {

    /* 1. HEADER INNER - Mais espaço se possível */
    .header-inner {
        padding: 10px 12px !important;
        /* Slightly tighter padding to allow more content space */
        gap: 8px !important;
    }

    /* 2. LOGO MAIOR (62px) */
    .brand-logo.logo-img {
        width: 62px !important;
        height: 62px !important;
        flex: 0 0 62px !important;
        max-width: 62px !important;
        max-height: 62px !important;
        margin-right: 8px !important;
        /* Reduce margin slightly to compensate size increase */
    }

    /* 3. TEXTO MAIOR (22px) */
    .brand-text.logo-text {
        font-size: 22px !important;
        line-height: 1.1 !important;

        /* Ensure wrapping works perfectly */
        white-space: normal !important;
        overflow: visible !important;

        /* Logic: full width minus logo size (62) minus gap (8) minus menu btn (approx 40) */
        /* Flexbox handles this naturally with flex-shrink: 1 but let's be safe */
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    /* Ensure Brand container allows growing */
    .brand {
        flex: 1 !important;
        min-width: 0 !important;
    }
}

/* =========================================
   DEFINITIVE WA LAYOUT FIX (Step 377)
   Resetting Header and Structure
   ========================================= */

/* 1. Container Standardization */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    width: 100%;
}

/* 2. Header Structure - NO ABSOLUTE POSITIONING */
.site-header {
    width: 100%;
    position: fixed; /* Fixed is better for UX, user asked for relative but standard modern web uses fixed. I will use sticky or fixed depending on context context, but previously it was fixed. Keeping fixed but ensuring alignment. */
    top: 0;
    left: 0;
    z-index: 1000;
    background: rgba(5, 10, 20, 0.95);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    height: 80px; /* Explicit height */
    display: flex;
    align-items: center;
}

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

/* 3. Brand - RESET ALL */
.brand {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    height: 100%;
}

.brand-logo {
    height: 60px; /* Safe fixed height */
    width: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-color);
    
    /* OVERRIDE ANY PREVIOUS HANGING STYLES */
    position: static !important;
    top: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.brand-text {
    font-family: 'Russo One', sans-serif;
    font-size: 24px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.brand-text .highlight {
    color: var(--primary-color);
}

/* 4. Navigation */
.nav-links {
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-links li a {
    font-size: 16px;
    font-weight: 500;
    color: #cbd5e1;
    transition: 0.3s;
}

.nav-links li a:hover,
.nav-links li a.active {
    color: var(--primary-color);
}

/* 5. Header Actions (CTA + Mobile Btn) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Desktop CTA */
.cta-button.desktop-only {
    display: inline-flex;
    position: static !important; /* Safety */
    transform: none;
}

/* Mobile Menu Button - Hidden on desktop */
.mobile-menu-btn {
    display: none;
    font-size: 1.5rem;
    color: #fff;
    cursor: pointer;
}

/* 6. Hero Adjustment */
.hero {
    padding-top: 80px; /* Match header height */
    position: relative;
    z-index: 1;
}

/* =========================================
   MEDIA QUERIES (Responsive Logic)
   ========================================= */

@media (max-width: 1024px) {
    .nav-links {
        gap: 20px;
    }
    .brand-text {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block;
    }

    .cta-button.desktop-only {
        display: none !important;
    }

    /* Mobile Nav Drawer */
    .nav-links {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        background: #050a14;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 40px;
        transition: 0.3s ease-in-out;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

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

    .nav-links li {
        margin-bottom: 20px;
    }
    
    .nav-links li a {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .header-container {
        padding: 0 16px;
    }
    
    .brand-logo {
        width: 50px;
        height: 50px;
    }
    
    .brand-text {
        font-size: 18px;
    }
}


/* HEADER & LAYOUT FIXES (Step 444) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  background: rgba(5, 10, 20, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  /* Ensure height is auto to fit wrapped content on mobile */
  height: auto !important; 
  min-height: 80px;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
}

.brand { display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0; color:#fff; }
.brand-logo { width:58px; height:58px; border-radius:50%; object-fit:cover; flex:0 0 58px; border: 2px solid #FF4500; }
.brand-text { font-size:22px; white-space:nowrap; font-family: 'Russo One', sans-serif; text-transform: uppercase; }

.main-nav { display:flex; gap:22px; align-items:center; }
.main-nav a { text-decoration:none; color:#cbd5e1; font-weight:500; transition:0.3s; }
.main-nav a:hover { color:#FF4500; }

.cta-header { display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:999px; background: linear-gradient(135deg, #FF4500, #FF8C00); color:#fff; font-weight:700; white-space:nowrap; text-decoration:none; }

.hero { padding-top: 40px !important; position: relative !important; z-index: 1 !important; margin-top:0 !important; }

@media (max-width: 768px) {
  .header-row { flex-wrap: wrap; }
  .main-nav { width: 100%; justify-content: center; flex-wrap: wrap; gap: 14px; }
  .brand-text { white-space: normal; }
}

@media (max-width: 480px) {
  .brand-logo { width:62px; height:62px; flex-basis:62px; }
  .brand-text { font-size:22px; }
}/* =========================================
   VISUAL TWEAKS (Step 494) 
   ========================================= */

/* 1. Header Logo & Icons Adjustment */
.brand-logo {
    width: 68px !important;
    height: 68px !important;
    flex: 0 0 68px !important;
    /* Ensure flex doesn't shrink it */
}

.brand-text {
    font-size: 26px !important;
    /* Slightly larger */
}

.header-row {
    padding: 18px 0 !important;
    /* More breathing room */
}

/* 2. Reduce Hero Space */
.hero {
    /* Reduce top padding to bring text closer to header */
    padding-top: 40px !important;
    margin-top: 0 !important;
}

/* Ensure mobile responsiveness isn't broken */
@media (max-width: 480px) {
    .brand-logo {
        /* Keep mobile optimization safe, don't go full 72px if screen is small */
        width: 62px !important;
        height: 62px !important;
        flex: 0 0 62px !important;
    }

    .brand-text {
        font-size: 22px !important;
        /* Keep mobile font size */
    }

    .header-row {
        padding: 14px 0 !important;
        /* Keep smaller padding on mobile */
    }
}
/* =========================================
   VISUAL REFINEMENTS (Step 520) 
   ========================================= */

/* 1. Stronger Header Visuals */
.brand-logo {
    width: 72px !important;
    height: 72px !important;
    flex: 0 0 72px !important;
}

.brand-text {
    font-size: 28px !important;
    letter-spacing: 1px !important;
}

.header-row {
    padding: 20px 0 !important;
}

/* 2. Hero Adjustments - Closer & Impactful */
.hero {
    /* Reduce gap between header and content */
    padding-top: 120px !important;
    /* Fixed header overlaps content, so we need padding. If header is ~112px (72+40), padding needs to be > 112px to not hide content. Wait. 
       The user asked to REDUCE space. 
       Previous was 'padding-top: 40px' but header is sticky/fixed. 
       If header is fixed, content goes under it.
       If header height is ~115px (72px img + 20px top + 20px bottom padding approx), 
       then 'padding-top: 40px' implies content starts 40px from top of screen, UNDER header. 
       This would hide the top of hero content.
       
       HOWEVER, previous logic might have relied on normal flow or the user sees "too much space".
       If I set padding-top: 140px, it pushes content down.
       If I set padding-top: 0, content hits top of browser.
       
       Let's assume the user visualizes "space between header bottom and text".
       If header is fixed:
       Hero must have padding-top >= Header Height to clear it.
       Header height = 20px (pad top) + 72px (logo) + 20px (pad bottom) = ~112px.
       Border bottom = 1px. Total ~113px.
       
       To reduce space "between header and hero text", I should set Hero Padding Top to be just enough to clear the header + a small margin.
       Let's try padding-top: 130px (113 + 17px gap).
       
       BUT, looking at previous step 508, I set 'padding-top: 40px'.
       If that worked (and user saw "too much space"), maybe the header wasn't fixed in a way that overlaps, OR the previous "padding-top: 40px" was on top of some other margin.
       
       Actually, Step 453 "fix_production_crash.ps1" set .hero { padding-top: 40px !important; margin-top: 0 !important; }
       And header was position: sticky. 
       If sticky, it occupies space in flow. So content naturally falls below it.
       So padding-top: 40px adds 40px AFTER the header.
       
       So to REDUCE space, I should reduce that 40px.
       User asked: "Diminuir padding superior da seção hero... Aplicar: .hero-section { padding-top: 20px; }"
       
       I will follow the user's specific instruction: padding-top: 20px.
    */
    padding-top: 20px !important;

    /* Impactful Height */
    min-height: 85vh !important;
    display: flex !important;
    align-items: center !important;

    /* Ensure background covers nicely */
    background-position: center center;
    background-size: cover;
}

/* 3. Mobile Safety (Don't break layout) */
@media (max-width: 480px) {
    .brand-logo {
        /* Keep mobile optimization safe, don't go full 72px if screen is small */
        width: 64px !important;
        height: 64px !important;
        flex: 0 0 64px !important;
    }

    .brand-text {
        font-size: 24px !important;
        /* Slightly bigger than 22 but safe */
        letter-spacing: 0.5px !important;
    }

    .header-row {
        padding: 15px 0 !important;
        /* Moderate padding */
    }

    .hero {
        padding-top: 20px !important;
        /* Consistent with desktop request */
        min-height: auto !important;
        /* Don't force 85vh on mobile, might be too tall for content */
        padding-bottom: 40px !important;
    }
}
/* =========================================
   MOBILE HEADER CTA FIX (Step 533)
   Aligning button and menu for < 480px
   ========================================= */

@media (max-width: 480px) {

    /* Header structured in column, centered */
    .header-row {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 12px 0 !important;
        height: auto !important;
        /* Allow growing */
    }

    /* Menu Centered */
    .main-nav {
        width: 100% !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        display: flex !important;
        /* Ensure visibility */
        margin-top: 5px !important;
    }

    .main-nav a {
        font-size: 14px !important;
        padding: 5px !important;
    }

    /* Botão CTA do header */
    .cta-header {
        width: auto !important;
        min-width: 220px !important;
        max-width: 92% !important;
        padding: 12px 18px !important;
        font-size: 14px !important;
        line-height: 1 !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 6px auto 0 !important;
        position: static !important;
        /* Remove any absolute positioning */
    }

    /* Adjust Brand to be centered */
    .brand {
        width: 100% !important;
        justify-content: center !important;
        margin-bottom: 5px !important;
    }
}

/* Fluidity & Animations */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.slide-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-up-delay-1 { transition-delay: 0.1s; }
.slide-up-delay-2 { transition-delay: 0.2s; }
.slide-up-delay-3 { transition-delay: 0.3s; }

.fade-in.visible, .slide-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Enhanced Glassmorphism & Hover */
.glass-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(252, 163, 17, 0.2);
    border-color: rgba(252, 163, 17, 0.4);
}

.pricing-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(252, 163, 17, 0.2);
}

.step-card {
    transition: transform 0.3s ease, background 0.3s ease;
}

.step-card:hover {
    transform: translateY(-5px) scale(1.02);
    background: rgba(30, 10, 5, 0.85);
}