/* --------------------------------------------------------- */
/* --- Глобальные стили и переменные (ОБНОВЛЕНА ПАЛИТРА) --- */
/* --------------------------------------------------------- */
:root {
	--header-color-base: #ffffffd9; /* Цвет для шапки с альфа каналом */
	--background-color-primary: #ffffff; /* Основной фон */
	--background-color-secondary: #f8f9fa; /* Фон для секций */
	--font-color-primary: #0F48A1; /* Цвет для Заголовков */
	--font-color-secondary: #2c3e50; /* Цвет для текста */
	--accent-color-primary: #fe7200; /* Акцентный цвет */
	--accent-color-secondary: #fe7200; /* Дополнительный Акцентный цвет */
	--footer-background-color: #2c3e50; /* Фон для футера */
	
	
    --primary-color: #0F48A1;  /* Основной: солидный синий */
    --accent-color-primary: #fe7200;   /* Акцентный: ваш фирменный оранжевый */
    --dark-color: #2c3e50;     /* Темный для текста */
    --light-color: #ffffff;    /* Светлый фон */
	--light-color-alpha: #ffffffd9;
    --bg-light-gray: #f8f9fa; /* Фон для секций */
    --white-color: #ffffff;
	
    --font-family-headings: 'Bebas-Neue-Cyrillic', sans-serif; /* Шрифт для заголовков */
    --font-family-body: 'Montserrat', sans-serif;     /* Шрифт для основного текста */
	
    --container-width: 1400px;
    --border-radius: 20px;
	/* --border-radius: 8px; */
	
    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);   /* ~12px -> 14px */
    --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1.05rem);  /* ~14px -> 17px */
    --font-size-md: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);      /* ~16px -> 20px (Основной текст) */
    --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);     /* ~18px -> 24px */
    --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);    /* ~20px -> 28px (H3) */
    --font-size-xxl: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);      /* ~32px -> 52px (H2) */
    --font-size-xxxl: clamp(2.25rem, 1.5rem + 3.75vw, 3.75rem); /* ~36px -> 60px (H1) */
	
	--anim--hover-time: 400ms;
	--anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1);
}
@font-face {
    font-family: 'Bebas-Neue-Cyrillic';
    src: url('../fonts/bebas-neue.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
	font-family: var(--font-family-body);
	color: var(--font-color-secondary);
	line-height: 1.6;
	background-color: var(--background-color-primary);
	font-size: var(--font-size-md);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body.modal-open {
	overflow: hidden;
	padding-right: 15px;
}

body.menu-open {
    overflow: hidden;
}

.container { max-width: var(--container-width); margin: 0 auto; padding: 0 15px; }
.section-animscroll {
	padding: 60px 0;
	opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.section-animscroll.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.section {
	padding: 60px 0;
	/* opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; */
	z-index: 3;
}
.section-mini {
	padding: 30px 0;
}
@media (min-width: 768px) {
	.section {
		padding: 80px 0;
	}
	.section-mini {
		padding: 40px 0;
	}
}
.section--light { background-color: var(--background-color-primary); }
.section--gray { background-color: var(--background-color-secondary); }
.section--inversed { background-color: var(--font-color-primary); }
.section--dark { background-color: var(--dark-color); }
.section-title {
	text-align: center;
	font-size: var(--font-size-xxl);
	font-family: var(--font-family-headings);
	margin-bottom: 40px;
	color: var(--font-color-primary);
	line-height: 1.2;
}
@media (min-width: 768px) { .section-title { margin-bottom: 60px; } }
.section-title--light { color: var(--background-color-primary); }
.section-title--left { text-align: left; }
.section-title--right { text-align: right; }
.section-title--center { text-align: center; }
.section-title--subtle { color: #aaa; text-transform: uppercase; font-size: 1rem; font-weight: 500; letter-spacing: 2px; }




/* Defs */
@property --angle-1 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -75deg;
}

@property --angle-2 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -45deg;
}
.button-wrapper {
  position: relative;
  z-index: 2;
  border-radius: 999vw;
  background: transparent;
  pointer-events: none;
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
}
.button-shadow {
  --shadow-cuttoff-fix: 2em;
  position: absolute;
  width: calc(100% + var(--shadow-cuttoff-fix));
  height: calc(100% + var(--shadow-cuttoff-fix));
  top: calc(0% - var(--shadow-cuttoff-fix) / 2);
  left: calc(0% - var(--shadow-cuttoff-fix) / 2);
  filter: blur(clamp(2px, 0.125em, 12px));
  -webkit-filter: blur(clamp(2px, 0.125em, 12px));
  -moz-filter: blur(clamp(2px, 0.125em, 12px));
  -ms-filter: blur(clamp(2px, 0.125em, 12px));
  overflow: visible;
  pointer-events: none;
}
.button-shadow::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 999vw;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
  width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
  height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
  top: calc(var(--shadow-cuttoff-fix) - 0.5em);
  left: calc(var(--shadow-cuttoff-fix) - 0.875em);
  padding: 0.125em;
  box-sizing: border-box;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
  overflow: visible;
  opacity: 1;
}
.button {
  --border-width: clamp(1px, 0.0625em, 4px);
  all: unset;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  pointer-events: auto;
  z-index: 3;
  background: linear-gradient(
    -75deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.05)
  );
  border-radius: 999vw;
  box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
    0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
    0 0 0 0 rgba(255, 255, 255, 1);
  backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  -moz-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  -ms-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
  overflow: hidden;
}

.button::before {
  content: '';
  position: absolute;
  /* Увеличиваем высоту для большего охвата, учитывая rotate */
  height: 250%;
  width: 40px; /* Ширина сияющей полосы */
  top: 0;
  left: -60px; /* Начальная позиция вне кнопки */
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: rotate(45deg) translateY(-35%); /* Поворот и смещение */
  animation: shine 3s ease infinite; /* Применяем анимацию */
  z-index: 4; /* Убедитесь, что сияние поверх остальных элементов кнопки */
  pointer-events: none; /* Чтобы не мешало событиям мыши */
  border-radius: inherit; /* наследуем скругление от родителя */
}
/* Анимация сияния */
@keyframes shine {
  0% {
    left: -80px;
  }
  40% {
    left: calc(100% + 20px);
  }
  100% {
    left: calc(100% + 20px);
  }
}

