:root {
  --bg-deep: #0c0d16;
  --text: #ffffff;
  --text-muted: #c4c5cc;
  --line-strong: rgba(100, 180, 255, 0.85);
  --accent-pill: #ff8cc6;
  --accent-pill-text: #0c0d16;
  --stroke-ui: #232a6d;
  --accent-blue: #047efe;
  --accent-blue-hover: #1a98ff;
  --radius-pill: 32px;
  --radius-btn: 8px;
  --countdown-border: #232a6d;
  --countdown-radius: 12px;
  --countdown-pad: 24px;
  --countdown-gap: 24px;
  --countdown-max-w: 674px;
  --layout-pad-x: clamp(20px, 6.67vw, 128px);
  /* Frame 92 — hero-блок 877×384: top/bottom 258, left 128, right 435 (1440 макет) */
  --frame92-max-w: 877px;
  --frame92-gap: 32px;
  --frame92-left: 128px;
  --frame92-right: 435px;
  --frame92-top: 258px;
  --frame92-bottom: 258px;
  --hero-stack-gap: var(--frame92-gap);
  /* Frame 81 — заголовок + лид */
  --frame81-max-w: 731px;
  --frame81-gap: 24px;
  --hero-copy-gap: var(--frame81-gap);
  --hero-content-max: var(--frame92-max-w);
  --header-block-h: 98px;
  /* Frame 95 — ряд бейджей */
  --frame95-gap: 20px;
  --font-countdown-digits: "Montserrat Digits", "Montserrat", sans-serif;
}

/* Один woff2 на 0–9 и «:» — без смешения TTF/поднаборов и local() */
@font-face {
  font-family: "Montserrat Digits";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(https://fonts.gstatic.com/s/montserrat/v31/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCuM73w5aXo.woff2)
    format("woff2");
  unicode-range: U+0030-0039, U+003A;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  margin: 0;
  overflow-x: hidden;
  min-height: 100%;
  width: 100%;
  color-scheme: dark;
  background-color: var(--bg-deep);
  scrollbar-color: #3a3d52 var(--bg-deep);
}

html::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track {
  background: var(--bg-deep);
}

html::-webkit-scrollbar-thumb {
  background: #3a3d52;
  border-radius: 5px;
  border: 2px solid var(--bg-deep);
}

html,
body {
  min-height: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg-deep);
}

/* ── Профессиональный адаптивный базовый слой ─────────────────── */
/* Изображения никогда не выходят за границы контейнера */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* Все flex/grid дети не схлопываются ниже минимума */
* { min-width: 0; }

/* Длинные слова переносятся, не вызывая горизонтального скролла */
h1, h2, h3, h4, h5, h6, p, li, td, th, dt, dd, blockquote, figcaption {
  overflow-wrap: break-word;
}

/* Заголовки: balanced wrap убирает одиночные слова */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* Параграфы: pretty wrap убирает orphans в конце блока */
p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Hero + scale wrapper — transparent, body provides unified background */
.surface-top {
  width: 100%;
  max-width: 100%;
  /* clip = обрезает горизонтально, НЕ создаёт scroll-контейнер (в отличие от hidden) */
  overflow-x: clip;
  background: transparent;
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 900px;
  margin: 0;
  background: var(--bg-deep);
  overflow: hidden;
}


.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Верхняя маска удалена: шапка имеет собственный тёмный фон,
   угловой glow должен быть виден в правом верхнем углу прямо за header. */

/* Левая маска: на планшетах/мобиле скрывает часть circuit
   в зоне текста; плавно открывает правую часть с линиями */
.hero__bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 62%;
  height: 100%;
  background: linear-gradient(
    to right,
    var(--bg-deep) 0%,
    var(--bg-deep) 50%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
  display: none; /* десктоп — маска не нужна, SVG стартует от 56px */
}

@media (max-width: 1199px) {
  .hero__bg::before {
    display: block;
  }
}


.hero__bg-inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  min-height: 900px;
  height: 100%;
  margin-inline: auto;
  overflow: visible;
}

