/* =========================================================
   DigiWin — Responsive Stylesheet
   Breakpoints: 1180 / 1024 / 900 / 768 / 480
   ========================================================= */

/* ---------- 1180px ---------- */
@media (max-width: 1180px){
  .bento-grid{ grid-template-columns: repeat(2, 1fr); }
  .service-card{ grid-column: span 1; }
  .service-card.big{ grid-column: span 1; grid-row: span 1; }
  .team-grid{ grid-template-columns: repeat(3, 1fr); }
  .process-grid{ grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .related-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 1024px ---------- */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ height: 360px; margin-top: 20px; order: -1; }
  .hero-desc{ max-width: 100%; }
  .story-grid{ grid-template-columns: 1fr; }
  .story-visual{ height: 280px; order: -1; }
  .contact-grid{ grid-template-columns: 1fr; }
  .portfolio-grid{ grid-template-columns: repeat(2, 1fr); }
  .why-grid{ grid-template-columns: repeat(2, 1fr); }
  .value-grid{ grid-template-columns: repeat(2, 1fr); }
  .accept-grid{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .value-mini-grid{ grid-template-columns: repeat(3,1fr); }
}

/* ---------- 900px : nav collapses ---------- */
@media (max-width: 900px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position: fixed; top:0; right:0; height: 100vh; width: min(320px, 82vw);
    background: rgba(12,12,22,0.98); backdrop-filter: blur(20px);
    flex-direction: column; align-items: flex-start; justify-content:flex-start;
    padding: 100px 30px 30px; gap: 6px;
    transform: translateX(100%); transition: transform .4s ease;
    z-index: 1000; border-left: 1px solid var(--border);
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-links a{ width:100%; padding: 14px 16px; font-size:16px; }
  .nav-cta .btn-outline{ display:none; }
  .nav-cta{ order:3; }
  .process-grid{ grid-template-columns: repeat(2, 1fr); }
  .blog-grid{ grid-template-columns: repeat(2, 1fr); }
  .related-grid{ grid-template-columns: 1fr; max-width: 420px; }
}

/* ---------- 768px ---------- */
@media (max-width: 768px){
  section{ padding: 70px 0; }
  #hero{ padding-top: 150px; padding-bottom: 60px; }
  .page-header{ padding: 140px 0 60px; }
  .container{ padding: 0 18px; }
  .section-head{ margin-bottom: 40px; }

  .bento-grid, .why-grid, .value-grid, .portfolio-grid, .process-grid,
  .team-grid, .blog-grid, .compare-table, .value-mini-grid{ grid-template-columns: 1fr !important; }

  .service-card, .service-card.big{ grid-column: span 1 !important; grid-row: auto !important; }

  .hero-actions{ flex-direction: column; align-items: stretch; }
  .hero-actions .btn-primary, .hero-actions .btn-outline{ width:100%; }
  .hero-stats{ justify-content: space-between; gap: 16px; }
  .hero-visual{ height: 300px; }
  .float-card{ padding: 10px 12px; }
  .float-card strong{ font-size:12px; } .float-card span{ font-size:10px; }
  .fc1{ top: 6px; right: 6px; }
  .fc2{ bottom: 10px; left: 6px; }
  .fc3{ top: auto; bottom: 100px; right: 50%; transform: translateX(50%); }

  .form-card{ padding: 26px; }
  .radio-cards{ grid-template-columns: repeat(2,1fr); }

  .cta-banner{ flex-direction: column; text-align:center; padding: 40px 26px; }
  .footer-grid{ grid-template-columns: repeat(2, 1fr); gap: 30px; }

  .contact-info-card, .form-card{ padding: 28px; }
  .table-scroll{ overflow-x:auto; }
  .compare-table{ min-width: 560px; }

  .post-title{ font-size: 26px; }
  .post-cover{ height: 220px; font-size: 60px; }
  .post-author-box{ flex-direction:column; text-align:center; }
}

/* ---------- 480px ---------- */
@media (max-width: 480px){
  .hero-title{ font-size: 30px; }
  .section-title{ font-size: 24px; }
  .hero-stats{ gap: 12px; }
  .hero-stat b{ font-size: 22px; }
  .logo{ font-size:18px; }
  .logo-mark{ width:34px; height:34px; font-size:15px; }

  .process-grid{ grid-template-columns: repeat(2, 1fr); }
  .team-grid{ grid-template-columns: repeat(2, 1fr); }
  .team-card{ padding: 22px 14px; }
  .team-avatar{ width:76px; height:76px; }

  .footer-grid{ grid-template-columns: 1fr; gap: 26px; }
  .footer-bottom{ flex-direction: column; text-align:center; }

  .radio-cards{ grid-template-columns: 1fr; }
  .chip-group label{ padding: 9px 16px; font-size:12.5px; }

  .value-mini-grid{ grid-template-columns: 1fr; }

  .testi-slide{ padding: 28px 20px; }
  .testi-text{ font-size:15.5px; }

  #back-to-top{ width:42px; height:42px; bottom:18px; left:18px; font-size:15px; }

  .blog-thumb{ height: 150px; font-size: 36px; }
  .post-cover{ height: 170px; font-size: 44px; }
}

/* ---------- Landscape / short viewport ---------- */
@media (max-height: 480px) and (orientation: landscape){
  .nav-links{ padding-top: 70px; overflow-y:auto; }
  #hero{ padding-top: 120px; }
}