.button:hover {
  transform: scale(0.975);
  backdrop-filter: blur(0.01em);
  -webkit-backdrop-filter: blur(0.01em);
  -moz-backdrop-filter: blur(0.01em);
  -ms-backdrop-filter: blur(0.01em);
  box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25),
    0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5),
    0 0 0 0 rgba(255, 255, 255, 1);
}
.button span {
  position: relative;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  letter-spacing: -0.05em;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--accent-color-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 0em 0.25em 0.05em rgba(0, 0, 0, 0.1);
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
  padding-inline: 1.5em;
  padding-block: 0.875em;
  white-space: normal;
  z-index: 5;
}
.button:hover span {
  text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.12);
}
.button span::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: calc(100% - var(--border-width));
  height: calc(100% - var(--border-width));
  top: calc(0% + var(--border-width) / 2);
  left: calc(0% + var(--border-width) / 2);
  box-sizing: border-box;
  border-radius: 999vw;
  overflow: clip;
  background: linear-gradient(
    var(--angle-2),
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 40% 50%,
    rgba(255, 255, 255, 0) 55%
  );
  z-index: 3;
  mix-blend-mode: screen;
  pointer-events: none;
  background-size: 200% 200%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  transition: background-position calc(var(--anim--hover-time) * 1.25)
      var(--anim--hover-ease),
    --angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease);
}
.button:hover span::after {
  background-position: 25% 50%;
}
.button:active span::after {
  background-position: 50% 15%;
  --angle-2: -15deg;
}
@media (hover: none) and (pointer: coarse) {
  .button span::after,
  .button:active span::after {
    --angle-2: -45deg;
  }
}
.button::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 999vw;
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  top: calc(0% - var(--border-width) / 2);
  left: calc(0% - var(--border-width) / 2);
  padding: var(--border-width);
  box-sizing: border-box;
  background: conic-gradient(
      from var(--angle-1) at 50% 50%,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0) 5% 40%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0) 60% 95%,
      rgba(0, 0, 0, 0.5)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: all var(--anim--hover-time) var(--anim--hover-ease),
    --angle-1 500ms ease;
  box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.5);
}
.button:hover::after {
  --angle-1: -125deg;
}
.button:active::after {
  --angle-1: -75deg;
}
@media (hover: none) and (pointer: coarse) {
  .button::after,
  .button:hover::after,
  .button:active::after {
    --angle-1: -75deg;
  }
}
.button-wrapper:has(button:hover) .button-shadow {
  filter: blur(clamp(2px, 0.0625em, 6px));
  -webkit-filter: blur(clamp(2px, 0.0625em, 6px));
  -moz-filter: blur(clamp(2px, 0.0625em, 6px));
  -ms-filter: blur(clamp(2px, 0.0625em, 6px));
  transition: filter var(--anim--hover-time) var(--anim--hover-ease);
}
.button-wrapper:has(button:hover) .button-shadow::after {
  top: calc(var(--shadow-cuttoff-fix) - 0.875em);
  opacity: 1;
}
.button-wrapper:has(button:active) {
  transform: rotate3d(1, 0, 0, 25deg);
}
.button-wrapper:has(button:active) button {
  box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2),
    0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
    0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05),
    0 0.25em 0 0 rgba(255, 255, 255, 0.75),
    inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15);
}
.button-wrapper:has(button:active) .button-shadow {
  filter: blur(clamp(2px, 0.125em, 12px));
  -webkit-filter: blur(clamp(2px, 0.125em, 12px));
  -moz-filter: blur(clamp(2px, 0.125em, 12px));
  -ms-filter: blur(clamp(2px, 0.125em, 12px));
}
.button-wrapper:has(button:active) .button-shadow::after {
  top: calc(var(--shadow-cuttoff-fix) - 0.5em);
  opacity: 0.75;
}
.button-wrapper:has(button:active) span {
  text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.12);
}
.button:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.7;
  transform: scale(0.98);
  transition: opacity 0.3s ease, transform var(--anim--hover-time) var(--anim--hover-ease); 
  /* transition: all var(--anim--hover-time) var(--anim--hover-ease), 
              opacity 0.3s ease; */
  background: linear-gradient(
    var(--angle-1),
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.03)
  );
  box-shadow: inset 0 0.05em 0.05em rgba(0, 0, 0, 0.03),
              inset 0 -0.05em 0.05em rgba(255, 255, 255, 0.3),
              0 0.1em 0.05em -0.05em rgba(0, 0, 0, 0.1),
              0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.1),
              0 0 0 0 rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(clamp(1.5px, 0.15em, 6px));
  -webkit-backdrop-filter: blur(clamp(1.5px, 0.15em, 6px));
  -moz-backdrop-filter: blur(clamp(1.5px, 0.15em, 6px));
  -ms-backdrop-filter: blur(clamp(1.5px, 0.15em, 6px));
}
.button:disabled span {
  color: var(--text-color-light-grey, #aaa);
  text-shadow: 0em 0.1em 0.02em rgba(0, 0, 0, 0.05);
  /* transition: none;  */
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
}
.button:disabled span::after {
  opacity: 0;
  /* transition: none; */
  transition: opacity calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease);
}
.button:disabled::after {
  background: conic-gradient(
      from var(--angle-1) at 50% 50%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0) 5% 40%,
      rgba(0, 0, 0, 0.2) 50%,
      rgba(0, 0, 0, 0) 60% 95%,
      rgba(0, 0, 0, 0.2)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
  box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.2);
  /* transition: none; */
  transition: all var(--anim--hover-time) var(--anim--hover-ease), var(--angle-1) 500ms ease;
}

.button:disabled::before {
  animation: none;
  opacity: 0;
}

.button-wrapper:has(.button:disabled) {
  pointer-events: none;
  transform: rotate3d(0, 0, 0, 0deg);
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
}
.button-wrapper:has(.button:disabled) .button-shadow {
  filter: blur(clamp(1.5px, 0.08em, 8px));
  -webkit-filter: blur(clamp(1.5px, 0.08em, 8px));
  -moz-filter: blur(clamp(1.5px, 0.08em, 8px));
  -ms-filter: blur(clamp(1.5px, 0.08em, 8px));
  /* transition: none; */
  transition: filter var(--anim--hover-time) var(--anim--hover-ease);
}
.button-wrapper:has(.button:disabled) .button-shadow::after {
  opacity: 0.5;
  top: calc(var(--shadow-cuttoff-fix) - 0.6em);
  /* transition: none; */
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
}
.button:disabled:hover,
.button:disabled:active {
    transform: scale(0.98);
    backdrop-filter: blur(clamp(1.5px, 0.15em, 6px)); 
    -webkit-backdrop-filter: blur(clamp(1.5px, 0.15em, 6px));
    -moz-backdrop-filter: blur(clamp(1.5px, 0.15em, 6px));
    -ms-backdrop-filter: blur(clamp(1.5px, 0.15em, 6px));
    box-shadow: inset 0 0.05em 0.05em rgba(0, 0, 0, 0.03), 
                inset 0 -0.05em 0.05em rgba(255, 255, 255, 0.3), 
                0 0.1em 0.05em -0.05em rgba(0, 0, 0, 0.1), 
                0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.1), 
                0 0 0 0 rgba(255, 255, 255, 0.5);
}
.button:disabled:hover span,
.button:disabled:active span {
    text-shadow: 0em 0.1em 0.02em rgba(0, 0, 0, 0.05);
}
.button:disabled:hover span::after,
.button:disabled:active span::after {
    opacity: 0;
}
.button:disabled:hover::after,
.button:disabled:active::after {
    --angle-1: -75deg;
    background: conic-gradient(
      from var(--angle-1) at 50% 50%,
      rgba(0, 0, 0, 0.2), 
      rgba(0, 0, 0, 0) 5% 40%,
      rgba(0, 0, 0, 0.2) 50%,
      rgba(0, 0, 0, 0) 60% 95%,
      rgba(0, 0, 0, 0.2)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
    box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.2);
}
.button-wrapper:has(.button:disabled):hover .button-shadow,
.button-wrapper:has(.button:disabled):active .button-shadow {
    filter: blur(clamp(1.5px, 0.08em, 8px));
    -webkit-filter: blur(clamp(1.5px, 0.08em, 8px));
    -moz-filter: blur(clamp(1.5px, 0.08em, 8px));
    -ms-filter: blur(clamp(1.5px, 0.08em, 8px));
}
.button-wrapper:has(.button:disabled):hover .button-shadow::after,
.button-wrapper:has(.button:disabled):active .button-shadow::after {
    opacity: 0.5;
    top: calc(var(--shadow-cuttoff-fix) - 0.6em);
}


