.header-section {max-width: 1320px; margin: 0 auto;}
.header-grid {display: grid;  gap: 15px; grid-template-columns: 170px 1fr 110px 120px; align-items: center; padding: 5px 20px;}
@media (max-width: 1200px) {
.header-grid {grid-template-columns: 122px 1fr 110px 120px}
}
.mod_jux_megamenu .megamenu-wrapper ul.level0 li.megacss span.megacss, .mod_jux_megamenu .megamenu-wrapper ul.level0 li.megacss a.megacss {padding: 10px 13px;}
.mod_jux_megamenu .megamenu-wrapper ul.level0 > li.megacss {border-left: none !important;}
.mod_jux_megamenu .megamenu-wrapper ul.level0 > li.megacss span.megacss, .mod_jux_megamenu .megamenu-wrapper ul.level0 > li.megacss a.megacss {color: #333333 !important;}
.mod_jux_megamenu .megamenu-wrapper ul.level0 > li.megacss {color: #717171 !important;}
.mod_jux_megamenu .megamenu-wrapper ul.level0 > li.megacss.active > span.megacss, .mod_jux_megamenu .megamenu-wrapper ul.level0 > li.megacss:hover > span.megacss, .mod_jux_megamenu .megamenu-wrapper ul.level0 > li.megacss.active > a.megacss, .mod_jux_megamenu .megamenu-wrapper ul.level0 > li.megacss:hover > a.megacss {background: transparent !important;}
.header-fb {background: var(--brand-blue); color: var(--color-text-on-dark); text-align: center; border-radius: var(--radius-fbbutton); cursor: pointer;}


:root {

  /* 60% — основные светлые поверхности */
  --color-bg: #f7fbff;
  --color-bg-alt: #edf5fd;
  --color-surface: #ffffff;
  --color-surface-soft: #f1f7fc;
  --color-surface-hover: #e8f3fe;
  --color-card: rgba(255, 255, 255, 0.9);
  --color-card-hover: #ffffff;

  /* 30% — тёмно-синяя брендовая основа */
  --brand-navy: #08213f;
  --brand-navy-deep: #06182f;
  --brand-navy-light: #12395f;

  --color-text: #0a213d;
  --color-text-secondary: #344c64;
  --color-text-muted: #667b90;
  --color-text-on-dark: #f7fbff;
  --color-text-on-dark-muted: #b9cce0;

  --color-surface-dark: #08213f;
  --color-surface-dark-hover: #0e3157;

  /* 10% — яркий акцент */
  --brand-blue: #0b82e6;
  --color-accent: #006dcc;
  --color-accent-hover: #0059a8;
  --color-accent-active: #004986;
  --color-accent-contrast: #ffffff;

  --color-accent-soft: #dcefff;
  --color-accent-soft-hover: #c9e6ff;
  --color-accent-secondary: #47b9cd;
  --color-link: #0067c2;
  --color-link-hover: #004f98;
  --color-focus: #55b7ff;

  /* Пастельные вспомогательные оттенки */
  --color-pastel-blue: #e5f3ff;
  --color-pastel-cyan: #e5f9fa;
  --color-pastel-mint: #e9faf4;
  --color-pastel-lilac: #f0edff;
  --color-pastel-peach: #fff0e7;

  /* Бордеры */
  --color-border-subtle: #e8f0f7;
  --color-border: #d7e4f0;
  --color-border-strong: #b7cce0;
  --color-border-hover: #6eb8ef;
  --color-border-accent: #0b82e6;
  --color-border-on-dark: rgba(255, 255, 255, 0.16);

  /* Служебные состояния */
  --color-success: #177a64;
  --color-success-soft: #e4f7f1;
  --color-warning: #9a6817;
  --color-warning-soft: #fff4d9;
  --color-error: #b73b4c;
  --color-error-soft: #ffeaed;
  --color-overlay: rgba(4, 18, 36, 0.72);

  /* Тени: 4 уровня */
  --shadow-1:
    0 1px 2px rgba(8, 33, 63, 0.06),
    0 1px 1px rgba(8, 33, 63, 0.04);

  --shadow-2:
    0 8px 24px rgba(8, 33, 63, 0.08),
    0 2px 8px rgba(8, 33, 63, 0.05);

  --shadow-3:
    0 18px 48px rgba(8, 33, 63, 0.12),
    0 6px 16px rgba(8, 33, 63, 0.06);

  --shadow-4:
    0 32px 90px rgba(6, 24, 47, 0.2),
    0 12px 30px rgba(6, 24, 47, 0.1);

  --focus-ring: 0 0 0 4px rgba(11, 130, 230, 0.24);

  /* Фирменные градиенты */
  --gradient-brand:
    linear-gradient(
      135deg,
      #005daf 0%,
      #0b82e6 52%,
      #48b9cf 100%
    );

  --gradient-dark:
    linear-gradient(
      145deg,
      #06182f 0%,
      #08213f 48%,
      #0e365d 100%
    );

  --gradient-hero:
    radial-gradient(
      circle at 12% 14%,
      rgba(11, 130, 230, 0.18),
      transparent 34%
    ),
    radial-gradient(
      circle at 88% 16%,
      rgba(166, 184, 255, 0.28),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #f9fcff 0%,
      #eaf4ff 55%,
      #f7f3ff 100%
    );

  --gradient-pastel-sky:
    linear-gradient(
      135deg,
      #e6f4ff 0%,
      #f1f5ff 50%,
      #eeeaff 100%
    );

  --gradient-pastel-mint:
    linear-gradient(
      135deg,
      #e8faf5 0%,
      #eaf6ff 52%,
      #f3efff 100%
    );

  --gradient-pastel-sunset:
    linear-gradient(
      135deg,
      #fff1e8 0%,
      #f5eeff 45%,
      #e8f5ff 100%
    );

  --gradient-pastel-mesh:
    radial-gradient(
      circle at 15% 20%,
      rgba(102, 190, 255, 0.28),
      transparent 34%
    ),
    radial-gradient(
      circle at 82% 18%,
      rgba(190, 176, 255, 0.28),
      transparent 30%
    ),
    radial-gradient(
      circle at 72% 82%,
      rgba(126, 222, 198, 0.22),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #f8fcff 0%,
      #f4f2ff 100%
    );

  /* Размеры и скругления */
  --container-width: 75rem; /* 1200px */
  --header-height: 4.75rem;

  --radius-small: 0.625rem;
  --radius-medium: 0.875rem;
  --radius-large: 1.5rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;
  --radius-fbbutton: 5px;

  --section-space: clamp(4rem, 7vw, 7rem);
  --grid-gap: 1.5rem;


}