@font-face{
  font-family: "Manrope";
  src: url("../fonts/manrope/static/Manrope-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Manrope";
  src: url("../fonts/manrope/static/Manrope-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Manrope";
  src: url("../fonts/manrope/static/Manrope-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Manrope";
  src: url("../fonts/manrope/static/Manrope-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}






/* style.css (single file)
   Один файл, но логично сгруппировано “разделами”.
   Вы можете копировать этот файл в новый проект и наращивать блоки.
*/

/* ======================================================================
   1) TOKENS / VARIABLES (общие настройки проекта)
====================================================================== */
:root{
  --container: 1200px;
  --gutter: 0 12px;
  --gap: 30px;

  --text: #1b1b1b;
  --muted: #555;

  --bg: #ffffff;

  --radius: 14px;
  
  --bg-dark-1: #19272B;
  
  	--card-grad: linear-gradient(91deg, #2b3ba5 0%, #EC4899 116%, #38BDF8 117%);
	--wave-color-1: rgba(0, 210, 255, 0.3);
	--wave-color-2: rgba(146, 50, 255, 0.3);
  
  --sal-duration: 0.65s;
  --sal-delay: 100ms;
  --sal-easing: cubic-bezier(.215, .61, .355, 1); /* это ease-out-cubic */ 
}

/* ======================================================================
   2) BASE / RESET (база)
====================================================================== */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}


#os-root { height: 100vh; }


html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }


img { max-width: 100%; display: block; }

/* ======================================================================
   3) LAYOUT FOUNDATION (ваш “block” → container)
====================================================================== */
.container{
  width: min(var(--container), 100%);
  margin: 0 auto;
  padding: var(--gutter);
  position: relative;
}

/* демо-обвязка (можете удалить) */
.site-header{
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 50;
  padding: 18px 0;
  
  background-color: transparent;
  transition: 0.6s;
}


/* Не главная страница: шапка всегда с фоном (fallback, даже если JS не отработал) */
body:not(.home):not(.front-page) .site-header{
  background-color: var(--bg-dark-1);
}



.site-header::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 110px;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events: none;
  
  display:none;
}

.site-footer{ padding: 24px 0 40px; }

code{
  padding: 2px 6px;
  border-radius: 8px;
  background: #f6f6f6;
}

/* ======================================================================
   4) REUSABLE UI (типографика, кнопки)
====================================================================== */
.h1{
  margin: 0 0 8px;
  font-size: 26px;
}
.muted{
  margin: 0;
  color: var(--muted);
  max-width: 900px;
}
.title{
  margin: 0 0 18px;
  font-size: 28px;
  font-weight: 700;
}
.richtext p{
  margin: 0 0 12px;
  color: var(--muted);
}
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 14px;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* ======================================================================
   5) BLOCK SYSTEM (section → layout → col)
====================================================================== */
.section{
  padding: 28px 0;
}

.layout{

}

.col{ min-width: 0; }

.col--text{
  padding: 64px 45px 50px 64px;
}

.col--media{
  overflow: hidden;
}
.col--media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ======================================================================
   6) VARIANTS: FLEX and GRID (меняете только этот модификатор)
====================================================================== */

/* FLEX: 2 колонки */
.layout--flex{
  display: flex;
  align-items: stretch;
}
.layout--flex > .col{
  flex: 1 1 0; /* равные колонки */
}

/* GRID: 2 колонки */
.layout--grid{
  display: grid;
  grid-template-columns: 1fr 1fr; /* равные колонки */
  align-items: stretch;
}



.layout--header{
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative; /* поверх ::before */
}


.logo{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.logo img{
  height: 34px; /* подгоните под ваш logo.webp */
  width: auto;
}

/* NAV */
.nav{ 
	flex: 1 1 auto; 
}
.nav__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.nav__item{ position: relative; }
.nav__link{
  color: rgba(255,255,255,.9);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav__item.has-sub > .nav__link::after{
  content: "▾";
  font-size: 12px;
  opacity: .75;
}

/* dropdown (2-й уровень) */
.nav__sub{
  list-style: none;
  margin: 0;
  padding: 10px;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 210px;

  background: rgba(12,18,24,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: .18s ease;
}

.nav__sublink{
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  color: rgba(255,255,255,.9);
  text-decoration: none;
  font-size: 14px;
}
.nav__sublink:hover{ background: rgba(255,255,255,.08); }

/* показ dropdown: hover + focus-within */
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}



.btn--primary{
  background: rgba(120,155,170,.85);
  color: #071016;
}
.btn--primary:hover{ filter: brightness(1.05); }

/* ===== HERO ===== */
.section.hero{
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden; /* важно, чтобы фон не вылезал по краям */

  /* УБИРАЕМ fixed фон отсюда — фон будет в ::before */
  background: none;
  color: #fff;

  padding: 140px 0 90px;
  
    --p-overlay:
    radial-gradient(900px 600px at 50% 35%, rgba(0,0,0,.25), rgba(0,0,0,.10)),
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.15));
}



/* Контент hero — поверх всего */
.layout--hero{
  position: relative;
  z-index: 2;
}

.hero__content{
  max-width: 860px;
  margin: 0 auto;
  text-align: center;

  /* ощущение “слоя выше фона” */
  transform: translateY(-6px);
}

.hero__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  opacity: .9;
}
.hero__line{
  width: 46px;
  height: 1px;
  background: rgba(255,255,255,.35);
}
.hero__eyebrow-text{
  font-size: 14px;
  letter-spacing: .12em;
  font-weight: 700;
}

.hero__title{
  margin: 0 0 18px;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.08;
  font-weight: 800;
}
.hero__title-dim{ opacity: .7; font-weight: 800; }
.hero__title-dimmer{ opacity: .55; font-weight: 800; }

.hero__text{
  margin: 0 auto 26px;
  max-width: 720px;
  color: rgba(255,255,255,.78);
  font-size: 18px;
  line-height: 1.7;
}

.btn--ghost{
  background: rgba(120,155,170,.38);
  color: #fff;
  border-color: rgba(255,255,255,.18);
}
.btn--ghost:hover{ background: rgba(120,155,170,.48); }







html.has-os,
html.has-os body{
  height: 100%;
}

html.has-os body{
  overflow: hidden; /* окно не скроллим, скроллим viewport OS */
}

html.has-os #os-root{
  height: 100vh;
}






/* =========================
   WP Admin Bar fix (header)
   ========================= */

/* по умолчанию (гости) */
:root { --wp-adminbar-h: 0px; }

/* когда пользователь залогинен и видит админ-бар */
body.admin-bar { --wp-adminbar-h: 32px; }

/* на узких экранах админ-бар выше */
@media (max-width: 782px){
  body.admin-bar { --wp-adminbar-h: 46px; }
}

/* сдвигаем фикс-шапку ниже админ-бара */
.site-header{
  top: var(--wp-adminbar-h);
}








/* ===== Theme: как GadgetFix (тонкая линия поверх контента) ===== */




/* горизонтальный на всякий случай */
.os-scrollbar-horizontal{ display:none !important; }


/* ================================
   OverlayScrollbars: GadgetFix-like
   (не зависит от порядка <link>)
================================ */

.os-scrollbar.os-theme-gadgetfix{
  /* зона скроллбара (оверлейная) */
  --os-size: 5px;

  /* отступы внутри зоны (делают линию "внутри", не у края) */
  --os-padding-perpendicular: 0px; /* слева/справа */
  --os-padding-axis: 1px;         /* сверху/снизу */

  /* трек полностью невидимый */
  --os-track-bg: transparent;
  --os-track-bg-hover: transparent;
  --os-track-bg-active: transparent;
  --os-track-border: none;
  /*
  --os-track-border-radius: 999px;
  */
  --os-track-border-radius: 0px;

  /* САМОЕ ВАЖНОЕ: реальная толщина линии */
  --os-handle-perpendicular-size: 5px;
  --os-handle-perpendicular-size-hover: 5px;
  --os-handle-perpendicular-size-active: 5px;

  /* цвет линии */
  /*
  --os-handle-bg: rgba(140, 190, 208, .95);
  */
  --os-handle-bg: #4d6c77;
  --os-handle-bg-hover: rgba(140, 190, 208, 1);
  --os-handle-bg-active: rgba(140, 190, 208, 1);

/*
  --os-handle-border-radius: 999px;
  */
  --os-handle-border-radius: 3px;

  /* чтобы выглядело “как в шаблоне”, а не на весь экран */
  --os-handle-min-size: 44px;
  --os-handle-max-size: 90px;

  /* зона “хвата” мышью (удобно, но визуально не толстеет) */
  --os-handle-interactive-area-offset: 10px;
}