/* .button {
  position: relative;
  padding: 1.0rem 2.0rem;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
  min-width: 200px;
}
.button::before {
  content: '';
  position: absolute;
  height: 250%;
  width: 40px;
  top: 0;
  left: -60px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: rotate(45deg) translateY(-35%);
  animation: shine 3s ease infinite;
}
.button:active {
  transform: translateY(-1px);
  transition: transform 0.1s ease;
}
@keyframes shine {
  0% {
    left: -80px;
  }
  40% {
    left: calc(100% + 20px);
  }
  100% {
    left: calc(100% + 20px);
  }
}
.button {
  background: linear-gradient(135deg, #fe7200 0%, #ff9c00 100%);
  color: #fff;
  box-shadow: 
    0 5px 15px rgba(247, 151, 30, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.button:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 10px 30px rgba(247, 151, 30, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.button--light {
  background: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%);
  color: #fff;
  box-shadow: 
    0 10px 30px rgba(45, 62, 80, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.button--light:hover {
  background: linear-gradient(135deg, #d5dbdb 0%, #34495e 100%);
  transform: translateY(-3px);
  box-shadow: 
    0 15px 40px rgba(45, 62, 80, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.button--large {
	font-size: 1.1rem;
    border-radius: var(--border-radius);
} */






[id] {
  scroll-margin-top: 70px;
}

/* --------------------------------------------------------- */
/* ----------------------- Шапка сайта --------------------- */
/* --------------------------------------------------------- */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 15px 0;
    width: 100%;
    transition: background-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease, padding 0.4s ease;
    background-color: hsla(0, 0%, 100%, 0);
	margin-bottom: -108px;
}
.header.scrolled {
    background-color: hsla(0, 0%, 100%, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
    padding: 15px 0;
}
.header.hidden {
    transform: translateY(-100%);
}
.header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.header__logo-wrapper {
    position: relative;
    flex-shrink: 0;
}
.header__logo { height: 45px; display: none; transition: opacity 0.4s ease; }
.header__logo--light { display: block; }
.header.scrolled .header__logo--light { display: none; }
.header.scrolled .header__logo--dark { display: block; }
.header__descriptor {
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 5px;
    font-size: var(--font-size-sm);
    color: #fff;
    opacity: 0.8;
    white-space: nowrap;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    visibility: visible;
	padding-top: 13px;
}
.header.scrolled .header__descriptor {
    opacity: 0;
    visibility: hidden;
}
.header__logo-link {
    flex-shrink: 0;
}
.header__logo {
    height: 45px;
    display: none;
    transition: opacity 0.4s ease;
}
.header__logo--light {
    display: block;
}
.header.scrolled .header__logo--light {
    display: none;
}
.header.scrolled .header__logo--dark {
    display: block;
}
.header__nav {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}
.header__nav ul {
    display: flex;
	flex-wrap: wrap;
    justify-content: space-evenly;
    flex-direction: row;
    list-style: none;
    gap: 0px 30px;
    margin: 0;
    padding: 0;
	font-family: var(--font-family-headings);
}
.header__nav a {
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.3s ease;
    color: var(--background-color-primary);
}
.header.scrolled .header__nav a {
    color: var(--font-color-secondary);
}
.header__nav a:hover {
    color: var(--accent-color-primary);
}
.header__mobile-actions { display: none; }
.header__actions {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-shrink: 0;
}
.header__phone {
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    color: var(--background-color-primary);
    transition: color 0.3s ease;
	font-family: var(--font-family-headings);
}
.header.scrolled .header__phone {
    color: var(--font-color-secondary);
}
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.7);
	font-family: var(--font-family-headings);
}
.header.scrolled .lang-switcher {
    color: #aaa;
}
.lang-switcher span[data-lang] {
    cursor: pointer;
    transition: color 0.2s;
}
.lang-switcher span[data-lang].active {
    color: var(--background-color-primary);
}
.header.scrolled .lang-switcher span[data-lang].active {
    color: var(--font-color-secondary);
}
.header__controls { display: flex; align-items: center; gap: 20px; }
.burger {
    display: none;
	flex-direction: column;
	justify-content: space-around;
	width: 2rem;
	height: 2rem;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 1010;
}
.burger span {
	width: 2rem;
	height: 3px;
	border-radius: 10px;
	transition: all 0.3s linear;
	position: relative;
	transform-origin: 1px;
    background: var(--background-color-primary);
}
.header.scrolled .burger span {
    background: var(--dark-color);
}
.burger.active span { background: var(--dark-color); }
.burger.active span:nth-child(1) { transform: rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; transform: translateX(20px); }
.burger.active span:nth-child(3) { transform: rotate(-45deg); }
@media (max-width: 1200px) {
	.header__logo {
		height: 30px;
	}
    .header__nav ul { gap: 0px 10px; }
    .header__actions { gap: 10px; }
    .header__container { gap: 20px; }
	.header__descriptor {
		padding-top: 13px;
	}
}
@media (max-width: 1024px) {
    .header__descriptor,
    .header__nav ul,
    .header__actions {
        display: none;
    }
    .burger { display: flex; }
	.header__controls .button-wrapper {
        padding: 0;
    }
    .header__controls .button {
		font-size: 0.8rem;
		max-width: 150px;
        white-space: normal;
        word-break: break-word;
        line-height: 1.2;
        text-align: center;
	}
	.header__controls .button span {
        padding-inline: 1em;
        padding-block: 0.7em;
    }
	.header__controls {
        gap: 10px;
    }
    .header__nav {
        display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		background: var(--background-color-primary);
		transform: translateX(-100%);
		transition: transform 0.3s ease-in-out;
		z-index: 1005;
        /* padding: 60px 20px; */
		padding: 0;
		box-sizing: border-box;
	}
    .header__nav.mobile-active {
        transform: translateX(0);
		background-color: var(--background-color-primary);
    }
    .header__nav.mobile-active ul {
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 25px;
        margin: 0;
		padding: 0;
		padding-top: 20px;
    }
    .header__nav.mobile-active a { font-size: 1.8rem; color: var(--font-color-primary); font-weight: bold; }
    .header__mobile-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-top: 20px;
    }
    .header__mobile-actions .header__phone,
    .header__mobile-actions .lang-switcher span {
        color: var(--font-color-secondary);
    }
}
@media (max-width: 768px) {
    .header__controls .button {
        font-size: 0.75rem;
        max-width: 130px;
    }
    .header__controls .button span {
        padding-inline: 0.8em;
        padding-block: 0.6em;
    }
}
@media (max-width: 480px) {
    .header__logo { height: 35px; }
	.header.scrolled {
        padding: 10px 0;
    }
    .header { margin-bottom: -75px; }
	.header__controls { gap: 5px; }
	.header__container { gap: 5px; }
	.header__controls .button {
        font-size: 0.7rem;
        max-width: 110px;
    }
    .header__controls .button span {
        padding-inline: 0.6em;
        padding-block: 0.5em;
		font-size: 0.6rem;
    }
}

/* --- Стили для УПРОЩЕННОГО хедера на сервисных страницах --- */
.header--simple .header__top-bar,
.header--simple .header__nav,
.header--simple .header__action,
.header--simple .burger {
    display: none !important;
}
.header--simple .header__main-bar-container {
    justify-content: space-between;
}
.header--simple .header__contact-group {
    display: flex;
    align-items: center;
    gap: 15px;
}
@media (max-width: 480px) {
    .header--simple .header__phone {
        font-size: 0.8rem;
    }
}

