@charset "UTF-8";
/* ============================================================
   About / Company — Utelenet
   Стили только для этой страницы. main-style.css и index-new.css
   не трогаем. Цвета/контейнер/типографика берутся из токенов
   сайта (:root в main-style.css): --color-majorelle-blue,
   --color-medium-slate-blue, --color-blue-energy, --color-neon-ice,
   --color-black, --font-text, .container-new и т.д.
   ============================================================ */
/* line 1, ../sass/index-new/index-faq.scss */
.FAQ {
  position: relative;
}
/* line 4, ../sass/index-new/index-faq.scss */
.FAQ .undertitle {
  margin-top: 25px;
}

/* line 9, ../sass/index-new/index-faq.scss */
.faq-result {
  position: relative;
  width: 880px;
  max-width: 100%;
  margin: 0 auto;
  margin-top: 50px;
}

/* line 17, ../sass/index-new/index-faq.scss */
.faq-row {
  position: relative;
  border-radius: 20px;
  padding: 20px;
}
/* line 22, ../sass/index-new/index-faq.scss */
.faq-row.active {
  background: rgba(107, 107, 241, 0.1);
}
/* line 27, ../sass/index-new/index-faq.scss */
.faq-row.active .faq-title .plus:before {
  transform: rotate(-45deg);
}
/* line 31, ../sass/index-new/index-faq.scss */
.faq-row.active .faq-title .plus:after {
  transform: rotate(45deg);
}
/* line 37, ../sass/index-new/index-faq.scss */
.faq-row.active .faq-answer {
  max-height: 1000px;
  transition: 1s linear all;
}

/* line 44, ../sass/index-new/index-faq.scss */
.faq-title {
  position: relative;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  padding-bottom: 30px;
  align-items: center;
  font-weight: 600;
  font-size: 20px;
}
/* line 58, ../sass/index-new/index-faq.scss */
.faq-title .site-title {
  max-width: calc(100% - 22px - 15px);
}
/* line 62, ../sass/index-new/index-faq.scss */
.faq-title .plus {
  position: relative;
  display: block;
  transition: 0.3s ease;
  border-radius: 50%;
  width: 22px;
  height: 22px;
}
/* line 70, ../sass/index-new/index-faq.scss */
.faq-title .plus:before {
  content: '';
  display: block;
  position: absolute;
  background: #000;
  transition: 0.3s ease;
  height: 2px;
  width: 10px;
  left: 3px;
  top: 10px;
  transform: rotate(45deg);
}
/* line 83, ../sass/index-new/index-faq.scss */
.faq-title .plus:after {
  content: '';
  display: block;
  position: absolute;
  background: #000;
  transition: 0.3s ease;
  height: 2px;
  width: 10px;
  right: 3px;
  top: 10px;
  transform: rotate(-45deg);
}
@media (hover: hover) {
  /* line 99, ../sass/index-new/index-faq.scss */
  .faq-title:hover .plus {
    border-color: var(--color-medium-slate-blue);
    background: var(--color-medium-slate-blue);
  }
  /* line 103, ../sass/index-new/index-faq.scss */
  .faq-title:hover .plus:before, .faq-title:hover .plus:after {
    background: #fff;
  }
}

/* line 111, ../sass/index-new/index-faq.scss */
.faq-answer {
  position: relative;
  overflow: hidden;
  max-height: 0;
  transition: none;
}
/* line 117, ../sass/index-new/index-faq.scss */
.faq-answer .inner {
  padding-bottom: 30px;
}

