/* ==========================================================================
   AndNova Technologies — Enhanced Responsive Layer
   Breakpoints: 1200px, 1024px, 768px, 480px
   ========================================================================== */

/* ----------  Large Screens (PC / Laptops) < 1200px  ---------- */
@media (max-width: 1200px) {
  .hero-grid { gap: 40px; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

/* ----------  Tablets Landscape & Small Laptops < 1024px  ---------- */
@media (max-width: 1024px) {
  :root { --container: 100%; }
  
  /* Mobile navigation drawer */
  .burger { display: grid; }
  .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(85vw, 360px); flex-direction: column;
    align-items: stretch; gap: 8px; padding: 32px 24px 40px; background: var(--bg-alt);
    border-left: 1px solid var(--line); box-shadow: -20px 0 60px -30px rgba(0,0,0,.6);
    transform: translateX(105%); transition: transform .4s cubic-bezier(.22,1,.36,1);
    overflow-y: auto; z-index: 210;
  }
  .nav-links.open { transform: none; }
  .nav-links .close-btn { 
    display: grid; position: absolute; top: 20px; right: 20px; 
    color: var(--text); background: var(--bg); border: 1px solid var(--line);
    width: 38px; height: 38px; border-radius: 50%; font-size: 1.1rem;
  }
  .nav-links a.mobile-cta { 
    display: inline-flex !important; justify-content: center; margin-top: 16px; width: 100%; 
    color: #fff !important; background: var(--grad) !important;
  }
  .nav-links a.mobile-logo { 
    display: flex; margin-bottom: 24px; pointer-events: none;
    align-self: flex-start; padding: 0; background: transparent;
  }
  .nav-links a { padding: 14px 16px; font-size: 1.05rem; }
  .drop {
    display: none; position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    background: transparent; border: 0; border-left: 2px solid var(--line);
    border-radius: 0; margin-left: 16px; padding: 4px 0 4px 12px;
  }
  .has-drop.is-open .drop { display: grid; }
  .has-drop > a i { transition: transform .3s; }
  .has-drop.is-open > a i { transform: rotate(180deg); }
  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .5); backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none; transition: opacity .35s; z-index: 195;
  }
  .nav-backdrop.show { opacity: 1; pointer-events: auto; }

  .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 48px; }
  .hero p.lead { margin-inline: auto; }
  .hero .flex, .hero-stats { justify-content: center; }
  /* Fix for illustration collapsing on mobile */
  .illus { width: 100%; max-width: 400px; margin-inline: auto; order: -1; margin-bottom: 20px; }
  
  .split { grid-template-columns: 1fr !important; gap: 40px !important; }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .price-card.featured { transform: none; }
}

/* ----------  Tablets Portrait & Mobile Large < 768px  ---------- */
@media (max-width: 768px) {
  body { line-height: 1.6; }
  .container { width: 100%; padding-inline: 15px; }
  .section { padding: 64px 0; }
  .section-head { margin-bottom: 40px; }
  
  /* Fix nav overlap */
  .nav-actions .btn { display: none; } /* Hide Get a Quote button on small screens to save space */
  .nav-inner { gap: 10px; }
  
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .hero { padding: 80px 0 60px; }
  .hero-stats { gap: 24px; }
  .hero-stats > div { flex: 1 1 40%; }
  
  .tech-chip { font-size: .65rem; padding: 5px 9px; }
  .tech-chip i { font-size: .9rem; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .newsletter { flex-direction: column; }
  .newsletter .btn { width: 100%; justify-content: center; display: inline-flex; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 16px; }
  
  .card { padding: 24px; }
  .btn { width: 100%; justify-content: center; }
  .flex.actions { flex-direction: column; }
}

/* ----------  Mobile Portrait < 480px  ---------- */
@media (max-width: 480px) {
  .hero-stats > div { flex: 1 1 100%; }
  /* Further adjust illustration for very small screens */
  .illus { max-width: 280px; margin-bottom: 30px; }
  .tech-chip { font-size: .6rem; padding: 4px 8px; gap: 4px; }
  .tech-chip i { font-size: .8rem; }
  .marquee-track { gap: 24px; }
  .marquee-track span { font-size: 1rem; }
  .job { flex-direction: column; align-items: flex-start; gap: 12px; }
  #toTop { right: 16px; bottom: 16px; width: 44px; height: 44px; }
  
  /* Give content more room on small screens */
  .card { padding: 20px; }
  .section { padding: 52px 0; }
}

/* ----------  Print  ---------- */
@media print {
  .nav, .footer, #toTop, #progress, .cta { display: none !important; }
  body::before, body::after { display: none; }
}