/* ========================================
   NOW2CODE — Responsive Styles (Mobile-First)
   DARK PREMIUM THEME (Stripe / Linear vibe)
   ======================================== */

/* === Mobile Defaults (< 640px) === */

/* Navbar: show hamburger, hide nav + CTA */
.navbar__nav,
.navbar__cta {
    display: none;
}

.navbar__hamburger {
    display: flex;
}

/* Hero */
.hero__actions {
    flex-direction: column;
    width: 100%;
}

.hero__actions .btn {
    width: 100%;
    justify-content: center;
}

.hero__metrics {
    gap: var(--space-6);
    flex-wrap: wrap;
}

.hero__float-badge {
    display: none;
}

.hero__orb--1 {
    width: 300px;
    height: 300px;
}

.hero__orb--2 {
    width: 250px;
    height: 250px;
}

.hero__orb--3 {
    width: 200px;
    height: 200px;
}

/* Trusted logos */
.trusted__logos {
    gap: var(--space-6);
}

.trusted__logos img {
    width: 28px;
    height: 28px;
}

/* Services */
.services__grid {
    grid-template-columns: 1fr;
}

/* Why Us */
.why-us__grid {
    grid-template-columns: 1fr;
}

/* Work */
.work__grid {
    grid-template-columns: 1fr;
}

/* Process */
.process__grid {
    grid-template-columns: 1fr;
}

.process-step {
    padding: var(--space-6);
}

/* Testimonial */
.testimonial {
    padding: var(--space-6);
}

.testimonial__text {
    font-size: var(--text-body);
}

/* CTA */
.cta-section__contact-info {
    flex-direction: column;
    gap: var(--space-2);
}

.cta-section__divider {
    display: none;
}

/* Footer */
.footer__grid {
    grid-template-columns: 1fr;
}

.footer__bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
}

.footer__legal {
    justify-content: center;
}

/* Section headers */
.section-header--split {
    flex-direction: column;
    align-items: flex-start;
}


/* === Small (>= 640px) === */
@media (min-width: 640px) {
    .hero__actions {
        flex-direction: row;
        width: auto;
    }

    .hero__actions .btn {
        width: auto;
    }

    .hero__metrics {
        gap: var(--space-10);
        flex-wrap: nowrap;
    }

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

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

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

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

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


/* === Medium (>= 768px) === */
@media (min-width: 768px) {
    .mobile-menu__link {
        font-size: var(--text-h1);
    }

    .hero__float-badge {
        display: flex;
    }

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

    .testimonial__text {
        font-size: var(--text-h4);
    }

    .trusted__logos img {
        width: 36px;
        height: 36px;
    }
}


/* === Large (>= 1024px) === */
@media (min-width: 1024px) {
    /* Show desktop nav, hide hamburger */
    .navbar__nav,
    .navbar__cta {
        display: flex;
    }

    .navbar__hamburger {
        display: none;
    }

    /* Hero: side-by-side */
    .hero__layout {
        grid-template-columns: 1fr 1fr;
    }

    /* About: side-by-side */
    .about__grid {
        grid-template-columns: 1fr 1fr;
    }

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

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

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

    /* CTA: side-by-side */
    .cta-section__grid {
        grid-template-columns: 1fr 1fr;
    }

    .cta-section__contact-info {
        flex-direction: row;
    }

    .cta-section__divider {
        display: inline;
    }

    /* Footer: 4 columns */
    .footer__grid {
        grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    }

    .footer__bottom {
        flex-direction: row;
        text-align: left;
    }
}


/* === XL (>= 1280px) === */
@media (min-width: 1280px) {
    .trusted__logos {
        gap: var(--space-12);
    }

    .trusted__logos img {
        width: 40px;
        height: 40px;
    }
}