/* UKCC · surface.css · 21.09.2026
   Подложки блоков по спецификации карточек LinkedIn и «жидкое стекло» на плитах.
   Порядок блоков и элементы не меняются. Откат: убрать ссылку на этот файл из страниц. */

/* 1. Тёмные блоки: главный экран, полоса цифр, тёмные разделы, контактная карточка, подвал */
.hero, .band-dark, .foot, .cta{
  background:
    radial-gradient(circle 38vw at calc(100% - 8vw) 8vw, rgba(46,125,224,.40), transparent 68%),
    radial-gradient(circle 32.5vw at 4.5vw calc(100% - 4.5vw), rgba(255,196,31,.16), transparent 70%),
    linear-gradient(158deg, #060F26 0%, #081634 44%, #0A1C42 100%) !important;
}
/* 2. Светлые блоки, тон A */
.band-paper-2{
  background:
    radial-gradient(circle 38vw at calc(100% - 8vw) 8vw, rgba(46,125,224,.13), transparent 68%),
    radial-gradient(circle 32.5vw at 4.5vw calc(100% - 4.5vw), rgba(255,196,31,.10), transparent 70%),
    linear-gradient(163deg, #FFFFFF 0%, #F7FAFE 46%, #EEF3FB 100%) !important;
}
/* 3. Светлые блоки, тон B — на полтона глубже, чтобы соседние светлые блоки не сливались */
.band-paper-3{
  background:
    radial-gradient(circle 38vw at calc(100% - 8vw) 8vw, rgba(46,125,224,.13), transparent 68%),
    radial-gradient(circle 32.5vw at 4.5vw calc(100% - 4.5vw), rgba(255,196,31,.10), transparent 70%),
    linear-gradient(163deg, #F7FAFE 0%, #EEF3FB 50%, #E4EBF7 100%) !important;
}
/* Сетка — только на главном экране; зерно мягче, чтобы свечения читались */
.blueprint:not(.hero)::before{ display:none !important; }
.grain::after{ opacity:.14 !important; }
.band-paper-2.grain::after, .band-paper-3.grain::after{ opacity:.26 !important; }

/* 4. Стекло на светлых плитах: Membership, реестр Status, карточки членов */
:root{
  --lg-edge: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(10,23,48,.06),
             inset 1px 0 0 rgba(255,255,255,.5), inset -1px 0 0 rgba(255,255,255,.35);
  --lg-drop: 0 1px 2px rgba(10,23,48,.05), 0 22px 48px -26px rgba(10,23,48,.32);
  --lg-sheen: linear-gradient(118deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.14) 34%, rgba(255,255,255,0) 52%);
}
.band-paper-2 .card:not(.card-glass), .band-paper-3 .card:not(.card-glass),
.band-paper-2 .deflist, .band-paper-3 .deflist, .logo-card{
  background:
    var(--lg-sheen) padding-box,
    linear-gradient(160deg, rgba(255,255,255,.52), rgba(247,250,254,.22)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.35) 32%, rgba(180,200,235,.35) 58%, rgba(255,255,255,.9) 100%) border-box !important;
  -webkit-backdrop-filter: blur(16px) saturate(190%) brightness(1.04);
          backdrop-filter: blur(16px) saturate(190%) brightness(1.04);
  border: 1.5px solid transparent !important;
  box-shadow: var(--lg-edge), var(--lg-drop) !important;
}
.band-paper-2 .card:not(.card-glass):hover, .band-paper-3 .card:not(.card-glass):hover, .logo-card:hover{
  box-shadow: var(--lg-edge), 0 2px 4px rgba(10,23,48,.06), 0 30px 60px -28px rgba(10,23,48,.38) !important;
}
.band-paper-2 .deflist > div, .band-paper-3 .deflist > div{ background: transparent !important; }
.band-paper-2 .deflist > div + div, .band-paper-3 .deflist > div + div{ border-top: 1px solid rgba(10,23,48,.08); }
.band-paper-2 .deflist > div:hover, .band-paper-3 .deflist > div:hover{ background: rgba(255,255,255,.35) !important; }
.band-paper-2 .deflist, .band-paper-3 .deflist{ gap: 0 !important; }
.logo-card .logo-plate{ background: rgba(255,255,255,.62) !important; }
.logo-card .logo-body{ background: transparent; }

/* Подсветка за стеклом: мягкие пятна азура и золота под плитами */
.split:has(> .card.bracket), .split:has(> .deflist), .logos{ position:relative; }
.split:has(> .card.bracket)::before, .split:has(> .deflist)::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:-4%; top:-10%; width:62%; height:120%;
  background:
    radial-gradient(38% 42% at 70% 26%, rgba(46,125,224,.30), transparent 70%),
    radial-gradient(32% 36% at 30% 86%, rgba(255,196,31,.30), transparent 70%);
  filter: blur(8px);
}
.logos::before{
  content:""; position:absolute; z-index:0; pointer-events:none; inset:-12% -6%;
  background:
    radial-gradient(24% 50% at 18% 30%, rgba(46,125,224,.22), transparent 70%),
    radial-gradient(22% 46% at 52% 80%, rgba(255,196,31,.24), transparent 70%),
    radial-gradient(24% 50% at 86% 34%, rgba(46,125,224,.22), transparent 70%);
}
.split:has(> .card.bracket) > *, .split:has(> .deflist) > *, .logos > *{ position:relative; z-index:1; }

/* 5. Стекло на тёмных плитах: Services */
.card-glass{
  background:
    linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 30%, rgba(255,255,255,0) 50%),
    linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
          backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.25),
              0 24px 56px -22px rgba(0,0,0,.55) !important;
}
.card-glass:hover{ border-color: rgba(255,196,31,.38) !important; }

/* 6. Телефоны, планшеты и «уменьшить прозрачность»: стекло без живого размытия — вид тот же, нагрузки нет */
@media (max-width: 900px), (prefers-reduced-transparency: reduce){
  .band-paper-2 .card:not(.card-glass), .band-paper-3 .card:not(.card-glass),
  .band-paper-2 .deflist, .band-paper-3 .deflist, .logo-card, .card-glass{
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .card-glass{
    background:
      linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 30%, rgba(255,255,255,0) 50%),
      linear-gradient(160deg, rgba(40,70,130,.55), rgba(16,34,72,.55)) !important;
  }
}
/* Браузеры без размытия: плотная заливка, чтобы текст не терял контраст */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .band-paper-2 .card:not(.card-glass), .band-paper-3 .card:not(.card-glass),
  .band-paper-2 .deflist, .band-paper-3 .deflist, .logo-card{ background: rgba(255,255,255,.92) !important; }
}