/* Делает Тильдину обёртку вокруг нашего блока полноширинной и без отступов */
.t-rec:has(#corvexa-root) { padding-top:0 !important; padding-bottom:0 !important; }
.t-rec:has(#corvexa-root) .t-container,
.t-rec:has(#corvexa-root) .t-row,
.t-rec:has(#corvexa-root) .t-col,
.t-rec:has(#corvexa-root) .t123,
.t-rec:has(#corvexa-root) .t-html {
  max-width:none !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
}

/* Наши внутренние контейнеры как в макете */
#corvexa-root .container { max-width:1180px; margin:0 auto; padding:0 20px; }

/* Подстраховка для hero/canvas и заголовков */
#corvexa-root canvas { display:block; }
#corvexa-root .hero { position:relative; }
#corvexa-root .hero #net { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
#corvexa-root .hero h1, #corvexa-root h2 { margin-top:0; }

/* Эмодзи-иконки: фонтовой фоллбэк, чтобы не были квадратиками */
#corvexa-root, #corvexa-root .icon {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial,
               "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji" !important;
}

/* 1) Оставляем тильдину обёртку без своих отступов */
.t-rec:has(#corvexa-root) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 2) Делаем управляемые отступы вокруг всего нашего лендинга */
#corvexa-root {
  /* вертикальные поля страницы: 20–48px адаптивно */
  padding-top: clamp(20px, 4vw, 48px);
  padding-bottom: clamp(20px, 4vw, 48px);
}

/* 3) Доп. «воздух» внутри шапки */
#corvexa-root .nav {
  /* было 14px — сделаем адаптивно 12–24px */
  padding: clamp(12px, 2vw, 24px) 0;
}

/* 4) Небольшой зазор между шапкой и hero */
#corvexa-root header { margin-bottom: clamp(8px, 1.5vw, 20px); }

/* 5) На очень узких экранах слегка увеличим боковые поля контейнера */
@media (max-width: 480px) {
  #corvexa-root .container { padding-left: 16px; padding-right: 16px; }
}

/* 6) Подстраховка для canvas и заголовков, чтобы ничего не «липло» визуально */
#corvexa-root canvas { display: block; }
#corvexa-root .hero { position: relative; }
#corvexa-root .hero h1,
#corvexa-root h2 { margin-top: 0; }


/* Hero занимает ширину viewport, а контент — в контейнере с «воздухом» */
#corvexa-root .hero {
  position: relative;
  min-height: clamp(520px, 68vh, 820px);
  overflow: clip; /* не обрезает фон по ширине контейнера Тильды */
}

/* Фоновая подложка растягивается на всю ширину экрана */
#corvexa-root .hero-bg {
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;           /* ключ: именно ширина viewport */
  height: 100%;
  pointer-events: none;   /* клики сквозь фон */
  z-index: 0;
  overflow: hidden;
}

/* Canvas + «капли» внутри фонового слоя */
#corvexa-root .hero-bg #net {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .6;
}
#corvexa-root .hero-bg .web { position: absolute; inset: 0; opacity: .5; }
#corvexa-root .hero-bg .blob { filter: blur(70px); }
#corvexa-root .hero-bg .blob.b1 { left: -220px; bottom: -160px; }
#corvexa-root .hero-bg .blob.b2 { right: -180px; top: -120px; width: 560px; height: 560px; }

/* Контент сверху фона, с комфортными отступами */
#corvexa-root .hero-inner {
  position: relative;
  z-index: 1;
  padding: clamp(32px, 6vw, 80px) 0;
}

/* Чуть больше «воздуха» под шапкой */
#corvexa-root header { margin-bottom: clamp(8px, 1.5vw, 20px); }

/* Текст не «липнет» */
#corvexa-root .hero h1,
#corvexa-root h2 { margin-top: 0; }

/* На очень узких экранах увеличим боковые поля контейнера */
@media (max-width: 480px) {
  #corvexa-root .container { padding-left: 16px; padding-right: 16px; }
}


/* ==== Глобальные переменные градиента ==== */
#corvexa-root{
  --grad-height: 780px;                 /* высота градиентного полотна */
  --grad-offset: clamp(28px,4vw,56px);  /* зазор над заголовками */
  --grad-soften: 60%;                   /* где «растворяется» радиальный градиент */
}

/* Три секции, каждая с собственным фоновым полотном на всю ширину */
#corvexa-root #utp,
#corvexa-root #services,
#corvexa-root #cases{
  position: relative;
  isolation: isolate; /* свой стек — фон под контентом */
}

/* Контент поверх фона */
#corvexa-root #utp > .container,
#corvexa-root #services > .container,
#corvexa-root #cases > .container{
  position: relative;
  z-index: 1;
}

/* Базовый фон для каждой секции (полная ширина viewport) */
#corvexa-root #utp::before,
#corvexa-root #services::before,
#corvexa-root #cases::before{
  content:"";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;                /* ключ: растягиваемся шире тильдиного контейнера */
  height: var(--grad-height);
  pointer-events: none;
  z-index: 0;

  /* по умолчанию — старт чуть выше заголовка секции */
  top: calc(-1 * var(--grad-offset));

  /* сам рисунок градиента: 2 «софтовых» пятна + лёгкий вертикальный переход */
  background:
    radial-gradient(900px 520px at 15% 0, rgba(43,124,255,.14), transparent var(--grad-soften)),
    radial-gradient(900px 520px at 85% 0, rgba(25,195,125,.14), transparent var(--grad-soften)),
    linear-gradient(180deg, rgba(43,124,255,.06), rgba(25,195,125,.05) 40%, transparent 85%);
  filter: saturate(115%);
}

/* Особое правило для первой секции: стыкуем с концом hero */
#corvexa-root #utp::before{
  /* JS выставит --utp-grad-shift так, чтобы верх градиента совпал с низом hero */
  top: var(--utp-grad-shift, calc(-1 * var(--grad-offset)));
}

/* Адаптивные штрихи */
@media (max-width: 480px){
  #corvexa-root{ --grad-height: 620px; }
}