/* =====================================================================
   WEBFUSION — responsive.css
   Breakpoints: 1200 · 992 · 768 · 576
   ===================================================================== */

/* Desktop only: match section/content width & side padding exactly to the
   navbar's inner bar (max-width 1320px, 16px side padding) so header and
   page content line up identically. */
@media (min-width: 993px) {
  .container { max-width: 1320px; padding-inline: 16px; }
}

@media (max-width: 1200px) {
  .tech-grid { grid-template-columns: repeat(4,1fr); }
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-col.contact-col { grid-column: 1 / -1; }
}

@media (max-width: 992px) {
  :root { --nav-h: 76px; }
  .section { padding: 64px 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-sub { max-width: none; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split.rev .media { order: -1; }
  .grid-3, .price-grid, .grid-4 { grid-template-columns: repeat(2,1fr); }
  .stats { grid-template-columns: repeat(2,1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .pf-grid { columns: 2; }
  .process-line { grid-template-columns: repeat(2,1fr); gap: 40px 24px; }
  .process-line::before { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }

  /* mobile nav */
  .navbar { padding: var(--nav-gap) 12px 0; }
  .navbar .nav-inner { padding: 0 8px 0 8px; gap: 10px; }
  .brand-logo { padding: 6px 12px; }
  .brand-logo img { height: 34px; }
  .nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; }
  .nav-toggle svg { width: 20px; height: 20px; }
  .navbar .nav-menu { display: none; }   /* override desktop flex */

  /* Reset the desktop absolute-centering — mobile menu is a normal flow panel */
  .navbar .nav-links { position: static; left: auto; top: auto; transform: none; flex: none; justify-content: flex-start; }

  /* Full-width panel flush under the bar — single solid colour, no blur/glass */
  .nav-menu {
    position: fixed; left: 0; right: 0; top: calc(var(--nav-gap) + var(--nav-h));
    background: #0b1636;
    border-top: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 50px -20px rgba(0,0,0,.6);
    padding: 10px 16px 20px; flex-direction: column; gap: 2px;
    max-height: calc(100vh - var(--nav-gap) - var(--nav-h)); overflow-y: auto;
  }
  .navbar .nav-menu.open { display: flex; animation: navDrop .25s var(--ease); }
  @keyframes navDrop { from { opacity:0; transform: translateY(-8px);} to {opacity:1; transform:none;} }
  .nav-links { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; padding: 0; margin: 0; }
  /* Full-width flex rows — the row/pill itself (this box) is what's flush
     with the buttons below (width:100%, no outer margin, same panel inset).
     This inner padding only breathes the TEXT away from the pill's own
     rounded edge; it does not move the box, so alignment stays intact. */
  .nav-links > li > a { display: flex; width: 100%; padding: 14px 16px; justify-content: space-between; font-size: 1rem; border-radius: 10px; }
  .nav-links > li { padding: 0; margin: 0; }
  .nav-dd-menu::before { display: none; } /* desktop-only hover bridge, not needed here */

  /* Simple sub-menu on mobile: plain title list, no icon/description clutter */
  .nav-dd-menu { position: static; left: auto; transform: none; width: 100%; opacity: 1; visibility: visible;
    display: none; margin: 2px 0 4px; padding: 4px; box-shadow: none; background: rgba(255,255,255,.04); border-radius: 10px; }
  .nav-dd.open .nav-dd-menu { display: block; }
  .nav-dd:hover .nav-dd-menu { opacity:1; visibility:visible; } /* keep controlled by click on mobile */

  /* The desktop open/hover rule (.nav-dd.open .nav-dd-menu / .nav-dd:hover .nav-dd-menu)
     re-applies "transform: translateX(-50%) translateY(0)" at higher specificity
     than the resets above, which is exactly what was shifting the mobile panel
     off-screen and clipping its text. Beat it with equal-or-higher specificity. */
  .navbar .nav-dd.open .nav-dd-menu,
  .navbar .nav-dd:hover .nav-dd-menu {
    position: static; left: auto; top: auto; transform: none; width: 100%;
  }
  .nav-dd-menu a { display: flex; padding: 11px 12px; }
  .nav-dd-menu .nav-dd-ico, .nav-dd-menu .d { display: none; }
  .nav-dd-menu .t { font-size: .95rem; font-weight: 500; color: var(--on-dark-mut); }
  .nav-dd-menu a:hover .t { color: #fff; }

  .nav-cta { width: 100%; flex-direction: column; gap: 8px; margin: 12px 0 0; }
  .nav-cta .btn { width: 100%; padding: 13px 20px; font-size: .95rem; justify-content: center; }
}

@media (max-width: 768px) {
  body { font-size: 16px; }
  .section { padding: 56px 0; }
  .cta-banner { padding: 48px 22px; }
  .lead-card { padding: 22px; }
  .card, .price, .tcard, .info-card, .team-card { padding: 24px; }
  .pf-meta { gap: 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  /* Keep the eyebrow pill on one line even for its longest label */
  .eyebrow { font-size: 11px; letter-spacing: .08em; padding: 7px 13px; gap: 6px; margin-bottom: 14px; }

  /* Description / body-copy text — smaller on mobile, headings untouched */
  .section-sub, .hero-sub, .card p, .feature p, .faq-a p, .step p, .vitem p,
  .team-card p, .cta-banner p, .footer-about, .tcard blockquote, .price .pl-desc,
  .lead-card .lead-note, .form-consent, .pf-modal-body p {
    font-size: 15px;
  }
}

@media (max-width: 576px) {
  .section { padding: 46px 0; }
  .container { padding-inline: 16px; }
  .grid-3, .grid-2, .grid-4, .price-grid, .stats, .process-line, .footer-top { grid-template-columns: 1fr; }
  .tech-grid { grid-template-columns: repeat(2,1fr); }
  .pf-grid { columns: 1; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .hero-trust { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pf-filter { gap: 8px; }
  .pf-filter button { padding: 8px 14px; font-size: .85rem; }
  .pf-modal-body { padding: 22px; }
  .brand-logo { padding: 5px 10px; }
  .brand-logo img { height: 30px; }

  /* compact forms on small screens */
  .lead-card { padding: 18px; }
  .info-card { padding: 20px; }
  .field { margin-bottom: 12px; }
  .field input, .field textarea, .field select { padding: 12px 12px 12px 40px; font-size: .92rem; }
  .field .ico { top: 12px; left: 13px; width: 18px; height: 18px; }
  .field label { top: 12px; left: 40px; font-size: .92rem; }
  .field textarea { min-height: 84px; }
  .contact-grid .grid-2 { grid-template-columns: 1fr; }
  .lead-card h3 { font-size: 1.2rem; }
}