/* ============================================================
   ND Premium — Hero Section
   /assets/css/nd-premium/hero.css
   ============================================================ */





/* Заглушаем хедер и футер ND Premium до настройки */
.ndp-body .ndp-header,
.ndp-body .ndp-footer {
    display: none;
}



.ndp-hero {
    --hero-height:      1080px;
    --hero-brown:       #473109;
    --hero-white:       #ffffff;
    --hero-glass-bg:    rgba(0, 0, 0, 0.10);
   
    --hero-bottom-h:    186px;
    --hero-pad-x:       360px;    
    --hero-btn-w:       445px;
    --hero-btn-h:       66px;
    --hero-gap:         40px;     /* gap между колонками glass-inner */

    position: relative;
    width: 100%;
    height: var(--hero-height);
    overflow: hidden;
}

/* ============================================================
   Слайдшоу — фоновые слайды
   ============================================================ */
.ndp-hero__backgrounds {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.ndp-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    will-change: opacity;
}

.ndp-hero__slide.is-active {
    opacity: 1;
}

.ndp-hero__bg-main,
{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}



/* ============================================================
   GLASS-панели — общее
   ============================================================ */
.ndp-hero__glass {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 2;
    overflow: hidden;
    background: var(--hero-glass-bg);
    display:flex;
   justify-content: center;
}

.ndp-hero__glass--top {
    top: 0;
}

.ndp-hero__glass--bottom {
    bottom: 0;
 
}

/* Контент поверх будущего Three.js canvas */
.ndp-hero__glass-inner {
    position: relative;
    z-index: 1;
    height: 100%;
}

/* ============================================================
   GLASS 1 — верхняя панель
   ============================================================ */
.ndp-hero__glass--top .ndp-hero__glass-inner {
    display: flex;
    flex-direction: column;
        
    justify-content: space-between;
    padding: 40px 0; 
    gap: var(--hero-gap);
    max-width: 1200px;
}


.ndp-hero__glass-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;                    
    flex: 1 1 auto;
    min-width: 0;
}

/* Заголовок */
.ndp-hero__title {
    display: block;
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(40px, 3.75vw, 72px);
    line-height: 1.1;
    font-weight: 400;
    text-transform: uppercase;
}

.ndp-hero__title-white {
    color: var(--hero-white);
    font-weight: 700;
}

.ndp-hero__title-brown {
    color: var(--hero-brown);
    font-weight: 800;
}

/* Строка: линия + подзаголовок */
.ndp-hero__bottom-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.ndp-hero__decor-line {
    flex-shrink: 0;
    width: 88px;
    height: 1px;
    background: var(--hero-brown);
}

.ndp-hero__subtitle {
    margin: 0;
    color: var(--hero-brown);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(15px, 1.25vw, 24px);
    line-height: 1.35;
    font-weight: 400;
	max-width: 520px;
}

/* ── Правая колонка — кнопка ── */
.ndp-hero__glass-action {
    flex-shrink: 0;
        display: flex;
    justify-content: space-between;
}

.ndp-hero__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hero-btn-w);
    height: var(--hero-btn-h);
    padding: 0 20px;

    background: var(--hero-brown);
    color: var(--hero-white);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(16px, 1.25vw, 24px);
    line-height: 1;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;

    border: 1px solid;
    border-image: linear-gradient(
        32.15deg,
        rgba(255,255,255,0.5)  0%,
        rgba(255,255,255,1)    50%,
        rgba(255,255,255,0.3)  100%
    ) 1;
    box-shadow: 0 10px 15px 0 rgba(70, 37, 4, 0.2);
    transition: opacity 0.2s ease;
}

.ndp-hero__btn:hover {
    opacity: 0.88;
}

/* ============================================================
   GLASS 2 — нижняя панель: три стата
   ============================================================ */
.ndp-hero__glass--bottom .ndp-hero__glass-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
		max-width:1200px;
}

.ndp-hero__stats {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 70px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
	
}

.ndp-hero__stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 0;       /* равномерно по ширине */
    min-width: 0;
}

.ndp-hero__stat-title {
    color: var(--hero-white);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(16px, 1.25vw, 24px);
    line-height: 1.15;
    font-weight: 500;
    margin: 0;
}

.ndp-hero__stat-subtitle {
    color: var(--hero-white);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(13px, 0.9375vw, 18px);
    line-height: 1.2;
    font-weight: 400;
    opacity: 0.7;
    margin: 0;
}

/* ============================================================
   Соцсети — вертикально справа
   ============================================================ */
