@font-face {
    font-family: 'HS Luna Obscura';
    src: url('/static/fonts/HS_LunaObscura.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

:root {
    --logo-header-w: 82px;
    --logo-header-h: 109px;
    --logo-footer-w: 82px;
    --logo-footer-h: 109px;

    /* Safe-area insets for notched/rounded-corner phones. Falls back to 0 on devices without them. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* Kill the grey tap-flash on touch devices; we supply our own :active feedback below instead. */
a, button {
    -webkit-tap-highlight-color: transparent;
}

/* Consistent, visible keyboard focus everywhere - matters on mobile too (bluetooth keyboards, switch control, TV browsers). */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #ff6b6b;
    outline-offset: 2px;
    border-radius: 6px;
}

/* ==================== View Transitions ==================== */
@view-transition {
    navigation: auto;
}

::view-transition-group(site-header),
::view-transition-group(site-footer) {
    animation-duration: 0s;
}

::view-transition-old(main-content) {
    animation: 380ms cubic-bezier(.4, 0, .2, 1) both fade-out-up;
}
::view-transition-new(main-content) {
    animation: 420ms cubic-bezier(.2, .8, .2, 1) both fade-in-up;
}

@keyframes fade-out-up {
    to { opacity: 0; transform: translateY(-16px); }
}
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(16px); }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*),
    .nav-mobile.active .nav-tab,
    .mobile-menu-btn span,
    .nav-tab {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

header {
    max-width: 100vw;
}

/* ==================== Navigation Tabs (Desktop & Mobile) ==================== */
.nav-tab {
    position: relative;
    border: none;
    background: transparent;
    /* Резиновые отступы: на больших экранах 16px, на средних плавно сжимаются до 4px */
    padding: 8px clamp(4px, 1.5vw, 16px);
    /* Резиновый шрифт: стал чуть гибче для средних экранов */
    font-size: clamp(0.65rem, 0.5rem + 0.4vw, 0.875rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: color 0.25s ease, transform 0.15s ease;
    z-index: 1;
    border-radius: 8px;
    white-space: nowrap; /* ЖЕСТКИЙ ЗАПРЕТ на перенос текста внутри кнопки */
}

.nav-tab:hover,
.nav-tab.active {
    color: #ffffff;
}

/* Минималистичное подчеркивание активного/наведенного таба */
.nav-tab::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 16px;
    right: 16px;
    height: 2px;
    background-color: #ff6b6b; /* Акцентный цвет */
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
}

.nav-tab:hover::after,
.nav-tab.active::after {
    transform: scaleX(1);
}

/* Эффект нажатия ("Стекло" и Ripple) */
.nav-tab::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: transparent;
    transition: background-color 0.2s ease, backdrop-filter 0.2s ease;
    z-index: -1;
}

.nav-tab:active {
    transform: scale(0.96);
}

.nav-tab:active::before {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* Для iOS Safari */
}


/* ==================== Mobile Menu Button (Стрелка) ==================== */
.mobile-menu-btn {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%; /* Делаем кнопку идеально круглой */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
    z-index: 50;
}

.mobile-menu-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.mobile-menu-btn:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.25);
}

/* Плавный переворот стрелки при открытии */
.mobile-menu-btn svg {
    transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1);
}

.mobile-menu-btn.active svg {
    transform: rotate(-180deg);
}

/* ==================== Mobile Call Button (Трубка) ==================== */
.mobile-call-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: all 0.3s ease;
}

.mobile-call-btn:active {
    transform: scale(0.92);
}

/* Иконка трубки пульсирует при наведении на десктопе (если вдруг видна) и красиво жмется на мобилке */
.mobile-call-btn svg {
    transition: transform 0.3s ease;
}
.mobile-call-btn:active svg {
    transform: scale(0.9);
}