@media (max-width: 770px) {
  .hero,
  .hero__bg-inner {
    min-height: min(700px, max(460px, 85vh));
    min-height: min(700px, max(460px, 85svh));
  }
}

/*
 * Ellipse 26: позиция в % от контейнера вместо фиксированных px.
 * 1033px / 1440px = 71.7% — эллипс всегда в правой трети на любом экране.
 */
.hero__bg-ellipse26 {
  position: absolute;
  left: 71.7%;
  top: -24px;
  width: min(602px, 42%);
  height: min(168px, 14vw);
  background: rgba(0, 55, 194, 0.70);
  border-radius: 9999px;
  filter: blur(200px);
  pointer-events: none;
}

/* Планшет ≤1199px: пропорциональная версия desktop-эллипса,
   прижата к правому верхнему углу; glow всегда виден */
@media (max-width: 1199px) {
  .hero__bg-ellipse26 {
    left: auto;
    right: 0;
    top: 0;
    width: clamp(280px, 48vw, 480px);
    height: clamp(90px, 11vw, 140px);
    filter: blur(130px);
  }
}

/* Мобилка ≤719px: компактнее, остаётся в правом верхнем углу */
@media (max-width: 719px) {
  .hero__bg-ellipse26 {
    right: 0;
    top: 0;
    width: clamp(180px, 68vw, 300px);
    height: clamp(70px, 16vw, 100px);
    filter: blur(90px);
  }
}

/*
 * Circuit SVG: десктоп — оригинальная позиция из Figma.
 */
.hero__bg-circuit {
  position: absolute;
  left: 56.5px;
  top: 18px;
  width: calc(100% - 56.5px);
  max-width: 1343px;
  height: auto;
  display: block;
  z-index: 1;
}

/* 900–1199px: SVG прижат к правому краю */
@media (max-width: 1199px) and (min-width: 901px) {
  .hero__bg-circuit {
    left: auto;
    right: 0;
    top: 0;
    width: clamp(580px, 130vw, 1343px);
    max-width: none;
    opacity: 0.9;
  }
}

/* ≤900px: circuit SVG и шарик в герое скрыты */
@media (max-width: 900px) {
  .hero__bg-circuit {
    display: none;
  }
  .why__dot--e33,
  .why__dot--e30,
  .why__dot {
    display: none;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.0001em;
  min-height: 44px;
  padding: 12px 24px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    transform 0.15s ease;
}

.btn--primary {
  background: var(--accent-blue);
  color: #fff;
}

.btn--primary:hover {
  background: var(--accent-blue-hover);
}

.hero__main {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px var(--layout-pad-x) 64px;
  margin-inline: auto;
  width: 100%;
  max-width: 1440px;
  min-width: 0;
  box-sizing: border-box;
}

/* Горизонтальные отступы hero берём из --layout-pad-x (clamp),
   чтобы они совпадали с отступами секций на любой ширине экрана */

@media (min-width: 1440px) {
  .hero__main {
    justify-content: flex-start;
    padding-left: var(--frame92-left);
    padding-right: var(--frame92-right);
    padding-top: calc(var(--frame92-top) - var(--header-block-h));
    padding-bottom: var(--frame92-bottom);
  }
}

/* Frame 92: vertical auto layout, hug 877×384, gap 32 */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--frame92-gap);
  width: 100%;
  max-width: min(var(--frame92-max-w), 100%);
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: hero-content;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hero-copy-gap);
  width: 100%;
  max-width: min(var(--frame81-max-w), 100%);
  box-sizing: border-box;
}

/* Frame 95: row, gap 20, hug до 877×32 — в макете ряд ровно 877px; уже контейнер → перенос */
.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--frame95-gap);
  margin: 0;
  padding: 0;
  max-width: min(var(--frame92-max-w), 100%);
  box-sizing: border-box;
}

/* Как в Figma: одна строка, когда ширина колонки ≥ 877px */
@container hero-content (min-width: 877px) {
  .badges {
    flex-wrap: nowrap;
  }
}

@media (min-width: 1440px) {
  .badges {
    flex-wrap: nowrap;
  }
}

