* {
  margin: 0;
  padding: 0;
}
/*@font-face{
    font-family: 'bold';
    src:url('/fonts/2026/SFProText-Bold.ttf');
}
@font-face{
    font-family: 'light';
    src:url('/fonts/2026/SFProText-Light.ttf');
}
@font-face{
    font-family: 'medium';
    src:url('/fonts/2026/SFProText-Medium.ttf');
}
@font-face{
   font-family: 'regular';
   src:url('/fonts/2026/SFProText-Regular.ttf');
}
@font-face{
   font-family: 'semibold';
   src:url('/fonts/2026/SFProText-Semibold.ttf');
}

@font-face{
    font-family: 'black2';
    src:url('/fonts/2026/Manrope-ExtraBold.ttf');
}
@font-face{
    font-family: 'bold2';
    src:url('/fonts/2026/Manrope-Bold.ttf');
}
@font-face{
    font-family: 'light2';
    src:url('/fonts/2026/Manrope-Light.ttf');
}
@font-face{
    font-family: 'medium2';
    src:url('/fonts/2026/Manrope-Medium.ttf');
}
@font-face{
   font-family: 'regular2';
   src:url('/fonts/2026/Manrope-Regular.ttf');
}
@font-face{
   font-family: 'semibold2';
   src:url('/fonts/2026/Manrope-SemiBold.ttf');
}*/
@font-face {
  font-family: "black";
  src: url("/fonts/2026/Manrope-ExtraBold.ttf");
}
@font-face {
  font-family: "bold";
  src: url("/fonts/2026/Manrope-Bold.ttf");
}
@font-face {
  font-family: "light";
  src: url("/fonts/2026/Manrope-Light.ttf");
}
@font-face {
  font-family: "medium";
  src: url("/fonts/2026/Manrope-Medium.ttf");
}
@font-face {
  font-family: "regular";
  src: url("/fonts/2026/Manrope-Regular.ttf");
}
@font-face {
  font-family: "semibold";
  src: url("/fonts/2026/Manrope-SemiBold.ttf");
}
.ui26 .ui26-btn {
  transition: 0.5s !important;
}
.ui26 .ui26-btn:hover {
  transform: scale(1.05);
}
.ui26 {
  background: radial-gradient(
      1200px 800px at 10% 10%,
      var(--ui26-bg-grad-1),
      transparent
    ),
    radial-gradient(900px 600px at 90% 0%, var(--ui26-bg-grad-2), transparent),
    var(--ui26-bg);
  line-height: 1.3;
  color: var(--ui26-text);
  font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto,
    Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 !important;
  font-family: "regular";
}
.ui26 * {
  box-sizing: border-box;
}
.ui26 a {
  text-decoration: none;
  color: var(--ui26-accent);
}
.ui26 .ui26-a {
  font-weight: 600;
}
.ui26 .ui26-a--accent {
  color: var(--ui26-accent);
}
.ui26 .ui26-a--accent:hover {
  text-decoration: underline;
}
.ui26 .ui26-a--premium {
  color: var(--ui26-premium);
}
.ui26 .ui26-a--premium:hover {
  text-decoration: underline;
}

.ui26 .ui26-link {
  color: var(--ui26-text);
  opacity: 0.9;
}
.ui26 .ui26-link:hover {
  opacity: 1;
}
.ui26 .ui26-link--muted {
  color: var(--ui26-muted);
}

.ui26 .ui26-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}
.ui26 .ui26-page {
  padding-bottom: 64px;
}
.ui26 .ui26-section {
  margin: 28px auto;
}

.ui26 .ui26-h1 {
  font-size: var(--ui26-h1);
  font-weight: 700;
  margin: 0 0 0px;
  line-height: 1.2;
}
.ui26 .ui26-h2 {
  font-size: var(--ui26-h2);
  font-weight: 700;
  margin: 0 0 -7px;
}
.ui26 .ui26-h3 {
  font-size: var(--ui26-h3);
  font-weight: 700;
  margin: 0 0 10px;
}
.ui26 .ui26-text {
  font-size: var(--ui26-text-size);
}
.ui26 .ui26-small {
  font-size: var(--ui26-small);
  color: var(--ui26-muted);
}