/* --------------------------------------------------------- */
/* ----------------------- Секция Hero --------------------- */
/* --------------------------------------------------------- */
.hero-parallax-wrapper {
    min-height: 200vh; 
    position: relative;
}
.hero {
	min-height: 100vh;
	padding: 15vh 0;
	position: sticky;
	top: 0;
	z-index: 1;
}
.hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.7) 100%);
    z-index: 2;
}
#video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.video-vertical {
  display: none;
}
@media (max-aspect-ratio: 1/1) {
  .video-horizontal {
    display: none;
  }
  .video-vertical {
    display: block;
  }
}
.hero__container {
	position: relative;
    z-index: 3;
	display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.hero__content-center {
    max-width: 800px;
    padding: 40px;
    background-color: rgba(15, 23, 42, 0.1);
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
.hero__main-title {
    text-align: center;
	font-size: var(--font-size-xxl);
	font-family: var(--font-family-headings);
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 40px;
    color: var(--accent-color-primary);
    text-wrap: balance;
	text-shadow: 0px 2px 5px rgba(0,0,0,0.5);
}
.hero__main-title span {
    color: var(--accent-color-primary);
}

.hero__benefits-list {
	list-style: none;
	margin: 30px 0;
    text-align: left;
    display: inline-block;
    color: var(--background-color-primary);
}
.hero__benefits-list li {
	font-size: var(--font-size-md);
    margin-bottom: 20px;
	position: relative;
	padding-left: 30px;
}
.hero__benefits-list li::before {
    content: '\f00c'; 
    font-family: "Font Awesome 6 Free"; 
    font-weight: 900; 
    color: var(--accent-color-primary); 
    position: absolute; 
    left: 0; 
    top: 4px; 
}
.hero__cta-group {
    margin-top: auto;
}
@media (max-width: 480px) {
    /* .hero .button--large {
        font-size: 1rem;
        padding: 12px 20px;
    } */
	.hero .button-wrapper {
        /* font-size: 1rem; */
        padding: 12px 20px;
    }
	.hero .button {
        font-size: 1rem;
        /* padding: 12px 20px; */
    }
	/* .hero .button {
        font-size: 1rem;
        padding: 12px 20px;
    } */
	.hero__content-center {
		padding: 20px;
	}
	.hero__main-title {
        font-size: var(--font-size-xxl);
        margin-bottom: 20px;
    }
	.hero__benefits-list li {
	font-size: var(--font-size-sm);
	}
}
@media (min-width: 768px) {
    .hero__main-title {
        font-size: var(--font-size-xxxl);
        margin-bottom: 50px;
    }
    .hero-slider {
        flex: 1 1 55%;
        max-width: 55%;
    }
	.hero__container {
        flex-direction: row;
        text-align: left;
        gap: 40px;
        align-items: center;
    }
	.hero__content {
        flex: 1 1 45%;
        min-width: 400px;
    }
	.hero__benefits-list li {
	font-size: var(--font-size-lg);
	}
}
/* --------------------------------------------------------- */
/* --------------------- Секция Benefits ------------------- */
/* --------------------------------------------------------- */
.benefits {
	min-height: 100vh;
	position: relative;
	z-index: 5;
	/* box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15); */
	/* box-shadow: inset 0 -15px 10px rgba(0, 0, 0, 0.5), inset 0 15px 10px rgba(0, 0, 0, 0.5); */
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5), 0 -5px 5px rgba(0, 0, 0, 0.5);
	border-radius: 20px 20px 20px 20px;
	/* background-image: url('../img/benefits-bg.png'); */
	background-color: #cccccc;
	background-size: cover;
    background-position: center center;
    /* background-attachment: fixed;  */
}
.benefits-section-title {
	background: var(--background-color-primary);
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.47);
}
.benefits__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.benefit-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	background: var(--background-color-primary);
	padding: 25px;
	border-radius: var(--border-radius);
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.47);
}
.benefit-card-header-wrapper {
	display: flex;
	flex-direction: row;
    gap: 20px;
}
.benefit-card__icon { font-size: 2rem; color: var(--accent-color-primary); flex-shrink: 0; margin-top: 5px; }
.benefit-card__title {
	margin-bottom: 10px;
	font-size: var(--font-size-xl);
	line-height: 1.2;
}
.benefit-card__text { font-size: var(--font-size-md); }
@media (min-width: 768px) {
    .benefits__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
    .benefits__grid { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------- */
/* ----------------------- Параллакс фон ------------------- */
/* --------------------------------------------------------- */
.content-parallax-wrapper {
    position: relative;
}
.content-parallax-bg {
    /* Приклеиваем его к верху родителя */
    position: sticky;
    top: 0;
    left: 0;

    /* Размеры фона - на весь экран */
    width: 100%;
    height: 100vh; /* 100% высоты видимой части экрана */

    /* Стилизация самого фона */
	/* background-image: url('../img/benefits-bg.png');
	background-size: cover;
    background-position: center center;
    background-attachment: fixed; */ /* Дополнительная гарантия статичности фона */

    /* Важнейший момент: помещаем фон позади контента */
    z-index: 2;
    margin-top: -17px;
}
.content-parallax-content {
    position: relative; /* Создаем новый контекст наложения, чтобы z-index работал предсказуемо */
    z-index: 3; /* Убеждаемся, что контент выше фона */
	margin-top: -90vh;
}
.content-parallax-wrapper .section {
    background-color: transparent; /* Убираем фон у самих секций */
    /* Убедитесь, что у .section--gray и .section--light фон тоже будет убран или переопределен для этого блока */
}
.content-glass-wrapper {
	background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 0, 0, 0.18);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.30), 0 5px 5px rgba(0, 0, 0, 0.30);
    padding: 50px;
}
@media (max-width: 768px) {
	.content-glass-wrapper {
		padding: 20px 10px;
		margin: 0px 7px;
	}
}
/* --------------------------------------------------------- */
/* --------------------- Секция Features ------------------- */
/* --------------------------------------------------------- */
.tab-pane {
    display: none; /* Прячем все панели по умолчанию */
    animation: fadeIn 0.5s;
}
.tab-pane.active {
    display: block; /* Показываем только активную */
}
.tab-image img {
    width: 80%;
    height: auto;
    /* border-radius: 8px; */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}
.tab-description {
	padding: 0px 15px 20px 15px;
}
.tab-description h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}
.specialist-note {
    background-color: #e9ecef;
    border-left: 4px solid #0056b3;
    padding: 15px;
    margin-top: 20px;
    border-radius: 0 4px 4px 0;
    font-size: 0.9rem;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Основной контейнер для навигации */
.tabs-block {
	background: var(--background-color-primary);
    padding: 0 60px 60px 60px;
    border-radius: var(--border-radius);
    text-align: center;
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.30);
	margin-top: 30px;
}
.tabs-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    /* background-color: #f0f2f5; */
    border-radius: 8px;
    margin-bottom: 40px;
    position: relative;
    border-bottom: none; 
}
/* Стили для каждой кнопки-таба */
.tabs-nav .tab-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
    background: none;
    border: none;
    border-right: 1px solid #d8dde2;
    cursor: pointer;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    color: #777;
}
/* Убираем границу у последней кнопки */
.tabs-nav .tab-btn:last-child {
    border-right: none;
}
/* Стили для иконки */
.tabs-nav .tab-btn i {
    font-size: 2rem;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}
/* Стили для текста под иконкой */
.tabs-nav .tab-btn .tab-text {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* Эффект при наведении на неактивный таб */
.tabs-nav .tab-btn:not(.active):hover {
    background-color: #e9ecef;
}
/* --- АКТИВНОЕ СОСТОЯНИЕ --- */
/* Активная полоска сверху */
.tabs-nav .tab-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--accent-color-primary);
    transform: scaleX(0);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Показываем полоску у активного таба */
