/* ============================================================
   AQARI — Responsive
   ============================================================ */

@media (max-width: 1100px) {
    .hero-3d { width: 260px; height: 260px; inset-inline-end: 2%; opacity: 0.75; }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer-social { grid-column: 1 / -1; }
    .hero-copy { max-width: 520px; }
}

@media (max-width: 960px) {
    :root { --gutter: 24px; }

    .primary-nav, .nav-right .lang-switch, .btn-nav { display: none; }
    .menu-toggle { display: block; }
    .mobile-menu { display: block; }

    .site-header { color: var(--c-cream); }

    .intro-grid,
    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

    .process-track {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .process-line {
        top: 0; bottom: 0;
        inset-inline-start: 5px;
        inset-inline-end: auto;
        width: 1px;
        height: auto;
    }
    .process-line::after {
        transform: scaleY(0);
        transform-origin: top;
    }
    .process-track.is-inview .process-line::after { transform: scaleY(1); }
    .process-step { padding-top: 0; padding-inline-start: 34px; }
    .process-dot { top: 6px; }

    .hero-3d { display: none; }

    .props-grid { grid-template-columns: 1fr; gap: 40px; }

    .service-block {
        grid-template-columns: 40px 40px 1fr 40px;
        gap: 18px;
        padding: 26px 0;
    }
    .service-block:hover { padding-inline: 10px; }
}

@media (max-width: 640px) {
    :root { --gutter: 20px; }

    .hero { min-height: 92vh; }
    .hero-content { padding-top: 130px; padding-bottom: 90px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { justify-content: center; }
    .hero-mark { display: none; }

    .why-grid { grid-template-columns: 1fr; }

    .contact-form { padding: 30px 22px; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .contact-channels { grid-template-columns: 1fr; gap: 20px; }

    .footer-grid { grid-template-columns: 1fr; gap: 36px; }

    .section { padding: 70px 0; }

    .service-block { grid-template-columns: 34px 1fr 34px; gap: 12px; }
    .service-icon { display: none; }

    .prop-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 420px) {
    .hero-title { font-size: 2rem; }
    .display-1 { font-size: 1.6rem; }
    .display-2 { font-size: 1.4rem; }
}

/* ============================================================
   HERO — Responsive
   ============================================================ */

@media (max-width: 1100px) {
    .hero-copy { max-width: 520px; }
}

@media (max-width: 900px) {
    /* Mobile composition: 3D behind, text centered above */
    .hero-3d-hero {
        min-height: 100svh;
        align-items: flex-end;
        padding-bottom: 60px;
    }

    .hero-canvas-wrap {
        inset-inline-start: 0 !important;
        inset: 0;
    }

    #heroCanvas {
        transform: translateY(-8%);
        opacity: 0.85;
    }

    .hero-container {
        padding-top: 120px;
        padding-bottom: 40px;
    }

    .hero-copy {
        max-width: 100%;
        text-align: center;
    }

    .hero-eyebrow {
        justify-content: center;
    }

    .hero-title {
        font-size: clamp(2.2rem, 9vw, 3.4rem);
    }

    .hero-sub {
        margin-inline: auto;
        font-size: 1rem;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-meta { display: none; }

    .hero-scroll {
        inset-inline-start: 50%;
        transform: translateX(-50%);
        bottom: 22px;
    }
    .hero-scroll-label { display: none; }
}

@media (max-width: 520px) {
    .hero-title { font-size: 2.1rem; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn-accent,
    .hero-actions .btn-outline { justify-content: center; width: 100%; }
    #heroCanvas { opacity: 0.75; }
}

/* Reduced motion on mobile: keep scene but freeze */
@media (prefers-reduced-motion: reduce) {
    #heroCanvas { transform: none !important; }
}