@media only screen and (min-width: 1241px) and (max-width: 1440px) {
  /* line 125, ../sass/index-new/index-faq.scss */
  .FAQ .undertitle {
    margin-top: 20px;
  }

  /* line 130, ../sass/index-new/index-faq.scss */
  .faq-result {
    margin-top: 60px;
  }

  /* line 134, ../sass/index-new/index-faq.scss */
  .faq-row {
    border-radius: 17px;
    padding: 17px;
  }

  /* line 139, ../sass/index-new/index-faq.scss */
  .faq-title {
    padding-bottom: 25px;
    font-size: 20px;
  }

  /* line 145, ../sass/index-new/index-faq.scss */
  .faq-answer .inner {
    padding-bottom: 25px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1240px) {
  /* line 154, ../sass/index-new/index-faq.scss */
  .faq-result {
    margin-top: 45px;
  }

  /* line 158, ../sass/index-new/index-faq.scss */
  .faq-row {
    border-radius: 18px;
    padding: 18px;
  }

  /* line 163, ../sass/index-new/index-faq.scss */
  .faq-title {
    font-size: 19px;
    padding-bottom: 22px;
  }

  /* line 168, ../sass/index-new/index-faq.scss */
  .faq-answer .inner {
    padding-bottom: 22px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /* line 175, ../sass/index-new/index-faq.scss */
  .faq-result {
    margin-top: 40px;
  }

  /* line 179, ../sass/index-new/index-faq.scss */
  .faq-row {
    border-radius: 16px;
    padding: 16px;
  }

  /* line 184, ../sass/index-new/index-faq.scss */
  .faq-title {
    font-size: 18px;
    padding-bottom: 20px;
  }

  /* line 189, ../sass/index-new/index-faq.scss */
  .faq-answer .inner {
    padding-bottom: 20px;
  }
}
@media only screen and (min-width: 0px) and (max-width: 767px) {
  /* line 196, ../sass/index-new/index-faq.scss */
  .faq-result {
    margin-top: 30px;
  }

  /* line 200, ../sass/index-new/index-faq.scss */
  .faq-row {
    border-radius: 14px;
    padding: 14px;
  }

  /* line 205, ../sass/index-new/index-faq.scss */
  .faq-title {
    font-size: 16px;
    padding-bottom: 15px;
    align-items: flex-start;
  }
  /* line 210, ../sass/index-new/index-faq.scss */
  .faq-title .site-title {
    max-width: calc(100% - 22px - 10px);
  }

  /* line 215, ../sass/index-new/index-faq.scss */
  .faq-title .plus {
    width: 18px;
    height: 18px;
  }
  /* line 219, ../sass/index-new/index-faq.scss */
  .faq-title .plus:before, .faq-title .plus:after {
    width: 8px;
    top: 8px;
  }

  /* line 226, ../sass/index-new/index-faq.scss */
  .faq-answer .inner {
    padding-bottom: 15px;
    font-size: 14px;
  }
}
/* line 13, ../sass/about.scss */
:root {
  --about-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --about-grad: linear-gradient(135deg, var(--color-blue-energy), var(--color-majorelle-blue));
  --about-grad-text: linear-gradient(115deg, #02c4f2 0%, #3787fa 45%, #5151ef 100%);
  --about-dark: #07070f;
}

/* градиентный текст-акцент (фирменная заливка) */
/* line 21, ../sass/about.scss */
.grad-text {
  background: var(--about-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* единый секционный отступ */
/* line 30, ../sass/about.scss */
.about-section {
  position: relative;
  padding: 96px 0;
}

/* line 34, ../sass/about.scss */
.about-head {
  max-width: 680px;
  margin: 0 auto 52px;
  text-align: center;
}

/* line 39, ../sass/about.scss */
.about-head.left {
  margin-left: 0;
  text-align: left;
}

/* line 43, ../sass/about.scss */
.about-head .site-label {
  margin-bottom: 14px;
}

/* line 46, ../sass/about.scss */
.about-head p.site-text {
  margin-top: 16px;
}

/* --- компактный type-scale в рамках страницы About ---
   (глобальные .site-title/.site-text сайта не меняем) */
/* line 52, ../sass/about.scss */
.about-page .site-title:not(.min) {
  font-size: clamp(27px, 2.8vw, 38px);
  line-height: 1.12;
}

/* line 56, ../sass/about.scss */
.about-page .faq-title .site-title.min {
  font-size: clamp(16px, 1.4vw, 19px);
}

/* line 59, ../sass/about.scss */
.about-page .about-section .site-text.max,
.about-page .about-head .site-text.max {
  font-size: 16px;
  line-height: 1.55;
}

/* line 64, ../sass/about.scss */
.about-page .about-head .site-text {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- утилита reveal (включается классом .anim-ready на <html>) ---- */
/* line 71, ../sass/about.scss */
.anim-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
}

/* видимый фокус на всех интерактивных элементах */
/* line 77, ../sass/about.scss */
a:focus-visible,
button:focus-visible,
.site-btn-new:focus-visible,
.faq-title:focus-visible,
.value-card:focus-visible,
.built-link:focus-visible {
  outline: 3px solid var(--color-majorelle-blue);
  outline-offset: 4px;
  border-radius: 10px;
}

/* ============================================================
   ХЕДЕР поверх тёмного hero — только на этой странице.
   Вверху страницы шапка прозрачная → логотип и меню белые.
   Когда при скролле появляется белый фон (.go-top) — возвращаем тёмное.
   ============================================================ */
/* line 94, ../sass/about.scss */
.about-page .header-new-logo .logo-light {
  display: block;
}

/* line 95, ../sass/about.scss */
.about-page .header-new-logo .logo-dark {
  display: none;
}

/* line 96, ../sass/about.scss */
.about-page .header-new-nav a {
  color: #fff;
}

/* line 97, ../sass/about.scss */
.about-page .burger {
  color: #fff;
}

/* line 98, ../sass/about.scss */
.about-page .burger svg path {
  stroke: #fff;
}

/* line 100, ../sass/about.scss */
.about-page.go-top .header-new-logo .logo-light {
  display: none;
}

/* line 101, ../sass/about.scss */
.about-page.go-top .header-new-logo .logo-dark {
  display: block;
}

/* line 102, ../sass/about.scss */
.about-page.go-top .header-new-nav a {
  color: var(--color-black);
}

/* line 103, ../sass/about.scss */
.about-page.go-top .burger svg path {
  stroke: #1C274C;
}

/* когда открыто мега-меню — шапка получает белый фон → тёмное оформление */
/* line 106, ../sass/about.scss */
.about-page .header-new.show-menu .header-new-logo .logo-light {
  display: none;
}

/* line 107, ../sass/about.scss */
.about-page .header-new.show-menu .header-new-logo .logo-dark {
  display: block;
}

/* line 108, ../sass/about.scss */
.about-page .header-new.show-menu .header-new-nav a {
  color: var(--color-black);
}

/* ============================================================
   1. HERO + 3D
   ============================================================ */
/* line 113, ../sass/about.scss */
.about-hero {
  position: relative;
  /* hero уходит под фиксированную шапку — тёмный фон до самого верха */
  margin-top: calc(-1 * var(--header-height));
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: calc(var(--header-height) + 46px);
  padding-bottom: 72px;
  background: radial-gradient(120% 120% at 72% 26%, #141233 0%, #07070f 55%, #050409 100%);
  color: #fff;
}

/* line 127, ../sass/about.scss */
.about-hero canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
}

/* лёгкое статичное свечение — фоллбэк, когда 3D выключено */
/* line 136, ../sass/about.scss */
.about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(40% 50% at 74% 40%, rgba(81, 136, 240, 0.32), rgba(0, 0, 0, 0) 70%), radial-gradient(35% 45% at 80% 62%, rgba(81, 81, 239, 0.26), rgba(0, 0, 0, 0) 70%);
  opacity: 0.9;
  pointer-events: none;
}

/* затемнение слева — текст всегда читаем поверх сферы */
/* line 148, ../sass/about.scss */
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 7, 15, 0.82) 0%, rgba(7, 7, 15, 0.45) 42%, rgba(7, 7, 15, 0) 68%);
}

/* line 159, ../sass/about.scss */
.about-hero-wr {
  position: relative;
  z-index: 3;
  max-width: 600px;
}

/* line 164, ../sass/about.scss */
.about-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #dfe6ff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-bottom: 22px;
}