.ui26 .glass {
  background: var(--ui26-surface);
  border: 1px solid var(--ui26-stroke);
  box-shadow: var(--ui26-shadow-1);
  -webkit-backdrop-filter: blur(var(--ui26-glass-blur-1));
  backdrop-filter: blur(var(--ui26-glass-blur-1));
  border-radius: var(--ui26-radius-lg);
}
.ui26 .glass--elev-2 {
  -webkit-backdrop-filter: blur(var(--ui26-glass-blur-2));
  backdrop-filter: blur(var(--ui26-glass-blur-2));
  box-shadow: var(--ui26-shadow-2);
}
.ui26 .glass--elev-3 {
  -webkit-backdrop-filter: blur(var(--ui26-glass-blur-3));
  backdrop-filter: blur(var(--ui26-glass-blur-3));
  border: 1px solid var(--ui26-stroke-strong);
}

.ui26 .ui26-header {
  position: sticky;
  top: 0;
  z-index: var(--ui26-z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  margin-bottom: 24px;
}
.ui26 .ui26-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ui26 .ui26-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ui26-accent);
  display: grid;
  place-items: center;
  color: #000;
  font-weight: 800;
}
.ui26 .ui26-title {
  font-weight: 700;
  letter-spacing: 0.3px;
}

.ui26 .ui26-card {
  padding: 16px;
}

.ui26 .ui26-swatches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.ui26 .swatch {
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--ui26-stroke);
  position: relative;
}
.ui26 .swatch::after {
  content: attr(data-name);
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 12px;
  color: var(--ui26-muted);
}
.ui26 .swatch[data-name="bg"] {
  background: var(--ui26-bg);
}
.ui26 .swatch[data-name="surface"] {
  background: var(--ui26-surface);
}
.ui26 .swatch[data-name="accent"] {
  background: var(--ui26-accent);
}
.ui26 .swatch[data-name="text"] {
  background: var(--ui26-text);
}
.ui26 .swatch[data-name="muted"] {
  background: var(--ui26-muted);
}
.ui26 .swatch[data-name="premium-blue"] {
  background: var(--ui26-premium);
}

.ui26 .ui26-spacers {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.ui26 .spacer {
  width: 30px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--ui26-stroke);
}
.ui26 .spacer[data-size="8"] {
  height: 8px;
}
.ui26 .spacer[data-size="12"] {
  height: 12px;
}
.ui26 .spacer[data-size="16"] {
  height: 16px;
}
.ui26 .spacer[data-size="24"] {
  height: 24px;
}
.ui26 .spacer[data-size="32"] {
  height: 32px;
}

/* Статья — плотнее ритм для проверки */
.ui26 .ui26-article-demo p.ui26-text {
  line-height: 1.45;
}
/* ===== Burger button (glass style, три линии) ===== */
.ui26 .ui26-btn-burger {
  width: 60px;
  height: 60px;
  display: flex;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px; /* расстояние между линиями */
  cursor: pointer;
  transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
}

.ui26 .ui26-btn-burger:hover {
  background: rgba(245, 124, 0, 0.15);
  box-shadow: 0 0 12px rgba(245, 124, 0, 0.5);
}

.ui26 .ui26-btn-burger:active {
  transform: scale(0.9);
}

.ui26 .ui26-btn-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  transition: background 0.3s;
}

.ui26 .ui26-btn-burger:hover span {
  background: #f57c00;
}
/* ===========================================================
   СИСТЕМА ОТСТУПОВ И СЕТКИ
   Используется для главной страницы, чтобы все блоки выглядели
   гармонично и не приходилось подгонять вручную.
   =========================================================== */

