@font-face {
  font-family: 'RF Dewi';
  src: url('https://raw.githubusercontent.com/weareneture/fonts/refs/heads/main/RFDewi-Regular.woff2') format('woff2'),
       url('https://raw.githubusercontent.com/weareneture/fonts/refs/heads/main/RFDewi-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.circle-blur {
    filter: blur(300px);
}

#rec1359866721 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    background: #09090920;
    backdrop-filter: blur(20px);
}

/* Infinite Carousel */

  .uc-carousel{position:relative; width:100%; max-width:1000px; margin:0 auto; overflow:visible;}
  .uc-viewport{overflow:visible; width:100%}
  .uc-track{display:flex; will-change:transform; transition:transform .45s ease}
  .uc-slide{flex:0 0 auto; width:100%; box-sizing:border-box; padding:12px}

  /* Карточка */
  .uc-card{border-radius:0px; overflow:hidden; background: transparent; border:0px;}
  .uc-media{position:relative; aspect-ratio: 1120 / 920; background: transparent; border-radius: 4px; overflow:hidden;}
  .uc-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
  .uc-body{padding:12px 14px;}
  .uc-title{margin:0; color: #FFF;text-align: center;font-family: "RF Dewi";font-size: 16px;font-style: normal;font-weight: 400;line-height: 20px; /* 125% */}
  
/* только для второй карусели */
#ucCarouselPanorama .uc-track{
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#ucCarouselPanorama .uc-viewport{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* базовый аспект (работает на всех ширинах) */
#ucCarouselPanorama .uc-media{
  aspect-ratio: 16/10 !important;
  height: auto !important;
}