/* line 180, ../sass/about.scss */
.about-hero .eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-neon-ice);
  box-shadow: 0 0 12px var(--color-neon-ice);
}

/* line 187, ../sass/about.scss */
.hero-title {
  font-size: clamp(33px, 4.4vw, 56px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}

/* маска для пословной анимации появления */
/* line 195, ../sass/about.scss */
.hero-title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

/* line 202, ../sass/about.scss */
.hero-title .word-inner {
  display: inline-block;
}

/* line 205, ../sass/about.scss */
.anim-ready .hero-title .word-inner {
  transform: translateY(110%);
}

/* подзаголовок hero + смысловая смена «глав» по скроллу */
/* line 209, ../sass/about.scss */
.hero-sub-wrap {
  position: relative;
  max-width: 500px;
  margin: 0 0 32px;
}

/* line 214, ../sass/about.scss */
.hero-sub {
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
  margin: 0;
}

/* line 220, ../sass/about.scss */
.hero-sub.is-chapter2 {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* line 225, ../sass/about.scss */
.about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---- бейджи-данные, «загорающиеся» у узлов сферы (десктоп-сцена) ---- */
/* line 232, ../sass/about.scss */
.hero-data {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: none;
}

/* line 239, ../sass/about.scss */
.hero-metric {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 11px;
  border-radius: 14px;
  white-space: nowrap;
  background: rgba(16, 16, 36, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.65);
}

/* line 253, ../sass/about.scss */
.hero-metric .hm-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--color-neon-ice);
  box-shadow: 0 0 0 4px rgba(94, 235, 230, 0.18), 0 0 14px var(--color-neon-ice);
}

