/* ===== RESPONSIVE OVERRIDES — mobile-first additions ===== */

/* Fluid typography tokens */
:root {
    --fs-hero: clamp(2.2rem, 5vw + 1rem, 4.5rem);
    --fs-section: clamp(1.6rem, 3vw + 0.8rem, 2.8rem);
    --fs-h3: clamp(1.1rem, 1vw + 0.85rem, 1.4rem);
    --fs-body: clamp(0.95rem, 0.4vw + 0.85rem, 1.15rem);
    --pad-section: clamp(60px, 8vw, 120px);
}

/* Touch target baseline */
@media (max-width: 1024px) {
    .btn { min-height: 44px; }
    .nav-item, .ep-tab { min-height: 44px; }
    .footer-links a { min-height: 36px; padding: 4px 0; }
}

/* ================ HAMBURGER + MOBILE DRAWER ================ */
.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    z-index: 1001;
}
.nav-toggle span {
    width: 20px;
    height: 2px;
    background: var(--accent-primary);
    border-radius: 1px;
    transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer CTA buttons (visible só dentro do drawer mobile) */
.drawer-cta { display: none; }

/* ================ TABLET (<=1024) ================ */
@media (max-width: 1024px) {
    .container { padding: 0 24px; }

    /* Mobile drawer */
    .nav-toggle { display: inline-flex; }

    /* Hide desktop nav actions — moved into drawer */
    .nav-actions { display: none; }

    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 85%;
        max-width: 360px;
        background: #0a0a0a;
        border-left: 1px solid var(--border-light);
        flex-direction: column;
        padding: 100px 30px 40px;
        gap: 0;
        transform: translateX(100%);
        transition: transform 0.4s var(--transition);
        z-index: 1000;
        box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
        overflow-y: auto;
        padding-bottom: max(40px, env(safe-area-inset-bottom));
    }
    .nav-links.open { transform: translateX(0); }
    .nav-links .nav-item {
        font-size: 1.05rem;
        padding: 16px 0;
        border-bottom: 1px solid var(--border-dim);
        width: 100%;
        color: #fff !important;
        overflow: visible;
    }
    .nav-links .nav-item::before { display: none; }
    .nav-links .nav-item:hover { color: var(--accent-primary) !important; }
    .drawer-cta {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 32px;
        padding-top: 24px;
        border-top: 1px solid var(--border-dim);
    }
    .drawer-cta .btn { justify-content: center; }
    .drawer-login-label {
        font-family: var(--font-mono);
        font-size: 0.7rem;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #666;
        margin-bottom: 2px;
    }
    .drawer-login-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        background: var(--bg-panel);
        border: 1px solid var(--border-dim);
        border-radius: 8px;
        text-decoration: none;
        transition: border-color 0.2s, background 0.2s;
    }
    .drawer-login-item:hover { background: rgba(0,255,157,0.06); border-color: var(--border-light); }
    .drawer-login-item strong { display: block; font-family: var(--font-display); font-size: 0.92rem; color: #fff; margin-bottom: 1px; }
    .drawer-login-item small { display: block; font-family: var(--font-mono); font-size: 0.68rem; color: #666; letter-spacing: 0.3px; }

    /* Lock scroll when drawer open */
    body.nav-open { overflow: hidden; }

    /* Hero */
    .hero { padding: 100px 0 60px; }
    .hero-container { grid-template-columns: 1fr; gap: 40px; }
    .hero-visual { display: block; max-width: 520px; margin: 0 auto; }
    .hero-title { font-size: var(--fs-hero); }

    /* Sections */
    section { padding: var(--pad-section) 0; }
    .features-section, .pricing-section, .cases-section, .flow-section,
    .devcenter-section, .integration-section { padding: var(--pad-section) 0; }

    .section-title { font-size: var(--fs-section); }

    /* Split layouts → stack */
    .split-layout { grid-template-columns: 1fr !important; gap: 40px; }

    /* Pricing → 1 column */
    .pricing-grid { grid-template-columns: 1fr; gap: 24px; max-width: 480px; margin: 0 auto; }
    .price-card.featured { transform: scale(1) !important; }
}

/* ================ MOBILE LARGE (<=768) ================ */
@media (max-width: 768px) {
    .container { padding: 0 18px; }

    .hero-badges { flex-wrap: wrap; }
    .status-text { font-size: 0.65rem; }
    .meta-badge img { height: 26px; }

    .hero-cta-group { flex-wrap: wrap; gap: 12px; }
    .hero-cta-group .btn { width: 100%; justify-content: center; }

    .hero-stats { gap: 20px; flex-wrap: wrap; }
    .stat-separator { display: none; }

    /* Footer grid */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
    .footer-brand { grid-column: 1 / -1; }

    .footer-bar .bar-content { flex-direction: column; gap: 8px; text-align: center; }

    /* Marquee speed up visually */
    .marquee-item { font-size: 1rem; padding: 0 22px; }

    /* Tech cards grid */
    .grid-layout { grid-template-columns: 1fr !important; gap: 20px; }
    .grid-layout > * { grid-column: auto !important; }
    .tech-card.full-width .split-layout { grid-template-columns: 1fr !important; }
    .tech-card.full-width [style*="border-left"] { border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--border-dim); padding-top: 30px !important; margin-top: 10px; }

    /* Use cases carousel */
    .case-card { flex: 0 0 270px; padding: 22px; }
    .cases-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    .cases-nav { align-self: flex-end; }

    /* DevCenter */
    .devcenter-grid { grid-template-columns: 1fr; gap: 50px; }
    .devcenter-visual { max-width: 380px; margin: 0 auto; }
    .devcenter-stats { gap: 20px; }
    .dc-stat-value { font-size: 2rem; }

    /* Endpoint diagram — keep beams active in vertical layout */
    .endpoint-diagram { flex-direction: column; gap: 60px; min-height: auto; padding: 20px 0; }
    .api-gateway { width: 100%; max-width: 320px; }

    /* Instances */
    .instance-rack { max-width: 100%; }

    /* Media cards already 2 col → 1 col */
    .media-grid { grid-template-columns: 1fr; }
    .media-card { flex-direction: column; text-align: center; }

    /* WA fab */
    .wa-fab { width: 52px; height: 52px; bottom: 16px; right: 16px; }
    .wa-fab svg { width: 26px; height: 26px; }
    .wa-fab-tip { display: none; }

    /* Login dropdown — open as full overlay */
    .login-menu { right: -10px; min-width: 240px; }
}