.ndp-hero__socials {
    position: absolute;
    right: calc(381 / 1920 * 100%);
    top: 400px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.ndp-hero__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 0.2s ease;
	padding: 8px;
}

.ndp-hero__social-link:hover {
    transform: scale(1.1);
}

.ndp-hero__social-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ============================================================
   Slideshow dots
   ============================================================ */
.ndp-hero__dots {
    position: absolute;
    bottom: 196px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 8px;
    align-items: center;
}

.ndp-hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
}

.ndp-hero__dot.is-active {
    background: var(--hero-white);
    transform: scale(1.3);
}

/* ============================================================
   Three.js Glass — активное состояние
   ============================================================ */
.ndp-hero.glass-active .ndp-hero__glass {
    background: transparent;
}

.ndp-hero__glass-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width: 1680px) {
.ndp-hero__socials {  right: calc(260 / 1920 * 100%);}


.ndp-hero__title {
  
    max-width: 1200px;
    padding-right: 100px;
}

}

@media (max-width: 1600px) {
    .ndp-hero {
        --hero-pad-x: 80px;
        --hero-btn-w: 380px;
    }
}

@media (max-width: 1440px) {
.ndp-hero__socials {
    right: calc(140 / 1920 * 100%);
    top: 350px;
}

.ndp-hero__title {
    padding-right: 230px;
}

}



@media (max-width: 1280px) {
    .ndp-hero {
        --hero-pad-x: 40px;
        --hero-btn-w: 320px;
    }

    .ndp-hero__stats {
        gap: 40px;
    }
.ndp-hero__socials {
    right: calc(40 / 1920 * 100%);
    top: 350px;
}

.ndp-hero__glass--top .ndp-hero__glass-inner {
    padding: 40px;
}

.ndp-hero__glass--bottom .ndp-hero__glass-inner {
    padding: 40px;
    max-width: 1200px;
}

.ndp-hero__title {
    padding-right: 275px;
}


}

@media (max-width: 1024px) {

.ndp-hero {

    height: 900px;
}

    .ndp-hero__glass--top .ndp-hero__glass-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 24px 32px;
        gap: 24px;
    }

    .ndp-hero__glass-content {
        gap: 16px;
    }

    .ndp-hero__glass-action {
        width: 100%;
    }

    .ndp-hero__btn {
        width: 100%;
        max-width: 360px;
    }

    /* Glass 2 */


    .ndp-hero__glass--bottom .ndp-hero__glass-inner {
        padding: 32px 24px;
    }

    .ndp-hero__stats {
   
        gap: 20px;
    }

  .ndp-hero__socials {
    right: calc(40 / 1920 * 100%);
    top: 275px;
}


    .ndp-hero__dots {
        bottom: 8px;
    }
}

@media (max-width: 900px) {
.ndp-hero__title {
    padding-right: 110px;
}
}


@media (max-width: 768px) {
.ndp-hero__title {
    padding-right: 0px;
}
}





@media (max-width: 600px) {

.ndp-hero__socials {
    top: 575px;
}

.ndp-hero__socials span {
   display:none;
}
    .ndp-hero__bottom-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .ndp-hero__decor-line {
        width: 48px;
    }
}


@media (max-width: 480px) {

.ndp-hero__socials {
    top: 500px;
}

.ndp-hero__glass-action {
    flex-direction: column;
}
.ndp-hero__glass-action {
    flex-direction: column;
    gap:20px;
}

.ndp-hero__bottom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row;
}

.ndp-hero__stats {
    flex-direction: column;
}

.ndp-hero__title {
    font-size: 27px;
}

.ndp-hero__btn {
    max-width: 100%;
}
.ndp-hero {
--hero-btn-h: 50px;
	}

.ndp-hero {
    height: 1110px;
}

.ndp-hero__decor-line {
    width: 26px;
}
}