/* line 261, ../sass/about.scss */
.hero-metric .hm-body {
  display: flex;
  flex-direction: column;
  line-height: 1.12;
}

/* line 266, ../sass/about.scss */
.hero-metric .hm-body b {
  font-size: 18px;
  font-weight: 700;
  background: var(--about-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* line 275, ../sass/about.scss */
.hero-metric .hm-body span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

/* позиции бейджей у «узлов» сферы (правая зона hero) */
/* line 280, ../sass/about.scss */
.hero-metric.m1 {
  top: 23%;
  right: 13%;
}

/* line 281, ../sass/about.scss */
.hero-metric.m2 {
  top: 41%;
  right: 4%;
}

/* line 282, ../sass/about.scss */
.hero-metric.m3 {
  top: 59%;
  right: 17%;
}

/* line 283, ../sass/about.scss */
.hero-metric.m4 {
  top: 75%;
  right: 7%;
}

/* ---- статичный ряд метрик: планшет / мобайл / reduced-motion ---- */
/* line 286, ../sass/about.scss */
.hero-metrics-static {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  max-width: 520px;
}

/* line 295, ../sass/about.scss */
.hero-metrics-static li {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.82);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* line 306, ../sass/about.scss */
.hero-metrics-static li b {
  font-weight: 700;
  background: var(--about-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* бейджи показываем только в пин-сцене (десктоп + без reduced-motion),
   иначе — статичный ряд метрик */
@media (min-width: 981px) {
  /* line 318, ../sass/about.scss */
  html.heavy-ready .hero-data {
    display: block;
  }

  /* line 319, ../sass/about.scss */
  html.heavy-ready .hero-metric {
    opacity: 0;
  }

  /* line 320, ../sass/about.scss */
  html.heavy-ready .hero-metrics-static {
    display: none;
  }
}
/* мягкая «стеклянная» вторичная кнопка под тёмный фон */
/* line 323, ../sass/about.scss */
.site-btn-new.ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

@media (hover: hover) {
  /* line 330, ../sass/about.scss */
  .site-btn-new.ghost:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.4);
  }
}
/* line 335, ../sass/about.scss */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* line 350, ../sass/about.scss */
.hero-scroll-cue .mouse {
  width: 22px;
  height: 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  position: relative;
}

/* line 357, ../sass/about.scss */
.hero-scroll-cue .mouse::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 7px;
  border-radius: 4px;
  background: #fff;
  animation: heroWheel 1.6s ease infinite;
}

@keyframes heroWheel {
  0% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
}
/* ============================================================
   2. MISSION / манифест (pin + подсветка строк по скроллу)
   ============================================================ */
/* line 378, ../sass/about.scss */
.mission {
  background: #faf9fe;
  padding: 100px 0;
}

/* line 382, ../sass/about.scss */
.mission-inner {
  max-width: 760px;
}

/* line 385, ../sass/about.scss */
.mission-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-majorelle-blue);
  margin-bottom: 22px;
}

/* line 393, ../sass/about.scss */
.mission-text {
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--color-black);
  max-width: 720px;
}

/* line 401, ../sass/about.scss */
.mission-text .ln {
  display: block;
}

/* в режиме pin строки приглушены и проявляются по мере чтения */
/* line 405, ../sass/about.scss */
.heavy-ready .mission-text .ln {
  opacity: 0.16;
}

/* line 408, ../sass/about.scss */
.mission-text .ln b {
  font-weight: 700;
}

/* ============================================================
   3. METRICS / цифры count-up
   ============================================================ */
/* line 415, ../sass/about.scss */
.metrics {
  background: #fff;
}

/* line 418, ../sass/about.scss */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* line 423, ../sass/about.scss */
.metric {
  position: relative;
  padding: 36px 28px;
  border-radius: 20px;
  border: 1px solid #ececf6;
  background: linear-gradient(180deg, #fbfbff, #f4f3fc);
  overflow: hidden;
}

/* line 431, ../sass/about.scss */
.metric::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--about-grad);
  opacity: 0.85;
}