/* На всякий случай прибиваем трек */
.os-scrollbar.os-theme-gadgetfix .os-scrollbar-track{
	/*
  background: transparent !important;
  */
  background:#dddddd;
  border: none !important;
}

/* Лёгкий "премиум"-блик, как в темплейтах */
.os-scrollbar.os-theme-gadgetfix .os-scrollbar-handle{
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}

/* горизонтальный скрываем */
.os-scrollbar-horizontal{ display: none !important; }






/* =========================
   Universal BG Parallax
   ========================= */
.parallax-bg{
  position: relative;
  overflow: hidden;
  background: none; /* фон рисуем псевдоэлементом */
}

/* сам фон */
.parallax-bg::before{
  content:"";
  position: absolute;
  inset: -80px 0; /* запас по краям */
  background-image: var(--p-bg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translate3d(0, var(--p-y, 0px), 0) scale(var(--p-scale, 1.08));
  will-change: transform;
  z-index: 0;
}

/* затемнение/оверлей (по желанию) */
.parallax-bg::after{
  content:"";
  position: absolute;
  inset: 0;
  background: var(--p-overlay, none);
  pointer-events: none;
  z-index: 1;
}

/* контент поверх фона */
.parallax-bg > *{
  position: relative;
  z-index: 2;
}



.site-header.is-scrolled {
	
	background-color: var(--bg-dark-1);
	
}


.hero__content .buts {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.btn--st1 {
background: linear-gradient(135deg,
  #7C3AED 0%,
  #EC4899 45%,
  #38BDF8 100%
);
color: #ffffff;
border: 1px solid rgba(255,255,255,.14);
/*
box-shadow:
  0 10px 26px rgba(124, 58, 237, .22),
  0 8px 20px rgba(236, 72, 153, .16),
  0 6px 18px rgba(56, 189, 248, .14),
  inset 0 1px 0 rgba(255,255,255,.18);
 */
text-shadow: 0 1px 1px rgba(0,0,0,.18);
transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;

min-width: 160px;	
}

.btn--st1:hover { 
filter: saturate(1.08) brightness(1.04);
/* hover: */ 
box-shadow:
  0 10px 26px rgba(124, 58, 237, .04),
  0 8px 20px rgba(236, 72, 153, .08),
  0 6px 18px rgba(56, 189, 248, 0.06),
  inset 0 1px 0 rgba(255,255,255, .10)
}


.info1 {
    background: #141414;
    color: #ffffff;
    padding-top: 120px;
    padding-bottom: 120px;
    position: relative;
}

.info1 .layout {
	display: flex;
	gap: 30px;
}

.info1 .col--1 {
	flex: 0 0 calc(40% - 15px);
}

.info1 .col--2 {
    flex: 0 0 calc(60% - 15px);
    display: flex;
    flex-direction: column;
}

.info1 h2 {
	font-size: 55px;
    margin-top: 0;
    line-height: 60px;
}

.info1 h2 span {
  position: relative;
  display: inline-block;
  color: rgba(255,255,255,.35);
  
  --shine-speed: 3.2s;
}

.info1 .col--1 h2 span::after{
  content: "";
  position: absolute;
  left: 0;
  top: calc(100% + 14px);       /* расстояние от слова до линии */
  width: clamp(180px, 22vw, 260px);
  height: 2px;
  border-radius: 999px;

  /* градиент как на вашем варианте */
  background: linear-gradient(90deg,
    rgba(168,  30, 255, .00) 0%,
    rgba(168,  30, 255, .95) 18%,
    rgba(120,  90, 255, .95) 45%,
    rgba( 60, 190, 255, 1.00) 100%
  );

  /* “свечения” */
  box-shadow:
    0 0 10px rgba(120, 90, 255, .55),
    0 0 18px rgba( 60,190,255, .45);
	
	animation: neonPulse 2.6s ease-in-out infinite;
}

/* яркая "точка" на конце + мягкое облачко вокруг */
.info1 .col--1 h2 span::before{
  content: "";
  position: absolute;
  top: calc(100% + 14px);
  left: clamp(180px, 22vw, 260px); /* в конец линии */
    transform: translate(-50%, -27%);
    width: 6px;
    height: 4px;
  border-radius: 50%;

  background: radial-gradient(circle,
    rgba(255,255,255,1) 0%,
    rgba(120,200,255,1) 35%,
    rgba( 60,190,255,.0) 70%
  );

  box-shadow:
    0 0 12px rgba(120,200,255,.85),
    0 0 26px rgba( 60,190,255,.55),
    0 0 44px rgba(168, 30,255,.25);
}







/* 1) Пульс свечения линии */
.info1 .col--1 h2 span::after{
  animation: neonPulse 2.6s ease-in-out infinite;
}

/* 2) Мягкий "блик" по линии (доп. псевдоэлемент) */
.info1 .col--1 h2 span{
  /* чтобы новый ::marker не нужен — используем background-слой через mask */
  /* ничего не ломает */
}

.info1 .col--1 h2 span{
  --shine-speed: 3.2s;
}

.info1 .col--1 h2 span::selection{ background: transparent; } /* не обязательно */

/* создаём пробегающий блик отдельным градиентом поверх линии */
.info1 .col--1 h2 span::after{
  background:
    linear-gradient(90deg,
      rgba(168,  30, 255, .00) 0%,
      rgba(168,  30, 255, .95) 18%,
      rgba(120,  90, 255, .95) 45%,
      rgba( 60, 190, 255, 1.00) 100%
    ),
    linear-gradient(90deg,
	  rgba(255,255,255,0) 0%,
	  rgba(255,255,255,.18) 35%,
	  rgba(255,255,255,.55) 50%,
	  rgba(255,255,255,.18) 65%,
	  rgba(255,255,255,0) 100%
	);
	background-size: 100% 100%, 240px 100%;
	background-position: 0 0, -260px 0;
	background-blend-mode: screen;
  background-repeat: no-repeat;
  animation: neonPulse 2.6s ease-in-out infinite, shine var(--shine-speed) linear infinite;
  filter: saturate(1.05);
}

/* 3) Точка слегка "дышит" и чуть мерцает */
.info1 .col--1 h2 span::before{
  animation: dotFlicker 1.6s ease-in-out infinite;
}

/* Анимации */
@keyframes neonPulse{
  0%, 100%{
    box-shadow:
      0 0 8px rgba(120, 90, 255, .40),
      0 0 14px rgba( 60,190,255, .30);
    opacity: .92;
  }
  50%{
    box-shadow:
      0 0 12px rgba(120, 90, 255, .70),
      0 0 22px rgba( 60,190,255, .55);
    opacity: 1;
  }
}

@keyframes shine{
  0%   { background-position: 0 0, -260px 0; }
  100% { background-position: 0 0, calc(100% + 260px) 0; }
}

@keyframes dotFlicker{
  0%, 100%{
    transform: translate(-50%, -27%) scale(1);
    opacity: .92;
  }
  45%{
    transform: translate(-50%, -27%) scale(1.18);
    opacity: 1;
  }
  60%{
    transform: translate(-50%, -27%) scale(1.05);
    opacity: .96;
  }
}





.info1 .col--1 p {
    opacity: 0.55;
    font-size: 21px;
}


.info1 .col--2 .item {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 160px;
    padding-bottom: 35px;
    position: relative;
}

.info1 .col--2 .item h3 {
    font-size: 50px;
    margin-bottom: 30px;
    line-height: 50px;	
}

.info1 .col--2 .item p {
	opacity: 0.55;
    font-size: 18px;	
}

.info1 .col--2 .item:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


.info1 .col--2 .item::before{
	content: "";
    position: absolute;
    top: 35px;
    left: 0px;
    width: 150px;
    height: 150px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}



.info1 .col--2 .item:nth-child(1)::before { 
	background-image: url(../img/dec1.webp);
}

.info1 .col--2 .item:nth-child(2)::before { 
	background-image: url(../img/dec2.webp);
}

.info1 .col--2 .item:nth-child(3)::before { 
	background-image: url(../img/dec3.webp);
}









/* Родитель секции: position: relative; */
.dlx-decor{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 460px;
    pointer-events: none;
    z-index: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    padding-left: 5%;
}



        /* --- Контейнер для волн --- */
        .waves-container {
			position: absolute;
			width: 150%;
			height: 100%;
			top: 0;
			left: -25%;
			z-index: 1;
			pointer-events: none;
			
		  -webkit-mask-image: linear-gradient(to right,
			#000 0%,
			#000 40%,
			transparent 50%,
			transparent 100%
		  );
		  mask-image: linear-gradient(to right,
			#000 0%,
			#000 40%,
			transparent 50%,
			transparent 100%
		  );			
        }

        .wave {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.6;
        }

        /* Анимация движения волн */
        @keyframes waveMove {
            0% { transform: translateX(0) translateY(0) scaleY(1); }
            50% { transform: translateX(-5%) translateY(20px) scaleY(1.1); }
            100% { transform: translateX(0) translateY(0) scaleY(1); }
        }

        .wave path {
            animation: waveMove 10s ease-in-out infinite;
        }

        .wave-2 path { animation-delay: -2s; animation-duration: 12s; }
        .wave-3 path { animation-delay: -5s; animation-duration: 15s; }
        .wave-4 path { animation-delay: -7s; animation-duration: 17s; }

        /* --- Сцена для 3D карточки --- */
        .scene {
            perspective: 1000px;
            z-index: 2;
        }

        .card {
			width: 320px;
			height: 200px;
			padding: 50px;
			background: var(--card-grad);
			border-radius: 30px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			/* box-shadow: 0 0 50px rgba(36, 198, 220, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.2); */
			position: relative;
			transform-style: preserve-3d;
			animation: tilt 6s ease-in-out infinite;
			border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .card p {
			color: white;
			font-size: 27px;
			margin: 0;
			line-height: 1.1;
			font-weight: 600;
			transform: translateZ(50px);
			text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
		
		.card p span {
			font-size: 45px;
		}

        /* Анимация покачивания карточки */
        @keyframes tilt {
            0% { transform: rotateX(0deg) rotateY(0deg); }
            25% { transform: rotateX(5deg) rotateY(10deg); }
            50% { transform: rotateX(-5deg) rotateY(-5deg); }
            75% { transform: rotateX(8deg) rotateY(5deg); }
            100% { transform: rotateX(0deg) rotateY(0deg); }
        }

        /* Декоративные светящиеся точки (ноды) на фоне */
        .dot {
            position: absolute;
            width: 6px;
            height: 6px;
            background: #fff;
            border-radius: 50%;
            filter: blur(0px);
            box-shadow: 0 0 10px #fff, 0 0 20px cyan;
            opacity: 0.6;
            animation: pulse 4s infinite alternate;
        }
		
		.dot_size1 {             
			width: 15px;
            height: 15px;
		}
		
		.dot_size2 {             
			width: 10px;
            height: 10px;
		}
		
		.dot_size3 {             
			width: 13px;
            height: 13px;
		}
		
		.dot_size4 {             
			width: 27px;
            height: 27px;
		}
		
		.dot_shadow1 {             
			box-shadow: 0 0 10px #fff, 0 0 20px #6200ff;
		}
		
		.dot_no_shadow {             
			box-shadow: none;
		}
		
		.dot_z1 {	
			z-index: 9;
		}
		
		.dot_color_blue {
			background-color: #63d8fe;
		}
		
		.dot_color_pink {
			background-color: #fb95fd;
		}

        @keyframes pulse {
            from { opacity: 0.3; transform: scale(0.8); }
            to { opacity: 0.8; transform: scale(1.2); }
        }




.dlx-decor::before{
    content: "";
    position: absolute;
    inset: -25%;
    pointer-events: none;
    background: radial-gradient(closest-side at 18% 54%, rgba(0, 245, 255, .22), transparent 65%), radial-gradient(closest-side at 37% 63%, rgba(106, 92, 255, .22), transparent 68%), radial-gradient(closest-side at 32% 72%, rgba(255, 80, 180, .18), transparent 70%);
    filter: blur(18px);
    mix-blend-mode: screen;
    opacity: .95;
    animation: auraPos 10s ease-in-out infinite, auraOpacity 6s ease-in-out infinite;
}

@keyframes auraPos{
  0%,100%{
    background-position: 12% 78%, 48% 86%, 72% 76%;
  }
  50%{
    background-position: 18% 72%, 54% 80%, 66% 70%;
  }
}

@keyframes auraOpacity{
  0%,100%{ opacity:.65; }
  50%{ opacity:1; }
}

.info1 .big-text {
    position: absolute;
    left: -800px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 290px;
    text-transform: uppercase;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.05);
}

.services {
    padding-top: 120px;
    padding-bottom: 120px;
    position: relative;	
	
  --card-bg: rgba(255,255,255,.92);             /* светлая карточка */
  --card-border: rgba(255,255,255,.16);
  --shadow: 0 14px 40px rgba(0,0,0,.18);
  --shadow2: 0 10px 26px rgba(0,0,0,.12);

  /* фирменный градиент как в логотипе */
  --brand-grad: linear-gradient(135deg,
    rgba(0,245,255,.95) 0%,
    rgba(106,92,255,.95) 52%,
    rgba(255,80,180,.90) 78%,
    rgba(255,138,61,.85) 100%);	
}

.services .container {
	
}

.services .l_title {
	display: flex;
    flex-direction: column;	
	
    padding-left: 15%;
    margin-bottom: 50px;
}

.services .l_title h2 {
	background: rgb(209 209 209 / 38%);
    border-color: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
    border-radius: 999px;
    padding: 10px 30px;
    font-size: 17px;
    border: 1px solid transparent;
    white-space: nowrap;
    text-transform: uppercase;	
	align-self:flex-start;
    margin: 0;
}

.services .l_title h2 span {
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 45%, #38BDF8 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;	
}

.services .l_title p {
    font-size: 26px;
    font-weight: 700;
    line-height: 32px;
    width: 60%;	
}






/* раскладка 1/3 + 2/3 */
.services .l1{
  display:flex;
  gap:24px;
  align-items:stretch;
    margin-bottom: 24px;
}

.services .l2{
  display:flex;
  gap:24px;
  align-items:stretch;
    margin-bottom: 24px;
}

.services .l3{
  display:flex;
  gap:24px;
  align-items:stretch;
    margin-bottom: 24px;
}

.services .l1 .col--1{ flex: 0 0 calc(33.333% - 12px); }
.services .l1 .col--2{ flex: 0 0 calc(66.666% - 12px); }

.services .l2 .col--1{ flex: 0 0 calc(66.666% - 12px); }
.services .l2 .col--2{ flex: 0 0 calc(33.333% - 12px); }

.services .l3 .col--1{ flex: 0 0 calc(33.333% - 12px); }
.services .l3 .col--2{ flex: 0 0 calc(66.666% - 12px); }

@media (max-width: 900px){
  .services .l1{ flex-direction:column; }
  .services .l1 .col--1,
  .services .l1 .col--2{ flex: 1 1 auto; }
  
  .services .l2{ flex-direction:column; }
  .services .l2 .col--1,
  .services .l2 .col--2{ flex: 1 1 auto; }
  
  .services .l3{ flex-direction:column; }
  .services .l3 .col--1,
  .services .l3 .col--2{ flex: 1 1 auto; }
}

/* карточка-баннер */
.promo-card{
  position:relative;
  display:block;
  height:100%;
  min-height: 350px;
  border-radius: 30px;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  isolation:isolate; /* чтобы overlay работал предсказуемо */

/*
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  */
  transform: translateZ(0);
}



/* фоновая картинка */
.promo-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  transform: scale(1.02);
  transition: transform .55s ease;
}

/* затемняющий/тонирующий overlay (для читабельности текста) */
.promo-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  /*
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.10) 0%,
      rgba(0,0,0,.35) 55%,
      rgba(0,0,0,.55) 100%);
*/
	transition: opacity .35s ease;
	/* фон: декоративная иконка (опционально) + градиент */
	background:
    var(--card-icon, none),
    var(--card-grad);	
}

/* лёгкая “аура” фирменных цветов */
.promo-card::after{
	/*
  content:"";
  position:absolute;
  inset:-25%;
  z-index:-1;
  background:
    radial-gradient(circle at 20% 80%, rgba(0,245,255,.25), transparent 55%),
    radial-gradient(circle at 55% 85%, rgba(106,92,255,.22), transparent 58%),
    radial-gradient(circle at 80% 75%, rgba(255,80,180,.18), transparent 60%);
  filter: blur(22px);
  opacity:.75;
  mix-blend-mode: screen;
  */
}

.promo-top{
  position:absolute;
  top:18px;
  left:18px;
  display:flex;
  align-items:center;
  gap:12px;
  z-index:2; /* поверх фона и оверлея */
}

/* бейдж с номером (ваш прежний стиль) */
.promo-badge{
  width:46px;
  height:46px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  color:#111;
  font-weight:800;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  flex:0 0 auto;
}

.promo-kicker{
  font-size:18px;
  font-weight:700;
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 22px rgba(0,0,0,.35);
  white-space:nowrap;
  letter-spacing:.2px;
}

/* контент */
.promo-content{
  position:absolute;
  left:22px;
  right:22px;
  bottom:22px;
  display:grid;
  gap:10px;
}

.promo-content h3{
  margin:0;
  font-size: 26px;
  line-height:1.15;
  font-weight:800;
  text-shadow: 0 12px 30px rgba(0,0,0,.35);
  
    background-color: #131e216e;
    padding: 8px;
    padding-top: 5px;
    border-radius: 9px;
    justify-self: start;
    width: fit-content;
}

.promo-content p{
  margin:0;
  max-width: 52ch;
  font-size: 14px;
  line-height:1.55;
  opacity:.92;
  text-shadow: 0 10px 22px rgba(0,0,0,.35);
}

.promo-link{
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-weight:700;
  font-size:14px;
  opacity:.95;
}

@media (hover:hover){
	/*
  .promo-card:hover .promo-bg{ transform: scale(1.08); }
  */
  .promo-card:hover::before{ opacity: .88; }
}






@media (hover:hover){
  .promo-card:hover{
    animation: promoFloat 3.8s ease-in-out infinite;
    transform-origin: 50% 50%;
    will-change: transform;
  }
}

@keyframes promoFloat{
  0%   { transform: translate3d(0, 0, 0) rotateZ(0deg); }
  25%  { transform: translate3d(0,-9px,0) rotateZ(0.25deg); }
  50%  { transform: translate3d(0,-6px,0) rotateZ(-0.18deg); }
  75%  { transform: translate3d(0,-10px,0) rotateZ(0.16deg); }
  100% { transform: translate3d(0, 0, 0) rotateZ(0deg); }
}










/* ======================================================================
   CASES CAROUSEL — FINAL (движение только JS через RAF, drag работает всегда)
   Исправлено:
   - плавная анимация не зависит от prefers-reduced-motion / transition:none
   - drag мышью/тачем
   - последний слайд НЕ уезжает за правую стенку
   - одинаковая высота карточек
   ====================================================================== */

.cases-carousel{
	overflow: hidden;
    padding: clamp(64px, 7vw, 110px) 0 clamp(52px, 6vw, 90px);
    background: 
	radial-gradient(900px 520px at 12% -12%, rgba(146, 50, 255, .22), transparent 90%), 
	radial-gradient(900px 520px at 78% 0%, rgba(0, 210, 255, .16), transparent 80%), 
	linear-gradient(180deg, #ffffff, #ffffff);
    --cc-card: clamp(320px, 40vw, 560px);
    --cc-gap: 26px;
    --cc-grad: var(--card-grad, linear-gradient(135deg, #7C3AED 0%, #EC4899 45%, #38BDF8 100%));
	
    padding-top: 120px;
    padding-bottom: 120px;	
}

/* head */
.cases-carousel__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:22px;
  
    padding-left: 15%;
    margin-bottom: 50px;
    flex-direction: column;
    align-items: flex-start;
}
.cases-carousel__kicker{
	/*
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(0,0,0,.45);
  */
	background: rgb(209 209 209 / 38%);
    border-color: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
    border-radius: 999px;
    padding: 10px 30px;
    font-size: 17px;
    border: 1px solid transparent;
    white-space: nowrap;
    text-transform: uppercase;
    align-self: flex-start;
    margin: 0;
}

.cases-carousel__kicker span { 
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 45%, #38BDF8 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cases-carousel__title{
  margin:10px 0 10px;
  font-size:clamp(34px, 4.4vw, 56px);
  line-height:1.06;
  font-weight:800;
  letter-spacing:-.02em;
}
.cases-carousel__desc{
  margin:0;
  max-width:78ch;
  color:var(--muted, #555);
  font-size:15px;
  line-height:1.7;
}
.cases-carousel__controls{
  display:flex;
  gap:12px;
  flex:0 0 auto;
}
.cases-carousel__btn{
  width:54px;
  height:54px;
  border-radius:999px;
  display:grid;
  place-items:center;

	/*
  border:1px solid rgba(255,255,255,.18);
  */
  border:0;
  background:var(--cc-grad);
  color:#fff;

  box-shadow:0 14px 34px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.20);
  cursor:pointer;
  /*
  transition:filter .18s ease, box-shadow .18s ease;
  */
  transition:0.3s;
}
.cases-carousel__btn svg{ width:20px; height:20px; opacity:.92; }
.cases-carousel__btn:hover{
  filter:saturate(1.08) brightness(1.03);
  box-shadow:0 18px 42px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.18);
  opacity:0.7;
}
.cases-carousel__btn:disabled{
  opacity:.35;
  filter:grayscale(.3);
  cursor:default;
}

/* viewport */
.cases-carousel__viewport{
  position:relative;
  /*
  overflow:hidden;
  */
  width:100%;

  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
}
.cases-carousel__viewport,
.cases-carousel__viewport *{
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
}
.cases-carousel.is-dragging .cases-carousel__viewport{ cursor:grabbing; }

/* track — без transition! Двигаем JS-ом */
.cases-carousel__track{
  display:flex;
  gap:var(--cc-gap);
  align-items:stretch;            /* ключ к одинаковой высоте */
  padding: 6px 0 14px;            /* только верх/низ для теней */

  will-change:transform;
  transform:translate3d(0,0,0);
}

/* cards equal height */
.cc-card{
  flex:0 0 var(--cc-card);
  display:flex;                   /* чтобы ссылка тянулась */
}
.cc-card__link{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;

  text-decoration:none;
  color:inherit;

  border-radius:26px;
  overflow:hidden;
  background:#fff;

  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 26px 60px rgba(0,0,0,.10);

  /* НИКАКИХ translateY */
  transition: box-shadow .18s ease, border-color .18s ease;
  
  cursor:default;
}
.cc-card__link:hover{
  border-color:rgba(0,0,0,.10);
  box-shadow:0 32px 74px rgba(0,0,0,.14);
}

.cc-card__media{
  position:relative;
  aspect-ratio:16/9;
  background:
    radial-gradient(900px 520px at 12% 18%, rgba(146, 50, 255, .12), transparent 60%),
    radial-gradient(900px 520px at 78% 22%, rgba(0, 210, 255, .10), transparent 60%),
    linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
  overflow:hidden;
    border-radius: 26px;
}
.cc-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.40) 100%);
  pointer-events:none;
}
.cc-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1);
  transition:transform .6s ease;
}
.cc-card__link:hover .cc-card__media img{ transform:scale(1.035); }

