/* ================================================================================
   HORATEL TECHNOLOGY — RESPONSIVE.CSS
   Breakpoints: 1180 / 900 / 620
   ================================================================================ */

@media (max-width: 1180px){
  .services-grid{ grid-template-columns: repeat(3,1fr); }
  .trust-grid{ grid-template-columns: repeat(2,1fr); row-gap: 24px; }
  .competence-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
  .howwork-line{ grid-template-columns: repeat(3,1fr); row-gap: 40px; }
  .howwork-line::before{ display: none; }
}

@media (max-width: 900px){
  :root{ --nav-h: 128px; }
  .nav-logo-img{ height: 82px; }
  .nav-links{ display: none; }
  .nav-links.is-open{
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(8,11,19,.98); backdrop-filter: blur(14px);
    padding: 18px clamp(24px,4vw,56px) 28px; border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.5);
  }
  .nav-links.is-open a{ width: 100%; padding: 12px 0; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,.06); }
  .nav-links.is-open a:last-child{ border-bottom: none; }
  .navbar{ position: relative; }
  .menu-btn{ display: flex; }
  header.is-scrolled .navbar{ height: 96px; }
  header.is-scrolled .nav-logo-img{ height: 66px; }

  .hero-grid{ grid-template-columns: 1fr; min-height: 0; }
  .hero-media{ height: 320px; order: -1; }
  .hero-text{ padding: 40px 24px; }

  .section{ padding: 76px 0; }
  .services{ padding: 64px 0; }
  .services-grid{ grid-template-columns: repeat(2,1fr); gap: 20px; }

  .competence-grid{ grid-template-columns: repeat(2,1fr); }
  .service-detail-row{ grid-template-columns: 1fr; gap: 40px; }
  .service-detail-row.reverse .sd-media{ order: 0; }
  .values-grid{ grid-template-columns: repeat(2,1fr); }
  .howwork-line{ grid-template-columns: repeat(2,1fr); row-gap: 36px; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 32px; }
  .contact-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 620px){
  .container{ padding: 0 20px; }
  .nav-logo-img{ height: 60px; }
  .services-grid{ grid-template-columns: 1fr; }
  .trust-grid{ grid-template-columns: 1fr; }
  .competence-grid{ grid-template-columns: 1fr; }
  .values-grid{ grid-template-columns: 1fr; }
  .howwork-line{ grid-template-columns: 1fr; row-gap: 30px; }
  .footer-grid{ grid-template-columns: 1fr; }
  .form-row-2{ grid-template-columns: 1fr; }
  .cookie-banner-inner{ flex-direction: column; align-items: stretch; text-align: left; }
  .cookie-banner-actions{ width: 100%; }
  .cookie-banner-actions .btn{ flex: 1; }
  .hero-actions{ flex-direction: column; }
  .hero-actions .btn{ justify-content: center; }
  .btn{ width: 100%; justify-content: center; }
  .cta-actions .btn{ width: auto; }
}