/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    /* Suggested font from instructions */
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #ffffff;
    color: #333333;
    -webkit-text-size-adjust: 100%;
    /* Prevent iOS text inflation */
}

/* Global Responsive Images */
img {
    max-width: 100%;
    height: auto;
}

/* User provided styles */
.section {
    background-color: var(--background-color, #000000);
    min-height: var(--min-height, auto);
    display: flex;
    /* Ensures vertical centering if min-height is used */
    align-items: center;
}

#hero-section {
    background-color: #000000;
    /* Keep legacy ID style just in case */
    /* Fundo preto conforme a imagem */
    color: #ffffff;
    padding: 80px 20px;
    display: flex;
    align-items: center;
    min-height: 100vh;
    /* Added to make it look like a full hero */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.heading {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
}

.highlight {
    color: #888888;
    /* Tom cinza para o contraste no texto */
}

.description {
    font-size: 18px;
    margin-top: 24px;
    color: #cccccc;
    max-width: 500px;
}

.cta-buttons {
    margin-top: 32px;
}

.btn-primary {
    display: inline-block;
    background-color: #ffffff;
    color: #000000;
    padding: 12px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-primary:hover {
    background-color: #e0e0e0;
    transform: translateY(-2px);
    /* Slight lift */
}

.visual-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ai-badge {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #333;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    font-size: 24px;
    min-width: 200px;
    /* added some sizing */
}

/* Responsive */
@media (max-width: 768px) {
    .grid-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .description {
        margin-left: auto;
        margin-right: auto;
    }

    .visual-box {
        margin-top: 40px;
    }
}

/* Navbar Styles */
.site-header {
    background-color: #ffffff;
    padding: 15px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 100;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: relative;
    /* spacing on sides */
}

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

.logo-img {
    height: 80px;
    width: auto;
    display: block;
}

/* Navigation Links */
.main-nav {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: max-content;
    z-index: 10;
    /* Ensure it floats above but doesn't block clicks excessively if sized correctly */
}

.main-nav .nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}

.main-nav .nav-links li a {
    text-decoration: none;
    color: #333333;
    font-weight: 500;
    font-size: 16px;
    transition: color 0.2s ease;
}

.main-nav .nav-links li a:hover {
    color: #000000;
    font-weight: 600;
    /* Subtle bold on hover */
}

.main-nav .nav-links li a.active {
    color: #000000;
    /* Black active state */
    font-weight: 600;
    border-bottom: 2px solid #000;
    padding-bottom: 5px;
}

/* Header Icons */
.header-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Language Dropdown */
.lang-dropdown {
    position: relative;
    display: inline-block;
    margin-right: 20px;
    font-family: 'Inter', sans-serif;
}

.lang-dropdown-btn {
    background-color: #ffffff;
    color: #333;
    padding: 8px 16px;
    font-size: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 50px;
    /* Pill shape for premium feel */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.lang-dropdown-btn:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.lang-dropdown-btn i {
    font-size: 10px;
    color: #6b7280;
    margin-top: 1px;
}

.lang-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: #ffffff;
    min-width: 160px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    border-radius: 12px;
    padding: 6px;
    margin-top: 10px;
    /* Visual spacing */
    border: 1px solid #f3f4f6;
    animation: fadeIn 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Bridging the gap so the menu doesn't close on hover */
.lang-dropdown-content::before {
    content: "";
    display: block;
    position: absolute;
    top: -15px;
    /* Covers the margin gap */
    left: 0;
    width: 100%;
    height: 15px;
    background: transparent;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lang-dropdown:hover .lang-dropdown-content {
    display: block;
}

.lang-dropdown-content a {
    color: #4b5563;
    padding: 10px 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    border-radius: 8px;
    transition: all 0.15s;
    font-weight: 500;
}

.lang-dropdown-content a:hover {
    background-color: #f3f4f6;
    color: #111827;
}

.lang-dropdown-content a.active {
    background-color: #eff6ff;
    color: #2563eb;
    font-weight: 600;
}

/* Add flag placeholders if needed, or just keep text clean */

.social-icon {
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    transition: opacity 0.2s ease;
}

.social-icon:hover {
    opacity: 0.7;
}

/* Customize SVG sizes */
.social-icon svg {
    width: 22px;
    height: 22px;
}

.social-icon[aria-label="WhatsApp"] {
    color: #25D366;
}

/* Responsive specific for Navbar */
/* Responsive specific for Navbar */
@media (max-width: 992px) {
    .header-container {
        flex-wrap: wrap;
        gap: 15px;
        padding: 15px;
    }

    .logo-area {
        order: 1;
        flex: 1;
    }

    .header-actions {
        order: 2;
    }

    .main-nav {
        order: 3;
        width: 100%;
        /* Show menu instead of hiding */
        display: block;
        position: static;
        transform: none;
        overflow-x: auto;
        padding-top: 10px;
        border-top: 1px solid #f0f0f0;
    }

    .main-nav .nav-links {
        gap: 20px;
        padding: 10px 5px;
        white-space: nowrap;
    }

    /* Hero Typography Fixes */
    .hero-bizai h1,
    .websites-hero h1,
    .bizai-hero h1,
    .choice-content h2,
    .contact-text-area h2,
    .portfolio-section h2,
    .main-title,
    .mission-vision h3 {
        font-size: 2.2rem !important;
        /* Force smaller size on mobile */
        word-wrap: break-word;
    }

    .logo-img {
        height: 50px;
    }
}

@media (max-width: 600px) {

    /* Force grids to single column */
    .pricing-grid,
    .features-grid,
    .grid-layout,
    .contact-wrapper,
    .portfolio-grid,
    .automacoes-grid,
    .pay-grid {
        grid-template-columns: 1fr !important;
    }

    .pricing-card,
    .feature-card,
    .portfolio-card,
    .automacao-card,
    .pay-card {
        width: 100% !important;
    }

    /* Adjust specific spacing */
    .hero-content p,
    .websites-hero p,
    .bizai-hero p {
        font-size: 1rem !important;
        padding: 0 15px;
    }

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

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        width: 100%;
        text-align: center;
    }

    .stats-box {
        position: relative;
        left: 0;
        width: 100%;
        flex-direction: column;
        gap: 20px;
        text-align: center;
        margin-top: 20px;
    }
}

/* Footer Styles */
.footer-bizai {
    background-color: #4B39D7;
    /* Cor roxa aproximada da imagem */
    color: white;
    padding: 60px 10%;
    font-family: 'Arial', sans-serif;
}

.footer-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 20px;
}

.footer-brand h2 {
    font-size: 32px;
    margin-bottom: 20px;
    font-weight: bold;
}

.footer-logo {
    height: 60px;
    width: auto;
    margin-bottom: 20px;
    border-radius: 6px;
    display: block;
}



.footer-brand p {
    max-width: 300px;
    line-height: 1.5;
    margin-bottom: 25px;
}

.social-icons a {
    color: white;
    font-size: 24px;
    margin-right: 20px;
    text-decoration: none;
}

.footer-contact h3 {
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.footer-contact p {
    margin-bottom: 10px;
}

.footer-contact a {
    color: white;
    text-decoration: none;
}

.footer-contact {
    justify-self: end;
    text-align: right;
}

.footer-logo-center {
    height: 70px;
    width: auto;
    /* Center in grid cell */
    margin: 0 auto;
    border-radius: 10px;
    display: block;
    mix-blend-mode: multiply;
}

/* Footer Responsive */
@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 30px;
    }

    .footer-contact {
        justify-self: center;
        text-align: center;
    }

    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-logo-center {
        order: -1;
        /* Keep logo at top on mobile if preferred, or remove to keep in flow */
        margin: 0 auto;
    }
}