.cc-card__tag{
  position:absolute;
  top:16px;
  right:16px;
  z-index:2;
  padding:10px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;

  color:rgba(255,255,255,.92);
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.cc-card__body{
  padding:18px 18px 20px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.cc-card__meta{ margin:0 0 8px; font-size:12px; color:rgba(0,0,0,.62); }
.cc-card__title{ margin:0 0 10px; font-size:22px; line-height:1.18; letter-spacing:-.01em; }
.cc-card__text{ margin:0; color:var(--muted, #555); font-size:14px; line-height:1.6; }

.cc-card__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:auto;               /* всегда внизу => визуально ровно */
  padding-top:12px;
}
.cc-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:rgba(0,0,0,.78);
  background:rgba(0,0,0,.035);
  border:1px solid rgba(0,0,0,.08);
  white-space:nowrap;
}
.cc-dot{ width:7px; height:7px; border-radius:999px; display:inline-block; }
.cc-dot.a{ background:rgba(146, 50, 255, .95); }
.cc-dot.b{ background:rgba(0, 210, 255, .95); }
.cc-dot.c{ background:rgba(255, 182, 82, .95); }

.cases-carousel__note{
  margin-top:16px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(0,0,0,.02);
  color:rgba(0,0,0,.65);
  font-size:12.5px;
  line-height:1.55;
}

@media (max-width: 860px){
  .cases-carousel__head{ align-items:flex-start; flex-direction:column; }
  .cases-carousel__controls{ display:none; }
}











.price {
    padding-top: 120px;
    padding-bottom: 120px;
    position: relative;	

    background-color: #ebf1f9;
}

.price .container {
	
}

.price .l_title {
	display: flex;
    flex-direction: column;	
	
    padding-left: 15%;
    margin-bottom: 50px;
}

.price .l_title h2 {
	background: rgb(209 209 209 / 38%);
    border-color: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
    border-radius: 999px;
    padding: 10px 30px;
    font-size: 17px;
    border: 1px solid transparent;
    white-space: nowrap;
    text-transform: uppercase;	
	align-self:flex-start;
    margin: 0;
    background: #ffffff;
}

.price .l_title h2 span {
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 45%, #38BDF8 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;	
}

.price .l_title h3 {
    margin: 10px 0 10px;
    font-size: clamp(34px, 4.4vw, 56px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.02em;	
}

.price .l_title p {
    margin: 0;
    max-width: 78ch;
    color: #838383;
    font-size: 15px;
    line-height: 1.7;
}

.price .l1 {
    display: flex;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}

.price .l1 .col {
    flex: 0 0 calc(33.333% - 16px);
    border-radius: 15px;
    overflow: hidden;	
    background-color: #ffffff;
    box-shadow: 0 10px 36px 0 rgba(22, 24, 26, 0.08);
	display: flex;
    flex-direction: column;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
    justify-content: space-between;
    position: relative;
	transition:0.3s;
}

.price .layout .title {
	margin: 0 0 18px;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    gap: 15px;
    text-transform: uppercase;
    align-items: center;
}

.price .layout .title:before { 
    content: "";
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 999px;
	background-color: #181a1c;
}


.price .layout .col--1 .title:before {  
	background: #181a1c url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Crect%20x='7'%20y='3'%20width='2'%20height='18'%20rx='1'%20fill='%23fff'/%3E%3Cpath%20d='M9%204h11l-2.5%204%202.5%204H9V4z'%20fill='%23fff'/%3E%3C/svg%3E") no-repeat center;
	
	  background-size: 16px 16px;
}


.price .layout .col--2 .title:before {  
	background: #181a1c url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0,0,16,16'%3E%3Cpath%20fill='%23fff'%20fill-rule='evenodd'%20d='M8,1.2L13.4,3.4v4.3c0,3.2-2.2,5.9-5.4,7.1C4.8,13.6,2.6,10.9,2.6,7.7V3.4L8,1.2zM6.1,8.2L5.2,9.1L7.3,11.2L11.2,7L10.3,6.1L7.3,9.1L6.1,8.2z'/%3E%3C/svg%3E") no-repeat center;

	  background-size: 16px 16px;
}


.price .layout .col--3 .title:before {  
	background: #181a1c url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%3E%3Crect%20x='2'%20y='3'%20width='12'%20height='10'%20rx='2'%20stroke='%23fff'%20stroke-width='1.8'/%3E%3Cpath%20d='M5%208L8%206L11%209.5'%20stroke='%23fff'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Ccircle%20cx='5'%20cy='8'%20r='1.2'%20fill='%23fff'/%3E%3Ccircle%20cx='8'%20cy='6'%20r='1.2'%20fill='%23fff'/%3E%3Ccircle%20cx='11'%20cy='9.5'%20r='1.2'%20fill='%23fff'/%3E%3Ccircle%20cx='12.7'%20cy='4.3'%20r='0.9'%20fill='%23fff'/%3E%3C/svg%3E") no-repeat center;

	  background-size: 16px 16px;
}

.price .layout .descr {
	/*
    color: #828385;
	*/
    margin-top: 3px;	
}


.price .layout .cont {
    display: grid;
    gap: 10px;
    margin: 14px 0 16px;
    margin-top: 0;
}

.price .layout .cont p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    line-height: 1.35;
    color: #828385;
}

.price .layout .cont p::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M6.5%2012.5l3.2%203.2L17.8%208.6'%20stroke='%23828385'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center;
    background-size: 16px 16px;
    opacity: .95;
    transform: translateY(1px);
}

.price .layout .pr {
    color: #828385;	
}

.price .layout .pr span {
    font-size: 42px;
    color: #1b1b1b;	
}

.price .layout .btn--st1 {
    align-self: flex-start;
    border: none;
    text-transform: uppercase;
	/*
    padding-left: 34px;
    padding-right: 34px;
    padding-top: 14px;
    padding-bottom: 14px;
	*/
	
	display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(90deg, #55c9ff 0%, #7c5cff 55%, #ff7aa8 100%);
    box-shadow: 0 14px 30px rgba(124, 92, 255, .25);
}

.price .l1 .col:after {
    content: "";
    width: 100%;
	height: 4px;
	background: linear-gradient(90deg, rgba(168, 30, 255, .00) 0%, rgba(168, 30, 255, .95) 18%, rgba(120, 90, 255, .95) 45%, rgba(60, 190, 255, 1.00) 100%), linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .18) 35%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .18) 65%, rgba(255, 255, 255, 0) 100%);
    background-size: 100% 100%, 240px 100%;
    background-position: 0 0, -260px 0;
    background-blend-mode: screen;
    background-repeat: no-repeat;
    animation: neonPulse 2.6s ease-in-out infinite, shine var(--shine-speed) linear infinite;
    filter: saturate(1.05);
    position: absolute;
    bottom: 0;
    left: 0;
}