/* line 439, ../sass/about.scss */
.metric .num {
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
}

/* line 446, ../sass/about.scss */
.metric .label {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.4;
  color: #5b5b6b;
}

/* line 452, ../sass/about.scss */
.metric--wide {
  grid-column: span 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--about-dark);
  border-color: transparent;
  color: #fff;
  padding: 40px 48px;
}

/* line 463, ../sass/about.scss */
.metric--wide::before {
  opacity: 1;
}

/* line 464, ../sass/about.scss */
.metric--wide .num {
  font-size: clamp(40px, 4.6vw, 64px);
}

/* line 467, ../sass/about.scss */
.metric--wide .label {
  color: rgba(255, 255, 255, 0.7);
  max-width: 380px;
  margin-top: 0;
  font-size: 16px;
}

/* ============================================================
   4. TIMELINE / горизонтальный скролл-сторителлинг
   ============================================================ */
/* line 477, ../sass/about.scss */
.timeline {
  background: #f6f5fc;
  overflow: hidden;
}

/* line 481, ../sass/about.scss */
.timeline .about-head {
  padding-top: 100px;
}

/* line 484, ../sass/about.scss */
.tl-viewport {
  position: relative;
}

/* line 487, ../sass/about.scss */
.tl-track {
  display: flex;
  gap: 28px;
  padding: 40px calc(max(7vw, 32px)) 100px;
  width: max-content;
  align-items: stretch;
}

/* line 494, ../sass/about.scss */
.tl-item {
  flex: 0 0 clamp(280px, 34vw, 440px);
  background: #fff;
  border: 1px solid #e7e5f3;
  border-radius: 24px;
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 24px 50px -38px rgba(31, 24, 73, 0.4);
}

/* line 505, ../sass/about.scss */
.tl-item .year {
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* line 511, ../sass/about.scss */
.tl-item .tl-tag {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-majorelle-blue);
}

/* line 518, ../sass/about.scss */
.tl-item h3 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

/* line 524, ../sass/about.scss */
.tl-item p {
  font-size: 15px;
  line-height: 1.5;
  color: #5b5b6b;
  margin: 0;
}

/* line 530, ../sass/about.scss */
.tl-item .tl-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--about-grad);
  box-shadow: 0 0 0 6px rgba(81, 81, 239, 0.12);
}

/* line 537, ../sass/about.scss */
.tl-progress {
  position: relative;
  height: 4px;
  border-radius: 4px;
  background: #e2e0ef;
  margin: 0 calc(max(7vw, 32px)) 0;
}

/* line 545, ../sass/about.scss */
.tl-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 12%;
  border-radius: 4px;
  background: var(--about-grad);
}

/* line 552, ../sass/about.scss */
.tl-hint {
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9b9aae;
  padding: 18px 0 0;
}

/* ============================================================
   5. VALUES / принципы
   ============================================================ */
/* line 564, ../sass/about.scss */
.values {
  background: #fff;
}

/* line 567, ../sass/about.scss */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* line 572, ../sass/about.scss */
.value-card {
  display: block;
  text-decoration: none;
  color: var(--color-black);
  background: #fbfbff;
  border: 1px solid #ececf6;
  border-radius: 20px;
  padding: 30px 26px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--about-ease), box-shadow 0.4s ease, border-color 0.4s ease;
}

/* line 584, ../sass/about.scss */
.value-card .v-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  color: #fff;
  background: var(--about-grad);
  box-shadow: 0 12px 26px -12px rgba(81, 81, 239, 0.55);
  margin-bottom: 22px;
  transition: transform 0.4s var(--about-ease);
}

/* line 597, ../sass/about.scss */
.value-card .v-icon svg {
  width: 28px;
  height: 28px;
}

/* line 598, ../sass/about.scss */
.value-card h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 9px;
}

/* line 603, ../sass/about.scss */
.value-card p {
  font-size: 14.5px;
  line-height: 1.5;
  color: #5b5b6b;
  margin: 0;
}

/* line 609, ../sass/about.scss */
.value-card .v-index {
  position: absolute;
  top: 22px;
  inset-inline-end: 24px;
  font-size: 14px;
  font-weight: 600;
  color: #c7c5da;
}