.tabs-nav .tab-btn.active::before {
    transform: scaleX(1);
}
/* Красим иконку и текст активного таба */
.tabs-nav .tab-btn.active,
.tabs-nav .tab-btn.active i {
    color: var(--accent-color-primary);
}
/* --- АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ --- */
@media (max-width: 768px) {
	.tabs-block {
		padding: 0px;
	}
	
    .tabs-nav {
        display: flex; /* Переключаемся на flex для скролла */
        grid-template-columns: none; /* Сбрасываем грид */
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
        scrollbar-width: none; /* Firefox */
        border-radius: 0; /* Растягиваем на всю ширину */
		margin: 0px 0px 10px 0px;
        /* padding: 0 10px; */
		/* justify-content: center; */
		justify-content: space-between;
    }
    .tabs-nav::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

    .tabs-nav .tab-btn {
        flex: 0 0 auto; /* Запрещаем кнопкам сжиматься/растягиваться */
        width: 22vw; /* Задаем минимальную комфортную ширину */
        padding: 7px 2px;
    }
	
	.tabs-nav .tab-btn.active:first-child::before {
		border-top-left-radius: 11px 9px;
	}
	
	.tabs-nav .tab-btn.active:last-child::before {
		border-top-right-radius: 11px 9px;
	}
	
	.tabs-nav .tab-btn i {
		font-size: 1rem;
	}
	.tabs-nav .tab-btn .tab-text {
		font-size: 0.4rem;
	}
	.tab-description h3 {
		font-size: 1.2rem;
	}
	.tab-image img {
		width: 100%;
	}
}


/* --------------------------------------------------------- */
/* ----------------------- Секция Steps -------------------- */
/* --------------------------------------------------------- */
.steps {
	/* min-height: 100vh; */
	z-index: 2;
}
.steps__wrapper {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 20px;
}
.step {
	background: var(--background-color-primary);
	padding: 20px;
	border-radius: var(--border-radius);
	text-align: center;
	border: 1px solid #e0e0e0;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.30);
}
.step__number {
	width: 50px;
	height: 50px;
	background: var(--accent-color-primary);
	color: var(--background-color-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 15px;
	flex-shrink: 0;
	border: 3px solid var(--background-color-primary);
	box-shadow: 0 0 0 2px var(--accent-color-primary);
}
.step__title {
	margin-bottom: 10px;
	font-size: var(--font-size-lg);
}
.step__text { font-size: var(--font-size-sm); }
@media (min-width: 500px) {
    .steps__wrapper { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .steps__wrapper { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
    .steps__wrapper { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------- */
/* ----------------------- Секция Cases -------------------- */
/* --------------------------------------------------------- */
.cases { /* min-height: 95vh; */ }
.cases__wrapper { display: grid; grid-template-columns: 1fr; gap: 30px; }
.case-card {
	background: var(--background-color-primary);
	border-radius: var(--border-radius);
	overflow: hidden;
	transition: transform 0.3s;
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.3);
}
.case-card:hover { transform: translateY(-5px); }
.case-card__image { width: 100%; height: 200px; object-fit: cover; }
.case-card__content { padding: 20px; }
.case-card__logo { height: 30px; margin-bottom: 15px; }
.case-card__title {
	margin-bottom: 10px;
	font-size: var(--font-size-lg);
}
.case-card__problem, .case-card__solution { font-size: var(--font-size-sm); }
.case-card__problem { margin-bottom: 10px; }
@media (min-width: 768px) {
    .cases__wrapper { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
    .cases__wrapper { grid-template-columns: repeat(3, 1fr); }
}


/* --- Стили для встроенных в секции CTA-кнопок --- */
.section__cta-wrapper {
	display: flex;
	justify-content: center;
    text-align: center;
    margin-top: 60px; /* Отступ от контента секции */
}



/* --------------------------------------------------------- */
/* ----------------------- Секция Trust -------------------- */
/* --------------------------------------------------------- */
.trust { /* min-height: 95vh; */ }
.trust__wrapper { display: flex; flex-direction: column; gap: 40px; }
.trust__guarantees { flex: 1; min-width: 0; }
.trust__certs { position: relative; padding: 0 80px; }
.trust__guarantees ul { list-style: none; padding-left: 0; }
.trust__guarantees li {
	padding-left: 30px;
	position: relative;
	margin-bottom: 15px;
	font-size: var(--font-size-lg);
}
.trust__guarantees li::before {
	content: '✔';
	color: var(--accent-color-primary);
	position: absolute;
	left: 0;
	top: 0;
}

@media (min-width: 768px) {
    .trust__wrapper { flex-direction: row; align-items: center; }
    .trust__guarantees, .trust__certs { flex: 1; }
}

.certs-slider-cards {
	max-width: 360px;
    width: 75%;
	margin: 0 auto;
	aspect-ratio: 3 / 4;
}
.certs-slider-cards .swiper-slide {
	pointer-events: none;
    display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: flex-start;
	background-color: #fff; /* Добавим фон, если его не было */
    border-radius: 18px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    overflow: hidden; /* Важно, чтобы скруглились и углы картинки */
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    border: 1px solid #eee;
}
.certs-slider-cards .swiper-slide-active {
  pointer-events: auto;
}
.certs-slider-cards .swiper-slide a {
	display: block;
	width: 100%;
	/* height: 100%; */
	flex-grow: 1;
	min-height: 0; /* Важный хак для flexbox */
}
.certs-slider-cards .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Стили для подписи под сертификатом */
.cert-caption {
    width: 100%;
    padding: 10px 15px;
    margin: 0;
    box-sizing: border-box; /* Чтобы padding не ломал размеры */
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    /* Убедимся, что подпись не будет слишком длинной */
    line-height: 1.3;
    min-height: 40px; /* Резервируем место, чтобы слайды не прыгали по высоте */
    display: flex;
    align-items: center;
    justify-content: center;
	margin-top: 20px;
	transition: opacity 0.3s ease;
}
.certs-slider-cards .swiper-button-next,
.certs-slider-cards .swiper-button-prev {
	top: 50%;
	transform: translateY(-50%);
	color: var(--accent-color-primary);
}
.certs-slider-cards .swiper-button-prev { left: -2rem; }
.certs-slider-cards .swiper-button-next { right: -2rem; }
@media (max-width: 767px) {
    .trust__certs {
		padding: 0 35px;
	}
	.certs-slider-cards {
        /* width: 80%; */
		max-width: 50vw;
    }
    .certs-slider-cards .swiper-button-prev { left: -5px; }
    .certs-slider-cards .swiper-button-next { right: -5px; }
}




/* --------------------------------------------------------- */
/* -------------- Секция Преимуществ поддержки ------------- */
/* --------------------------------------------------------- */
.support-advantage-block { /* min-height: 95vh; */ }
.support-advantage-block__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}
.support-advantage-block__image {
    max-width: 400px;
    width: 100%;
}
.support-advantage-block__image img {
    width: 100%;
    border-radius: var(--border-radius);
}
.support-advantage-block__content {
    text-align: center;
	display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.support-advantage-block__list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}
.support-advantage-block__list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-size: var(--font-size-lg);
    text-align: left;
}
.support-advantage-block__list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--accent-color-primary);
    position: absolute;
    left: 0;
}
@media (min-width: 768px) {
    .support-advantage-block__container {
        flex-direction: row;
        gap: 60px;
    }
    .support-advantage-block__content {
        text-align: left;
        flex-basis: 55%;
    }
    .support-advantage-block__image {
        flex-basis: 45%;
    }
}


/* --------------------------------------------------------- */
/* ------------------------ Секция FAQ --------------------- */
/* --------------------------------------------------------- */
.faq { /* min-height: 95vh; */ }
.faq__accordion { max-width: 800px; margin: 0 auto; }
.faq__item {
	background: var(--background-color-primary);
	border-radius: 5px;
	margin-bottom: 10px;
	/* box-shadow: 0 2px 5px rgba(0,0,0,0.05); */
	border: 1px solid #e0e0e0;
	box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.3);
}
.faq__question {
	width: 100%;
	background: none;
	border: none;
	padding: 20px;
	font-size: var(--font-size-lg);
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--font-color-secondary);
}
.faq__question:hover {
	color: var(--accent-color-primary);
}
.faq__question::after {
	content: '+';
	font-size: 2rem;
	color: var(--font-color-secondary);
	transition: transform 0.3s ease;
}
.faq__item.active .faq__question {
	color: var(--font-color-secondary);
}
.faq__item.active .faq__question::after { transform: rotate(45deg); }
.faq__answer {
	font-size: var(--font-size-md);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
}
.faq__answer[data-lang-key] { padding: 0 20px; line-height: 1.7; }
.faq__item.active .faq__answer { padding-bottom: 20px; }