.price .l1 .col:hover {
    box-shadow: 0 10px 40px 0 rgba(22, 24, 26, 0.16);	
}





.about {
    padding-bottom: 120px;
    position: relative;	

    background-color: #ebf1f9;
}

.about .container {
	
}

.about .l1{
  display:flex;
  gap: clamp(24px, 4vw, 60px);
  padding: clamp(28px, 4vw, 56px);
  border-radius: 15px;
  background:#fff;
  align-items: center;
}

/* колонки */
.about .col--1{flex: 0 0 44%;}
.about .col--2{flex: 1 1 auto;}

/* левый блок с картинками */
.about-media{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 22px;
  align-items: start;
}

.about-media__img{
    border-top-right-radius: 3em;
    border-bottom-left-radius: 3em;
  overflow:hidden;
  background:#f3f6fb;
  box-shadow: 0 18px 40px rgba(20, 35, 60, .10);
}

.about-media__img img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
}

/* раскладка как в референсе */
.about-media__img--1{
  grid-column: 1;
  grid-row: 1 / span 2;
  aspect-ratio: 1 / 1;
  
}
.about-media__stat--years{
  grid-column: 2;
  grid-row: 1;
  padding-top: 6px;
}
.about-media__img--2{
  grid-column: 2;
  grid-row: 2;
  aspect-ratio: 1 / 1;
}
.about-media__stat--pros{
  grid-column: 1;
  grid-row: 3;
  padding-left: 6px;
}

