html, body { background: #000 !important; }
#allrecords { background: #000 !important; }

/* ШАПКА САЙТА */

.blur-bg {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bottom-gradient {
  position: relative;
  border-radius: 0px; /* если нужен */
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.bottom-gradient::after {
  content: "";
  position: absolute;
  left: 20px;          /* отступы от краёв */
  right: 20px;
  bottom: 0;
  height: 1px;         /* толщина линии */
  background: linear-gradient(
    90deg,
    transparent,
    #FFFFFF,
    #FFFFFF,
    transparent
  );
  border-radius: 2px;
  pointer-events: none;
}

/* default */
.nav-link .tn-atom,
.nav-link .tn-atom a{
  color:#404040 !important;
  font-weight:500 !important;
  transition: color .2s ease, font-weight .2s ease;
}

/* hover (БЫЛО .nav-link:hover ...) — ДЕЛАЕМ ПО ТЕКСТУ */
.nav-link .tn-atom:hover,
.nav-link .tn-atom:hover a{
  color:#DB4545 !important;
}

/* контейнер не ловит мышь, ловит только текст */
.nav-link{ pointer-events: none; }
.nav-link .tn-atom,
.nav-link .tn-atom a{ pointer-events: auto; }


/* active */
.nav-link.is-active .tn-atom,
.nav-link.is-active .tn-atom a{
  color:#FFFFFF !important;
  font-weight:600 !important;
  position: relative;
  display: inline-block;
}

/* underline active */
.nav-link.is-active .tn-atom::after,
.nav-link.is-active .tn-atom a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:2px;
  background:#DB4545;
  border-radius:2px;
}

/* active not red on hover */
.nav-link.is-active:hover .tn-atom,
.nav-link.is-active:hover .tn-atom a{
  color:#FFFFFF !important;
}

/* Разрешаем элементам ZeroBlock "вылезать" */
.t396__artboard,
.t396__carrier,
.t396__filter{
  overflow: visible !important;
}

.services-dropdown{
  position: fixed !important;   /* оставляем fixed */
  left: 0;
  top: 0;
  width: 360px;                 /* базовая ширина (можешь поменять) */

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;

  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 999999 !important;

  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 16px;
  padding: 18px 18px;
}

body.services-open .services-dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}


.glass-btn {
  position: relative;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(0,0,0,0.10);
  border-radius: 30px;
  transition: backdrop-filter .3s ease, background .3s ease;
}
.glass-btn:hover {
  backdrop-filter: blur(20px);
  background: rgba(0,0,0,0.35);
}
.glass-btn:active {
  backdrop-filter: blur(10px);
  transform: scale(0.98);
}
@media (max-width: 768px) {
  .glass-btn {
    backdrop-filter: blur(8px);
  }
}
.glass-btn{
  position: absolute;              /* ZeroBlock */
  z-index: 50;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  background: rgba(255,255,255,0.18); /* БЕЛОЕ стекло */
  border-radius: 30px;

  box-shadow:
    inset 0 0 18px rgba(255,255,255,0.35), /* мягкий inner */
    inset 0 0 1px rgba(255,255,255,0.7);  /* чёткий край */

  transition:
    backdrop-filter .3s ease,
    background .3s ease,
    transform .15s ease;
}

.glass-btn:hover{
  backdrop-filter: blur(20px);
  background: rgba(255,255,255,0.28);
}

.glass-btn:active{
  transform: scale(0.98);
  backdrop-filter: blur(10px);
}

.vtext{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg); /* чтобы читалось снизу вверх, убери если не надо */
  white-space: nowrap;
}

/* ==========================
   UNIVERSAL GLASS BUTTON
   for Tilda ZeroBlock
   ========================== */

/* внешний контейнер — НЕ трогаем position */
.glass-ui{
  cursor: pointer;
}

/* весь визуал — только на tn-atom */
.glass-ui .tn-atom{
  position: relative;
  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0.30);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border-radius: 40px;
  overflow: hidden;

  transition:
    background .25s ease,
    backdrop-filter .25s ease,
    transform .15s ease;
}

/* INNER SHADOW */
.glass-ui .tn-atom::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  box-shadow:
    inset 0 0 18px rgba(255,255,255,0.30),
    inset 0 0 1px rgba(255,255,255,0.6);

  transition: box-shadow .25s ease;
}