/* --------------------------------------------------------- */
/* ------------------- Секция Нам доверяют ----------------- */
/* --------------------------------------------------------- */
/* ИЗМЕНЕНО: Секция теперь имеет стандартные отступы */
.clients {
    position: relative;
	background: linear-gradient(rgba(248, 249, 250, 0),var(--background-color-primary) , var(--background-color-primary));
    border-radius: 8px 8px 0px 0px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    /* box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); */
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.30), 0 -5px 5px rgba(0, 0, 0, 0.30);
}
.clients-section-title {
	font-size: var(--font-size-xxl);
}
.logo-ticker-container {
    padding: 20px 0;
}
.logo-ticker {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 15px 0;
}
.logo-ticker::before, .logo-ticker::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 2;
}
.logo-ticker::before {
    left: 0;
    background: linear-gradient(to left, rgba(248, 249, 250, 0), var(--background-color-primary));
}
.logo-ticker::after {
    right: 0;
    background: linear-gradient(to right, rgba(248, 249, 250, 0), var(--background-color-primary));
}
.logo-ticker__track {
    display: flex;
    align-items: center;
    gap: 60px;
    width: fit-content;
    animation-name: scroll-left;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.logo-ticker__track--right {
    animation-name: scroll-right;
}
.logo-ticker--reverse .logo-ticker__track {
    animation-name: scroll-right;
}
.logo-ticker__track img {
    height: 55px; /* ИЗМЕНЕНО: высота уменьшена */
    width: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s, opacity 0.3s, transform 0.3s;
}
.logo-ticker__track img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}
@keyframes scroll-left {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@keyframes scroll-right {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}
@media (max-width: 768px) {
    .logo-ticker__track { gap: 40px; }
    .logo-ticker__track img { height: 28px; } /* ИЗМЕНЕНО */
    .logo-ticker::before, .logo-ticker::after { width: 50px; }
}


/* --------------------------------------------------------- */
/* ------------------------ Секция CTA --------------------- */
/* --------------------------------------------------------- */
.cta {
	position: relative;
	color: var(--background-color-primary);
}
.cta__container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 30px;
}
.cta__expert {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.cta__expert-photo {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 4px solid var(--background-color-primary);
	object-fit: cover;
	margin-bottom: 10px;
}
.cta__expert-name {
	font-weight: bold;
	font-size: var(--font-size-lg);
}
.cta__expert-title {
	font-size: var(--font-size-sm);
	opacity: 0.8;
}
.cta__content {
	max-width: 700px;
	display: flex;
    flex-direction: column;
	align-items: center;
}
.cta__text {
	margin-top: -30px;
	margin-bottom: 30px;
	font-size: var(--font-size-lg);
}
@media (min-width: 768px) {
    .cta__container {
		flex-direction: row;
		text-align: left;
		gap: 50px;
	}
	.cta__content {
		align-items: flex-start;
	}
}


/* --------------------------------------------------------- */
/* -------------------------- Подвал ----------------------- */
/* --------------------------------------------------------- */
.footer { 
	position: relative;
    background-color: var(--footer-background-color); 
    color: #ccc; 
    padding: 60px 0 20px; 
    font-size: font-size: var(--font-size-sm);
}
.footer a { 
    color: var(--background-color-primary); 
    text-decoration: none; 
    transition: color 0.2s;
}
.footer a:hover { 
    color: var(--accent-color-primary);
    text-decoration: none;
}
.footer__main { 
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 40px;
    margin-bottom: 40px;
    text-align: center;
}
.footer__col--about {
    margin: 0 auto;
}
.footer__logo img { height: 40px; margin-bottom: 15px; }
.footer__copyright { color: #888; }
.footer__title {
    font-size: var(--font-size-md);
    font-weight: bold;
    color: var(--background-color-primary);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.footer__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer__nav-list li {
    margin-bottom: 8px;
}
.footer__link, .footer__desc {
    display: block;
    line-height: 1.5;
}
.footer__desc { color: #888; }
.footer__social-icons { display: flex; gap: 15px; justify-content: center; }
.footer__social-icons img { height: 30px; }
.footer__bottom { 
    border-top: 1px solid #444; 
    padding-top: 20px; 
    text-align: center; 
    font-size: var(--font-size-xs);
    color: #888;
}
.footer__bottom a { 
    color: #ccc;
    text-decoration: underline;
}
@media (min-width: 500px) {
    .footer__main {
        grid-template-columns: repeat(2, 1fr);
        text-align: left;
    }
    .footer__col--about { margin: 0; }
    .footer__social-icons { justify-content: flex-start; }
}
@media (min-width: 768px) {
    .footer__main { flex-direction: row; justify-content: space-between; align-items: flex-start; text-align: left; }
    .footer__bottom { display: flex; justify-content: space-between; }
}
@media (min-width: 1200px) {
    .footer__main {
        grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    }
    .footer__bottom {
        display: flex;
        justify-content: space-between;
    }
}


/* --------------------------------------------------------- */
/* ---------------------- Модальные окна ------------------- */
/* --------------------------------------------------------- */
.modal-button-wrapper {
	display: flex;
    justify-content: center;
    margin-top: 60px;
}
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; align-items: flex-start; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; z-index: 2000; padding: 20px; overflow-y: auto; }
.modal.active { opacity: 1; visibility: visible; }
.modal__content {
	background: var(--background-color-primary);
	padding: 30px;
	border-radius: var(--border-radius);
	max-width: 500px;
	width: 100%;
	position: relative;
	transform: translateY(-50px);
	transition: transform 0.3s;
	margin: auto 0;
}
.modal.active .modal__content { transform: translateY(0); }
.modal__close { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 2rem; cursor: pointer; color: #888; }
.modal__title {
	text-align: center;
	margin-bottom: 10px;
	font-size: var(--font-size-xl);
}
.modal__subtitle {
	font-size: var(--font-size-md);
	text-align: center;
	margin-bottom: 20px;
	color: #666;
}
@media (min-width: 768px) {
    .modal { align-items: center; padding: 40px; }
    .modal__content { width: auto; max-height: 90vh; overflow-y: auto; }
}

.form__group { margin-bottom: 15px; }
.form__group label {
	font-size: var(--font-size-sm);
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
}
.form__group input, .form__group textarea, .form-control { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: var(--border-radius); font-size: 1rem; }
/* .form__button { width: 100%; padding: 15px; font-size: 1.1rem; } */
.form__privacy {
	font-size: var(--font-size-xs);
	text-align: center;
	margin-top: 15px;
	color: #777;
}
.form__privacy a {
	color: var(--font-color-secondary);
	text-decoration: underline;
}
.modal__content--success { text-align: center; }
.success-icon { width: 80px; height: 80px; margin: 0 auto 20px; }
.success-icon svg { width: 100%; height: 100%; fill: #28a745; }
.scheduler-toggle { margin: 20px 0; display: flex; align-items: center; }
.scheduler-toggle input[type="checkbox"] { margin-right: 10px; width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; }
.scheduler-toggle label {
	cursor: pointer;
	font-weight: bold;
	color: var(--font-color-secondary);
}
.form-control {
	background-color: #fff;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.7rem center;
	background-size: 1rem;
	cursor: pointer;
}
.form-control:disabled { background-color: #e9ecef; opacity: 1; cursor: not-allowed; }


/* СТИЛИ ДЛЯ КВИЗА */
.quiz-progress {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 5px;
    margin-bottom: 20px;
    height: 8px;
}
.quiz-progress-bar {
    height: 100%;
    width: 0;
    background-color: var(--color-primary);
    border-radius: 5px;
    transition: width 0.4s ease;
}
.quiz-step {
    display: none;
}
.quiz-step.active {
    display: block;
}
.quiz-question {
    font-size: var(--font-size-lg);
    font-weight: bold;
    margin-bottom: 15px;
}
.quiz-options label {
    display: block;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}
.quiz-options label:hover {
    background-color: #f5f5f5;
}
.quiz-options input[type="radio"] {
    margin-right: 10px;
}
.quiz-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
/* .quiz-navigation .button--secondary {
    background-color: #ccc;
    border-color: #ccc;
    color: #333;
} */

.honeypot-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* --------------------------------------------------------- */
/* --------------- Стили для страницы политики ------------- */
/* --------------------------------------------------------- */
.section--text-page { background-color: var(--light-color); }
.container--text-page { max-width: 800px; }
.container--text-page h1, .container--text-page h2, .container--text-page h3 { text-align: center; }
.container--text-page h2 {
	font-size: var(--font-size-xl);
	margin-top: 40px;
	margin-bottom: 20px;
}
.container--text-page h3 {
	font-size: var(--font-size-lg);
	margin-top: 25px;
	margin-bottom: 15px;
	font-weight: 600;
}
.container--text-page p, .container--text-page li {
	font-size: var(--font-size-md);
	line-height: 1.7;
	margin-bottom: 15px;
	text-align: justify;
}
.container--text-page ul { list-style-position: outside; padding-left: 25px; }
.privacy-table { width: 100%; border-collapse: collapse; margin: 25px 0; }
.privacy-table td { border: 1px solid #ddd; padding: 12px; vertical-align: top; }
.privacy-table tr td:first-child { font-weight: bold; width: 30%; }
.page-toc {
    background-color: var(--bg-light-gray);
    border: 1px solid #e0e0e0;
    border-left: 4px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: 20px 25px;
    margin: 30px 0 40px;
}
.page-toc h4 {
    margin-bottom: 20px;
    font-size: 1.2rem;
}
.page-toc ul {
    list-style: none;
    padding: 0;
    /* columns: 2; */
    column-gap: 40px;
}
.page-toc li {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
}
.page-toc a {
    text-decoration: none;
    color: var(--dark-color);
    font-weight: 500;
    position: relative;
    padding-bottom: 2px;
    transition: color 0.2s ease;
}
.page-toc a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--accent-color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.page-toc a:hover {
    color: var(--accent-color-primary);
}
.page-toc a:hover::after {
    transform: scaleX(1);
}
.page-toc li::before {
    content: '\f00c'; /* Код иконки галочки из Font Awesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--accent-color-primary);
    margin-right: 10px;
    margin-top: 4px;
}
@media (max-width: 600px) {
    .page-toc ul {
        columns: 1;
    }
}
/* --- Стили для кнопки "Наверх" --- */
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    background-color: var(--primary-color);
    color: var(--white-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 999;
}
.scroll-to-top:hover {
    background-color: var(--accent-color-primary);
    transform: translateY(-2px);
}
.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}




/* --------------------------------------------------------- */
/* --------------- Стили для страницы поддержки ------------ */
/* --------------------------------------------------------- */
.form--support {
    margin-top: 40px;
    background-color: var(--white-color);
    padding: 30px;
    border-radius: var(--border-radius);
    border: 1px solid #e0e0e0;
}
.form__helper-text {
    display: block;
    font-size: var(--font-size-xs);
    color: #666;
    margin-top: 5px;
}
.form__group--checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
}
.form__group--checkbox input[type="checkbox"] {
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
}
.form__group--checkbox label {
    margin-bottom: 0;
    font-weight: normal;
}
.button--file {
    display: inline-block;
    cursor: pointer;
    background-color: #e9ecef;
    color: var(--dark-color);
}
.button--file:hover {
    background-color: #dfe0df;
}
.file-list {
    margin-top: 10px;
    font-size: 0.9rem;
}
.file-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    background-color: var(--bg-light-gray);
    border-radius: 4px;
    margin-bottom: 5px;
}
.file-list-item button {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    font-size: 1.1rem;
}
.support-info {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #e0e0e0;
}
.support-info__title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
}




/* --------------------------------------------------------- */
/* -------------- Стили для страницы О компании ------------ */
/* --------------------------------------------------------- */
.about-intro {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
    text-align: justify;
}
.about__main-title {
    text-align: center;
	font-size: var(--font-size-xxxl);
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 40px;
    color: var(--accent-color-primary);
    text-wrap: balance;
}
/* Video Section */
.video-player-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    background-color: #000;
}

.timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding: 20px 0;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 40px;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--primary-color);
    opacity: 0.2;
}
.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 40px;
}
.timeline-year {
    flex-shrink: 0;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-weight: bold;
    font-size: 1.2rem;
    border-radius: 50%;
    width: 83px;
    height: 83px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 4px solid var(--bg-light-gray);
    box-shadow: 0 0 0 3px var(--primary-color);
}
.timeline-content {
    padding-top: 10px;
}
.timeline-list {
    padding-left: 20px;
}
.gallery-slider {
	/* max-width: 50vw; */
    width: 100%;
	padding-top: 50px;
    padding-bottom: 50px;
	margin: 0 auto;
}