@media (hover: hover) {
  /* line 618, ../sass/about.scss */
  .value-card:hover {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: 0 28px 50px -24px rgba(31, 24, 73, 0.32);
  }

  /* line 623, ../sass/about.scss */
  .value-card:hover .v-icon {
    transform: translateY(-3px) rotate(-4deg);
  }
}
/* ============================================================
   6. WHAT WE BUILT / продукт
   ============================================================ */
/* line 631, ../sass/about.scss */
.built {
  background: #f6f5fc;
}

/* line 634, ../sass/about.scss */
.built-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* line 639, ../sass/about.scss */
.built-card {
  background: #fff;
  border: 1px solid #e7e5f3;
  border-radius: 22px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* line 648, ../sass/about.scss */
.built-card .b-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-majorelle-blue);
  background: rgba(81, 81, 239, 0.1);
}

/* line 658, ../sass/about.scss */
.built-card .b-icon svg {
  width: 26px;
  height: 26px;
}

/* line 659, ../sass/about.scss */
.built-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

/* line 660, ../sass/about.scss */
.built-card p {
  font-size: 14.5px;
  line-height: 1.5;
  color: #5b5b6b;
  margin: 0;
}

/* line 661, ../sass/about.scss */
.built-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-majorelle-blue);
  text-decoration: none;
}

/* line 671, ../sass/about.scss */
.built-link svg {
  width: 17px;
  height: 17px;
  transition: transform 0.3s ease;
}

@media (hover: hover) {
  /* line 673, ../sass/about.scss */
  .built-link:hover svg {
    transform: translateX(5px);
  }
}
/* ============================================================
   7. TRUST / надёжность
   ============================================================ */
/* line 679, ../sass/about.scss */
.trust {
  background: var(--about-dark);
  color: #fff;
}

/* line 683, ../sass/about.scss */
.trust-wr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* line 689, ../sass/about.scss */
.trust-left h2 {
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 16px 0 16px;
}

/* line 696, ../sass/about.scss */
.trust-left p {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.66);
  max-width: 460px;
}

/* line 702, ../sass/about.scss */
.trust-left .site-label span {
  -webkit-text-fill-color: transparent;
}

/* line 705, ../sass/about.scss */
.trust-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* line 710, ../sass/about.scss */
.trust-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 24px 22px;
}

/* line 716, ../sass/about.scss */
.trust-item .t-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-neon-ice);
  background: rgba(94, 235, 230, 0.1);
  margin-bottom: 16px;
}

/* line 727, ../sass/about.scss */
.trust-item .t-icon svg {
  width: 24px;
  height: 24px;
}

/* line 728, ../sass/about.scss */
.trust-item h4 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
}