/* ==================== Mobile Navigation Overlay ==================== */
.nav-mobile {
    display: none;
    position: fixed;
    inset: 0; /* Жестко прибиваем к краям экрана, решает проблему растягивания */
    width: 100vw;
    height: 100dvh;
    background: rgba(8, 10, 31, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 40; /* Лежит ровно под header, у которого z-index 50 */
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: calc(88px + var(--safe-top)); /* Отступ, чтобы не перекрывать шапку */
    padding-bottom: calc(40px + var(--safe-bottom));
    gap: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    margin: 0;
}

.nav-mobile.active {
    display: flex;
}

/* Блокируем скролл страницы на фоне при открытом меню */
body:has(.nav-mobile.active) {
    overflow: hidden;
}

/* Стили вкладок именно внутри мобильного меню */
.nav-mobile .nav-tab {
    font-size: 1.1rem;
    padding: 12px 24px;
    width: auto;
}
.nav-mobile .nav-tab::after {
    left: 24px;
    right: 24px;
}

/* Красивое последовательное появление пунктов меню */
.nav-mobile.active .nav-tab {
    animation: nav-item-in 0.35s cubic-bezier(.2, .8, .2, 1) both;
}
.nav-mobile.active .nav-tab:nth-child(1) { animation-delay: 0.03s; }
.nav-mobile.active .nav-tab:nth-child(2) { animation-delay: 0.06s; }
.nav-mobile.active .nav-tab:nth-child(3) { animation-delay: 0.09s; }
.nav-mobile.active .nav-tab:nth-child(4) { animation-delay: 0.12s; }
.nav-mobile.active .nav-tab:nth-child(5) { animation-delay: 0.15s; }
.nav-mobile.active .nav-tab:nth-child(6) { animation-delay: 0.18s; }
.nav-mobile.active .nav-tab:nth-child(7) { animation-delay: 0.21s; }
.nav-mobile.active .nav-tab:nth-child(8) { animation-delay: 0.24s; }

@keyframes nav-item-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== Стеклянный эффект ====================
   Только blur + преломление фона (SVG feDisplacementMap, см. base.html) — без окантовки/бордера:
   раньше кромка рисовалась через inset box-shadow, но по ощущениям это читалось как лишняя белая
   рамка вокруг блока, а не как стекло. Теперь это чистый backdrop-filter, без псевдоэлементов —
   значит и без каких-либо рисков перекрытия контента, которые были у более ранних версий. */
.glass {
    position: relative;
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}

@supports (background: paint(x)) {
    .glass {
        backdrop-filter: blur(15px) saturate(150%) url(#glass-refraction);
    }

    .glass--circle-40 {
        backdrop-filter: blur(10px) saturate(150%) url(#glass-refraction-circle-40);
    }

    .glass--pill-236x40 {
        backdrop-filter: blur(12px) saturate(150%) url(#glass-refraction-pill-236x40);
    }
}

/* ==================== Карточки "Наши направления": разворот без transform-иллюзии ====================
   В Figma ("окна электро") карточка при разворачивании реально увеличивается на ~30-50% и по ширине,
   и по высоте, наезжая на соседние карточки — это НЕ просто "выше", а буквально другой размер блока.

   Раньше рост имитировался через transform:scale(). Проблема: это визуальная иллюзия — сам DOM-бокс
   не меняется, поэтому область наведения мыши не всегда предсказуемо совпадала с тем, что видно на
   экране, особенно на границе с соседней карточкой (кто "выше" — решает z-index в момент наведения,
   а не то, что реально нарисовано). Теперь карточка получает НАСТоящий больший размер через position:
   absolute + inset — это меняет её реальный hit-test бокс, поэтому мышь корректно остаётся "внутри"
   карточки по мере того, как она визуально растёт и наезжает на соседей.

   .direction-card-slot остаётся обычным элементом сетки (задаёт исходные позицию/размер, как раньше —
   именно поэтому раскладка вокруг не сдвигается). .direction-card внутри ннего на десктопе (lg+)
   становится position:absolute с inset:0 в покое (точно повторяя размер слота) и растёт через inset
   при наведении — направление роста у каждой карточки своё, в сторону соседей, как в Figma. */
.direction-cards {
    position: relative;
}

.direction-card-slot {
    position: relative;
}

.direction-card {
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.45s ease, filter 0.45s ease;
}

@media (min-width: 1024px) {
    .direction-card {
        position: absolute;
        inset: 0;
        transition: inset 0.45s cubic-bezier(.2, .8, .2, 1), box-shadow 0.45s ease, filter 0.45s ease;
    }

    .direction-cards:has(.direction-card:hover) .direction-card:not(:hover) {
        filter: blur(5px) brightness(0.6);
    }

    .direction-card:hover {
        z-index: 30;
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
    }

    /* Рост в сторону свободного соседа (проценты роста взяты из фактических размеров в Figma:
       высокие карточки ~+31/33%, короткие средние ~+50%). inset: top right bottom left. */
    .direction-card--urban:hover {        /* колонка 1, высокая — растёт вправо (в среднюю колонку) и вниз */
        inset: -16px -150px -180px -12px;
    }
    .direction-card--industrial:hover {   /* колонка 2 сверху, короткая — растёт вниз (наезжает на "Природа") и в стороны */
        inset: -16px -70px -150px -70px;
    }
    .direction-card--nature:hover {       /* колонка 2 снизу, короткая — растёт вверх (наезжает на "Промышленные") и в стороны */
        inset: -150px -70px -16px -70px;
    }
    .direction-card--infra:hover {        /* колонка 3, высокая — растёт влево (в среднюю колонку) и вниз */
        inset: -16px -12px -180px -150px;
    }
}

/* На мобильных/планшетах карточка не growing через inset (см. @media min-width:1024px выше) —
   там нет настоящего :hover, поэтому раскрывающийся блок с буллитами и кнопкой "СВЯЗАТЬСЯ С НАМИ"
   был бы просто НАВСЕГДА невидим и недоступен touch-пользователям. Ниже lg он показан сразу,
   в обычном потоке — hover-скрытие включается только там, где есть настоящий hover (десктоп). */
.direction-card .direction-card-reveal {
    opacity: 1;
    pointer-events: auto;
}

@media (min-width: 1024px) {
    /* max-height:0 — не просто opacity:0 — иначе невидимый блок всё равно занимает место в
       flex-колонке, и justify-end поджимает весь стек (заголовок + невидимый реveal) к низу
       карточки, из-за чего заголовок визуально "плавает" в середине, будто карточка уже
       развёрнута. С max-height:0 он не участвует в потоке в состоянии покоя вообще. */
    .direction-card .direction-card-reveal {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(6px);
        transition: max-height 0.5s cubic-bezier(.2, .8, .2, 1), opacity 0.3s ease, transform 0.3s ease;
        pointer-events: none;
    }

    .direction-card:hover .direction-card-reveal {
        max-height: 260px;
        opacity: 1;
        transform: translateY(0);
        transition: max-height 0.5s cubic-bezier(.2, .8, .2, 1), opacity 0.35s ease 0.15s, transform 0.35s ease 0.15s;
        pointer-events: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .direction-card, .direction-card .direction-card-reveal {
        transition: none;
    }
}

/* ==================== Mobile Responsive overrides ==================== */
@media (max-width: 768px) {
    :root {
        --logo-header-w: 56px;
        --logo-header-h: 74px;
        --logo-footer-w: 56px;
        --logo-footer-h: 74px;
    }
    /*#header-line {*/
    /*    display: none;*/
    /*}*/
}

@media (max-width: 480px) {
    :root {
        --logo-header-w: 42px;
        --logo-header-h: 56px;
        --logo-footer-w: 42px;
        --logo-footer-h: 56px;
    }

    #main-header {
        padding: 6px 0 !important;
    }
}

/* ==================== Small-screen tap targets outside the nav ==================== */
@media (max-width: 480px) {
    header a[href^="tel:"] {
        align-items: center;
        min-height: 44px;
    }

    header button {
        min-height: 44px;
    }

    header a[href^="tel:"]:active,
    header button:active {
        transform: scale(0.97);
    }
}

/* ==================== Главная: пролистывание секциями (scroll snap) ==================== */
.snap-section {
    min-height: 100vh;
    min-height: 100dvh;
}

/* Обязательный снап включается только там, где секция гарантированно влезает в экран.
   На узких/низких экранах контент секции выше вьюпорта, и mandatory-снап запирал бы
   часть текста за краем экрана без возможности доскроллить. */
@media (min-width: 1024px) and (min-height: 640px) {
    html:has(#index-snap) {
        scroll-snap-type: y mandatory;
    }

    .snap-section {
        height: 100dvh;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:has(#index-snap) {
        scroll-snap-type: none;
    }
}

/* Затемнение слева под текст героя: плотное у края и полностью прозрачное к центру */
.hero-wash {
    background: linear-gradient(
        100deg,
        rgba(8, 10, 31, 0.94) 0%,
        rgba(8, 10, 31, 0.86) 38%,
        rgba(8, 10, 31, 0.55) 68%,
        rgba(8, 10, 31, 0) 100%
    );
}

/* ==================== Строка переключения проектов ==================== */
.project-switch-btn {
    display: inline-block;
    padding: 10px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    background: none;
    border: none;
    border-radius: 0;
    transition: color 0.25s ease;
}

.project-switch-btn:hover,
.project-switch-btn:focus-visible {
    color: #fff;
}

.project-switch-sep {
    font-size: 0.82rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.18);
    user-select: none;
    transition: color 0.25s ease;
}

/* Подсвечиваются только разделители, соседние с наведённой кнопкой (см. index.js) */
.project-switch-sep.is-active {
    color: rgba(255, 255, 255, 0.75);
}

/* ==================== Карусели ==================== */
/* min-width: 0 обязательно: в секциях «Производства»/«Аренда» карусель лежит в grid-колонке 1fr,
   которая по умолчанию не сжимается меньше min-content своего содержимого — трек просто
   растягивался под все плитки (scrollWidth == clientWidth), и прокручивать было нечего. */
.carousel {
    position: relative;
    min-width: 0;
}

/* scroll-behavior: smooth здесь НЕ ставим: вместе с scroll-snap-type: x mandatory снап
   мгновенно возвращает трек в текущую точку, и программная прокрутка (и scrollBy c
   behavior:'smooth', и присваивание scrollLeft) не даёт никакого сдвига вообще.
   Плавность делает rAF-анимация в index.js мгновенными записями scrollLeft. */
.carousel-viewport {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
    /* Мягкое затухание по краям вместо резкого обрезания карточки на границе контейнера */
    mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
}

.carousel-viewport::-webkit-scrollbar {
    display: none;
}

.carousel-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* Карточки услуг: стеклянная поверхность в духе .glass, а не голая тень на прозрачном фоне */
.service-card {
    width: min(78vw, 320px);
    display: flex;
    flex-direction: column;
    padding: 26px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.35s ease, transform 0.35s ease, background 0.35s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}

/* ==================== «Производства»: вертикальная карусель, ~3 плитки видно ==================== */
.carousel--vertical .carousel-viewport {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    height: 468px;
    padding-bottom: 0;
    padding-right: 4px;
    mask-image: linear-gradient(to bottom, transparent 0, black 28px, black calc(100% - 28px), transparent 100%);
}

.wide-tile {
    width: 100%;
    height: 145px;
}

@media (hover: hover) and (pointer: fine) {
    .carousel--vertical .carousel-arrow--prev,
    .carousel--vertical .carousel-arrow--next {
        left: 50%;
        top: auto;
        transform: translateX(-50%);
    }

    .carousel--vertical .carousel-arrow--prev {
        top: -64px;
    }

    .carousel--vertical .carousel-arrow--next {
        bottom: -64px;
    }
}

/* ==================== «Аренда»: 3 независимые бесконечные колонки ====================
   Не карусель по клику/автоплею, а фоновая непрерывная лента — каждая колонка со своей
   длительностью и отрицательной задержкой (сразу стартует «в середине» своего цикла),
   чтобы колонки визуально не были синхронны — это и есть «случайный сдвиг». */
.marquee-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    height: 468px;
}

.marquee-col {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    mask-image: linear-gradient(to bottom, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
}

.marquee-track {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation-name: marquee-scroll-y;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes marquee-scroll-y {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

.marquee-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 145px;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }
}

/* ==================== Стрелки карусели ====================
   Только для мыши: на тач-устройствах свайп по треку и так работает, а стрелки
   лишь занимали бы место и перекрывали карточки. */
.carousel-arrow {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .carousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        width: 46px;
        height: 46px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: rgba(8, 10, 31, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.35);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.3s ease, background 0.25s ease;
    }

    .carousel:hover .carousel-arrow,
    .carousel:focus-within .carousel-arrow {
        opacity: 1;
    }

    .carousel-arrow:hover {
        background: rgba(8, 10, 31, 0.85);
    }

    .carousel-arrow:focus-visible {
        opacity: 1;
        outline: 2px solid #ff6b6b;
        outline-offset: 2px;
    }

    .carousel-arrow svg {
        width: 20px;
        height: 20px;
    }

    /* -64px = ширина стрелки (46px) + отступ (18px), чтобы стрелка полностью стояла
       за пределами карточек, а не наезжала на крайнюю из них. */
    .carousel-arrow--prev {
        left: -64px;
    }

    .carousel-arrow--next {
        right: -64px;
    }
}