/* =========================================================
   ALE AUTO — /11 UNIFIED PREMIUM STYLE
   Заменяет старый CSS-блок страницы /11
   Цель: единый тёмный фон, бесшовная сетка, общая типографика
========================================================= */

:root {
  --ale-bg: #030713;
  --ale-bg-2: #06101F;
  --ale-bg-3: #092A4C;

  --ale-white: #FFFFFF;
  --ale-cream: #F5F1E8;
  --ale-black: #07131F;

  --ale-muted-light: rgba(255,255,255,.70);
  --ale-muted-light-2: rgba(255,255,255,.54);
  --ale-muted-dark: rgba(7,19,31,.68);

  --ale-blue: #7EE7FF;
  --ale-sky: #7CB7FF;
  --ale-orange: #F36B2A;
  --ale-red: #D83D4F;

  --ale-gradient: linear-gradient(135deg, #F36B2A 0%, #D83D4F 100%);
  --ale-blue-gradient: linear-gradient(135deg, #7CB7FF 0%, #7EE7FF 100%);

  --ale-radius-xl: 34px;
  --ale-radius-lg: 24px;
  --ale-radius-md: 18px;

  --ale-shadow-dark:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 24px 80px rgba(0,0,0,.28);

  --ale-shadow-soft:
    0 24px 70px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.80);

  --ale-max: 1180px;
  --ale-font: TildaSans, "Tilda Sans", Arial, sans-serif;
}

/* =========================================================
   1. GLOBAL PAGE BACKGROUND
========================================================= */

html,
body {
  min-height: 100%;
  margin: 0 !important;
  background: var(--ale-bg) !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
}

body {
  position: relative;
  color: var(--ale-white);
  font-family: var(--ale-font) !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Бесшовный основной фон всей страницы */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 6%, rgba(126,231,255,.13), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(243,107,42,.075), transparent 31%),
    radial-gradient(circle at 50% 72%, rgba(124,183,255,.08), transparent 46%),
    linear-gradient(135deg, #030713 0%, #06101F 48%, #092A4C 100%);
}

/* Бесшовная сетка на всю страницу */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .24;
  background-image:
    linear-gradient(rgba(126,231,255,.095) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,231,255,.095) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:
    64px 64px,
    64px 64px,
    256px 256px,
    256px 256px;
  animation: ale-page-grid-move 32s linear infinite;
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0,0,0,.96),
    rgba(0,0,0,.82) 48%,
    rgba(0,0,0,.68)
  );
  mask-image: linear-gradient(
    180deg,
    rgba(0,0,0,.96),
    rgba(0,0,0,.82) 48%,
    rgba(0,0,0,.68)
  );
}

@keyframes ale-page-grid-move {
  from {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0;
  }

  to {
    background-position:
      64px 64px,
      64px 64px,
      256px 256px,
      256px 256px;
  }
}

/* Убираем фоны Tilda, чтобы не было разрывов */
#allrecords,
.t-records,
.t-rec,
.t396,
.t396__artboard {
  background: transparent !important;
}

/* =========================================================
   2. BASE SECTION SYSTEM
========================================================= */

.ale-import-style-section {
  width: 100%;
  padding: 108px 20px;
  font-family: var(--ale-font) !important;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  color: var(--ale-white);
  background: transparent !important;
}

.ale-import-style-section *,
.ale-import-style-section *::before,
.ale-import-style-section *::after {
  box-sizing: border-box;
  font-family: var(--ale-font) !important;
}

.ale-import-container {
  width: 100%;
  max-width: var(--ale-max);
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

/* Старые dark/warm секции теперь не создают отдельный фон */
.ale-dark-section,
.ale-warm-section {
  background: transparent !important;
  color: var(--ale-white);
}

/* Лёгкий локальный glow внутри секций */
.ale-import-style-section::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 10%, rgba(126,231,255,.08), transparent 30%),
    radial-gradient(circle at 86% 80%, rgba(243,107,42,.055), transparent 34%);
  opacity: .85;
}

.ale-import-style-section > * {
  position: relative;
  z-index: 2;
}

/* =========================================================
   3. TYPOGRAPHY
========================================================= */

.ale-section-header {
  max-width: 850px;
  margin: 0 auto 56px;
  text-align: center;
}