/* на десктопе: одна карточка, макс-высота 340px */
@media (min-width: 960px){
  #ucCarouselPanorama .uc-media{
    max-height: 340px;          /* лимит высоты */
    overflow: hidden;           /* чтобы не вылезало */
  }
  #ucCarouselPanorama .uc-media img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;          /* обрезка по краям */
  }
}

  /* Навигация */
  .uc-nav{pointer-events:none}
  .uc-btn{pointer-events:auto; position:absolute; top:50%; transform:translateY(-50%); border:none; width:23px; height:23px; padding: 12px; border-radius:999px; background:rgba(255,255,255,.10); backdrop-filter:blur(8px); cursor:pointer; transition: all 0.4s;}
  .uc-btn svg{width:22px; height:22px; fill:#fff}
  .uc-btn:hover{background:rgba(255,255,255,.25)}
  .uc-prev{left:8px}
  .uc-next{right:8px}

  /* Точки */
  /*.uc-dots{display:flex; gap:8px; justify-content:center; margin-top:10px}
  .uc-dot{width:8px; height:1px; border-radius:999px; background:#666; opacity:.2; border:none; cursor:pointer}
  .uc-dot.is-active{opacity:1; background:#fff}*/
  
 /* Точки — плоский стиль */
  .uc-dots{position:relative; display:flex; gap:8px; justify-content:center; align-items:center; margin-top:12px; padding:6px 12px}
  .uc-dot{
    appearance:none; -webkit-appearance:none; background:#3a3a3d; /* плоский фон */
    border:none; box-shadow:none; outline:none; cursor:pointer;
    position:relative; width:8px; height:1px; border-radius:6px;
    opacity:.85; transition:opacity .25s ease, transform .25s ease, background-color .25s ease
  }
  .uc-dot:hover{opacity:1}
  .uc-dot.is-active{opacity:1; background:#5a5b5f; transform:scale(1.06)}
  /* Прогресс-заполнение активной точки */
  .uc-dot.is-active::after{
    content:""; position:absolute; left:0px; top:0px; right:auto; bottom:0px;
    /*height:calc(100% - 4px);*/ width:0; border-radius:4px; background:#fff;
    animation: ucDotFill var(--uc-interval, 4000ms) linear forwards;
  }
  @keyframes ucDotFill { to { width: calc(100%); } }
  
  .uc-dots-indicator { display: none; }

  /* Переезжающий индикатор под активной точкой (плоский) */
  /*.uc-dots-indicator{
    position:absolute; top:50%; left:0;
    width:34px; height:18px; border-radius:999px;
    transform:translate(-50%,-50%);
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,0);
    pointer-events:none; transition:left .45s cubic-bezier(.2,.8,.2,1);
    box-shadow:none; *//* убираем 3D */
  /*}*/

  /* Адаптив: 1 / 2 / 3 колонки */
  @media (min-width:480px){ .uc-slide{width:50%} }
  @media (min-width:960px){ .uc-slide{width:33.3333%} }

  /* Узкие экраны */
  @media (max-width:360px){
    .uc-body{padding:10px 12px}
    .uc-title{font-size:12px}
    .uc-btn{width:23px; height:23px}
    /*.uc-carousel { width: 320px !important; }
    .uc-slide { width: 50% !important; }*/
  }
  
    /* Узкие экраны */
  @media (max-width:640px){
        .uc-carousel { width: 320px !important; }
    .uc-slide { width: 100% !important; }
    .uc-nav { display: none; }
    .uc-dots { margin-top: -4px; }
  }

 /* Уважение к reduced motion */
  @media (prefers-reduced-motion: reduce){
    .uc-track{transition:none}
    .uc-dots-indicator{transition:none}
    .uc-dot.is-active::after{animation:none}
  }



/* Превью с материалами */

  .material-card {
    display: grid;
    gap: 14px;
    /* кликабельная зона на мобилке */
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px !important;
    overflow: hidden;
  }

 .media{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:1/1}
  .media>img,.media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .media>video{opacity:0;transition:opacity .25s ease;pointer-events:none}

  .media > video {
    opacity: 0;
    transition: opacity .28s ease;
    /* ради автоплея в большинстве браузеров */
    pointer-events: none;
  }
  
  
  /* Десктоп: показываем десктоп-видео на hover/focus */
  @media (hover:hover){
    .material-card:hover .v-desktop,
    .material-card:focus-visible .v-desktop{opacity:1}
  }

  /* Мобилка: hover нет, управляем JS-ом. Чтобы не мигало, по умолчанию скрыто. */
  @media (hover:none){
    /* На таче отключаем CSS-hover поведение вообще */
    .material-card:hover .media>video,
    .material-card:focus-visible .media>video{opacity:0}
    /* Когда JS запустил мобильное видео — добавляем класс .mobile-playing */
    .material-card.mobile-playing .v-mobile{opacity:1}
  }
  
  /* Тач: не показываем видео только от hover-селектора (мы управляем JS-ом) */
  @media (hover: none) {
    .material-card:hover .media > video { opacity: 0; }
  }
  
  
 /* десктоп: показываем видео на hover/focus */
  .material-card:hover .media>video,
  .material-card:focus-visible .media>video{opacity:1}

  /* общее правило: когда карточка в состоянии "playing", видео видно */
  .material-card.playing .media>video{opacity:1}

  /* на устройствах без hover отключаем hover-логику — управляем только JS-ом */
  @media (hover:none){
    .material-card:hover .media>video,
    .material-card:focus-visible .media>video{opacity:0}
  }
  
  
  
   /* ===== VALONTI Hero (vh-*) ===== */
  .vh-card { display:block; width:100%; max-width:100%; }
  .vh-media {
    position: relative;
    width: 100%;
    /* Соотношение сторон: при желании поменяй */
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 0px;
  }

  .vh-poster,
  .vh-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Сначала показываем постер, видео — прозрачные, пока не готовы */
  .vh-video { opacity: 0; transition: opacity .3s ease; }
  .vh-video.vh-ready { opacity: 1; }

  /* Переключение между десктоп/мобайл версиями */
  .vh-video--mobile { display: none; }
  @media (max-width: 767.98px) {
    .vh-video--desktop { display: none; }
    .vh-video--mobile { display: block; }
  }

  /* Небольшая защита от “вспышки”: скрываем постер, когда видео уже идёт */
  .vh-media.vh-playing .vh-poster { opacity: 0; transition: opacity .25s ease; }