/* ============================================
   DEVELOPER THEME - Responsive
   Mobile-first approach

   Breakpoints:
   - sm:  >= 480px  (large phones)
   - md:  >= 768px  (tablets)
   - lg:  >= 1024px (desktop)
   - xl:  >= 1180px (full boxed)
   ============================================ */

/* ============================================
   TABLET & BELOW: < 1024px
   ============================================ */
@media (max-width: 1023px) {

    /* --- Variables Override --- */
    :root {
        --container-pad: 1.25rem;
        --section-py: var(--sp-16);
    }

    /* --- Typography Scale Down --- */
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }

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

    /* --- Header --- */
    .header-topbar { display: none; }
    .main-nav { display: none; }
    .mobile-menu-toggle { display: flex; }
    .mobile-nav { display: block; }

    /* --- Hero --- */
    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--sp-8);
    }

    .hero-title { font-size: var(--text-3xl); }
    .hero-desc { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }

    .hero-stats {
        justify-content: center;
        gap: var(--sp-8);
    }

    .hero-image {
        max-width: 420px;
        margin: 0 auto;
        order: -1;
    }

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

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

    .pricing-card.featured {
        order: -1;
    }

    /* --- Process --- */
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-6);
    }

    .process-grid::before { display: none; }

    /* --- Reasons --- */
    .reasons-grid {
        grid-template-columns: 1fr;
    }

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

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

    /* --- Single Post --- */
    .single-post-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
    }

    /* --- Archive --- */
    .archive-layout {
        grid-template-columns: 1fr;
    }

    /* --- Contact --- */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-8);
    }

    /* --- Footer --- */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-6);
    }

    .footer-about {
        grid-column: 1 / -1;
        padding-right: 0;
    }
}

/* ============================================
   MOBILE: < 768px
   ============================================ */
@media (max-width: 767px) {

    :root {
        --container-pad: 1rem;
        --section-py: var(--sp-12);
    }

    /* --- Typography --- */
    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }

    .section-title { font-size: var(--text-xl); }
    .section-desc { font-size: var(--text-sm); }
    .section-header { margin-bottom: var(--sp-10); }

    /* --- Buttons --- */
    .btn {
        padding: 0.625rem 1.5rem;
        font-size: var(--text-xs);
    }

    .btn-lg {
        padding: 0.75rem 1.75rem;
        font-size: var(--text-sm);
    }

    /* --- Header --- */
    .header-main {
        padding: var(--sp-3) 0;
    }

    .site-logo img {
        height: 32px;
    }

    /* --- Hero --- */
    .hero-section {
        padding: var(--sp-12) 0;
    }

    .hero-title {
        font-size: var(--text-2xl);
        letter-spacing: -0.01em;
    }

    .hero-desc {
        font-size: var(--text-sm);
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .hero-actions .btn {
        width: 100%;
        max-width: 300px;
    }

    .hero-stats {
        flex-direction: column;
        gap: var(--sp-4);
        align-items: center;
    }

    .hero-stat {
        text-align: center;
    }

    .hero-stat-number {
        font-size: var(--text-2xl);
    }

    .hero-image {
        max-width: 100%;
    }

    /* --- Services --- */
    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
    }

    .service-card {
        padding: var(--sp-5);
    }

    /* --- Pricing --- */
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin-left: auto;
        margin-right: auto;
    }

    .pricing-card {
        padding: var(--sp-6);
    }

    /* --- Process --- */
    .process-grid {
        grid-template-columns: 1fr;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        gap: var(--sp-4);
    }

    /* --- Reasons --- */
    .reason-card {
        padding: var(--sp-5);
        gap: var(--sp-3);
    }

    /* --- Customers --- */
    .customers-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
    }

    .customer-card {
        padding: var(--sp-5);
    }

    /* --- FAQ --- */
    .faq-question {
        padding: var(--sp-4) var(--sp-4);
        font-size: var(--text-sm);
    }

    .faq-answer-inner {
        padding: 0 var(--sp-4) var(--sp-4);
        font-size: var(--text-sm);
    }

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

    .cta-actions {
        flex-direction: column;
        align-items: center;
    }

    .cta-actions .btn {
        width: 100%;
        max-width: 300px;
    }

    /* --- Blog --- */
    .blog-grid {
        grid-template-columns: 1fr;
    }

    /* --- Single Post --- */
    .post-content {
        padding: var(--sp-5);
    }

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

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

    .post-meta {
        flex-wrap: wrap;
        gap: var(--sp-3);
    }

    /* --- Archive --- */
    .archive-grid {
        grid-template-columns: 1fr;
    }

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

    /* --- Contact --- */
    .contact-form {
        padding: var(--sp-5);
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    /* --- Footer --- */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }

    .footer-about {
        grid-column: auto;
    }

    .footer-main {
        padding: var(--sp-8) 0;
    }

    /* --- Page --- */
    .page-content {
        padding: var(--sp-5);
    }

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

    /* --- Floating Contact --- */
    .floating-contact {
        bottom: var(--sp-4);
        right: var(--sp-4);
    }

    .floating-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .floating-btns {
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        transition: opacity 0.25s var(--ease-out),
                    visibility 0.25s var(--ease-out),
                    transform 0.25s var(--ease-out);
        pointer-events: none;
    }

    .floating-contact.expanded .floating-btns {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .floating-btn {
        height: 46px;
        max-width: 46px;
        padding: 0;
    }

    .floating-btn__icon {
        width: 46px;
        height: 46px;
    }

    .floating-btn__icon svg {
        width: 20px;
        height: 20px;
    }

    .floating-btn:hover,
    .floating-btn:focus-visible {
        max-width: 46px;
        padding-right: 0;
        transform: scale(1.08);
    }

    .floating-btn__label {
        display: none;
    }

    .floating-btn--phone {
        animation: none;
    }

    .floating-back-to-top {
        width: 34px;
        height: 34px;
    }

    /* Form popup mobile */
    .floating-form-popup {
        right: var(--sp-4);
        bottom: calc(var(--sp-4) + 56px);
        width: calc(100vw - var(--sp-8));
        max-height: calc(100vh - 120px);
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
    }

    /* --- Mobile Nav --- */
    .mobile-nav {
        width: 260px;
        padding: var(--sp-12) var(--sp-5) var(--sp-5);
    }
}

/* ============================================
   SMALL MOBILE: < 480px
   ============================================ */
@media (max-width: 479px) {

    :root {
        --container-pad: 0.875rem;
    }

    .hero-title {
        font-size: 1.625rem;
    }

    .hero-badge {
        font-size: 0.6875rem;
    }

    .pricing-grid {
        max-width: 100%;
    }

    .process-grid {
        max-width: 100%;
    }

    .blog-card-body {
        padding: var(--sp-4);
    }

    .service-card {
        padding: var(--sp-4);
    }
}

/* ============================================
   LARGE DESKTOP: >= 1180px
   ============================================ */
@media (min-width: 1180px) {
    .boxed-wrapper {
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .animate-ready {
        opacity: 1;
        transform: none;
    }
}

/* ============================================
   PRINT
   ============================================ */
@media print {
    .site-header,
    .mobile-nav,
    .mobile-nav-overlay,
    .floating-buttons,
    .cta-section,
    .site-footer {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }

    .boxed-wrapper {
        box-shadow: none;
        max-width: 100%;
    }

    .post-body a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}