.ale-section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: 0 auto 18px;
  padding: 8px 14px;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(126,231,255,.22);
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .02em;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.ale-section-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ale-blue);
  box-shadow: 0 0 18px rgba(126,231,255,.78);
  flex: 0 0 auto;
}

.ale-section-title {
  margin: 0 0 18px;
  color: var(--ale-white) !important;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -.045em;
  text-shadow: none;
}

.ale-section-title span {
  color: transparent;
  background: var(--ale-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

.ale-section-subtitle {
  max-width: 780px;
  margin: 0 auto;
  color: var(--ale-muted-light) !important;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.58;
  font-weight: 500;
}

.ale-dark-section .ale-section-title,
.ale-warm-section .ale-section-title {
  color: var(--ale-white) !important;
}

.ale-dark-section .ale-section-subtitle,
.ale-warm-section .ale-section-subtitle {
  color: var(--ale-muted-light) !important;
}

/* =========================================================
   4. CARDS
========================================================= */

.ale-card-dark {
  border-radius: var(--ale-radius-xl);
  background:
    radial-gradient(circle at 20% 0%, rgba(126,231,255,.10), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045)) !important;
  color: var(--ale-white);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--ale-shadow-dark);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: hidden;
}

.ale-card-light {
  border-radius: var(--ale-radius-xl);
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(245,241,232,.92)) !important;
  color: var(--ale-black);
  border: 1px solid rgba(255,255,255,.54);
  box-shadow: var(--ale-shadow-soft);
  overflow: hidden;
}

.ale-card-dark h1,
.ale-card-dark h2,
.ale-card-dark h3,
.ale-card-dark h4,
.ale-card-dark strong {
  color: var(--ale-white) !important;
}

.ale-card-dark p,
.ale-card-dark li,
.ale-card-dark span,
.ale-card-dark small {
  color: var(--ale-muted-light);
}

.ale-card-light h1,
.ale-card-light h2,
.ale-card-light h3,
.ale-card-light h4,
.ale-card-light strong {
  color: var(--ale-black) !important;
}

.ale-card-light p,
.ale-card-light li,
.ale-card-light span,
.ale-card-light small {
  color: var(--ale-muted-dark);
}

/* Совместимость со старыми карточками */
.comparison-card,
.risk-feature-card,
.calculator-card,
.expert-info-card,
.expert-benefit-card,
.expert-media-card {
  border-radius: var(--ale-radius-xl) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(126,231,255,.10), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045)) !important;
  color: var(--ale-white) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: var(--ale-shadow-dark) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: hidden !important;
}

.pricing-card,
.calculator-result,
.expert-photo-card {
  border-radius: var(--ale-radius-xl) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(245,241,232,.92)) !important;
  color: var(--ale-black) !important;
  border: 1px solid rgba(255,255,255,.54) !important;
  box-shadow: var(--ale-shadow-soft) !important;
  overflow: hidden !important;
}

/* =========================================================
   5. BUTTONS
========================================================= */

.ale-gradient-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 16px 28px;
  border-radius: 999px;
  border: 0;
  background: var(--ale-gradient);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 900;
  box-shadow:
    0 18px 46px rgba(216,61,79,.28),
    0 10px 28px rgba(243,107,42,.20),
    inset 0 1px 0 rgba(255,255,255,.22);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;
  white-space: nowrap;
  cursor: pointer;
}

.ale-gradient-button:hover {
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-2px);
  filter: saturate(1.06);
  box-shadow:
    0 22px 58px rgba(216,61,79,.34),
    0 12px 32px rgba(243,107,42,.24),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* =========================================================
   6. TILDA / ZERO BLOCK COMPATIBILITY
========================================================= */

.tn-atom {
  font-family: var(--ale-font) !important;
}

/* Если Zero-блоки имеют свои белые/тёплые фоны */
.t-rec,
.t396__artboard,
.t396__carrier,
.t396__filter {
  background-color: transparent !important;
}

/* Цвета текста в старых dark-секциях */
.ale-dark-section .tn-atom,
.ale-card-dark .tn-atom,
.comparison-card .tn-atom,
.risk-feature-card .tn-atom,
.calculator-card .tn-atom,
.expert-info-card .tn-atom,
.expert-benefit-card .tn-atom,
.expert-media-card .tn-atom {
  color: inherit;
}

/* =========================================================
   7. RESPONSIVE
========================================================= */