.footer-bottom {
    text-align: center;
    margin-top: 50px;
    font-size: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* Linha subtil */
    padding-top: 20px;
}

.footer-bottom a {
    color: white;
    text-decoration: underline;
}

/* New Tech Hero Section */
.hero-bizai {
    /* Using a placeholder tech image from Unsplash for demonstration */
    background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    height: 80vh;
    /* Ocupa 80% da altura do ecrã */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    font-family: 'Inter', sans-serif;
    /* Enforce Inter font */
}

/* Escurece um pouco a imagem para o texto ser legível */
.hero-overlay {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    width: 100%;
    padding: 0 20px;
}

.hero-content h1 {
    font-size: 4rem;
    /* Larger title */
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.1;
    max-width: 14ch;
    /* Forces the wrap like in the image: "O seu site pronto em" / "minutos" */
    margin-left: auto;
    margin-right: auto;
}

.hero-content p {
    font-size: 1.25rem;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: #f0f0f0;
}

/* Estilo dos Botões */
.hero-buttons {
    display: flex;
    gap: 30px;
    /* More space between buttons */
    justify-content: center;
    align-items: center;
}

.btn-primary,
.btn-secondary {
    padding: 14px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
}

/* Botão com borda branca (estilo "outline") */
.btn-primary {
    border: 1px solid white;
    /* Thinner elegant border */
    color: white;
    background-color: transparent;
}