/* ===== SECTION =====
   Большой контейнер для каждого смыслового блока:
   hero, портфолио, преимущества, прайс, обо мне, база знаний.
   Он задаёт одинаковые отступы сверху и снизу.
   */
.section {
  margin: 0 auto; /* выравниваем по центру */
  padding-block: clamp(40px, 6vw, 80px); /* вертикальные отступы (адаптивные) */
  padding-inline: clamp(20px, 5vw, 64px); /* боковые отступы */
}
.section_1600 {
  max-width: 1600px; /* ограничиваем ширину контента */
  margin: 0 auto; /* выравниваем по центру */
  padding-block: clamp(40px, 6vw, 80px); /* вертикальные отступы (адаптивные) */
  padding-inline: clamp(20px, 5vw, 64px); /* боковые отступы */
}

/* ===== SECTION HEAD =====
   Шапка блока: заголовок + подзаголовок.
   Центрируется и отделяется от контента снизу.
   */
.section__head {
  margin-bottom: clamp(
    24px,
    4vw,
    48px
  ) !important; /* отступ вниз под контент */
}
.section__title {
  margin: 0 0 12px;
  font-size: clamp(22px, 3vw, 36px); /* адаптивный размер заголовка */
  font-weight: 900;
}
.section__subtitle {
  margin: 0;
  font-size: clamp(14px, 1.4vw, 18px); /* адаптивный размер подзаголовка */
  color: var(--muted); /* серый цвет */
}

/* ===== GRID =====
   Сетка для карточек внутри блока.
   gap задаёт расстояние между колонками и строками.
   Используй модификаторы grid--2, grid--3, grid--4 для разного количества колонок.
   */
.grid {
  gap: 24px !important; /* расстояние между элементами сетки */
}
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ===== STACK =====
   Универсальный приём для равных вертикальных отступов.
   Оборачиваешь группу элементов в .stack —
   и у каждого следующего будет равный отступ сверху.
   */
.stack > * + * {
  margin-top: 1.2em; /* расстояние между любыми соседними элементами */
}
.my_margin_top {
  margin-block: clamp(20px, 3vw, 40px) 0 !important;
}
  /* База переключалки языка (общая) */
.lang-switch{
  --accent: #F57C00;
  --stroke: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.78);
  --textDim: rgba(255,255,255,.45);

  position: relative;
  width: 92px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;

  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.12);

  user-select: none;
}

.lang-switch__label{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  letter-spacing: .04em;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
}

.lang-switch__label--left{ left: 14px; }
.lang-switch__label--right{ right: 14px; }

.lang-switch__thumb{
  position: absolute;
  top: 3px;
  left: 3px;
  width: 42px;
  height: 26px;
  border-radius: 999px;
  z-index: 1;
  transition: transform .22s ease, width .22s ease, box-shadow .22s ease;
}

/* Положение */
.lang-switch.is-en .lang-switch__thumb{ transform: translateX(44px); }
.lang-switch.is-en .lang-switch__label--left{ color: var(--textDim); }
.lang-switch.is-en .lang-switch__label--right{ color: var(--text); }

.lang-switch.is-ru .lang-switch__thumb{ transform: translateX(0); }
.lang-switch.is-ru .lang-switch__label--left{ color: var(--text); }
.lang-switch.is-ru .lang-switch__label--right{ color: var(--textDim); }

/* hover/active */
.lang-switch:hover{ border-color: rgba(255,255,255,.22); }
.lang-switch:active .lang-switch__thumb{ width: 46px; }
 
/* -------------------- Вариант 2: “двойное стекло” + подсветка акцента -------------------- */
.lang-switch--v2{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)),
    radial-gradient(circle at 50% 0%, rgba(245,124,0,.16), transparent 55%);
}
.lang-switch--v2 .lang-switch__thumb{
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 0 0 1px rgba(245,124,0,.10),
    0 12px 28px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.20);
}