@media screen and (max-width: 960px) {
  .ale-import-style-section {
    padding: 86px 20px;
  }

  .ale-section-title {
    font-size: clamp(32px, 7vw, 42px);
  }
}

@media screen and (max-width: 640px) {
  .ale-import-style-section {
    padding: 72px 16px;
  }

  .ale-section-title {
    font-size: clamp(30px, 10vw, 38px);
    line-height: 1.08;
  }

  .ale-section-subtitle {
    font-size: 16px;
  }

  .ale-gradient-button {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  .ale-card-dark,
  .ale-card-light,
  .comparison-card,
  .risk-feature-card,
  .calculator-card,
  .expert-info-card,
  .expert-benefit-card,
  .expert-media-card,
  .pricing-card,
  .calculator-result,
  .expert-photo-card {
    border-radius: 24px !important;
  }
}

/* =========================================================
   8. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  body::after,
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
/* =========================================================
   /11 FINAL PREMIUM BACKGROUND — SOFT GRID VERSION
   Бесшовный фон + спокойная сетка + карточки читаются лучше
   Вставить в самый низ CSS страницы /11
========================================================= */

/* 1. База страницы: темнее и дороже */
html,
body {
  background: #06111F !important;
  overflow-x: hidden !important;
}

body {
  position: relative !important;
}

/* 2. Основной фон: меньше яркого синего, больше глубины */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 14% 8%, rgba(126,231,255,.12), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(243,107,42,.065), transparent 34%),
    radial-gradient(circle at 52% 48%, rgba(124,183,255,.065), transparent 48%),
    radial-gradient(circle at 50% 94%, rgba(126,231,255,.055), transparent 46%),
    linear-gradient(135deg, #06111F 0%, #081A30 46%, #0B2A4A 100%) !important;
}

/* 3. Старую сетку на body отключаем */
body::after {
  content: none !important;
}

/* 4. #allrecords — сцена для общей сетки */
#allrecords {
  position: relative !important;
  isolation: isolate !important;
  background: transparent !important;
  z-index: 0 !important;
}

/* 5. Спокойная сетка: видна на пустом фоне, но не давит */
#allrecords::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .32 !important;
  background-image:
    linear-gradient(rgba(126,231,255,.105) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,231,255,.105) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) !important;
  background-size:
    64px 64px,
    64px 64px,
    256px 256px,
    256px 256px !important;
  background-position:
    0 0,
    0 0,
    0 0,
    0 0 !important;
  animation: ale-premium-soft-grid-move 42s linear infinite !important;
}

/* 6. Очень мягкое свечение, без пересвета карточек */
#allrecords::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: .46 !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(126,231,255,.055), transparent 30%),
    radial-gradient(circle at 80% 34%, rgba(124,183,255,.045), transparent 34%),
    radial-gradient(circle at 78% 84%, rgba(243,107,42,.04), transparent 36%);
  mix-blend-mode: screen;
}

@keyframes ale-premium-soft-grid-move {
  from {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0;
  }

  to {
    background-position:
      64px 64px,
      64px 64px,
      256px 256px,
      256px 256px;
  }
}

/* 7. Все Tilda-контейнеры прозрачные */
#allrecords,
.t-records,
.t-rec,
.t-rec_pt_0,
.t-rec_pb_0,
.t396,
.t396__artboard,
.t396__carrier,
.t396__filter {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* 8. Секции прозрачные — бесшовность сохраняется */
#allrecords section,
#allrecords .ale-page,
#allrecords .ale-section,
#allrecords .ale-section--dark,
#allrecords .ale-section--warm,
#allrecords .ale-import-style-section,
#allrecords .ale-dark-section,
#allrecords .ale-warm-section,
#allrecords .pd-page,
#allrecords .pd-section,
#allrecords .autopodbor-section,
#allrecords [class*="section"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* 9. Отключаем локальные псевдофоны секций */
#allrecords .ale-page::before,
#allrecords .ale-page::after,
#allrecords .ale-section::before,
#allrecords .ale-section::after,
#allrecords .ale-import-style-section::before,
#allrecords .ale-import-style-section::after,
#allrecords .ale-dark-section::before,
#allrecords .ale-dark-section::after,
#allrecords .ale-warm-section::before,
#allrecords .ale-warm-section::after,
#allrecords .pd-page::before,
#allrecords .pd-page::after,
#allrecords .pd-section::before,
#allrecords .pd-section::after,
#allrecords [class*="section"]::before,
#allrecords [class*="section"]::after {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  content: none !important;
}

