/* =============================================================
   NovAI Responsive CSS — Mobile First
   
   Breakpoints:
   - Base (0px):    Mobile styles in main.css
   - sm  (480px):   Small phones to phablets
   - md  (768px):   Tablets
   - lg  (1024px):  Desktop
   - xl  (1280px):  Large desktop (container max)
   - 2xl (1440px):  Wide screens
   
   All breakpoints use min-width (mobile-first).
   ============================================================= */

/* ---------------------------------------------------------------
   MOBILE BASE (< 480px) — adjustments for very small screens
   --------------------------------------------------------------- */

/* Container horizontal padding */
.container { padding-inline: var(--space-4); }

/* Reduce hero headline on small screens */
.hero-headline { font-size: var(--text-3xl); }
.hero-sub      { font-size: var(--text-base); }

/* CTA buttons stack on very small screens */
.hero-ctas { flex-direction: column; align-items: stretch; }
.hero-ctas .btn { text-align: center; justify-content: center; }

/* Section titles */
.section-title { font-size: var(--text-2xl); }

/* Mockup badges: hide on tiny screens */
.mockup-badge { display: none; }

/* Features: 1 column */
.features-grid { grid-template-columns: 1fr; gap: var(--space-4); }

/* How it works: vertical */
.how-steps { flex-direction: column; align-items: center; gap: var(--space-8); }
.how-step  { max-width: 100%; text-align: center; }
.step-connector { display: none; }

/* Integrations: 2 columns */
.integrations-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

/* Pricing: 1 column */
.pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }

/* Testimonials: 1 column */
.testimonials-grid { grid-template-columns: 1fr; }

/* CTA form: stack vertically */
.cta-form-fields { flex-direction: column; }

/* Newsletter: stack */
.newsletter-inner  { flex-direction: column; align-items: flex-start; }
.newsletter-fields { flex-direction: column; width: 100%; }
.newsletter-input  { width: 100%; }

/* Footer grid: 2 columns on mobile */
.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.footer-brand { grid-column: 1 / -1; }

/* Footer bottom: stack */
.footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: var(--space-2); }

/* Nav: hide menu, show hamburger */
.nav-menu-wrap {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4);
    z-index: var(--z-nav);
}

.nav-menu-wrap.is-open { display: flex; flex-direction: column; }

.nav-menu { flex-direction: column; gap: var(--space-1); width: 100%; }
.nav-menu li { width: 100%; }
.nav-menu li a { padding: var(--space-3) var(--space-4); display: block; }

.nav-hamburger { display: flex; }
.nav-cta.btn-sm { display: none; } /* Hide CTA in nav on mobile, show in menu */

/* CTA banner */
.cta-banner-title { font-size: var(--text-3xl); }

/* ---------------------------------------------------------------
   SM — 480px and up
   --------------------------------------------------------------- */
@media (min-width: 480px) {

    .container { padding-inline: var(--space-5); }

    .hero-headline { font-size: var(--text-4xl); }

    .hero-ctas { flex-direction: row; align-items: center; justify-content: center; }

    .mockup-badge { display: flex; }

    .section-title { font-size: var(--text-3xl); }

    .features-grid { grid-template-columns: repeat(2, 1fr); }

    .integrations-grid { grid-template-columns: repeat(3, 1fr); }

    .cta-form-fields { flex-direction: row; }
    .newsletter-fields { flex-direction: row; }

    .cta-banner-title { font-size: var(--text-4xl); }

}

/* ---------------------------------------------------------------
   MD — 768px and up (Tablets)
   --------------------------------------------------------------- */
@media (min-width: 768px) {

    .container { padding-inline: var(--space-6); }

    /* Section padding increase */
    .hero-section,
    .trusted-by-section,
    .demo-section,
    .features-section,
    .how-section,
    .integrations-section,
    .pricing-section,
    .testimonials-section,
    .faq-section,
    .cta-banner-section {
        padding-block: var(--section-pad-desktop);
    }

    /* Hero */
    .hero-headline { font-size: var(--text-5xl); }
    .hero-sub      { font-size: var(--text-xl); }

    /* Section titles */
    .section-title { font-size: var(--text-4xl); }

    /* Nav shows menu on md+ */
    .nav-menu-wrap {
        display: flex !important;
        position: static;
        background: transparent;
        border: none;
        padding: 0;
    }

    .nav-menu {
        flex-direction: row;
        width: auto;
        gap: var(--space-1);
    }

    .nav-menu li a { padding: var(--space-2) var(--space-3); }

    .nav-hamburger { display: none; }
    .nav-cta.btn-sm { display: inline-flex; }

    /* Features: 3 columns */
    .features-grid { grid-template-columns: repeat(3, 1fr); }

    /* Integrations: 4 columns */
    .integrations-grid { grid-template-columns: repeat(4, 1fr); }

    /* How it works: horizontal */
    .how-steps { flex-direction: row; align-items: flex-start; gap: var(--space-2); }
    .step-connector { display: block; }

    /* Pricing: 3 columns */
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 100%;
        margin-inline: 0;
    }

    /* Protect the popular card scale on desktop */
    .pricing-card-popular { transform: scale(1.03); }

    /* Testimonials: 2 columns */
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }

    /* Footer: proper grid with full gap */
    .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 3rem; }
    .footer-brand { grid-column: auto; }

    /* Footer bottom: row */
    .footer-bottom-inner { flex-direction: row; align-items: center; }

    /* Newsletter */
    .newsletter-inner { flex-wrap: nowrap; }

    /* CTA banner */
    .cta-banner-title { font-size: var(--text-5xl); }

}

/* ---------------------------------------------------------------
   LG — 1024px and up (Desktop)
   --------------------------------------------------------------- */
@media (min-width: 1024px) {

    .container { padding-inline: var(--space-8); }

    /* Hero */
    .hero-headline { font-size: var(--text-6xl); }
    .hero-headline-break { display: block; }

    /* Section titles */
    .section-title { font-size: var(--text-4xl); }

    /* Nav */
    .nav-menu li a { padding: var(--space-2) var(--space-4); }

    /* Integrations: 6 columns */
    .integrations-grid { grid-template-columns: repeat(6, 1fr); }

    /* Testimonials: 3 columns */
    .testimonials-grid { grid-template-columns: repeat(3, 1fr); }

}

/* ---------------------------------------------------------------
   XL — 1280px and up (Large Desktop)
   --------------------------------------------------------------- */
@media (min-width: 1280px) {

    .container { padding-inline: var(--space-10); }

    /* Hero */
    .hero-headline { font-size: var(--text-7xl); }

    /* Section titles */
    .section-title { font-size: var(--text-5xl); }

    /* Tighter nav link spacing for wider screens */
    .nav-menu { gap: var(--space-2); }

    /* Footer wider padding */
    .footer-main { padding: var(--space-20) 0 var(--space-16); }

}

/* ---------------------------------------------------------------
   2XL — 1440px and up (Wide Screens)
   --------------------------------------------------------------- */
@media (min-width: 1440px) {

    .container {
        max-width: var(--container-wide);
        padding-inline: var(--space-12);
    }

}

/* ---------------------------------------------------------------
   Print styles
   --------------------------------------------------------------- */
@media print {

    .site-header,
    .site-footer,
    .hero-bg,
    .cta-orb,
    .hero-orb,
    .trusted-by-section,
    .hero-scroll-hint {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    a { color: black; text-decoration: underline; }

    .container { max-width: 100%; padding: 0; }

}