.gallery-slider .swiper-slide {
	pointer-events: none;
	background-position: center;
	background-size: cover;
	/* display: flex; */
	align-items: center;
	justify-content: center;
	overflow: hidden; /* Оставляем, чтобы скруглить углы у картинки */
	border-radius: 18px;
	
	
    /* display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid #eee; */
}
.gallery-slider .swiper-slide-active {
  pointer-events: auto;
}
.gallery-slider .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Это гарантирует, что изображение заполнит слайд, сохранив пропорции */
}

.geography-block {
    text-align: center;
}
.geography-map {
    max-width: 800px;
    width: 100%;
    margin-bottom: 20px;
}
/* 1. Контейнер-обертка, который задает пропорции */
.map-wrapper {
    position: relative;
    width: 100%;
    /* 
     * Это и есть главный трюк. padding-bottom в % считается от ширины родителя.
     * 56.25% = 9 / 16 * 100%  (соотношение сторон 16:9)
     * Если хотите другое соотношение, например 4:3, используйте 75% (3 / 4 * 100%)
    */
    padding-bottom: 56.25%; 
    height: 0;
    overflow: hidden; /* Скрываем все, что может выйти за пределы */
    border-radius: 12px; /* Применяем скругление к обертке */
}

/* 2. Сама карта, которая растягивается на всю обертку */
#clients-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Убираем рамки, если они были */
}
.custom-leaflet-tooltip {
    /* Убираем стандартную рамку и тень, которые есть у всплывающих подсказок */
    border: none;
    box-shadow: none;
    background-color: transparent; /* Делаем фон прозрачным */

    /* Настраиваем шрифт */
    color: #333; /* Цвет текста */
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 2px white, -1px -1px 2px white, 1px -1px 2px white, -1px 1px 2px white; /* Белая обводка для читаемости на любом фоне */
}
@media (max-width: 767px) {
    .timeline::before {
        left: 20px;
    }
    .timeline-item {
        gap: 15px;
    }
    .timeline-year {
        width: 45px;
        height: 45px;
        font-size: 0.8rem;
        left: 0;
        border-width: 2px;
        box-shadow: 0 0 0 2px var(--primary-color);
        transform: translateX(-50%);
        left: 20px; /* Совмещаем с линией */
        position: relative;
    }
}