/* Ниже 1440 @container может включить nowrap при ширине колонки 877px — ряд бейджей
   шире вьюпорта → горизонтальный overflow и «съезд» вёрстки */
@media (max-width: 1439px) {
  .badges {
    flex-wrap: wrap;
  }
}

.badges__item {
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.01%;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  box-sizing: border-box;
  border: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.badges__item--accent {
  background: var(--accent-pill);
  color: var(--accent-pill-text);
}

.badges__item--outline {
  padding: 7px 16px;
  border: 1px solid var(--stroke-ui);
  color: #ffffff;
  background: transparent;
}

.hero__title {
  margin: 0;
  max-width: 100%;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  line-height: 110%;
  letter-spacing: -0.01%;
  text-wrap: balance; /* убирает «одинокие» слова в последней строке */
  color: var(--text);
}

.hero__title-break {
  display: none; /* скрыт по умолчанию, включается выше 760px */
}

.hero__lead {
  margin: 0;
  max-width: 100%;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.01%;
  color: var(--text-muted);
  text-align: left;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.hero__lead-break {
  display: none; /* скрыт по умолчанию, включается выше 760px */
}

/* Переносы активны только на широких экранах */
@media (min-width: 761px) {
  .hero__title-break,
  .hero__lead-break {
    display: block;
  }
}

@media (min-width: 1440px) {
  .hero__title {
    font-size: 48px;
  }

  .hero__lead {
    font-size: 20px;
  }
}

/* Один слот в герое: таймер и блок «открыт» — взаимоисключающие, не два ряда подряд */
.hero-countdown-slot {
  width: 100%;
  max-width: min(var(--countdown-max-w), 100%);
}

/* display:flex перебивает нативный [hidden] — скрываем явно */
.countdown[hidden] {
  display: none !important;
}

/* Frame 144 */
.countdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--countdown-gap);
  max-width: min(var(--countdown-max-w), 100%);
  padding: var(--countdown-pad);
  border-radius: var(--countdown-radius);
  border: 1px solid var(--countdown-border);
  background: transparent;
}

@media (min-width: 720px) {
  .countdown {
    flex-wrap: nowrap;
  }
}

/* Frame 91: «До старта» + Frame 88 */
.countdown__start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--countdown-gap);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 720px) {
  .countdown__start {
    flex: 0 0 410px;
    width: 410px;
    max-width: 410px;
  }
}

.countdown__prefix {
  flex: 0 0 auto;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.01%;
  color: #ffffff;
  white-space: nowrap;
}

@media (min-width: 720px) {
  .countdown__prefix {
    flex: 0 0 86px;
    width: 86px;
  }
}

/* Frame 88 */
.countdown__clock {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 720px) {
  .countdown__clock {
    flex: 0 0 300px;
    width: 300px;
    max-width: 300px;
  }
}

@media (min-width: 720px) {
  .countdown__cta.btn {
    flex: 1 0 auto;
  }
}

.countdown__piece {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 0;
}

.countdown__piece--days {
  min-width: 48px;
}

.countdown__piece--hours {
  width: 54px;
}

.countdown__piece--minutes {
  width: 58px;
}

.countdown__piece--seconds {
  width: 65px;
}

.countdown__value {
  width: 100%;
  font-family: var(--font-countdown-digits);
  font-size: 32px;
  font-weight: 700;
  line-height: 120%;
  letter-spacing: -0.01%;
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}

.countdown__sep {
  flex: 0 0 9px;
  width: 9px;
  text-align: center;
  font-family: var(--font-countdown-digits);
  font-size: 32px;
  font-weight: 700;
  line-height: 120%;
  letter-spacing: -0.01%;
  font-synthesis: none;
  color: var(--text-muted);
}

.countdown__label {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.0001em;
  text-align: center;
  color: var(--text-muted);
  text-transform: lowercase;
  white-space: nowrap;
}

/* Frame 82 / кнопка у таймера */
.countdown__cta.btn {
  min-width: 192px;
  min-height: 58px;
  padding: 12px 24px;
  border-radius: var(--radius-btn);
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.01%;
  color: #ffffff;
  flex-shrink: 0;
}

