:root {
  --wg-header-height: 72px;
  --wg-primary: #2563eb;
  --wg-primary-dark: #1d4ed8;
  --wg-dark: #0f172a;
  --wg-text: #334155;
  --wg-muted: #64748b;
  --wg-line: #e2e8f0;
  --wg-white: #ffffff;
  --wg-footer: #0f172a;
}

html {
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

.header__inner,
.footer__inner,
.footer__bottom,
.breadcrumb .container,
.header .container,
.footer .container {
  width: 100%;
}

.breadcrumb {
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 0;
  margin: 0;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb li + li::before {
  content: "/";
  color: var(--wg-muted);
}

.main-nav ul,
.footer__col ul,
.footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
}

.burger {
  cursor: pointer;
}

@media (max-width: 991px) {
  .main-nav.is-open {
    display: block !important;
  }
}

@media (max-width: 1023px) {
  .header-container {
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }

  .header .nav,
  .header .main-nav {
    display: none;
    width: 100%;
    order: 4;
  }

  .header .nav.is-open,
  .header .main-nav.is-open {
    display: block !important;
  }

  .header .nav-list,
  .header .main-nav ul {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 16px 0;
  }

  .header .btn,
  .header .btn-primary,
  .header .btn-outline {
    padding: 10px 14px;
    font-size: 14px;
    white-space: nowrap;
  }

  .burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--wg-line);
    border-radius: 12px;
    background: var(--wg-white);
    color: var(--wg-dark);
    order: 3;
  }

  .header {
    height: auto;
    min-height: 72px;
    padding: 10px 0;
  }

  .header-container {
    min-height: 52px;
  }
}

@media (max-width: 767px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  section,
  .section {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .hero {
    padding-top: 96px;
    padding-bottom: 56px;
  }

  .hero h1 {
    font-size: clamp(28px, 7vw, 40px);
    line-height: 1.15;
  }

  .section-title {
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.2;
  }

  .values-grid,
  .team-grid,
  .stats-grid,
  .cert-grid,
  .reviews-grid,
  .pricing-grid,
  .extra-grid,
  .services-grid,
  .contact-grid,
  .social-grid,
  .cases-grid,
  .related-grid,
  .info-grid,
  .footer-grid,
  .process-grid,
  .about-team-grid,
  .about-faq-grid,
  .contact-faq-grid,
  .pricing-stats-grid {
    grid-template-columns: 1fr !important;
  }

  .values-grid > *,
  .team-grid > *,
  .stats-grid > *,
  .cert-grid > *,
  .reviews-grid > *,
  .pricing-grid > *,
  .extra-grid > *,
  .services-grid > *,
  .contact-grid > *,
  .social-grid > *,
  .cases-grid > *,
  .related-grid > *,
  .info-grid > *,
  .footer-grid > *,
  .process-grid > *,
  .about-team-grid > *,
  .about-faq-grid > *,
  .contact-faq-grid > *,
  .pricing-stats-grid > * {
    min-width: 0;
  }

  .calculator,
  .contact-form,
  .requisites {
    padding: 24px;
  }

  .pricing-card.popular {
    transform: none;
  }

  .payment-grid,
  .messenger-links,
  .hero-cta,
  .filter-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .payment-item,
  .messenger-links a,
  .hero-cta .btn,
  .filter-btn {
    width: 100%;
  }

  .table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-scroll .comparison-table {
    display: table;
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  .comparison-table {
    max-width: 100%;
  }

  .comparison-table th,
  .comparison-table td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .process-step::after {
    display: none;
  }

  .social-item {
    min-width: 0;
    width: 100%;
  }

  .requisite-item {
    gap: 16px;
    align-items: flex-start;
  }

  .requisite-item span:last-child {
    text-align: right;
    max-width: 60%;
  }

  .nav-link {
    word-break: break-word;
  }
}