/* --------------------------------------------------------- */
/* ----------------- Стили для страницы СДПС --------------- */
/* --------------------------------------------------------- */
.container-sdps-text-page { max-width: 1200px; }
.container-sdps-text-page h1, .container-sdps-text-page h2, .container-sdps-text-page h3 { text-align: center; }
.container-sdps-text-page h2 {
	font-size: var(--font-size-xl);
	margin-top: 40px;
	margin-bottom: 20px;
}
.container-sdps-text-page h3 {
	font-size: var(--font-size-lg);
	margin-top: 25px;
	margin-bottom: 15px;
	font-weight: 600;
}
.container-sdps-text-page p {
	padding-left: 10%;
	padding-right: 10%;
}
.container-sdps-text-page p, .container-sdps-text-page li {
	font-size: var(--font-size-md);
	line-height: 1.7;
	margin-bottom: 15px;
	text-align: justify;
}
.container-sdps-text-page ul { list-style-position: outside; padding-left: 25px; }



.sdps__main-title {
    text-align: center;
	font-size: var(--font-size-xxxl);
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 40px;
    color: var(--accent-color-primary);
    text-wrap: balance;
}
.sdps__main-title_h2 {
    text-align: center;
	font-size: var(--font-size-xxl);
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 40px;
    color: var(--light-color);
    text-wrap: balance;
}
p.sdps-text {
    padding-bottom: 10px;
    /* text-align: center; */
}
.sdps-components__wrapper { display: grid; grid-template-columns: 1fr; gap: 30px; }
.sdps-components-card { background: var(--white-color); border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: transform 0.3s; }
.sdps-components-card:hover { transform: translateY(-5px); }
.sdps-components-card__image { width: 100%; height: 200px; object-fit: contain; }
.sdps-components-card__content { padding: 20px; }
.sdps-components__title {
	margin-bottom: 10px;
	font-size: var(--font-size-lg);
}
.sdps-components__text { font-size: var(--font-size-sm); }
@media (min-width: 768px) {
    .sdps-components__wrapper { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
    .sdps-components__wrapper { grid-template-columns: repeat(4, 1fr); }
}


.VRT-block__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}
.VRT-block__content {
    text-align: center;
}
.VRT-block__image {
    max-width: 400px;
    width: 100%;
}
.VRT-block__image img {
    width: 100%;
    border-radius: var(--border-radius);
}
@media (min-width: 768px) {
    .VRT-block__container {
        flex-direction: row;
        gap: 60px;
    }
    .VRT-block__content {
        text-align: left;
        flex-basis: 55%;
    }
    .VRT-block__image {
        flex-basis: 45%;
    }
}


.sdps-patents__wrapper { display: grid; grid-template-columns: 1fr; gap: 30px; }
.sdps-patents-card { background: var(--white-color); border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: transform 0.3s; }
.sdps-patents-card:hover { transform: translateY(-5px); }
.sdps-patents-card__image { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 768px) {
    .sdps-patents__wrapper { grid-template-columns: repeat(1, 1fr); }
}
@media (min-width: 1025px) {
    .sdps-patents__wrapper { grid-template-columns: repeat(2, 1fr); }
}


.sdps-graphic__wrapper { display: grid; grid-template-columns: 1fr; gap: 30px; }
.sdps-graphic-card { background: var(--white-color); border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: transform 0.3s; }
.sdps-graphic-card:hover { transform: translateY(-5px); }
.sdps-graphic-card__image { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 768px) {
    .sdps-graphic__wrapper { grid-template-columns: repeat(1, 1fr); }
}
@media (min-width: 1025px) {
    .sdps-graphic__wrapper { grid-template-columns: repeat(2, 1fr); }
}


.sdps-docs-title {
	text-align: center;
	font-size: var(--font-size-xl);
	margin-bottom: 40px;
	color: var(--primary-color);
	line-height: 1.2;
}
.sdps-docs__wrapper { display: grid; grid-template-columns: 1fr; gap: 30px; }
.sdps-docs-card {
	display: flex;
	background: var(--white-color);
	border-radius: var(--border-radius);
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0,0,0,0.08);
	transition: transform 0.3s;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.sdps-docs-card:hover { transform: translateY(-5px); }
.sdps-docs-card__image {
	margin-bottom: 15px;
    margin-top: 15px;
}
.sdps-docs-card-label { text-align: center; }
.sdps-docs-card a {
	text-decoration: none;
	color: #ffffff;
}
.sdps-docs_download-button {
	color: #ffffff;
    background-color: #000000;
	border-radius: 5px;
	cursor: pointer;
	margin-bottom: 15px;
    margin-top: 15px;
	padding-left: 10px;
    padding-right: 10px;
}
@media (min-width: 768px) {
    .sdps-docs__wrapper { grid-template-columns: repeat(1, 1fr); }
}
@media (min-width: 1025px) {
    .sdps-docs__wrapper { grid-template-columns: repeat(3, 1fr); }
}

.is-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* margin: 0 auto; */
	
}
.is-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.is-slide-description {
	margin-top: 15px;
}

.sdps-roles_title {
	text-align: center;
	font-size: var(--font-size-lg);
	margin-bottom: 40px;
	/* color: var(--primary-color); */
	line-height: 1.2;
}
.sdps-roles__wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	margin-top: 30px;
}
.sdps-roles-card {
	display: flex;
	background: var(--white-color);
	border-radius: var(--border-radius);
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0,0,0,0.08);
	transition: transform 0.3s;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}
.sdps-roles-card:hover { transform: translateY(-5px); }
.sdps-roles-card__image {
	margin-bottom: 15px;
    margin-top: 15px;
	max-height: 35%;
    max-width: 35%;
}
.sdps-roles-card__content {
	margin: 0 5%;
}
.sdps-roles-card__title { }
.sdps-roles-card__text { }
@media (min-width: 768px) {
    .sdps-roles__wrapper { grid-template-columns: repeat(1, 1fr); }
}
@media (min-width: 1025px) {
    .sdps-roles__wrapper { grid-template-columns: repeat(3, 1fr); }
}