/* цифры слева */
.about-media__stat{
  color:#101820;
}

.stat-inline{
  display:flex;
  align-items:flex-end;
  gap:10px;
  line-height: 1;
}

.stat-plus{
  font-weight:800;
  font-size: 22px;
  transform: translateY(-24px);
}

.stat-num{
  font-weight: 900;
  font-size: 56px;
  letter-spacing: -1px;
  /* эффект outline как на референсе */
  color: transparent;
  -webkit-text-stroke: 1.6px #101820;
  text-stroke: 1.6px #101820;
}

.about-media__stat--years .stat-num{
  font-size: 54px;
}

.stat-label{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(16,24,32,.78);
}

/* правая часть */
.about-content{
  max-width: 560px;
}

.about-kicker{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  color: rgba(16,24,32,.55);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.about-title{
  margin: 0 0 18px;
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.4px;
  color:#101820;
}

.about-meters{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin: 10px 0 18px;
}

.meter__row{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 800;
  color: rgba(16,24,32,.78);
  margin-bottom: 10px;
}

.meter__row b{
  font-size: 13px;
  color: rgba(16,24,32,.75);
}

.meter__bar{
  height: 3px;
  background: rgba(16,24,32,.12);
  border-radius: 999px;
  overflow: hidden;
}

.meter__bar span{
  display:block;
  height:100%;
  width: var(--val);
  background: linear-gradient(90deg, #55c9ff 0%, #7c5cff 55%, #ff7aa8 100%);
  border-radius: 999px;
}

.about-text{
  margin: 6px 0 26px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(16,24,32,.60);
  max-width: 56ch;
}

/* кнопка */
.about-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(90deg, #55c9ff 0%, #7c5cff 55%, #ff7aa8 100%);
  box-shadow: 0 14px 30px rgba(124,92,255,.25);
  transition:0.3s;
}


.about-btn:hover{ 
opacity:0.8;
}

/* адаптив */
@media (max-width: 980px){
  .about .l1{flex-direction: column; align-items: stretch;}
  .about .col--1{flex-basis:auto;}
  .about-content{max-width:none;}
  .about-meters{grid-template-columns: 1fr;}
}








/* убираем лишнюю растягиваемую строку */
.about-media{
  grid-template-rows: auto auto; /* вместо auto 1fr auto */
}

/* левое фото НЕ должно растягиваться на два ряда */
.about-media__img--1{
  grid-row: 1; /* вместо 1 / span 2 */
}

/* “профессионалы” должны быть во 2-м ряду (а не в 3-м) */
.about-media__stat--pros{
  grid-row: 2; /* вместо 3 */
    display: flex;
    align-items: end;
}





/* делаем коллаж: поднимаем правую нижнюю картинку вверх */
.about-media { position: relative; }

.about-media__img--2{
  align-self: start;
  margin-top: clamp(-125px, -9vw, -55px); /* главный фикс: убирает “провал” вниз */
  z-index: 1;
}

/* чтобы текст справа сверху всегда был поверх, если вдруг пересечётся */
.about-media__stat--years{
  position: relative;
  z-index: 2;
  
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding-top: 25px;
}

.about-media__stat--pros .stat-label {
    order: -1;
    margin-top: 0;
    margin-right: -20px;
    margin-bottom: 4px;	
}

.meter__row span {
	text-transform:uppercase;
}



















/* ======================================================================
   AUDIT (Запросить аудит)
====================================================================== */

#audit{ scroll-margin-top: 110px; }

.audit{
  padding: 120px 0;
  position: relative;

    background-color: #141414;
}

.audit__head{
  margin: 0 0 34px;
  max-width: 860px;
}

.audit__kicker{
	/*
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(16,24,32,.55);
  margin-bottom: 14px;
  */
  
	background: #ffffff;
    border-color: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
    border-radius: 999px;
    padding: 10px 30px;
    font-size: 17px;
    border: 1px solid transparent;
    white-space: nowrap;
    text-transform: uppercase;
    align-self: flex-start;
    margin: 0; 
}

.audit__kicker span{ 
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 45%, #38BDF8 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.audit__title{
    color: #ffffff;
    font-size: 55px;
    margin-top: 0;
    line-height: 60px;
	position:relative;
}

.audit__title span{ 
    color: rgba(255, 255, 255, .35);
}

.audit__title::after {
    content: "";
    position: absolute;
    left: 0;
    top: calc(100% + 14px);
    width: clamp(180px, 22vw, 260px);
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(168, 30, 255, .00) 0%, rgba(168, 30, 255, .95) 18%, rgba(120, 90, 255, .95) 45%, rgba(60, 190, 255, 1.00) 100%);
    box-shadow: 0 0 10px rgba(120, 90, 255, .55), 0 0 18px rgba(60, 190, 255, .45);
    animation: neonPulse 2.6s ease-in-out infinite;
	
	
    background: linear-gradient(90deg, rgba(168, 30, 255, .00) 0%, rgba(168, 30, 255, .95) 18%, rgba(120, 90, 255, .95) 45%, rgba(60, 190, 255, 1.00) 100%), linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .18) 35%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .18) 65%, rgba(255, 255, 255, 0) 100%);
    background-size: 100% 100%, 240px 100%;
    background-position: 0 0, -260px 0;
    background-blend-mode: screen;
    background-repeat: no-repeat;

    animation: neonPulse 2.6s ease-in-out infinite, shine 3.2s linear infinite;

    filter: saturate(1.05);	
}