/* HOVER */
.glass-ui:hover .tn-atom{
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.glass-ui:hover .tn-atom::before{
  box-shadow:
    inset 0 0 26px rgba(255,255,255,0.35),
    inset 0 0 2px rgba(255,255,255,0.75);
}

/* ACTIVE / CLICK */
.glass-ui:active .tn-atom{
  transform: scale(0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glass-ui:active .tn-atom::before{
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.45),
    inset 0 0 1px rgba(255,255,255,0.4);
}
/* FIX: чтобы углы точно были скруглены */
.glass-ui,
.glass-ui .tn-atom,
.glass-ui .tn-atom::before{
  border-radius: 40px !important;
}

.glass-ui .tn-atom{
  overflow: hidden !important; /* чтобы фон/псевдослой не вылезал за радиус */
}

/* если внутри есть картинка/shape/текст-блоки, которые перекрывают радиус */
.glass-ui .tn-atom *{
  border-radius: inherit !important;
}

/* ==========================
   SECOND GLASS BUTTON
   for Tilda ZeroBlock
   ========================== */

.glass-ui-second .tn-atom{
  position: relative;
  width: 100%;
  height: 100%;

  /* ПРОЗРАЧНОСТЬ */
  background: rgba(219, 69, 69, 0.22) !important;

  /* РАЗМЫТИЕ ФОНА */
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;

  border-radius: 40px !important;
  overflow: hidden !important;

  box-shadow: none !important;

  transition:
    background .25s ease,
    backdrop-filter .25s ease,
    transform .15s ease;
}

/* Светлая стеклянная кромка */
.glass-ui-second .tn-atom::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  box-shadow:
    inset 0 0 25px rgba(255,255,255,0.25),
    inset 0 0 1px rgba(255,255,255,0.5);
}

/* ХОВЕР — чуть плотнее */
.glass-ui-second .tn-atom:hover{
  background: rgba(219, 69, 69, 0.30) !important;
  backdrop-filter: blur(28px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(150%) !important;
}

/* НАЖАТИЕ */
.glass-ui-second .tn-atom:active{
  transform: scale(0.97);
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}
/* ================================
   SERVICES CARDS — FINAL GLASS FIX
   ================================ */

/* контейнер карточек */
#rec1817838703 .svc-wrap{
  display: flex !important;
  width: 1660px !important;
  gap: 24px !important;
  flex-wrap: nowrap !important;
  height: 562px !important;
  align-items: stretch !important;
}

/* каждая карточка */
#rec1817838703 .svc-wrap .svc-card{
  position: relative !important;
  height: 562px !important;
  border-radius: 48px !important;
  cursor: pointer;

  flex: 1 1 220px !important;
  transition:
    flex .55s cubic-bezier(.2,.8,.2,1),
    transform .15s ease !important;
}

/* открытая карточка */
#rec1817838703 .svc-wrap .svc-card.is-open{
  flex: 0 0 633px !important;
}

/* ================================
   GLASS (ОДИН ЕДИНСТВЕННЫЙ СЛОЙ)
   ================================ */

/* стекло ТОЛЬКО у закрытых */
#rec1817838703 .svc-wrap .svc-card:not(.is-open)::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 48px;
  pointer-events: none;
  z-index: 1;

  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.10);

  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);

  box-shadow:
    inset 0 0 18px rgba(255,255,255,0.22),
    inset 0 0 1px rgba(255,255,255,0.55);

  transition:
    background .25s ease,
    backdrop-filter .25s ease,
    box-shadow .25s ease,
    opacity .25s ease;
}

/* hover */
#rec1817838703 .svc-wrap .svc-card:not(.is-open):hover::before{
  background: rgba(255,255,255,0.09);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    inset 0 0 26px rgba(255,255,255,0.28),
    inset 0 0 2px rgba(255,255,255,0.70);
}

/* active click */
#rec1817838703 .svc-wrap .svc-card:not(.is-open):active{
  transform: scale(0.985);
}

/* открытая — без стекла */
#rec1817838703 .svc-wrap .svc-card.is-open::before{
  opacity: 0;
}

/* ================================
   СЛОИ КОНТЕНТА
   ================================ */

#rec1817838703 .svc-wrap .svc-card .card__closed,
#rec1817838703 .svc-wrap .svc-card .card__open{
  position: absolute;
  inset: 0;
  z-index: 2;
  transition:
    opacity .25s ease,
    transform .55s cubic-bezier(.2,.8,.2,1);
}

/* closed по умолчанию */
#rec1817838703 .svc-wrap .svc-card .card__open{
  opacity: 0;
  pointer-events: none;
  transform: translateX(-12px);
}

#rec1817838703 .svc-wrap .svc-card .card__closed{
  opacity: 1;
  pointer-events: auto;
}

/* при открытии */
#rec1817838703 .svc-wrap .svc-card.is-open .card__open{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

#rec1817838703 .svc-wrap .svc-card.is-open .card__closed{
  opacity: 0;
  pointer-events: none;
  transform: translateX(12px);
}

/* ================================
   УБИРАЕМ СТАРОЕ СТЕКЛО
   ================================ */

#rec1817838703 .svc-wrap .svc-card .card-glass{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#rec1817838703 .svc-wrap .svc-card .card-glass::before{
  content: none !important;
}

/* ===== КАРТОЧКА ===== */
.glass-card{
  position: relative;
  border-radius: 44px;
  overflow: hidden;

  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 25px 70px rgba(0,0,0,0.70),
    0 0 0 1px rgba(255,255,255,0.06);
}