/* line 729, ../sass/about.scss */
.trust-item p {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* ============================================================
   8. CTA перед футером
   ============================================================ */
/* line 734, ../sass/about.scss */
.about-cta {
  padding: 100px 0;
  background: #fff;
}

/* line 738, ../sass/about.scss */
.about-cta-wr {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 72px 40px;
  text-align: center;
  color: #fff;
  background-image: linear-gradient(71deg, #5b0dd5, #9747ff);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* line 750, ../sass/about.scss */
.about-cta-wr h2 {
  font-size: clamp(27px, 3.2vw, 42px);
  font-weight: 700;
  line-height: 1.12;
  max-width: 640px;
  margin: 0 auto 16px;
}

/* line 757, ../sass/about.scss */
.about-cta-wr p {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  max-width: 520px;
  margin: 0 auto 30px;
}

/* line 764, ../sass/about.scss */
.about-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* line 770, ../sass/about.scss */
.about-cta-wr .site-btn-new.white {
  color: #5b0dd5;
}

/* ============================================================
   FAQ (наследует .FAQ-стили сайта; задаём только обёртку)
   ============================================================ */
/* line 777, ../sass/about.scss */
.about-faq {
  background: #fff;
  padding: 100px 0;
}

/* логотип-SVG в футере соразмерно шапке */
/* line 783, ../sass/about.scss */
.footer-new-logo img {
  height: 34px;
  width: auto;
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
/* --- ноутбуки (вкл. 1366 и 1440): композиция hero не ломается --- */
@media (max-width: 1440px) {
  /* line 794, ../sass/about.scss */
  .about-section,
  .mission,
  .about-cta,
  .about-faq {
    padding: 88px 0;
  }

  /* line 798, ../sass/about.scss */
  .about-hero-wr {
    max-width: 560px;
  }

  /* line 799, ../sass/about.scss */
  .values-grid {
    gap: 16px;
  }
}
/* --- узкий ноутбук / маленький десктоп --- */
@media (max-width: 1200px) {
  /* line 804, ../sass/about.scss */
  .about-section,
  .mission,
  .about-cta,
  .about-faq {
    padding: 80px 0;
  }

  /* line 808, ../sass/about.scss */
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* line 809, ../sass/about.scss */
  .metric--wide {
    grid-column: span 2;
  }
}
/* --- планшет: 3D остаётся, но приглушаем, текст в одну колонку --- */
@media (max-width: 1023px) {
  /* line 814, ../sass/about.scss */
  .about-section,
  .mission,
  .about-cta,
  .about-faq {
    padding: 72px 0;
  }

  /* line 818, ../sass/about.scss */
  .about-hero {
    padding-top: calc(var(--header-height) + 30px);
    padding-bottom: 60px;
  }

  /* line 822, ../sass/about.scss */
  .about-hero canvas {
    opacity: 0.5;
  }

  /* line 823, ../sass/about.scss */
  .about-hero::before {
    background: linear-gradient(90deg, rgba(7, 7, 15, 0.86) 0%, rgba(7, 7, 15, 0.55) 55%, rgba(7, 7, 15, 0.2) 100%);
  }

  /* line 829, ../sass/about.scss */
  .about-hero-wr {
    max-width: 620px;
  }

  /* line 830, ../sass/about.scss */
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* line 831, ../sass/about.scss */
  .built-grid {
    grid-template-columns: 1fr;
  }

  /* line 832, ../sass/about.scss */
  .trust-wr {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
/* --- мобильный: одна колонка, 3D выключен (фоллбэк-свечение), без pin --- */
@media (max-width: 767px) {
  /* line 837, ../sass/about.scss */
  .about-section,
  .mission,
  .about-cta,
  .about-faq {
    padding: 56px 0;
  }

  /* line 841, ../sass/about.scss */
  .about-head {
    margin-bottom: 36px;
  }

  /* line 843, ../sass/about.scss */
  .about-hero {
    min-height: 82svh;
    padding-top: calc(var(--header-height) + 24px);
    padding-bottom: 48px;
  }

  /* line 848, ../sass/about.scss */
  .about-hero-wr {
    max-width: 100%;
  }

  /* line 849, ../sass/about.scss */
  .about-hero::before {
    background: linear-gradient(180deg, rgba(7, 7, 15, 0.4) 0%, rgba(7, 7, 15, 0.1) 100%);
  }

  /* line 855, ../sass/about.scss */
  .metrics-grid {
    grid-template-columns: 1fr;
  }

  /* line 856, ../sass/about.scss */
  .metric {
    padding: 28px 24px;
  }

  /* line 857, ../sass/about.scss */
  .metric--wide {
    grid-column: span 1;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 12px;
    padding: 32px 26px;
  }

  /* line 858, ../sass/about.scss */
  .values-grid {
    grid-template-columns: 1fr;
  }

  /* line 859, ../sass/about.scss */
  .trust-list {
    grid-template-columns: 1fr;
  }

  /* line 860, ../sass/about.scss */
  .about-hero-actions {
    width: 100%;
  }

  /* line 861, ../sass/about.scss */
  .about-hero-actions .site-btn-new {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* line 862, ../sass/about.scss */
  .about-cta-wr {
    padding: 48px 20px;
    border-radius: 20px;
  }

  /* timeline на мобильных — вертикальный стек, без pin */
  /* line 865, ../sass/about.scss */
  .tl-track {
    flex-direction: column;
    width: 100%;
    padding: 8px 0 0;
    gap: 16px;
  }

  /* line 871, ../sass/about.scss */
  .tl-item {
    flex: 1 1 auto;
    padding: 28px 24px;
  }

  /* line 872, ../sass/about.scss */
  .tl-progress, .tl-hint {
    display: none;
  }
}
/* ============================================================
   PREFERS-REDUCED-MOTION — отключаем тяжёлую анимацию,
   показываем статичные финальные состояния
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* line 880, ../sass/about.scss */
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* line 886, ../sass/about.scss */
  .hero-scroll-cue {
    display: none;
  }

  /* line 887, ../sass/about.scss */
  .about-hero canvas {
    display: none;
  }

  /* line 888, ../sass/about.scss */
  .value-card:hover {
    transform: none;
  }
}