/* ============================================================
   TECHBOX — responsive.css
   Breakpoints: 1200, 1024, 860, 640, 430, 375
   ============================================================ */

/* ---------- Large desktop (>1440) ---------- */
@media (min-width: 1441px) {
    :root { --container: 1320px; }
    body { font-size: 17px; }
}

/* ---------- 1200px ---------- */
@media (max-width: 1200px) {
    .nav a { padding: 10px 11px; font-size: 0.78rem; }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 32px; }
    .industry-grid { grid-template-columns: repeat(3, 1fr); }
    .related-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 1024px / tablet landscape ---------- */
@media (max-width: 1024px) {
    .nav, .header-cta .btn-ghost { display: none; }
    .hamburger { display: block; }
    .header-cta .btn-primary { display: none; }

    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .industry-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .related-grid { grid-template-columns: repeat(2, 1fr); }
    .service-features { grid-template-columns: repeat(2, 1fr); }
    .about-stats { grid-template-columns: repeat(2, 1fr); }
    .about-stat:nth-child(2) { border-right: 0; }
    .about-stat:nth-child(1), .about-stat:nth-child(2) { border-bottom: 1px solid var(--line); }
    .value-grid { grid-template-columns: repeat(2, 1fr); }

    .solution { grid-template-columns: 1fr; gap: 36px; }
    .solution.reverse > .solution-visual { order: 0; }
    .solution-visual { max-width: 560px; }

    .feature-split { grid-template-columns: 1fr; gap: 40px; }
    .feature-visual { max-width: 600px; }

    .case-study { grid-template-columns: 1fr; }
    .case-meta { position: static; }

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

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

    .timeline {
        grid-template-columns: 1fr;
        gap: 8px;
        padding-left: 24px;
    }
    .timeline::before {
        top: 0; bottom: 0; left: 20px; right: auto;
        width: 1px; height: auto;
        background: linear-gradient(180deg, transparent, var(--line-strong) 6%, var(--line-strong) 94%, transparent);
    }
    .tl-step { padding-top: 0; padding-left: 50px; padding-bottom: 28px; }
    .tl-step .tl-num {
        top: 0; left: -34px;
        box-shadow: 0 0 0 6px var(--black);
    }

    .hero-corner { display: none; }
}

/* ---------- 860px / tablet portrait ---------- */
@media (max-width: 860px) {
    :root { --section-y: clamp(60px, 10vw, 90px); }

    .selector-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-item:nth-child(odd) { border-right: 1px solid var(--line); }
    .trust-item:nth-child(2n) { border-right: 0; }
    .trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

    .grid-2 { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .check-grid { grid-template-columns: 1fr; }
    .service-list { grid-template-columns: 1fr; }
    .service-list .sl-item { border-right: 0; }
    .service-list .sl-item:last-child { border-bottom: 0; }

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

    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-brand { grid-column: auto; }

    .footer-bottom { flex-direction: column; text-align: center; }
}

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

    body { font-size: 15px; }
    h1 { font-size: clamp(2rem, 9vw, 3rem); }
    h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }

    .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .industry-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .related-grid { grid-template-columns: 1fr; }
    .service-features { grid-template-columns: 1fr; }
    .about-stats { grid-template-columns: 1fr; }
    .about-stat { border-right: 0; border-bottom: 1px solid var(--line); }
    .about-stat:last-child { border-bottom: 0; }
    .value-grid { grid-template-columns: 1fr; }
    .proj-grid { grid-template-columns: 1fr; }
    .trust-grid { grid-template-columns: 1fr; }
    .trust-item { border-right: 0; border-bottom: 1px solid var(--line); }
    .trust-item:last-child { border-bottom: 0; }

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

    .hero { padding-top: 110px; min-height: auto; padding-bottom: 60px; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { width: 100%; }
    .hero-meta { font-size: 0.66rem; gap: 8px; }
    .hero-scroll { display: none; }

    .cta-buttons { flex-direction: column; }
    .cta-buttons .btn { width: 100%; }

    .form-actions { flex-direction: column-reverse; align-items: stretch; }
    .form-actions .btn { width: 100%; }

    .footer-grid { gap: 28px; }

    .mobile-cta { display: flex; }
    body { padding-bottom: 72px; }

    .solution-cta .btn, .solution-cta { width: 100%; }
    .solution-cta .btn { display: flex; }

    .case-meta dl { grid-template-columns: 1fr; }

    .proj-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
    .proj-filter { flex-shrink: 0; }

    .logo-text small { display: none; }
}

/* ---------- 430px small mobile ---------- */
@media (max-width: 430px) {
    :root { --gutter: 16px; }
    .logo { font-size: 0.92rem; letter-spacing: 0.18em; }
    .logo-mark { width: 30px; height: 30px; }
    .btn { padding: 13px 18px; font-size: 0.74rem; letter-spacing: 0.1em; }
    .btn-lg { padding: 16px 22px; }
    .hero .tagline-sub { font-size: 0.74rem; gap: 6px; }
    .hero .tagline-sub span.dot { display: none; }
    .hero .tagline-sub span:not(.dot)::before {
        content: ""; display: inline-block; width: 3px; height: 3px;
        background: var(--electric); border-radius: 50%;
        margin-right: 8px; vertical-align: middle;
    }
    .hero .tagline-sub span:not(.dot):first-child::before { display: none; }
    .form-section { padding: 20px; }
    .section-head { margin-bottom: 32px; }
    .eyebrow { font-size: 0.66rem; letter-spacing: 0.22em; }
}

/* ---------- 375px ---------- */
@media (max-width: 375px) {
    .hero h1 { font-size: 1.95rem; }
    .hero .hero-desc { font-size: 0.95rem; }
    .eco-node { width: 84px; }
    .eco-node .eco-label { font-size: 0.62rem; }
}

/* ---------- 320px ---------- */
@media (max-width: 320px) {
    :root { --gutter: 14px; }
    .logo-text { display: none; }
    .hero h1 { font-size: 1.7rem; }
}

/* ---------- Print ---------- */
@media print {
    .site-header, .mobile-cta, .hero-scroll, .mobile-menu { display: none !important; }
    body { background: white; color: black; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .eco-node .eco-dot::after,
    .hero-scroll::after,
    .map-pin .pin-dot,
    .ed-head .ed-live::before { animation: none; }
}