.glass-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  box-shadow:
    inset 0 0 70px rgba(255,255,255,0.10),
    inset 0 0 0 2px rgba(255,255,255,0.08);
}

/* ===== ФОРМА ===== */
.glass-form{
  position: relative;
  z-index: 2;
}

/* подписи */
.glass-form .t-input-title,
.glass-form .t-input-subtitle{
  color: rgba(255,255,255,0.75) !important;
}

/* поля */
.glass-form .t-input,
.glass-form textarea{
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 14px !important;

  color: rgba(255,255,255,0.92) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}

/* placeholder */
.glass-form .t-input::placeholder{
  color: rgba(255,255,255,0.4) !important;
}

/* focus */
.glass-form .t-input:focus{
  border-color: rgba(255,255,255,0.3) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.15),
    0 0 0 3px rgba(255,255,255,0.05);
}

/* кнопка */
.glass-form .t-submit{
  width: 100% !important;
  border-radius: 18px !important;

  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.95) !important;

  box-shadow:
    0 14px 35px rgba(0,0,0,0.6),
    inset 0 0 18px rgba(255,255,255,0.1);

  transition: 0.2s ease;
}

.glass-form .t-submit:hover{
  background: rgba(255,255,255,0.15) !important;
  transform: translateY(-1px);
}


/* ===== PHONE INPUT — ИДЕАЛЬНО ПОД 72px ===== */

.glass-form .t-input-phonemask{
  display: flex !important;
  align-items: center !important;

  height: 72px !important;
  padding: 0 18px !important;

  background: rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 16px !important;

  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25) !important;
}

/* внутренняя обёртка */
.glass-form .t-input-phonemask__wrap{
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;

  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* input */
.glass-form .t-input-phonemask input{
  flex: 1;
  height: 100% !important;

  background: transparent !important;
  border: none !important;
  outline: none !important;

  padding-left: 12px !important;
  color: rgba(255,255,255,0.92) !important;
  font-size: 16px;
}

/* флаг */
.glass-form .t-input-phonemask__flag{
  margin-right: 10px !important;
  transform: scale(0.95);
  opacity: 0.85;
}

/* hover / focus */
.glass-form .t-input-phonemask:focus-within{
  border-color: rgba(255,255,255,0.35) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.15),
    0 0 0 3px rgba(255,255,255,0.06) !important;
}

/* ==========================
   UNIVERSAL GLASS BUTTON
   for Tilda ZeroBlock
   ========================== */

/* внешний контейнер — НЕ трогаем position */
.glass-element{
  cursor: pointer;
}

/* весь визуал — только на tn-atom */
.glass-element .tn-atom{
  position: relative;
  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0.30);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border-radius: 40px;
  overflow: hidden;

  transition:
    background .25s ease,
    backdrop-filter .25s ease,
    transform .15s ease;
}

/* INNER SHADOW */
.glass-element .tn-atom::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  box-shadow:
    inset 0 0 18px rgba(255,255,255,0.30),
    inset 0 0 1px rgba(255,255,255,0.6);

  transition: box-shadow .25s ease;
}

}
/* FIX: чтобы углы точно были скруглены */
.glass-element,
.glass-element .tn-atom,
.glass-element .tn-atom::before{
  border-radius: 40px !important;
}

.glass-element .tn-atom{
  overflow: hidden !important; /* чтобы фон/псевдослой не вылезал за радиус */
}

/* если внутри есть картинка/shape/текст-блоки, которые перекрывают радиус */
.glass-element .tn-atom *{
  border-radius: inherit !important;
}

/* ==========================
   SECOND GLASS BUTTON
   for Tilda ZeroBlock
   ========================== */

.glass-element-second .tn-atom{
  position: relative;
  width: 100%;
  height: 100%;

  /* ПРОЗРАЧНОСТЬ */
  background: rgba(219, 69, 69, 0.22) !important;

  /* РАЗМЫТИЕ ФОНА */
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;

  border-radius: 40px !important;
  overflow: hidden !important;

  box-shadow: none !important;

  transition:
    background .25s ease,
    backdrop-filter .25s ease,
    transform .15s ease;
}

/* Светлая стеклянная кромка */
.glass-element-second .tn-atom::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  box-shadow:
    inset 0 0 25px rgba(255,255,255,0.25),
    inset 0 0 1px rgba(255,255,255,0.5);
}

/* ===== PopUp ===== */
.glass-popup{
  position: relative;
  border-radius: 0px;
  overflow: hidden;

  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 25px 70px rgba(0,0,0,0.70),
    0 0 0 1px rgba(255,255,255,0.06);
}

.glass-popup::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  box-shadow:
    inset 0 0 70px rgba(255,255,255,0.10),
    inset 0 0 0 2px rgba(255,255,255,0.08);
}


/* 1) до готовности страницы попап спрятан */
#rec1886358783 { 
  opacity: 0; 
  pointer-events: none;
}

/* 2) когда страница готова — попап снова “живой” */
body.popup-ready #rec1886358783 {
  opacity: 1;
  pointer-events: auto;
}