/* ===================================================================
   A3 CORP — RESPONSIVE STYLESHEET
   All breakpoints: 1400 · 1200 · 1024 · 768 · 576 · 375
   =================================================================== */

/* ===== LARGE DESKTOP (≥ 1400px) ===== */
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
    .hero-title { font-size: 7rem; }
}

/* ===== MEDIUM DESKTOP (1200px – 1399px) ===== */
@media (max-width: 1399px) and (min-width: 1200px) {
    .hero-title { font-size: 5.5rem; }
}

/* ===== SMALL DESKTOP / LARGE TABLET (1024px – 1199px) ===== */
@media (max-width: 1199px) {
    .services-grid  { grid-template-columns: repeat(2, 1fr); }
    .products-grid  { grid-template-columns: repeat(2, 1fr); }
    .process-steps  { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .step-connector { display: none; }
    .client-feature { grid-template-columns: 240px 1fr; gap: 32px; }
    .why-visual     { width: 320px; height: 320px; }
    .mv-grid        { grid-template-columns: repeat(3, 1fr); }
}

/* ===================================================================
   MOBILE NAV — active from 1023px and below
   =================================================================== */
@media (max-width: 1023px) {
    :root { --nav-height: 64px; }

    /* Always show solid header background */
    .a3-header {
        background: rgba(10,10,10,0.97) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid #1E1E1E !important;
    }

    /* Show hamburger */
    .hamburger { display: flex !important; }

    /* Mobile nav drawer — slides down from top */
    .nav-links {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: #0D0D0D;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 16px 20px 40px;
        gap: 4px;
        border-top: 1px solid #1E1E1E;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 998;
        /* Slide in from right — cleaner on mobile */
    }

    .nav-links.active {
        transform: translateX(0);
        height:500px;
    }

    /* Show overlay */
    .nav-overlay { display: block; }

    /* Each nav item */
    .nav-links li { width: 100%; }

    .nav-item {
        display: block;
        padding: 16px 20px;
        font-size: 1.05rem;
        font-weight: 600;
        color: #C0C0C0;
        border-radius: 10px;
        letter-spacing: 0.02em;
        border-bottom: 1px solid transparent;
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .nav-item:hover,
    .nav-item.active {
        background: rgba(139,92,246,0.08);
        color: #fff;
        border-bottom-color: rgba(139,92,246,0.15);
    }

    /* CTA button in mobile menu */
    .nav-cta-li { margin-top: 12px; }

    .nav-cta {
        display: block;
        text-align: center;
        padding: 16px 24px;
        font-size: 1rem;
        border-radius: 12px;
        width: 100%;
    }

    /* Sections */
    .about-intro-section,
    .services-section,
    .why-section,
    .process-section,
    .about-who-section,
    .mv-section,
    .pillars-section,
    .founder-section,
    .team-section,
    .services-detail-section,
    .products-section,
    .contact-section { padding: 80px 0; }

    .cta-section { padding: 80px 0; }

    /* Hero */
    .hero-content { padding-top: calc(var(--nav-height) + 56px); }
    .hero-title   { font-size: clamp(2.6rem, 6vw, 4rem); }
    .hero-stats   { gap: 0; padding: 20px 24px; flex-wrap: wrap; }
    .stat-item    { padding: 0 16px; }

    /* About cards */
    .about-cards-grid { grid-template-columns: repeat(2, 1fr); }

    /* MV */
    .mv-grid { grid-template-columns: 1fr; gap: 16px; }

    /* Grids */
    .services-grid  { grid-template-columns: repeat(2, 1fr); }
    .products-grid  { grid-template-columns: repeat(2, 1fr); }
    .process-steps  { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .client-feature { grid-template-columns: 1fr; gap: 28px; padding: 32px; text-align: center; }
    .client-feature-logo { max-width: 300px; margin: 0 auto; }
    .client-tags { justify-content: center; }

    /* Services detail */
    .service-detail-row { padding: 56px 0; }
    .service-visual-box { height: 220px; }
    .service-big-icon   { font-size: 4.5rem; }

    /* Why visual */
    .why-visual { width: 280px; height: 280px; }

    /* Contact */
    .contact-form-card { padding: 36px 28px; }

    /* Founder */
    .founder-img-wrap { width: 260px; height: 340px; }
}

/* ===================================================================
   TABLET (768px – 1023px)
   =================================================================== */
@media (max-width: 1023px) and (min-width: 768px) {
    .section-title { font-size: 2.2rem; }

    /* 2-col stats */
    .about-stats-visual { grid-template-columns: repeat(2, 1fr); }

    /* Process: 2 cols */
    .process-steps { grid-template-columns: repeat(2, 1fr); }

    /* Pillars: 3 cols */
    .row > [class*='col-md-4'] { flex: 0 0 auto; width: 33.333%; }
}

/* ===================================================================
   LARGE MOBILE (576px – 767px)
   =================================================================== */
@media (max-width: 767px) {
    .container { padding-left: 20px; padding-right: 20px; }

    /* Sections padding */
    .about-intro-section,
    .services-section,
    .why-section,
    .process-section,
    .cta-section,
    .about-who-section,
    .mv-section,
    .pillars-section,
    .founder-section,
    .team-section,
    .services-detail-section,
    .products-section,
    .contact-section { padding: 70px 0; }

    .footer-main { padding: 56px 0 36px; }

    /* Typography */
    .section-title    { font-size: 1.9rem; }
    .section-subtitle { font-size: 0.9rem; }
    .cta-title        { font-size: 1.9rem; }
    .inner-hero-title { font-size: 2.3rem; }

    /* Hero */
    .hero-title    { font-size: 2.5rem; }
    .hero-subtitle { font-size: 0.95rem; }
    .hero-actions  { flex-direction: column; align-items: center; gap: 12px; }

    .hero-actions .btn-gold,
    .hero-actions .btn-outline-silver {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .hero-stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        padding: 20px 16px;
    }
    .stat-divider { display: none; }
    .stat-item    { padding: 0 10px; min-width: 70px; }
    .stat-num     { font-size: 1.8rem; }

    /* CTA buttons */
    .cta-actions { flex-direction: column; align-items: center; gap: 12px; }
    .cta-actions .btn-gold,
    .cta-actions .btn-outline-silver {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    /* Grids → single column */
    .products-grid      { grid-template-columns: 1fr; }
    .process-steps      { grid-template-columns: 1fr; }
    .about-stats-visual { grid-template-columns: repeat(2, 1fr); }
    .mv-grid            { grid-template-columns: 1fr; }

    /* ---------------------------------------------------------------
       Card rows → horizontal swipe (mobile only, keeps pages short).
       Bleeds past the 20px .container padding so cards reach the edge.
       --------------------------------------------------------------- */
    .about-cards-grid,
    .services-grid,
    .why-list,
    .clients-logos {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        /* keeps a fast fling from skipping past a card, and stops the
           swipe from bubbling out to the page / browser back-gesture */
        overscroll-behavior-x: contain;
        margin-left: -20px;
        margin-right: -20px;
        /* Side padding is what centres a snapped card: with cards at
           flex-basis 100% of the content box, exactly this much of the
           neighbouring card peeks on each side. Vertical padding keeps
           the active card's glow from being clipped by the overflow. */
        padding: 20px 12%;
        /* buttons are the affordance — no scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .about-cards-grid::-webkit-scrollbar,
    .services-grid::-webkit-scrollbar,
    .why-list::-webkit-scrollbar,
    .clients-logos::-webkit-scrollbar { display: none; }

    .about-cards-grid > .about-card,
    .services-grid   > .service-card,
    .why-list        > .why-item,
    .clients-logos   > .client-logo-tile {
        flex: 0 0 100%;
        scroll-snap-align: center;
    }

    .swipe-nav { display: flex; }

    /* --- the card snapped into the centre is marked by colour only --- */
    .about-cards-grid > .about-card,
    .services-grid   > .service-card,
    .why-list        > .why-item,
    .clients-logos   > .client-logo-tile {
        position: relative;
        scroll-snap-stop: always;
        /* no lift, and it also cancels the AOS slide-up + 3D-tilt inline
           transform, both of which the scroller would clip */
        transform: none !important;
        transition: box-shadow 0.5s ease, border-color 0.45s ease;
    }

    .about-cards-grid > .about-card.swipe-active,
    .services-grid   > .service-card.swipe-active,
    .why-list        > .why-item.swipe-active,
    .clients-logos   > .client-logo-tile.swipe-active {
        border-color: transparent;
        box-shadow: 0 0 24px rgba(139,92,246,0.16);
    }

    /* gradient wash on the active card, faded in via a pseudo so it
       animates (background-image itself can't be transitioned) */
    .about-cards-grid > .about-card::before,
    .why-list        > .why-item::before,
    .clients-logos   > .client-logo-tile::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
    }

    .about-cards-grid > .about-card::before,
    .services-grid   > .service-card::before,
    .why-list        > .why-item::before,
    .clients-logos   > .client-logo-tile::before {
        background: linear-gradient(145deg,
            rgba(139,92,246,0.22) 0%,
            rgba(201,168,76,0.10) 48%,
            transparent 88%);
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    .about-cards-grid > .about-card.swipe-active::before,
    .services-grid   > .service-card.swipe-active::before,
    .why-list        > .why-item.swipe-active::before,
    .clients-logos   > .client-logo-tile.swipe-active::before { opacity: 1; }

    /* keep card content above the wash */
    .about-cards-grid > .about-card > *,
    .why-list        > .why-item > *,
    .clients-logos   > .client-logo-tile > * { position: relative; z-index: 1; }

    /* gradient border, drawn as a masked 1px ring so the card bg stays flat.
       Rendered on every card at opacity 0 so it can fade instead of snap. */
    .about-cards-grid > .about-card::after,
    .services-grid   > .service-card::after,
    .why-list        > .why-item::after,
    .clients-logos   > .client-logo-tile::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(135deg,
            var(--gold) 0%, var(--gold-light) 22%,
            var(--violet) 58%, var(--gold) 100%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                mask-composite: exclude;
        pointer-events: none;
        z-index: 3;
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .about-cards-grid > .about-card.swipe-active::after,
    .services-grid   > .service-card.swipe-active::after,
    .why-list        > .why-item.swipe-active::after,
    .clients-logos   > .client-logo-tile.swipe-active::after { opacity: 1; }

    /* light up the card's own accents, same as the desktop hover state */
    .about-cards-grid > .about-card .about-card-icon,
    .why-list > .why-item .why-icon { transition: var(--transition); }

    /* a full-width tile wants a bit more height, and the active logo
       drops its grayscale the way hover does on desktop */
    .clients-logos > .client-logo-tile { height: 150px; }
    .clients-logos > .client-logo-tile.swipe-active img { filter: grayscale(0%); opacity: 1; }

    .services-grid > .service-card.swipe-active .service-icon,
    .about-cards-grid > .about-card.swipe-active .about-card-icon,
    .why-list > .why-item.swipe-active .why-icon {
        background: rgba(139,92,246,0.25);
        border-color: rgba(139,92,246,0.5);
        box-shadow: 0 0 24px rgba(139,92,246,0.35);
    }

    /* keep the row heights even while swiping */
    .why-list > .why-item { align-items: flex-start; }

    /* the grid was the top spacer on desktop — restore it on the scroller */
    .services-grid { margin-top: 40px; }

    /* Why visual — hide on mobile */
    .why-visual { display: none; }

    /* Process */
    .process-step { padding: 28px 20px; }

    /* Service detail */
    .service-detail-row { padding: 40px 0; }
    .service-big-icon   { font-size: 3.5rem; }
    .service-visual-box { height: 180px; }

    /* Contact */
    .contact-form-card { padding: 28px 20px; }
    .contact-info-card { padding: 28px 20px; }

    /* Footer */
    .footer-bottom-inner { flex-direction: column; align-items: center; text-align: center; gap: 10px; }

    /* Founder */
    .founder-section { padding: 70px 0; }
    .founder-img-wrap { width: 220px; height: 290px; margin-bottom: 16px; }
    .founder-detail-name { font-size: 1.8rem; }
    .founder-quote p { font-size: 0.95rem; }

    /* Products */
    .products-grid { grid-template-columns: 1fr; }
    .product-card  { padding: 28px 24px; }

    /* Map */
    .map-container iframe { height: 260px; }
}

/* ===================================================================
   MOBILE (320px – 575px)
   =================================================================== */
@media (max-width: 575px) {
    :root { --nav-height: 60px; }

    .a3-nav { padding: 0 16px; }
    .a3-logo { font-size: 1.45rem; }

    /* Typography */
    .hero-title       { font-size: 2.1rem; }
    .hero-badge       { font-size: 0.65rem; padding: 6px 12px; }
    .section-tag      { font-size: 0.65rem; padding: 5px 12px; }
    .section-title    { font-size: 1.75rem; }
    .inner-hero-title { font-size: 1.9rem; }
    .cta-title        { font-size: 1.75rem; }

    /* Hero stats */
    .hero-stats   { padding: 18px 12px; gap: 16px; }
    .stat-num     { font-size: 1.7rem; }
    .stat-label   { font-size: 0.72rem; }

    /* About */
    .about-cards-grid,
    .services-grid,
    .why-list,
    .clients-logos { padding-left: 13%; padding-right: 13%; }
    .about-stats-visual { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .stat-box           { padding: 22px 16px; }
    .stat-big           { font-size: 2.3rem; }

    /* Clients */
    .clients-section { padding: 80px 0; }
    .client-feature { padding: 24px 18px; }
    .client-feature-body h3 { font-size: 1.45rem; }
    .client-logo-tile { height: 130px; padding: 16px; }

    /* Pillar cards */
    .pillar-card  { padding: 28px 20px; }
    .pillar-letter { font-size: 3.8rem; }

    /* Contact */
    .contact-form-card { padding: 22px 16px; }
    .contact-info-card { padding: 22px 16px; }

    /* Buttons */
    .btn-gold,
    .btn-outline-gold,
    .btn-outline-silver { padding: 12px 22px; font-size: 0.8rem; }

    /* Marquee */
    .marquee-track { gap: 18px; }

    /* Process */
    .process-step { padding: 22px 14px; }
    .step-icon    { width: 54px; height: 54px; font-size: 1.3rem; }
    .step-num     { font-size: 0.65rem; }

    /* Service / product cards */
    .service-card-inner { padding: 24px 18px; }
    .product-card       { padding: 24px 18px; }

    /* Footer */
    .footer-main      { padding: 48px 0 28px; }
    .footer-brand .footer-logo { font-size: 1.6rem; }
    .footer-heading   { font-size: 0.7rem; }
    .footer-links a,
    .footer-contact-list li { font-size: 0.82rem; }

    /* Founder */
    .founder-img-wrap { width: 190px; height: 250px; }
    .founder-quote    { padding: 18px 16px; }
    .founder-quote-icon { font-size: 2rem; }
    .founder-badges   { gap: 6px; }
    .founder-badge    { font-size: 0.72rem; padding: 5px 12px; }

    /* Map */
    .map-container iframe { height: 220px; }
}

/* ===================================================================
   VERY SMALL (< 375px)
   =================================================================== */
@media (max-width: 374px) {
    .hero-title        { font-size: 1.9rem; }
    .a3-logo           { font-size: 1.3rem; }
    .section-title     { font-size: 1.6rem; }
    .inner-hero-title  { font-size: 1.7rem; }
    .stat-num          { font-size: 1.5rem; }
    .stat-label        { font-size: 0.68rem; }
    .about-stats-visual{ grid-template-columns: 1fr; }
    .stat-box          { padding: 18px; }
    .founder-img-wrap  { width: 160px; height: 210px; }
}

/* ===================================================================
   PRINT
   =================================================================== */
@media print {
    .a3-header, .a3-footer, .hamburger, .nav-overlay,
    .hero-scroll-indicator, .marquee-strip, .cta-section { display: none !important; }
    body { background: white; color: black; }
    .hero-section { min-height: auto; padding: 40px 0; }
}

/* ===================================================================
   REDUCED MOTION
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
    .about-cards-grid,
    .services-grid,
    .why-list,
    .clients-logos { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}