/* 10. Блоки контента выше сетки */
#allrecords .t-rec,
#allrecords section,
#allrecords .ale-import-style-section,
#allrecords .ale-section,
#allrecords .pd-section {
  position: relative !important;
  z-index: 3 !important;
  overflow: visible !important;
}

/* 11. Контент внутри блоков ещё выше */
#allrecords .ale-import-container,
#allrecords .ale-container,
#allrecords .pd-container,
#allrecords .t-container,
#allrecords .t396__elem,
#allrecords .tn-atom {
  position: relative;
  z-index: 4;
}

/* 12. Inline-фоны Tilda гасим */
#allrecords .t-rec[style*="background"],
#allrecords .t396__artboard[style*="background"],
#allrecords section[style*="background"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* 13. Карточки выше фона */
#allrecords .ale-card-dark,
#allrecords .ale-card-light,
#allrecords .comparison-card,
#allrecords .risk-feature-card,
#allrecords .calculator-card,
#allrecords .expert-info-card,
#allrecords .expert-benefit-card,
#allrecords .expert-media-card,
#allrecords .pricing-card,
#allrecords .calculator-result,
#allrecords .expert-photo-card {
  position: relative !important;
  z-index: 5 !important;
}

/* 14. Тёмные glass-карточки: плотнее, чтобы сетка не перебивала */
#allrecords .ale-card-dark,
#allrecords .comparison-card,
#allrecords .risk-feature-card,
#allrecords .calculator-card,
#allrecords .expert-info-card,
#allrecords .expert-benefit-card,
#allrecords .expert-media-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(126,231,255,.075), transparent 34%),
    linear-gradient(145deg, rgba(18,31,50,.88), rgba(15,22,36,.76)) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.105),
    0 24px 80px rgba(0,0,0,.32) !important;
  backdrop-filter: blur(26px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.08) !important;
}

/* 15. Крупные dashboard/media панели — ещё чуть плотнее */
#allrecords .ale-dashboard,
#allrecords .dashboard-card,
#allrecords .media-card,
#allrecords .video-card,
#allrecords .expert-media-card {
  background:
    radial-gradient(circle at 16% 0%, rgba(126,231,255,.08), transparent 34%),
    linear-gradient(145deg, rgba(20,34,54,.90), rgba(16,24,40,.78)) !important;
}

/* 16. Светлые карточки оставляем премиальными */
#allrecords .ale-card-light,
#allrecords .pricing-card,
#allrecords .calculator-result,
#allrecords .expert-photo-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(245,241,232,.94)) !important;
  border: 1px solid rgba(255,255,255,.58) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.84) !important;
}

/* 17. Дополнительная читаемость текста внутри тёмных карточек */
#allrecords .ale-card-dark p,
#allrecords .comparison-card p,
#allrecords .risk-feature-card p,
#allrecords .calculator-card p,
#allrecords .expert-info-card p,
#allrecords .expert-benefit-card p,
#allrecords .expert-media-card p {
  color: rgba(255,255,255,.72) !important;
}

/* 18. Убираем возможные линии между Tilda-блоками */
#allrecords .t-rec {
  border: 0 !important;
  box-shadow: none !important;
}

/* 19. Мобильная версия: сетка ещё спокойнее */
@media screen and (max-width: 640px) {
  #allrecords::before {
    opacity: .24 !important;
    background-image:
      linear-gradient(rgba(126,231,255,.085) 1px, transparent 1px),
      linear-gradient(90deg, rgba(126,231,255,.085) 1px, transparent 1px),
      linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) !important;
    background-size:
      52px 52px,
      52px 52px,
      208px 208px,
      208px 208px !important;
  }

  #allrecords::after {
    opacity: .34 !important;
  }

  body::before {
    background:
      radial-gradient(circle at 18% 6%, rgba(126,231,255,.09), transparent 34%),
      radial-gradient(circle at 86% 12%, rgba(243,107,42,.05), transparent 34%),
      linear-gradient(135deg, #06111F 0%, #081A30 48%, #0B2745 100%) !important;
  }
}

/* 20. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #allrecords::before {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}