/* ==========================================================================
   responsive.css  ·  Sab media queries sirf yahan
   --------------------------------------------------------------------------
   Breakpoints (Bootstrap 5 se match karte hain):
     1400px  XXL   — bade desktops
     1200px  XL    — laptops
     1100px  ---   — nav collapse point
      992px  LG    — tablets landscape
      768px  MD    — tablets portrait
      576px  SM    — bade phones
      400px  XS    — chhote phones
   Extra: landscape phones, hover-less devices, print
   ========================================================================== */


/* ==========================================================================
   ≥ 1600px — bade monitors
   ========================================================================== */
@media (min-width:1600px){
    .container-xl{max-width:1400px;}
    :root{--fs-hero:clamp(3.4rem,5.4vw,6rem);}
}


/* ==========================================================================
   ≤ 1200px — laptops
   ========================================================================== */
@media (max-width:1200px){
    :root{--sec-pad:clamp(4rem,8vw,6.5rem);}

    .svc-grid,
    .deliv-grid,
    .proj-grid,
    .related-grid,
    .gallery-grid,
    .now-grid,
    .why-grid,
    .edu-grid,
    .value-grid,
    .skill-cat-grid{grid-template-columns:repeat(2,1fr);}

    .meta-grid{grid-template-columns:repeat(3,1fr);}

    .tst-card{flex:0 0 calc((100% - var(--gap)) / 2);}

    .foot-grid{grid-template-columns:1.6fr 1fr 1fr;}
    .foot-contact{grid-column:1 / -1;}

    .exp-badge{right:-8px;}
}


/* ==========================================================================
   ≤ 1100px — navbar mobile mode
   ========================================================================== */
@media (max-width:1100px){
    .nav-menu{display:none;}
    .nav-toggle{display:flex;}
    .site-header{padding:.8rem 0;background:rgba(6,6,6,.75);backdrop-filter:blur(14px);}
    .site-header.is-hidden{transform:none;}
}


/* ==========================================================================
   ≤ 992px — tablets
   ========================================================================== */
@media (max-width:992px){
    :root{--header-h:70px;}

    /* Hero ek column */
    .hero{min-height:auto;padding-top:calc(var(--header-h) + 3rem);}
    .hero-grid{grid-template-columns:1fr;gap:3.5rem;}
    .hero-right{max-width:620px;}
    .scroll-hint{display:none;}

    /* Split sections stack */
    .split-grid,
    .split-even,
    .skills-grid,
    .faq-grid,
    .form-wrap,
    .cs-grid{grid-template-columns:1fr;}

    .split-visual{max-width:520px;margin-inline:auto;}

    /* Work rows stack, flip cancel */
    .work-row{grid-template-columns:1fr;gap:1.8rem;}
    .work-row.is-flipped .work-media{order:0;}

    .stats-grid{grid-template-columns:repeat(2,1fr);gap:2.5rem 1rem;}

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

    .pkg-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto;}

    /* Services rows */
    .srv-row{grid-template-columns:auto 1fr;gap:1.3rem;padding:2rem .5rem;}
    .srv-row-side{grid-column:1 / -1;justify-items:start;
        display:flex;align-items:center;justify-content:space-between;width:100%;}

    .cta-box{flex-direction:column;align-items:flex-start;}

    .sec-head-split{align-items:flex-start;}
}


/* ==========================================================================
   ≤ 768px — mobile
   ========================================================================== */
@media (max-width:768px){
    :root{
        --sec-pad:clamp(3.2rem,9vw,4.5rem);
        --gap:1rem;
        --radius-lg:18px;
    }

    body{line-height:1.7;}

    /* Sab grids single column */
    .svc-grid,
    .deliv-grid,
    .proj-grid,
    .related-grid,
    .gallery-grid,
    .now-grid,
    .why-grid,
    .edu-grid,
    .value-grid,
    .skill-cat-grid,
    .cinfo-grid,
    .result-grid{grid-template-columns:1fr;}

    .f-row{grid-template-columns:1fr;gap:0;}

    .tst-card{flex:0 0 100%;}

    /* Hero */
    .hero-stats{gap:1.6rem 2rem;}
    .hero-actions{gap:.7rem;}
    .hero-actions .btn-gold,
    .hero-actions .btn-ghost{flex:1 1 auto;justify-content:center;}

    .float-chip{display:none;}
    .code-body{font-size:.7rem;padding:1.1rem;}

    /* Photo */
    .photo-frame{aspect-ratio:3/4;}
    .exp-badge{right:12px;bottom:12px;padding:.8rem 1rem;}
    .exp-badge b{font-size:1.2rem;}

    /* Process / timeline */
    .p-step{grid-template-columns:48px 1fr;gap:1.1rem;padding:1.2rem 0;}
    .p-num{width:48px;height:48px;font-size:.85rem;}
    .process-line::before{left:23px;}

    /* Case study */
    .meta-grid{grid-template-columns:1fr 1fr;gap:1.2rem;}
    .cn-grid{flex-direction:column;align-items:flex-start;gap:1.6rem;}
    .cn-next{text-align:left;flex-direction:row-reverse;}

    /* Footer */
    .foot-grid{grid-template-columns:1fr;gap:2.4rem;}
    .foot-contact{grid-column:auto;}
    .foot-bottom{flex-direction:column;gap:.4rem;}

    /* Floating buttons thora andar */
    .wa-float{right:16px;bottom:18px;width:50px;height:50px;font-size:1.35rem;}
    .back-to-top{right:16px;bottom:80px;width:44px;height:44px;}

    /* Cursor mobile par nahi */
    .cursor-dot,.cursor-ring{display:none;}

    /* Filter bar scrollable */
    .filter-bar{
        flex-wrap:nowrap;overflow-x:auto;padding-bottom:.6rem;
        scrollbar-width:none;-ms-overflow-style:none;
    }
    .filter-bar::-webkit-scrollbar{display:none;}
    .filter-btn{flex-shrink:0;}

    .map-frame iframe{height:320px;}
}