.btn-primary:hover {
    background: white;
    color: black;
}

.btn-secondary {
    color: white;
    padding: 14px 20px;
    /* Less padding for text link style */
}

.btn-secondary:hover {
    text-decoration: none;
    opacity: 0.8;
    transform: translateY(-1px);
}

/* Services Section */
.services-section {
    padding: 80px 10%;
    background-color: #f4f7f9;
    /* Tom de cinza muito claro de fundo */
    color: #333;
    /* Font inherited from body (Inter) but user asked for Arial in snippet. 
       Usually better to keep Inter for consistency, but I'll stick to user request or blend it. 
       Let's use Inter for headings to match hero, and common sans for text if requested, 
       but consistency is key. I'll use inherited font (Inter) which looks better + Arial as fallback */
}

.services-header {
    text-align: center;
    margin-bottom: 60px;
}

.services-header h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #000;
}

.services-header p {
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

.services-container {
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
}

.services-image {
    flex: 1;
}

.services-image img {
    width: 100%;
    border-radius: 20px;
    /* Cantos arredondados como na imagem */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: block;
}

.services-list {
    flex: 1;
}

.service-item {
    margin-bottom: 35px;
}

.service-item h3 {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #000;
}

.service-item p {
    color: #555;
    line-height: 1.6;
}

/* Responsividade para telemóveis */
@media (max-width: 768px) {
    .services-container {
        flex-direction: column;
    }

    .services-header h2 {
        font-size: 2rem;
    }
}

/* Choice Section */
.choice-section {
    padding: 100px 10%;
    /* More vertical padding */
    background-color: #ffffff;
    color: #333;
}

.choice-container {
    display: flex;
    align-items: center;
    gap: 80px;
    /* Increased gap */
    max-width: 1200px;
    margin: 0 auto;
}

.choice-content {
    flex: 1;
    /* Balanced 1:1 ratio often looks better or 1.1 */
}

.choice-content h2 {
    font-size: 3rem;
    /* Larger, bolder */
    font-weight: 800;
    /* Extra bold */
    color: #111;
    margin-bottom: 25px;
    line-height: 1.1;
    letter-spacing: -1px;
    /* Tighter tracking for modern look */
}

.choice-description {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 50px;
    max-width: 500px;
    /* Limit line length for readability */
}

/* Estilo das Estatísticas */
.choice-stats {
    display: flex;
    gap: 60px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.stat-number {
    font-size: 3.5rem;
    /* Bigger numbers */
    font-weight: 800;
    color: #001A33;
    /* Very dark blue/black */
    font-family: 'Inter', sans-serif;
    line-height: 1;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.95rem;
    color: #888;
    font-weight: 500;
}

/* Estilo da Imagem */
.choice-image {
    flex: 1;
    position: relative;
    /* Clean formatting */
}

.choice-image img {
    width: 100%;
    border-radius: 30px;
    /* Larger radius */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    /* Slightly stronger shadow */
    object-fit: cover;
    display: block;
}

/* Responsividade */
@media (max-width: 992px) {
    .choice-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .choice-stats {
        justify-content: center;
        margin-bottom: 30px;
    }

    .choice-content h2 {
        font-size: 2.2rem;
    }

    .choice-description {
        margin-left: auto;
        margin-right: auto;
    }

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

/* =========================================
   WEBSITES PAGE STYLES
   ========================================= */

/* Websites Hero */
.websites-hero {
    /* Placeholder for the "Hands holding phone" image */
    background-image: url('https://images.unsplash.com/photo-1555421689-491a97ff2040?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    height: 45vh;
    /* Reduced from 60vh */
    min-height: 400px;
    /* Reduced from 500px */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.websites-hero-overlay {
    background: rgba(0, 0, 0, 0.5);
    /* Dark overlay for readability */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.websites-hero h1 {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.websites-hero p {
    font-size: 1.25rem;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    color: #f0f0f0;
}

/* Digital Presence Section */
.digital-presence-section {
    padding: 50px 0;
    background-color: #fff;
    color: #333;
}

.presence-container {
    align-items: center;
    /* Center visually with the image */
}

.presence-text {
    padding-right: 40px;
}

.presence-text h2 {
    font-size: 2.2rem;
    /* Reduced from 3rem */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #111;
}

.presence-text p {
    font-size: 1rem;
    /* Reduced from 1.1rem */
    margin-bottom: 30px;
    color: #555;
    line-height: 1.6;
}

.btn-outline {
    display: inline-block;
    padding: 10px 30px;
    /* Slightly smaller button */
    border: 1px solid #1a56db;
    /* Blue border (site color) */
    border-radius: 50px;
    text-decoration: none;
    color: #1a56db;
    /* Blue text */
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background-color: #1a56db;
    color: #fff;
}

/* Presence Visual & Green Stats Box */
.presence-visual {
    position: relative;
}

.image-wrapper {
    position: relative;
    /* overflow: hidden; REMOVED */
}

.image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.stats-box {
    background: rgba(13, 27, 43, 0.95);
    /* Dark Blue #0D1B2B with opacity */
    backdrop-filter: blur(10px);
    /* Modern blur effect */
    color: white;
    padding: 15px 30px;
    /* Reduced vertical padding (height) */
    display: flex;
    justify-content: center;
    gap: 50px;
    align-items: center;
    position: absolute;
    bottom: 20px;
    /* Floating slightly up */
    left: -10%;
    /* Extend to left */
    width: 120%;
    /* Wider than image */
    border-radius: 12px;
    /* Own radius */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.stat-entry {
    flex: 0 0 auto;
    text-align: left;
}

.stat-val {
    display: block;
    font-size: 2.8rem;
    /* Reduced from 3.8rem */
    font-weight: 800;
    line-height: 1;
    margin-bottom: 5px;
    font-family: 'Inter', sans-serif;
}

.stat-desc {
    font-size: 1.1rem;
    font-weight: 500;
    opacity: 0.95;
    display: block;
    /* Ensure it sits on its own line properly */
}

/* Responsive for Websites Page */
@media (max-width: 992px) {
    .presence-text {
        padding-right: 0;
        margin-bottom: 50px;
        text-align: center;
    }

    .stats-box {
        position: relative;
        /* Stack below image on mobile usually better, or keep overlay */
        border-radius: 0 0 20px 20px;
    }
}

/* Features Section (Websites) */
.features-wrapper {
    max-width: 1100px;
    margin: 30px auto;
    padding: 20px;
    background: #ffffff;
    /* FUNDO BRANCO */
    /* font-family: system-ui, sans-serif; -- Inherit Inter from body */
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 32px;
}

.feature-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* Ícone dentro do círculo — agora #0D1B2B */
.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #0D1B2B;
    /* azul escuro */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.6rem;
    flex-shrink: 0;
    /* Prevent icon shrinking */
}

.feature-text-block {
    max-width: 260px;
}

.feature-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}

.feature-desc {
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.45;
}

/* Pricing Section */
.pricing-container {
    max-width: 1100px;
    margin: 30px auto 50px auto;
    padding: 20px;
    text-align: center;
    /* font-family: system-ui, sans-serif; -- Inherit Inter */
    color: #111827;
}

.pricing-container h2 {
    font-size: 2rem;
    margin-bottom: 25px;
    /* mais espaço abaixo do título */
    font-weight: 700;
}

/* GRID AJUSTADO PARA 3 CARDS */
.pricing-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: stretch;
    margin-top: 20px;
    /* novo espaçamento adicional */
}

.pricing-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 28px 24px;
    border-radius: 20px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 55px rgba(15, 23, 42, 0.12);
}

.popular-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #f4f4f5;
    color: #111827;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pricing-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    margin-top: 10px;
    font-weight: 700;
}

.price {
    font-size: 2rem;
    font-weight: 800;
    color: #0D1B2B;
    margin: 0 0 4px;
    font-family: 'Inter', sans-serif;
}

.setup-cost {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 12px;
}

.pricing-card ul {
    list-style: none;
    padding: 0;
    text-align: left;
    border-top: 1px solid #e5e7eb;
    margin-top: 20px;
    flex-grow: 1;
    /* Pushes content to fill height uniformly */
}

.pricing-card li {
    padding: 9px 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.95rem;
    color: #374151;
}

/* FAQ Section */
.faq-container {
    max-width: 800px;
    margin: 60px auto;
    /* font-family: system-ui, sans-serif; -- Inherit Inter */
}

.faq-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
}

/* FAQ ITEM */
.faq-item {
    border-bottom: 1px solid #e5e7eb;
    padding: 20px 0;
    cursor: pointer;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 600;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.5;
    transition: max-height 0.3s ease;
    margin-top: 8px;
}

/* Arrow */
.faq-arrow {
    transition: transform 0.3s ease;
    font-size: 1.3rem;
    color: #2563EB;
}

.faq-item.open .faq-arrow {
    transform: rotate(90deg);
}

.faq-item.open .faq-answer {
    max-height: 260px;
    /* auto não funciona com animação */
}

/* Contact Section */
/* Contact Section */
.contact-section {
    padding: 80px 20px;
    background-color: #fff;
    max-width: 1100px;
    margin: 0 auto;
}

/* Contact Section Layout Adjustment */
/* Contact Section Layout Adjustment */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    /* Align top */
}

/* Text Area - Default Col 1 */
/* Text Area - Default Col 1 */
.contact-text-area {
    margin-bottom: 20px;
    position: relative;
    z-index: 10;
    background-color: #fff;
    /* Ensure text sits on white */
}

/* Image - Full Width Bottom */
.contact-image-full {
    grid-column: 1 / -1;
    width: 100%;
    height: 400px;
    margin-top: -100px;
    /* Overlap effect */
    position: relative;
    border-radius: 0;
    overflow: hidden;
    z-index: 1;
    /* Behind text/form */
}

.contact-image-full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Flex container for text area to push image down if needed, or keep standard */
/* .contact-text-area already defined above, merging styles */
.contact-text-area {
    display: flex;
    flex-direction: column;
}

.contact-text-area h2 {
    font-size: 4rem;
    /* Huge text as requested */
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #111;
}

.contact-text-area p {
    color: #6b7280;
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 90%;
    font-size: 1.05rem;
}

.contact-form-area {
    position: relative;
    z-index: 10;
    background-color: #fff;
    /* Ensure form sits on white */
    border-radius: 0 0 0 80px;
    /* Large rounded bottom-left corner */
    padding: 0 0 40px 40px;
    /* Add padding to give space for the curve */
}

/* Ensure Image wrapper fills height */
.contact-image {
    flex-grow: 1;
    position: relative;
    min-height: 350px;
    /* Taller minimum */
}

.contact-image img {
    width: 100%;
    height: 100%;
    /* Fill the container */
    border-radius: 20px;
    object-fit: cover;
    display: block;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.contact-form-area {
    padding-top: 10px;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-size: 0.95rem;
    /* Slightly smaller labels */
    color: #374151;
    margin-bottom: 8px;
    /* Less margin */
    font-weight: 600;
    /* Bold labels */
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    color: #111827;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: all 0.2s;
    background-color: #fff;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #9ca3af;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.contact-form textarea {
    min-height: 140px;
    resize: vertical;
}

.btn-submit {
    background-color: #1a56db;
    /* Blue from image */
    color: white;
    border: none;
    padding: 16px 40px;
    border-radius: 50px;
    /* Rounded pill shape */
    font-weight: 600;
    cursor: pointer;
    font-size: 1.05rem;
    margin-top: 10px;
    transition: background-color 0.2s;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
    width: 100%;
    /* Full width button */
}


/* Portfolio / Examples Section */
.portfolio-section {
    padding: 50px 20px 10px 20px;
    background: #ffffff;
    /* Fundo branco solicitado */
    color: #333;
}

.portfolio-section h2 {
    color: #111 !important;
    text-align: left !important;
    margin-bottom: 60px;
    font-size: 2.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1100px;
    padding-left: 0;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.portfolio-card {
    background: #fff;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
    transition: transform 0.3s ease;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

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

.portfolio-icon {
    width: 80px;
    height: 80px;
    background-color: #f3f4f6;
    /* Fundo cinza claro */
    color: #1a56db;
    /* Ícone azul */
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 25px;
}

.portfolio-card h4 {
    font-size: 1.5rem;
    color: #111;
    margin-bottom: 15px;
    font-weight: 700;
}

.portfolio-card p {
    color: #555;
    line-height: 1.6;
    font-size: 1.05rem;
    margin-bottom: 30px;
    flex-grow: 1;
}

.btn-outline-sm {
    display: inline-block;
    padding: 10px 25px;
    border: 1px solid #1a56db;
    background-color: transparent;
    color: #1a56db;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    text-align: center;
}

.btn-outline-sm:hover {
    background-color: #1a56db;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 86, 219, 0.2);
}

.btn-card {
    display: inline-block;
    padding: 12px 35px;
    background-color: transparent;
    color: #1a56db;
    /* Texto azul */
    border: 1px solid #1a56db;
    /* Borda azul */
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-card:hover {
    background-color: #1a56db;
    color: #fff;
}



/* Responsive */
@media (max-width: 768px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-text-area h2 {
        font-size: 2.5rem;
    }
}

/* Animation Styles */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    /* Increased start distance */
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    /* Professional easing (exponential-out ish) */
}

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

.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.btn-outline {
    display: inline-block;
    padding: 18px 50px;
    /* Increased padding */
    background-color: #1a56db;
    /* Blue background to stand out */
    color: #ffffff;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2rem;
    /* Increased font size */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 15px rgba(26, 86, 219, 0.3);
}

.btn-outline:hover {
    background-color: #1545b0;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 86, 219, 0.4);
}

/* Digital Presence Section Specifics */
.presence-text h2 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 24px;
    color: #111;
    font-weight: 800;
}

.presence-text p {
    font-size: 1.15rem;
    color: #555;
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 90%;
}

@media (max-width: 768px) {
    .presence-text h2 {
        font-size: 2.5rem;
    }
}

/* Highlight para os 30min */
.text-highlight-blue {
    color: #1a56db !important;
    /* Forces the blue color */
}

/* Novo botão CTA na secção de escolha */
.btn-cta-choice {
    display: inline-block;
    background-color: #1a56db;
    color: #ffffff;
    padding: 14px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 30px;
    transition: background-color 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 15px rgba(26, 86, 219, 0.3);
}

.btn-cta-choice:hover {
    background-color: #1545b0;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 86, 219, 0.4);
}

/* Highlight com Glow (sem mudar cor) */
.stat-highlight-glow {
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
    display: inline-block;
    /* Required for transform */
    margin-right: 5px;
    /* Adjust spacing after scale */
}

/* =================================================================
   OTIMIZAÇÕES COMPLETAS PARA DISPOSITIVOS MÓVEIS
   ================================================================= */

/* Tablets e dispositivos médios (max-width: 992px) */
@media (max-width: 992px) {

    /* Ajustar hero height para tablets */
    .hero-bizai {
        height: 70vh;
        min-height: 500px;
    }

    /* Ajustar containers */
    .choice-container,
    .services-container {
        flex-direction: column;
        gap: 40px;
    }

    .choice-image,
    .services-image {
        order: -1;
        /* Imagem primeiro em mobile */
    }

    /* Ajustar stats box */
    .choice-stats {
        flex-direction: column;
        gap: 30px;
        align-items: flex-start;
    }
}

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

    /* Typography ajustes globais */
    h1 {
        font-size: 2.5rem !important;
    }

    h2 {
        font-size: 2rem !important;
    }

    h3 {
        font-size: 1.5rem !important;
    }

    /* Hero section mobile */
    .hero-bizai {
        height: auto;
        min-height: 400px;
        padding: 60px 20px;
    }

    .hero-content h1 {
        font-size: 2.5rem !important;
        max-width: 100% !important;
    }

    .hero-content p {
        font-size: 1.1rem !important;
    }

    /* Services section mobile */
    .services-section {
        padding: 60px 5%;
    }

    .services-header h2 {
        font-size: 2rem;
    }

    /* Choice section mobile */
    .choice-section {
        padding: 60px 5%;
    }

    .choice-content h2 {
        font-size: 2.2rem !important;
    }

    .choice-description {
        max-width: 100%;
    }

    /* Images responsivas */
    .services-image img,
    .choice-image img,
    .presence-visual img {
        width: 100%;
        height: auto;
        border-radius: 15px;
    }

    /* Contact section */
    .contact-wrapper {
        grid-template-columns: 1fr !important;
        gap: 40px;
    }

    .contact-text-area h2 {
        font-size: 2rem !important;
    }

    /* Stats adjustments */
    .stat-number {
        font-size: 2.5rem !important;
    }

    .stat-label {
        font-size: 0.9rem;
    }
}

/* Smartphones pequenos (max-width: 480px) */
@media (max-width: 480px) {

    /* Typography ainda mais compacta */
    h1 {
        font-size: 2rem !important;
    }

    h2 {
        font-size: 1.75rem !important;
    }

    h3 {
        font-size: 1.3rem !important;
    }

    /* Hero ajustes extremos */
    .hero-bizai {
        padding: 40px 15px;
        min-height: 350px;
    }

    .hero-content h1 {
        font-size: 2rem !important;
        line-height: 1.2;
    }

    .hero-content p {
        font-size: 1rem !important;
        margin-bottom: 30px;
    }

    /* Buttons mobile */
    .hero-buttons {
        flex-direction: column;
        gap: 15px;
        width: 100%;
        padding: 0 15px;
    }

    .btn-primary,
    .btn-secondary,
    .btn-cta-choice {
        width: 100%;
        text-align: center;
        padding: 14px 30px;
        font-size: 1rem;
    }

    /* Sections padding */
    .services-section,
    .choice-section {
        padding: 40px 15px;
    }

    /* Service items spacing */
    .service-item {
        margin-bottom: 25px;
    }

    .service-item h3 {
        font-size: 1.15rem;
    }

    .service-item p {
        font-size: 0.95rem;
    }

    /* Stats mobile */
    .choice-stats {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .stat-number {
        font-size: 2rem !important;
    }

    /* Footer mobile */
    .footer-bizai {
        padding: 40px 15px;
    }

    .footer-brand p {
        max-width: 100%;
    }

    /* Forms mobile */
    .contact-form input,
    .contact-form textarea,
    .form-group input,
    .form-group textarea {
        font-size: 16px;
        /* Previne zoom no iOS */
        padding: 12px;
    }

    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }

    .container,
    .header-container {
        padding: 0 15px;
    }

    /* Logo size mobile */
    .logo-img {
        height: 45px !important;
    }

    /* Navigation mobile */
    .main-nav .nav-links {
        gap: 15px;
        font-size: 14px;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
    }

    .main-nav .nav-links::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari */
    }
}

/* Extra small devices (max-width: 375px) */
@media (max-width: 375px) {
    .hero-content h1 {
        font-size: 1.75rem !important;
    }

    .choice-content h2,
    .contact-text-area h2 {
        font-size: 1.75rem !important;
    }

    .btn-primary,
    .btn-secondary,
    .btn-cta-choice {
        padding: 12px 24px;
        font-size: 0.95rem;
    }
}

/* Landscape mode fixes for mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-bizai {
        height: auto;
        min-height: 300px;
        padding: 30px 20px;
    }

    .hero-content h1 {
        font-size: 1.8rem !important;
        margin-bottom: 10px;
    }

    .hero-content p {
        font-size: 0.95rem !important;
        margin-bottom: 20px;
    }

    .hero-buttons {
        gap: 15px;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {

    /* Make buttons and links easier to tap */
    a,
    button {
        min-height: 44px;
        min-width: 44px;
    }

    /* Increase touch targets */
    .nav-links li a {
        padding: 10px 15px;
    }

    .social-icon {
        width: 44px;
        height: 44px;
    }

    /* Remove hover effects on touch devices */
    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-cta-choice:hover {
        transform: none;
    }
}