.audit__title::before {
    content: "";
    position: absolute;
    top: calc(100% + 14px);
    left: clamp(180px, 22vw, 260px);
    transform: translate(-50%, -27%);
    width: 6px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(120, 200, 255, 1) 35%, rgba(60, 190, 255, .0) 70%);
    box-shadow: 0 0 12px rgba(120, 200, 255, .85), 0 0 26px rgba(60, 190, 255, .55), 0 0 44px rgba(168, 30, 255, .25);
	
	animation: dotFlicker 1.6s ease-in-out infinite;
}

.audit__desc{
    margin: 0;
    max-width: 40ch;
    color: #ffffff;
    opacity: 0.55;
    font-size: 21px;
}

.audit__layout{
  display: flex;
  align-items: stretch;
  gap: clamp(18px, 2.4vw, 26px);
}

.audit .col--1{ flex: 0 0 44%; }
.audit .col--2{ flex: 1 1 auto; }

.audit-card{
  height: 100%;
  border-radius: 22px;
  padding: clamp(22px, 2.6vw, 34px);
  position: relative;
  background: #fff;
  border: 1px solid rgba(16,24,32,.08);
  /*
  box-shadow: 0 26px 60px rgba(16,24,32,.10);
  */
  overflow: hidden;
    padding-left: 60px;
    padding-right: 60px;
}

/* аккуратная бренд-линия сверху */
.audit-card::before{
  content:"";
  position:absolute;
  left: 22px;
  right: 22px;
  top: 18px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #55c9ff 0%, #7c5cff 55%, #ff7aa8 100%);
  /*
  opacity: .85;
  */
  opacity:0;
}

.audit-card__title{
    margin: 10px 0 16px;
    font-size: 18px;
    font-weight: 900;
    color: #ffffff;
}