/* ==========================================================================
   ≤ 576px — chhote phones
   ========================================================================== */
@media (max-width:576px){
    :root{--fs-hero:clamp(2.1rem,9vw,2.9rem);}

    .container-xl{padding-inline:1.1rem;}

    .brand-text small{display:none;}

    .section-alt::before,.section-alt::after{opacity:.2;}

    .sec-head-center .sec-eyebrow::after{display:none;}

    .hero-badge{font-size:.7rem;padding:.4rem .8rem;}
    .hero-stats{width:100%;justify-content:space-between;}
    .hstat{flex:1 1 40%;}

    .btn-lg{padding:.9rem 1.5rem;font-size:.9rem;}

    .svc-card,.deliv-card,.value-card,.why-card,.now-card,.edu-card,.skill-cat{padding:1.5rem 1.25rem;}
    .svc-card{padding-bottom:3rem;}

    .form-card{padding:1.4rem 1.1rem;}

    .quote-block{padding-left:1rem;margin:1.5rem 0;}

    .srv-row{grid-template-columns:1fr;gap:1rem;}
    .srv-row-icon{width:52px;height:52px;font-size:1.3rem;}

    .tst-card{padding:1.8rem 1.3rem;}
    .tst-stars{position:static;margin-top:1rem;}

    .mm-list a{font-size:1.75rem;}

    .err-links{flex-wrap:wrap;justify-content:center;gap:1rem;}
}


/* ==========================================================================
   ≤ 400px — bohot chhote phones
   ========================================================================== */
@media (max-width:400px){
    :root{--fs-hero:1.95rem;}

    .brand-mark{width:34px;height:34px;}
    .brand-text strong{font-size:.9rem;}

    .hero-actions{flex-direction:column;}
    .hero-actions .btn-gold,
    .hero-actions .btn-ghost{width:100%;}

    .hstat b{font-size:1.5rem;}

    .foot-social a{width:38px;height:38px;}

    .faq-q{padding:1rem 1.1rem;font-size:.9rem;}
    .faq-a p{padding:0 1.1rem 1.1rem;}
}


/* ==========================================================================
   Landscape phones (kam height)
   ========================================================================== */
@media (max-height:520px) and (orientation:landscape){
    .hero{min-height:auto;padding-top:calc(var(--header-h) + 2rem);padding-bottom:3rem;}
    .mobile-menu .mm-inner{padding-top:4rem;}
    .mm-list a{font-size:1.4rem;}
    .mm-sub{display:none;}
    .scroll-hint{display:none;}
}


/* ==========================================================================
   Touch devices (hover nahi hota)
   --------------------------------------------------------------------------
   Hover-only cheezein touch par hamesha visible kar di jati hain,
   warna user ko overlay ya link kabhi nazar hi nahi aata.
   ========================================================================== */
@media (hover:none){
    .cursor-dot,.cursor-ring{display:none !important;}

    .proj-overlay,.work-overlay{opacity:0;}
    .proj-card:active .proj-overlay{opacity:1;}

    .svc-card:hover,.proj-card:hover,.deliv-card:hover,
    .edu-card:hover,.value-card:hover,.why-card:hover,
    .pkg-card:hover,.cinfo-card:hover,.now-card:hover{transform:none;}

    .drop-panel{display:none;}

    .btn-gold:hover,.btn-ghost:hover{transform:none;}
}


/* ==========================================================================
   PRINT (CV ya page print karne par)
   ========================================================================== */
@media print{
    .site-header,.mobile-menu,.preloader,.bg-layer,
    .wa-float,.back-to-top,.scroll-progress,
    .cursor-dot,.cursor-ring,.marquee,.cta-strip,
    .scroll-hint,.tst-nav{display:none !important;}

    body{background:#fff;color:#111;}
    h1,h2,h3,h4{color:#111;}
    .gold-text{-webkit-text-fill-color:#8C6D1F;color:#8C6D1F;}
    .section{padding:1.5rem 0;}
    a{color:#111;text-decoration:underline;}
    [data-anim],[data-reveal]{opacity:1 !important;transform:none !important;}
}