/* =========================================
   FORM / RADIO BUTTON STYLES (Added for Project Form)
   ========================================= */
.radio-group {
    display: flex;
    gap: 15px;
    margin-top: 5px;
}

.radio-option {
    flex: 1;
    position: relative;
    display: block;
    /* Ensure label covers full area */
}

/* Hide default radio but keep it accessible/functional */
.radio-option input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 10;
    margin: 0;
    top: 0;
    left: 0;
}

.radio-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-weight: 600;
    color: #666;
    transition: all 0.3s ease;
    background: white;
    text-align: center;
    cursor: pointer;
}

.radio-option input:checked+.radio-custom {
    border-color: #1a56db;
    /* Site Blue */
    background-color: #1a56db;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 86, 219, 0.25);
}

.radio-option:hover .radio-custom {
    border-color: #b0c4de;
}

/* Adjust form gap for larger form */
.contact-form .form-group {
    margin-bottom: 20px;
}

/* Make sure the form textarea doesn't overflow if too large */
.contact-form textarea {
    min-height: 100px;
}

/* =========================================
   FORM TOGGLE STYLES (For Switching Form Modes)
   ========================================= */
.form-mode-toggle {
    display: flex;
    background: #f3f4f6;
    padding: 5px;
    border-radius: 50px;
    /* Pill shape */
    margin-bottom: 25px;
    border: 1px solid #e5e7eb;
}

.mode-btn {
    flex: 1;
    padding: 12px;
    text-align: center;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: #6b7280;
    background: transparent;
    border: none;
}

.mode-btn.active {
    background: white;
    color: #1a56db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mode-btn:hover:not(.active) {
    color: #374151;
}

.hidden-mode {
    display: none;
}