/* Frame 145 — только блок «открыт»; .countdown (таймер) не меняем */
/* Явно скрываем, пока есть [hidden]: иначе display:flex перебивает поведение hidden в ряде браузеров */
.countdown-open[hidden] {
  display: none !important;
}

.countdown-open {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px 24px;
  box-sizing: border-box;
  width: 100%;
  max-width: min(553px, 100%);
  min-width: 0;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #cde4f2;
  background: transparent;
  align-self: flex-start;
}

.countdown-open__text {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.01%;
  color: #ffffff;
  white-space: normal;
}

.countdown-open__cta.btn {
  min-width: min(192px, 100%);
  min-height: 58px;
  padding: 12px 24px;
  border-radius: var(--radius-btn);
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.01%;
  color: #ffffff;
  flex: 0 1 auto;
  max-width: 100%;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

@media (max-width: 719px) {
  .countdown {
    flex-direction: column;
    align-items: stretch;
  }

  .countdown-open {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
  }

  .countdown-open__text {
    text-align: center;
  }

  .countdown-open__cta {
    width: 100%;
  }

  .countdown__start {
    max-width: none;
    width: 100%;
    flex: none;
  }

  .countdown__prefix {
    flex: 0 0 auto;
    width: auto;
    white-space: normal;
  }

  .countdown__clock {
    flex-wrap: wrap;
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    row-gap: 8px;
  }

  .countdown__cta {
    width: 100%;
  }

}

@media (max-width: 430px) {
  .countdown {
    align-items: center;
  }
  .countdown__start {
    align-items: center;
    justify-content: center;
  }
  .countdown__prefix {
    text-align: center;
    width: 100%;
  }
  .countdown__clock {
    justify-content: center;
  }
  .countdown__cta.btn {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .countdown__clock {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 4px;
  }
  .countdown__value {
    font-size: clamp(18px, 6vw, 26px);
  }
  .countdown__sep {
    font-size: clamp(16px, 5vw, 22px);
    flex: 0 0 6px;
    width: 6px;
  }
  .countdown__label {
    font-size: 10px;
  }
  .countdown__piece--hours,
  .countdown__piece--minutes,
  .countdown__piece--seconds {
    min-width: 36px;
    width: auto;
  }
  .countdown__piece--days {
    min-width: 36px;
  }
}

@media (max-width: 520px) {
  .countdown__value {
    font-size: clamp(22px, 7vw, 32px);
  }

  .countdown__sep {
    font-size: clamp(20px, 6vw, 28px);
  }

  .countdown__label {
    font-size: 12px;
  }

  .countdown__piece--hours,
  .countdown__piece--minutes,
  .countdown__piece--seconds {
    width: auto;
    min-width: 44px;
  }
}

@media (max-width: 1000px) {
  /* Горизонтальный padding hero совпадает с padding шапки на мобиле/планшете */
  .hero__main {
    padding-left: clamp(16px, 5vw, 20px);
    padding-right: clamp(16px, 5vw, 20px);
  }
}

@media (max-width: 375px) {
  .hero__main {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 770px) {
  .hero__main {
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .hero__lead {
    max-width: 100%;
  }

  .hero__content {
    gap: 18px;
  }

  .hero__copy {
    gap: 10px;
  }

  .hero__title {
    font-size: clamp(22px, 6vw, 36px);
    line-height: 1.06;
    letter-spacing: -0.02em;
  }

  .hero__lead {
    font-size: 14px;
    line-height: 1.32;
    letter-spacing: -0.01em;
  }

  .badges {
    gap: 8px;
  }

  .badges__item {
    font-size: 12px;
    line-height: 14px;
    padding: 6px 12px;
  }

  .badges__item--outline {
    padding: 5px 12px;
  }

  .countdown {
    padding: 14px 16px;
    gap: 14px;
  }

  .countdown__cta.btn {
    min-height: 50px;
    min-width: 0;
    padding: 10px 18px;
    font-size: 15px;
  }
}