.ndp-hero__glass {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


.ndp-hero.glass-active .ndp-hero__glass {
    background: var(--hero-glass-bg);
}


/* ============================================================
   Эллипсы
   ============================================================ */

/* ── Декоративные эллипсы между секциями ── */
.ndp-ellipse {
    position: relative;
    width: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
 

}

.ndp-ellipse img {
    position: absolute;
    width: auto;
    max-width: none;
    pointer-events: none;
}

/* Позиционируем каждый эллипс индивидуально */
.ndp-ellipse--1 img {  left: 0;   transform: translateY(-50%); }
.ndp-ellipse--2 img { right:0; left: auto;  transform: translateY(-80%); width: 50%;}
.ndp-ellipse--3 img {  left: 0;   transform: translateY(-73%); }
.ndp-ellipse--4 img {  right:0; left: auto;  transform: translateY(-50%);}
.ndp-ellipse--5 img {   left: 0;   transform: translateY(-55%); }
.ndp-ellipse--6 img {  right:0; left: auto;  transform: translateY(-70%); }

@media (max-width: 1440px) {
.ndp-ellipse img { width: 70%;}
}

@media (max-width: 1200px) {
.ndp-ellipse img { width: 60%;}
}

@media (max-width: 1200px) {
.ndp-ellipse img { width: 50%;}
}



/* Canvas на иконках соцсетей — вставляется внутрь ссылки, круглый */
.ndp-hero__social-link > canvas.ndp-hero__glass-canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}
 
/* Иконка поверх glass-canvas */
.ndp-hero__social-link img {
    position: relative;
    z-index: 1;
}






/* ============================================================
   Liquid Glass — кнопки и инпуты (.ndp-glass-liquid)
   Canvas вставляется внутрь элемента, контент поверх z-index:1
   ============================================================ */
.ndp-glass-liquid {
    position: relative;
    /* Убираем старый backdrop-filter когда WebGL готов */
}
 
.ndp-glass-liquid.lg-active {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
 
/* Контент элемента поверх canvas */
.ndp-glass-liquid > *:not(.ndp-liquid-glass-canvas) {
    position: relative;
    z-index: 1;
}
 
/* Текст и иконки напрямую в элементе */
.ndp-glass-liquid > span,
.ndp-glass-liquid > svg,
.ndp-glass-liquid > img {
    position: relative;
    z-index: 1;
}
 
/* ============================================================
   Liquid Glass — SVG feTurbulence + feDisplacementMap
   ============================================================ */
 
.ndp-glass-liquid {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
 
/*
 * ::before — размытый backdrop с displacement.
 * SVG filter на backdrop-filter напрямую не работает,
 * поэтому берём снимок через backdrop-filter на ::before,
 * а displacement применяем к самому элементу через filter.
 */
.ndp-glass-liquid::before {
    content: '';
    position: absolute;
    inset: -20%;            /* больше чем элемент — фильтр вылезает за края */
    z-index: 0;
    backdrop-filter:
        blur(6px)
        saturate(1.6)
        contrast(1.05);
    -webkit-backdrop-filter:
        blur(6px)
        saturate(1.6)
        contrast(1.05);
    /* SVG displacement — искажает всё что прошло через backdrop-filter */
    filter: url(#ndp-lg-filter);
}
 
/* Контент поверх */
.ndp-glass-liquid > *:not(.ndp-lg-canvas) {
    position: relative;
    z-index: 1;
}
 
/* Маленькие кнопки nav */
.ndp-glass-liquid[data-lg-size="sm"]::before {
    filter: url(#ndp-lg-filter-sm);
    backdrop-filter: blur(5px) saturate(1.5);
    -webkit-backdrop-filter: blur(5px) saturate(1.5);
}
 
/* Когда lg-active — убираем старый backdrop с родителя */
.ndp-glass-liquid.lg-active {
    background: rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
 
/* Лёгкий highlight сверху — имитация отражения */
.ndp-glass-liquid.lg-active::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 2;
    pointer-events: none;
}
 

@media (min-width: 481px) {
.ndp-hero__glass-content--mob {  display: none;}
.ndp-hero__bottom-row--mob {  display: none;}
.ndp-hero__btn--mob {  display: none;}
}



@media (max-width: 480px) {
.ndp-hero__bottom-row--mob {  display: none;}
.ndp-hero__title--mob {  display: none;}
.ndp-hero__btn {  display: none;}
.ndp-hero__glass { flex-direction: column;}
	.ndp-hero__btn--mob{    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hero-btn-w);
    height: var(--hero-btn-h);
    padding: 0 20px;

    background: var(--hero-brown);
    color: var(--hero-white);
    font-family: 'Manrope', sans-serif;
    font-size: clamp(16px, 1.25vw, 24px);
    line-height: 1;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    margin-left:24px;
    border: 1px solid;
    border-image: linear-gradient(
        32.15deg,
        rgba(255,255,255,0.5)  0%,
        rgba(255,255,255,1)    50%,
        rgba(255,255,255,0.3)  100%
    ) 1;
    box-shadow: 0 10px 15px 0 rgba(70, 37, 4, 0.2);
    transition: opacity 0.2s ease;}
}