/* ================ MOBILE SMALL (<=480) ================ */
@media (max-width: 480px) {
    .container { padding: 0 14px; }

    .navbar { height: 64px; --header-h: 64px; }
    .logo-mark { width: 32px; height: 32px; }
    .logo-type { font-size: 1.1rem; }
    .version-tag { display: none; }

    .hero { padding: 90px 0 40px; }

    /* Hide terminal panel on tiny screens — too cramped */
    .hero-visual { display: none; }

    .hero-stats { width: 100%; }
    .stat-item { flex: 1 1 30%; min-width: 90px; }
    .stat-value { font-size: 1.6rem; }
    .stat-label { font-size: 0.65rem; }

    .marquee-item { font-size: 0.85rem; padding: 0 16px; }

    /* Pricing tighter */
    .price-card { padding: 28px 22px; }
    .plan-name { font-size: 0.8rem; }
    .amount { font-size: 2.8rem; }

    /* Cases — full width */
    .case-card { flex: 0 0 calc(100vw - 60px); max-width: 320px; }

    /* Footer single col */
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .footer-brand { grid-column: auto; }

    /* Section spacing */
    .section-header { margin-bottom: 40px; }

    /* Legal pages */
    .legal-section { padding: 24px 18px; }
    .legal-nav { flex-direction: column; align-items: stretch; }
    .legal-nav a { text-align: center; }

    /* Endpoints page */
    .ep-tabs { flex-direction: column; }
    .ep-tab { width: 100%; justify-content: center; }
    .ep-item { grid-template-columns: 1fr; gap: 6px; padding: 14px 18px; }
}

/* ================ TINY (<=360) ================ */
@media (max-width: 360px) {
    .container { padding: 0 12px; }
    .nav-actions .btn-secondary { padding: 8px 14px; font-size: 0.75rem; }
    .nav-toggle { width: 40px; height: 40px; }
    .hero-title { font-size: 2rem; }
}

/* ================ Landscape orientation guard ================ */
@media (max-width: 900px) and (orientation: landscape) {
    .hero { padding: 90px 0 50px; min-height: auto; }
}

/* ================ Reduced motion ================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ================ Safe area helpers (iOS notch) ================ */
.navbar { padding-top: env(safe-area-inset-top); }
.wa-fab { bottom: max(24px, env(safe-area-inset-bottom)); }