.audit-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
    margin-left: 50px;
}

.audit-list li{
	display: flex;
    gap: 12px;
    align-items: flex-start;
    color: #ffffff;
    line-height: 1.6;
    margin-bottom: 30px;
}

.audit-list li::before{
  content:"";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 7px;
  border: 1px solid rgba(34,197,94,.25);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%2316a34a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat,
    rgba(34,197,94,.10);
}

.audit-divider{
  height: 1px;
  background: rgba(16,24,32,.08);
  margin: 18px 0 0;
}

.audit-mail{
  margin: 14px 0 0;
  font-size: 13px;
  color: rgba(16,24,32,.55);
}

.audit-mail__link{
  color: rgba(16,24,32,.78);
  text-decoration: none;
  font-weight: 800;
}
.audit-mail__link:hover{ text-decoration: underline; }

/* FORM */
.audit-form{
  display: grid;
  gap: 14px;
}

.audit-field label{
    display: block;
    margin: 0 0 7px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.50);
}

.audit-input{
	width: 100%;
    border: 1px solid rgba(16, 24, 32, .12);
    background: transparent;
    color: rgb(255 255 255 / 88%);
    outline: none;
    transition: box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
    border-bottom: 1px solid #383838;
    padding-top: 7px;
    padding-bottom: 12px;
    padding-right: 15px;
    font-size: 17px;
    margin-bottom: 20px;
}

.audit-input::placeholder{ color: rgba(16,24,32,.40); }

.audit-input:focus{
	/*
  border-color: rgba(85, 201, 255, .60);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(85, 201, 255, .18);
  */
    border-bottom: 1px solid #ffffff;
}

.audit-textarea{
  min-height: 120px;
  resize: vertical;
}

.audit-actions{
  display: grid;
  gap: 10px;
  align-items: start;
}




/* Consent */
.audit-consent{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255,255,255,.55);
  user-select: none;
}
.audit-consent__input{
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: #7c5cff;
}
.audit-consent__text{
  display: inline;
}
.audit-consent__link{
  color: rgba(255,255,255,.86);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.22);
  text-underline-offset: 2px;
}
.audit-consent__link:hover{
  text-decoration-color: rgba(255,255,255,.55);
}





.audit-submit{
  justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(90deg, #55c9ff 0%, #7c5cff 55%, #ff7aa8 100%);
    box-shadow: 0 14px 30px rgba(124, 92, 255, .25);
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 17px;  
	    font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
		transition:0.3s;
}

.audit-submit:hover{
opacity:0.8;	
}



/* Button loading state */
.audit-submit.is-loading{
  opacity: .78;
  pointer-events: none;
}
.audit-submit.is-loading::after{
  content: "";
  width: 14px;
  height: 14px;
  margin-left: 10px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.42);
  border-top-color: rgba(255,255,255,.92);
  animation: delrixSpin .8s linear infinite;
}
@keyframes delrixSpin{
  to{ transform: rotate(360deg); }
}




.audit-note{
  font-size: 13px;
  line-height: 1.5;
  color: rgba(16,24,32,.55);
  display: none;
}
.audit-note.is-visible{ display: block; }

.audit-note[data-type="ok"]{ color: rgba(16,24,32,.62); }
.audit-note[data-type="error"]{ color: rgba(220, 38, 38, .88); }



/* In the dark form card */
.audit-card--form .audit-note{
  color: rgba(255,255,255,.62);
}
.audit-card--form .audit-note[data-type="ok"]{
  color: rgba(255,255,255,.78);
}
.audit-card--form .audit-note[data-type="error"]{
  color: rgba(255,110,110,.92);
}




/* responsive */
@media (max-width: 980px){
  .audit__layout{ flex-direction: column; }
  .audit .col--1, .audit .col--2{ flex-basis: auto; }
  .audit-submit{ width: 100%; justify-self: stretch; }
}



.audit-card--form {
    background: #181818;
}

.audit-card--form .audit-card__title { 
	display:none;
}

.audit-card--what {
    background-color: transparent;
	padding-left:0;
}

.audit-card--what .audit-card__title { 
    font-size: 30px;
    margin-bottom: 28px;
}


.audit-input::placeholder{
  color: #fff;
  opacity: 1;
}

.audit .big-text {
    position: absolute;
    right: -416px;
    top: 14%;
    transform: translateY(-50%);
    font-size: 245px;
    text-transform: uppercase;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.05);
}













/* =========================
   DELRIX FOOTER (demo)
   ========================= */
.dlx-footer{
  position: relative;
  padding: clamp(54px, 6vw, 84px) 0 26px;
  background: linear-gradient(180deg, #141414 0%, #0e1114 100%);
  color: rgba(255,255,255,.92);
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* фирменная “неоновая” линия сверху */
.dlx-footer::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 3px;
  background:
    linear-gradient(90deg,
      rgba(0,245,255,.00) 0%,
      rgba(0,245,255,.70) 18%,
      rgba(106,92,255,.80) 48%,
      rgba(255,80,180,.62) 74%,
      rgba(255,138,61,.00) 100%);
  opacity: .95;
}

/* лёгкая аура (в духе ваших promo-card) */
.dlx-footer__glow{
  position:absolute;
  inset:-22%;
  background:
    radial-gradient(circle at 18% 80%, rgba(0,245,255,.18), transparent 55%),
    radial-gradient(circle at 50% 88%, rgba(106,92,255,.16), transparent 58%),
    radial-gradient(circle at 82% 76%, rgba(255,80,180,.12), transparent 60%);
  filter: blur(28px);
  opacity: .85;
  pointer-events:none;
  mix-blend-mode: screen;
}

.dlx-footer .container{ position: relative; z-index: 2; }

.dlx-footer__top{
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) 1.85fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
  padding-bottom: clamp(18px, 2.4vw, 28px);
}

.dlx-footer__brand{
  display:flex;
  flex-direction: column;
  gap: 16px;
}

.dlx-footer__logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  width: fit-content;
}
.dlx-footer__logo img{
  height: 34px;
  width: auto;
  display:block;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.35));
}

.dlx-footer__tagline{
  margin:0;
  color: rgba(255,255,255,.74);
  line-height: 1.65;
  max-width: 46ch;
  font-size: 14px;
}

.dlx-footer__cta{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items:center;
}
.dlx-footer__ghost{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.dlx-footer__ghost:hover{ background: rgba(255,255,255,.10); }

.dlx-footer__social{
  display:flex;
  gap: 10px;
  margin-top: 2px;
}
.dlx-social{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;

  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.88);

  transition: .18s ease;
}
.dlx-social:hover{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.09);
  transform: translateY(-1px);
}


.dlx-social__icon{
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dlx-social__icon svg{
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}


.dlx-footer__cols{
  display:grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: clamp(16px, 3vw, 34px);
}

.dlx-footer__title{
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}

.dlx-footer__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.dlx-footer__list a{
  color: rgba(255,255,255,.72);
  text-decoration: none;
  transition: .16s ease;
}
.dlx-footer__list a:hover{
  color: rgba(255,255,255,.96);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

.dlx-footer__list--contacts a{
  color: rgba(255,255,255,.86);
}
.dlx-footer__hint{
  display:block;
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}
.dlx-footer__muted{
  color: rgba(255,255,255,.58);
  font-size: 12.5px;
  line-height: 1.6;
  margin-top: 4px;
}

.dlx-footer__bottom{
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);

  display:flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: flex-start;
  justify-content: space-between;
}

.dlx-footer__copy{
  font-weight: 800;
  color: rgba(255,255,255,.86);
  white-space: nowrap;
}

.dlx-footer__disclaimer{
  flex: 1 1 520px;
  color: rgba(255,255,255,.58);
  font-size: 12.5px;
  line-height: 1.55;
}

.dlx-footer__links{
  display:flex;
  gap: 10px;
  align-items:center;
  white-space: nowrap;
}
.dlx-footer__links a{
  color: rgba(255,255,255,.64);
  text-decoration:none;
}
.dlx-footer__links a:hover{
  color: rgba(255,255,255,.92);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.dlx-footer__dot{ color: rgba(255,255,255,.35); }

/* adapt */
@media (max-width: 980px){
  .dlx-footer__top{ grid-template-columns: 1fr; }
  .dlx-footer__tagline{ max-width: 70ch; }
  .dlx-footer__cols{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}
@media (max-width: 560px){
  .dlx-footer__cols{ grid-template-columns: 1fr; }
  .dlx-footer__copy{ white-space: normal; }
  .dlx-footer__links{ white-space: normal; }
}









/* =========================
   FAQ (accordion like Sana)
   ========================= */
.faq{
  padding: 120px 0;
  position: relative;
  background-color: #ebf1f9;
  overflow: hidden;
}

/* лёгкие вертикальные линии фона (как на референсе) */
.faq::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(15,23,42,.08) 1px, transparent 1px) 0 0 / 120px 100%;
  opacity: .22;
  pointer-events:none;
}

.faq .container{ position: relative; z-index: 1; }

.faq__head{
  margin-bottom: 34px;
  max-width: 820px;
}

.faq__title{
  background: rgb(209 209 209 / 38%);
  border: 1px solid rgba(15,23,42,.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 30px;
  font-size: 17px;
  text-transform: uppercase;
  margin: 0;
}

.faq__title span{
  background: linear-gradient(135deg, #7C3AED 0%, #EC4899 45%, #38BDF8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.faq__desc{
  margin: 14px 0 0;
  color: #4b5563;
  line-height: 1.65;
}

.faq__layout{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}

.faq-acc{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item{ display:block; }

.faq-q{
    width: 100%;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .92);
    border-radius: 999px;
    padding: 15px 30px 15px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
    color: #111827;
    box-shadow: 0 16px 36px rgba(2, 6, 23, .08);
    position: relative;
    overflow: hidden;
}

.faq-q__text{
  text-align: left;
  line-height: 1.25;
}

.faq-q::after{
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -1px;
    height: 3px;
    border-radius: 999px;
    background: var(--card-grad);
    opacity: 0;
    transform: translateY(-6px);
    transition: .22s ease;
}

.faq-item.is-open .faq-q::after{
  opacity: .55;
  transform: translateY(0);
}

/* chevron */
.faq-ico{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  /*
  border: 1px solid rgba(15,23,42,.10);
  */
  background: rgba(15,23,42,.03);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
}

.faq-ico::before{
  content:"";
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(15,23,42,.55);
  border-bottom: 2px solid rgba(15,23,42,.55);
  transform: rotate(45deg);
  transition: transform .22s ease;
  margin-top: -2px;
}

.faq-item.is-open .faq-ico::before{
  transform: rotate(-135deg);
  margin-top: 2px;
}

/* answer */
.faq-a{
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s ease;
}

.faq-a__inner{
  padding: 12px 22px 0 22px;
  color: #6b7280;
  line-height: 1.65;
  font-size: 14.5px;
}

/* right media */
.faq-media{
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  /*
  box-shadow: 0 18px 44px rgba(2,6,23,.10);
  */
  aspect-ratio: 16 / 10;
}

.faq-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.faq__head h3 {
    margin: 10px 0 10px;
    font-size: clamp(34px, 4.4vw, 56px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.02em;	
}

@media (max-width: 980px){
  .faq__layout{
    grid-template-columns: 1fr;
  }
  .faq-media{
    max-width: 720px;
  }
}










/* =========================
   PRELOADER
   ========================= */

html.is-preloading body{
  overflow: hidden;
}

/* на время прелоадера чуть прячем контент (чтобы не было "мигания" при старте) */
html.is-preloading #os-root{
  opacity: 0;
}

#os-root{
  transition: opacity .28s ease;
}

/* overlay */
.preloader{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(124, 58, 237, .20), transparent 60%),
    radial-gradient(900px 520px at 78% 28%, rgba(56, 189, 248, .16), transparent 60%),
    radial-gradient(900px 520px at 38% 78%, rgba(236, 72, 153, .14), transparent 60%),
    #0b0f17;
  transition: opacity .45s ease, visibility .45s ease;
}

.preloader::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(closest-side at 28% 44%, rgba(0, 245, 255, .18), transparent 65%),
    radial-gradient(closest-side at 56% 62%, rgba(106, 92, 255, .18), transparent 68%),
    radial-gradient(closest-side at 72% 40%, rgba(255, 80, 180, .14), transparent 70%);
  filter: blur(18px);
  opacity: .85;
  animation: preAura 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes preAura{
  0%,100%{ transform: translate3d(-2%, 1%, 0) scale(1); opacity: .70; }
  50%    { transform: translate3d( 2%,-1%, 0) scale(1.03); opacity: .95; }
}

.preloader__inner{
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 28px 34px;
  border-radius: 24px;
  background: rgba(11, 15, 23, .55);
  /*
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ring */
.preloader__ring{
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: conic-gradient(from 0deg, #7C3AED, #EC4899, #38BDF8, #7C3AED);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  animation: preSpin 1.05s linear infinite;
  filter: drop-shadow(0 0 14px rgba(56, 189, 248, .22))
          drop-shadow(0 0 18px rgba(236, 72, 153, .18));
}

@keyframes preSpin{
  to{ transform: rotate(360deg); }
}

/* brand */
.preloader__brand{
  position: relative;
  line-height: 1;
}

.preloader__mark{
  font-weight: 700;
  font-synthesis: none;
  letter-spacing: .12em;
  font-size: 16px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #7C3AED 0%, #EC4899 45%, #38BDF8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.preloader__shine{
  position:absolute;
    left: -5%;
    top: 13%;
    width: 106%;
    height: 79%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.22), transparent 60%);
  transform: translate3d(-35%,0,0) rotate(8deg);
  animation: preShine 1.0s ease-in-out infinite;
  pointer-events: none;
  opacity: .55;
}

@keyframes preShine{
  0%   { transform: translate3d(-45%,0,0) rotate(8deg); opacity:.0; }
  35%  { opacity:.55; }
  100% { transform: translate3d( 45%,0,0) rotate(8deg); opacity:0; }
}

.preloader__text{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
}


/*
.preloader__mark,
.preloader__text,
.preloader__shine{
  opacity: 0;
}

html.fonts-ready .preloader__mark,
html.fonts-ready .preloader__text{
  opacity: 1;
  transition: opacity .12s ease;
}

html.fonts-ready .preloader__shine{
  opacity: .55; 
  transition: opacity .12s ease;
}
*/



/* hide animation */
.preloader.is-leaving{
  opacity: 0;
  visibility: hidden;
}

/* reduce motion */
/*
@media (prefers-reduced-motion: reduce){
  .preloader__ring,
  .preloader::after,
  .preloader__shine{
    animation: none !important;
  }
}
*/








/* =========================
   BACK TO TOP
   ========================= */
.to-top{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  /*
  border: 1px solid rgba(255,255,255,.18);
  */
  border:0;
  background: var(--card-grad);
  display: grid;
  place-items: center;
  cursor: pointer;

/*
  box-shadow:
    0 18px 44px rgba(0,0,0,.45),
    0 10px 22px rgba(56,189,248,.16);
	*/

  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(.96);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, filter .22s ease;
  z-index: 120;
}

.to-top::before{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  opacity: .35;
}

.to-top svg{
  width: 22px;
  height: 22px;
  position: relative;
  stroke: rgba(255,255,255,.95);
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
}

.to-top.is-visible{
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  pointer-events: auto;
}

.to-top:hover{
  transform: translate3d(0,0,0) scale(1.00);
  filter: brightness(1.05);
  opacity:0.8;
}

.to-top:active{
  transform: translate3d(0,0,0) scale(.98);
}

.to-top:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(56,189,248,.25),
    0 0 0 6px rgba(236,72,153,.18),
    0 18px 44px rgba(0,0,0,.45);
}

.faq-a__inner p {
	margin:0
}