/*
Theme Name: Scena Child
Theme URI: https://supervisuals.ru
Description: Child theme for Scena theme, customized for Supervisuals Digital Production Studio.
Author: Supervisuals Team
Author URI: https://supervisuals.ru
Template: scena
Version: 1.0.0
*/

/* --- 100% БЕЛЫЙ ЦВЕТ ДЛЯ ВСЕХ ЭЛЕМЕНТОВ И ССЫЛОК ШАПКИ СТА --- */

/* ==========================================================================
   SMOOTH INERTIAL SCROLL (LENIS / NEWO.AI FEEL) & HIDDEN BROWSER SCROLLBAR
   ========================================================================== */
html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* HIDE BROWSER VISUAL SCROLLBAR (100% PRESERVES SCROLL & MOMENTUM) */
html,
body,
html body,
#swup,
div#swup,
.site-main,
.hp-main {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE / Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
html body::-webkit-scrollbar,
#swup::-webkit-scrollbar,
div#swup::-webkit-scrollbar,
.site-main::-webkit-scrollbar,
.hp-main::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none !important;
    width: 0px !important;
    height: 0px !important;
    background: transparent !important;
}

/* ==========================================================================
   1. ДЕСКТОПНАЯ ВЕРСИЯ (Экран шириной от 992px и выше)
      Сетка Moment Factory (Полная ширина + CSS Grid 3-2-1 без пробелов)
   ========================================================================== */
@media (min-width: 992px) {

    /* Переводим контейнер сетки на CSS Grid (6 колонок) */
    .portfolio-area.grid {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        grid-auto-rows: auto !important;
        gap: 0 !important;
        position: relative !important;

        width: 100vw !important;
        max-width: 100vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;

        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Сбрасываем абсолютные координаты плиток */
    .portfolio-area.grid .type-project {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        clear: none !important;
        float: none !important;
    }

    /* Убираем ограничения и отступы у миниатюр */
    .portfolio-area.grid .type-project .project-thumbnail {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .portfolio-area.grid .type-project .project-thumbnail-inner {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .portfolio-area.grid .type-project img,
    .portfolio-area.grid .type-project video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        max-width: none !important;
    }

    /* УЗОР 3-2-1 (Динамический пересчет строго среди ВИДИМЫХ элементов) */
    /* --- Ряд из 3 проектов (1, 2, 3) -> 2 колонки из 6 (33.333%) --- */
    .portfolio-area.grid .type-project:not(.hidden-project):nth-child(6n+1 of .type-project:not(.hidden-project)),
    .portfolio-area.grid .type-project:not(.hidden-project):nth-child(6n+2 of .type-project:not(.hidden-project)),
    .portfolio-area.grid .type-project:not(.hidden-project):nth-child(6n+3 of .type-project:not(.hidden-project)) {
        grid-column: span 2 !important;
    }

    .portfolio-area.grid .type-project:not(.hidden-project):nth-child(6n+1 of .type-project:not(.hidden-project)) .project-thumbnail,
    .portfolio-area.grid .type-project:not(.hidden-project):nth-child(6n+2 of .type-project:not(.hidden-project)) .project-thumbnail,
    .portfolio-area.grid .type-project:not(.hidden-project):nth-child(6n+3 of .type-project:not(.hidden-project)) .project-thumbnail {
        aspect-ratio: 3 / 2 !important;
    }

    /* --- Ряд из 2 проектов (4, 5) -> 3 колонки из 6 (50%) --- */
    .portfolio-area.grid .type-project:not(.hidden-project):nth-child(6n+4 of .type-project:not(.hidden-project)),
    .portfolio-area.grid .type-project:not(.hidden-project):nth-child(6n+5 of .type-project:not(.hidden-project)) {
        grid-column: span 3 !important;
    }

    .portfolio-area.grid .type-project:not(.hidden-project):nth-child(6n+4 of .type-project:not(.hidden-project)) .project-thumbnail,
    .portfolio-area.grid .type-project:not(.hidden-project):nth-child(6n+5 of .type-project:not(.hidden-project)) .project-thumbnail {
        aspect-ratio: 16 / 9 !important;
    }

    /* --- Ряд из 1 проекта (6) -> 6 колонок из 6 (100%) --- */
    .portfolio-area.grid .type-project:not(.hidden-project):nth-child(6n+6 of .type-project:not(.hidden-project)) {
        grid-column: span 6 !important;
    }

    .portfolio-area.grid .type-project:not(.hidden-project):nth-child(6n+6 of .type-project:not(.hidden-project)) .project-thumbnail {
        aspect-ratio: 21 / 9 !important;
    }

    .portfolio-area.grid .type-project .project-caption {
        padding: 20px 25px !important;
        box-sizing: border-box !important;
        background-color: transparent !important;
    }
}

/* ==========================================================================
   2. МОБИЛЬНАЯ ВЕРСИЯ И ПЛАНШЕТЫ (Экран до 991px)
      Чистая аккуратная адаптивная сетка в 1 колонку (100% ширины)
   ========================================================================== */
@media (max-width: 991px) {
    .portfolio-area.grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .portfolio-area.grid .type-project {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px !important;
        /* Удобный отступ между карточками */
    }

    .portfolio-area.grid .type-project .project-thumbnail {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        /* Универсальная шикарная пропорция для мобильных */
        position: relative !important;
        overflow: hidden !important;
    }

    .portfolio-area.grid .type-project .project-thumbnail-inner {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .portfolio-area.grid .type-project img,
    .portfolio-area.grid .type-project video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .portfolio-area.grid .type-project .project-caption {
        padding: 12px 20px !important;
    }
}

/* ==========================================================================
   3. ОБЩИЕ СТИЛИ (Работают и на ПК, и на мобильных)
   ========================================================================== */
/* Класс-невидимка для фильтрации */
.portfolio-area.grid .type-project.hidden-project {
    display: none !important;
}

/* Скрываем кнопку подгрузки для бесшовного автоскролла */
.loadmore,
.load-more,
.load-more-active,
.themerain-loadmore,
#load-more {
    visibility: hidden !important;
    opacity: 0 !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Элегантные теги с автопрокруткой пальцем на мобильных */
.portfolio-filter-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;

    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    margin-top: 35px !important;
    margin-bottom: 35px !important;

    justify-content: center !important;
    gap: 20px !important;
    padding: 10px 40px 15px 40px !important;
    box-sizing: border-box !important;
    background-color: transparent !important;
}

.portfolio-filter-tags::-webkit-scrollbar {
    display: none !important;
}

.portfolio-filter-tags .filter-tag {
    font-family: inherit;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #666 !important;
    text-decoration: none !important;
    transition: color 0.3s ease, border-color 0.3s ease !important;
    border-bottom: 2px solid transparent !important;
    padding-bottom: 3px !important;
    flex-shrink: 0 !important;
}

.portfolio-filter-tags .filter-tag:hover,
.portfolio-filter-tags .filter-tag.active {
    color: #fff !important;
    border-bottom: 2px solid #fff !important;
}

/* Отступы от шапки */
.site-main {
    padding-top: 75px !important;
}

#content,
.area.portfolio-area {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.site-header {
    margin-bottom: 10px !important;
}

/* ==========================================================================
   4. HIGH-FIDELITY HOMEPAGE STYLING (.hp- namespace)
   ========================================================================== */
.hp-main,
.hp-main *,
.hp-tag,
.hp-hero-title,
.hp-section-title,
.hp-hero-subtitle,
.hp-hero-cursor-btn,
.hp-btn-play,
.hp-project-title,
.hp-service-title,
.hp-process-step-title,
.hp-stat-val,
.hp-stat-lbl,
.hp-cta-title,
.hp-cta-subtitle,
.hp-footer {
    font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.hp-main {
    background-color: #000000 !important;
    color: #ffffff !important;
    overflow-x: hidden;
}

.hp-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

.hp-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #A855F7;
    margin-bottom: 12px;
}

.hp-tag-cyan,
.hp-modal-header .hp-tag,
.hp-modal-header .hp-tag-purple,
.hp-modal-header .hp-tag-cyan {
    color: #2DD4BF !important;
}

.hp-tag-purple,
.hp-col-tags-purple .hp-tag-purple,
.hp-col-tags-purple .hp-tag {
    color: #A855F7 !important;
}

.hp-col-tags-neon_purple .hp-tag-purple,
.hp-col-tags-neon_purple .hp-tag {
    color: #C084FC !important;
}

.hp-col-tags-cyan .hp-tag-purple,
.hp-col-tags-cyan .hp-tag {
    color: #2DD4BF !important;
}

.hp-col-tags-white .hp-tag-purple,
.hp-col-tags-white .hp-tag {
    color: #FFFFFF !important;
}

.hp-col-tags-gray .hp-tag-purple,
.hp-col-tags-gray .hp-tag {
    color: #9CA3AF !important;
}

.hp-section-title {
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
}

.hp-section-header {
    margin-bottom: 50px;
}

.hp-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.hp-header-center {
    text-align: center;
}

/* --- 1. HERO SECTION (.hp-hero) --- */
.hp-hero {
    position: relative;
    width: 100%;
    min-height: 88vh;
    display: flex;
    align-items: center;
    background-color: #030305;
    overflow: hidden;
    padding: 100px 0 60px 0;
    box-sizing: border-box;
}

.hp-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hp-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 30%, rgba(99, 102, 241, 0.08) 0%, rgba(0, 0, 0, 0.45) 70%, rgba(0, 0, 0, 0.75) 100%);
    z-index: 2;
    pointer-events: none;
}

.hp-hero-particles {
    display: none !important;
    opacity: 0 !important;
    background-image: none !important;
    z-index: -1 !important;
}

.hp-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.75;
}

.hp-hero-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.hp-hero-content {
    max-width: 900px;
}

.hp-hero-title {
    font-size: clamp(2.8rem, 5.5vw, 5.2rem);
    font-weight: 900;
    line-height: 1.0 !important;
    letter-spacing: -1.5px;
    color: #ffffff;
    margin: 15px 0 25px 0;
    text-transform: uppercase;
}

.hp-hero-subtitle {
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    color: #A0A0A0;
    line-height: 1.6;
    margin-bottom: 40px;
    font-weight: 400;
}

.hp-hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* CLICKABLE HERO BACKGROUND / TRAILER */
.hp-hero-bg {
    cursor: pointer;
}

/* VENGEANCE UI ANIMATED SHINE BUTTON (EXACT 1-TO-1 SPECIFICATION) */
.hp-btn-play,
.hp-animated-shine-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 24px !important;
    border-radius: 6px !important;
    background: #050507 !important;
    border: 1px solid #222222 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease !important;
    z-index: 5;
    box-sizing: border-box;
}

.hp-btn-play:hover,
.hp-animated-shine-btn:hover {
    transform: scale(1.02);
    border-color: #333333 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

.hp-btn-play:active,
.hp-animated-shine-btn:active {
    transform: scale(0.97);
}

/* Border shine effect matching Vengeance UI */
.hp-btn-shine-overlay {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    padding: 1px;
    background: linear-gradient(-75deg, transparent 30%, rgba(255, 255, 255, 0.66) 50%, transparent 70%);
    background-size: 200% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    animation: vengenceBorderShine 2.5s linear infinite;
    z-index: 1;
}

@keyframes vengenceBorderShine {
    0% { background-position: 100% 0; opacity: 0; }
    30% { opacity: 1; }
    70% { opacity: 1; }
    100% { background-position: 0% 0; opacity: 0; }
}

.hp-btn-inner-content {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
    font-family: 'Exo 2', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #f1f1f1 !important;
}

.hp-play-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #a855f7;
    font-size: 11px;
    line-height: 1;
    transition: transform 0.2s ease, color 0.2s ease;
}

.hp-btn-play:hover .hp-play-icon {
    color: #c084fc;
    transform: scale(1.1);
}

.hp-hero-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.hp-scroll-label {
    font-size: 10px;
    letter-spacing: 3px;
    font-weight: 700;
    color: #666666;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.hp-scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, #ffffff, transparent);
    animation: hpScrollPulse 2s infinite;
}

@keyframes hpScrollPulse {
    0% {
        opacity: 0.2;
        height: 30px;
    }

    50% {
        opacity: 1;
        height: 60px;
    }

    100% {
        opacity: 0.2;
        height: 30px;
    }
}

/* --- 2. FEATURED PROJECTS SLIDER (.hp-featured-projects) --- */
.hp-featured-projects {
    padding: 100px 0;
    background-color: #000000;
}

.hp-swiper-nav {
    display: flex;
    gap: 12px;
}

.hp-swiper-button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: #ffffff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hp-swiper-button:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.hp-project-card {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s ease;
}

.hp-project-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
}

.hp-project-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #111111;
}

.hp-project-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.hp-project-card:hover .hp-project-thumb img {
    transform: scale(1.05);
}

.hp-project-demo-img {
    width: 100%;
    height: 100%;
    position: relative;
}

.hp-demo-grid-overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

.hp-project-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
}

.hp-project-meta {
    padding: 22px;
}

.hp-project-title {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 6px 0;
    letter-spacing: 0.5px;
}

.hp-project-location {
    font-size: 13px;
    color: #777777;
}

/* --- 3. SERVICES SECTION (.hp-services) (Conceptual 3D Visual Metaphors) --- */
.hp-services {
    padding: 100px 0;
    background: transparent;
}

.hp-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.hp-service-card {
    position: relative;
    background: rgba(18, 20, 28, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 36px 24px;
    transition: transform 0.15s ease-out, border-color 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transform-style: preserve-3d;
    backdrop-filter: blur(16px);
}

.hp-service-glow-spot {
    position: absolute !important;
    width: 220px !important;
    height: 220px !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    filter: blur(40px) !important;
    transition: opacity 0.4s ease !important;
    z-index: 1 !important;
    mask-image: radial-gradient(circle at center, #000000 20%, transparent 65%) !important;
    -webkit-mask-image: radial-gradient(circle at center, #000000 20%, transparent 65%) !important;
}

.hp-service-card[data-service-color="#d033ff"] .hp-service-glow-spot {
    background: radial-gradient(circle, rgba(208, 51, 255, 0.45) 0%, transparent 70%) !important;
}

.hp-service-card[data-service-color="#00d2ff"] .hp-service-glow-spot {
    background: radial-gradient(circle, rgba(0, 210, 255, 0.45) 0%, transparent 70%) !important;
}

.hp-service-card[data-service-color="#ff6600"] .hp-service-glow-spot {
    background: radial-gradient(circle, rgba(255, 102, 0, 0.45) 0%, transparent 70%) !important;
}

.hp-service-card[data-service-color="#00ff88"] .hp-service-glow-spot {
    background: radial-gradient(circle, rgba(0, 255, 136, 0.45) 0%, transparent 70%) !important;
}

.hp-service-card:hover {
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75) !important;
}

.hp-service-visual {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
    perspective: 800px;
}

/* ==========================================================================
   ВИЗУАЛ 1: КИНЕТИЧЕСКАЯ СКУЛЬПТУРА LED ЭКРАНОВ (#be2eff)
   ========================================================================== */
.hp-sculpture-container {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hp-led-panel {
    position: absolute;
    border-radius: 8px;
    border: 1.5px solid #be2eff;
    background: rgba(190, 46, 255, 0.08);
    box-shadow: 0 0 20px rgba(190, 46, 255, 0.35), inset 0 0 10px rgba(190, 46, 255, 0.2);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Кастомное 3D каскадное расположение 4 LED панелей */
.hp-panel-1 {
    width: 55px;
    height: 55px;
    transform: translate3d(-18px, -18px, 20px) rotate(-8deg);
}

.hp-panel-2 {
    width: 55px;
    height: 55px;
    transform: translate3d(18px, -12px, 0px) rotate(8deg);
}

.hp-panel-3 {
    width: 55px;
    height: 55px;
    transform: translate3d(-12px, 18px, -15px) rotate(12deg);
}

.hp-panel-4 {
    width: 55px;
    height: 55px;
    transform: translate3d(16px, 16px, -30px) rotate(-15deg);
}

/* Бегущий световой протокол синхронизации */
.hp-sync-wave {
    position: absolute;
    width: 110px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #FFFFFF, #be2eff, transparent);
    box-shadow: 0 0 20px #be2eff;
    top: 50%;
    opacity: 0.3;
    transition: opacity 0.4s ease;
    transform: rotate(-45deg);
}

/* ПРИ НАВЕДЕНИИ: КИНЕТИЧЕСКИЙ СДВИГ ПАНЕЛЕЙ И ВОЛНА СИНХРОНИЗАЦИИ СВЕТА */
.hp-service-card:hover .hp-sculpture-container {
    transform: rotateX(20deg) rotateY(-15deg);
}

.hp-service-card:hover .hp-panel-1 {
    transform: translate3d(-26px, -26px, 45px) rotate(-18deg);
    background: rgba(190, 46, 255, 0.22);
    border-color: #FFFFFF;
    box-shadow: 0 0 35px rgba(190, 46, 255, 0.85);
}

.hp-service-card:hover .hp-panel-2 {
    transform: translate3d(26px, -18px, 25px) rotate(18deg);
    background: rgba(190, 46, 255, 0.18);
    box-shadow: 0 0 30px rgba(190, 46, 255, 0.7);
}

.hp-service-card:hover .hp-panel-3 {
    transform: translate3d(-18px, 26px, -5px) rotate(22deg);
    background: rgba(190, 46, 255, 0.14);
    box-shadow: 0 0 25px rgba(190, 46, 255, 0.5);
}

.hp-service-card:hover .hp-panel-4 {
    transform: translate3d(24px, 24px, -35px) rotate(-22deg);
    background: rgba(190, 46, 255, 0.1);
    box-shadow: 0 0 20px rgba(190, 46, 255, 0.3);
}

.hp-service-card:hover .hp-sync-wave {
    opacity: 1;
    animation: hpSyncSweep 1.8s ease-in-out infinite alternate;
}

@keyframes hpSyncSweep {
    0% {
        transform: translate(-30px, -30px) rotate(-45deg);
        opacity: 0.2;
    }

    100% {
        transform: translate(30px, 30px) rotate(-45deg);
        opacity: 1;
        filter: drop-shadow(0 0 15px #be2eff);
    }
}

/* ==========================================================================
   ВИЗУАЛ 2: СКАНИРОВАНИЕ МЕДИАФАСАДА (Медиаархитектура / #4d52ff)
   ========================================================================== */
.hp-facade-container {
    position: relative;
    width: 100px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-facade-grid {
    display: flex;
    gap: 12px;
    height: 75px;
    align-items: flex-end;
}

.hp-facade-grid span {
    width: 4px;
    height: 100%;
    background: rgba(77, 82, 255, 0.25);
    border-radius: 4px;
    transition: all 0.4s ease;
}

.hp-facade-grid span:nth-child(1) {
    height: 50%;
}

.hp-facade-grid span:nth-child(2) {
    height: 80%;
}

.hp-facade-grid span:nth-child(3) {
    height: 100%;
}

.hp-facade-grid span:nth-child(4) {
    height: 70%;
}

.hp-facade-grid span:nth-child(5) {
    height: 40%;
}

.hp-facade-scanner {
    position: absolute;
    width: 110px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #FFFFFF, #4d52ff, transparent);
    box-shadow: 0 0 15px #4d52ff;
    top: 50%;
    opacity: 0.4;
    transition: opacity 0.4s ease;
}

.hp-service-card:hover .hp-facade-grid span {
    background: #4d52ff;
    box-shadow: 0 0 15px rgba(77, 82, 255, 0.8);
}

.hp-service-card:hover .hp-facade-scanner {
    opacity: 1;
    animation: hpFacadeScan 1.6s ease-in-out infinite alternate;
}

@keyframes hpFacadeScan {
    0% {
        top: 10%;
    }

    100% {
        top: 90%;
    }
}

/* ==========================================================================
   ВИЗУАЛ 3: ГОЛОГРАФИЧЕСКАЯ ДИАФРАГМА (Выставки / #ff5500)
   ========================================================================== */
.hp-expo-container {
    position: relative;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

.hp-expo-aperture {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 1.5px solid rgba(255, 85, 0, 0.4);
    transform: rotate(45deg);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hp-expo-hologram {
    position: absolute;
    width: 36px;
    height: 36px;
    border: 1.5px solid #ff5500;
    box-shadow: 0 0 20px rgba(255, 85, 0, 0.5);
    transform: rotate(45deg);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hp-expo-halo {
    position: absolute;
    width: 95px;
    height: 95px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 85, 0, 0.2);
    transition: all 0.6s ease;
}

.hp-service-card:hover .hp-expo-aperture {
    transform: rotate(135deg) scale(1.15);
    border-color: #ff5500;
    box-shadow: 0 0 30px rgba(255, 85, 0, 0.6);
}

.hp-service-card:hover .hp-expo-hologram {
    transform: translateZ(35px) rotate(-45deg) scale(1.2);
    background: rgba(255, 85, 0, 0.25);
    box-shadow: 0 0 35px #ff5500;
}

.hp-service-card:hover .hp-expo-halo {
    transform: rotate(180deg);
    border-color: rgba(255, 85, 0, 0.6);
}

/* ==========================================================================
   ВИЗУАЛ 4: КОНЦЕРТНЫЕ ЛАЗЕРНЫЕ ЛУЧИ (Шоу / #00d285)
   ========================================================================== */
.hp-show-container {
    position: relative;
    width: 100px;
    height: 90px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
}

.hp-stage-line {
    position: absolute;
    bottom: 0;
    width: 100px;
    height: 2px;
    background: #00d285;
    box-shadow: 0 0 15px #00d285;
}

.hp-laser-beam {
    width: 3px;
    height: 20px;
    background: linear-gradient(180deg, #00d285, transparent);
    border-radius: 2px;
    transition: all 0.4s ease;
    transform-origin: bottom center;
}

.hp-beam-1 {
    transform: rotate(-20deg);
}

.hp-beam-2 {
    transform: rotate(-10deg);
}

.hp-beam-3 {
    transform: rotate(0deg);
}

.hp-beam-4 {
    transform: rotate(10deg);
}

.hp-beam-5 {
    transform: rotate(20deg);
}

.hp-service-card:hover .hp-laser-beam {
    box-shadow: 0 0 20px #00d285;
    animation: hpStageLaser 1.2s ease-in-out infinite alternate;
}

.hp-service-card:hover .hp-beam-1 {
    height: 75px;
    animation-delay: 0s;
}

.hp-service-card:hover .hp-beam-2 {
    height: 90px;
    animation-delay: 0.2s;
}

.hp-service-card:hover .hp-beam-3 {
    height: 80px;
    animation-delay: 0.4s;
}

.hp-service-card:hover .hp-beam-4 {
    height: 95px;
    animation-delay: 0.1s;
}

.hp-service-card:hover .hp-beam-5 {
    height: 70px;
    animation-delay: 0.3s;
}

@keyframes hpStageLaser {
    0% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
        filter: drop-shadow(0 0 12px #00d285);
    }
}

.hp-service-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.hp-service-title {
    font-family: inherit;
    font-size: var(--hp-service-title-size, var(--font-h2, 20px)) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.25 !important;
    min-height: auto !important;
    display: block !important;
    word-break: break-word !important;
}

.hp-service-desc {
    font-family: inherit;
    font-size: var(--hp-service-desc-size, var(--font-h1, 14px)) !important;
    color: #9CA3AF !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

@media (max-width: 1024px) {
    .hp-services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .hp-services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* --- 4. PROCESS PIPELINE SECTION (.hp-process & JOB_code16 Tech-Grey Canvas with Logo Accent Nodes) --- */
.hp-process {
    padding: 70px 0;
    background: transparent;
}

.hp-section-subtitle {
    font-family: inherit;
    color: #9CA3AF;
    font-size: 14px;
    line-height: 1.6;
    max-width: 600px;
    margin: 10px 0 35px 0;
    font-weight: 400;
}

/* --- Canvas Node Editor (Строгий нейтрально-серый стильный фон) --- */
.node-canvas {
    position: relative;
    width: 100%;
    height: 520px;
    background-color: #08090d;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1.2px, transparent 1.2px);
    background-size: 26px 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    user-select: none;
    touch-action: none;
}

/* SVG Векторный слой динамических проводов */
.wire-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.wire-path {
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 2.2;
    fill: none;
    transition: stroke 0.3s ease, filter 0.3s ease;
}

.wire-path.active {
    stroke: rgba(255, 255, 255, 0.7);
    stroke-width: 2.5;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

/* --- СТИЛИСТИКА НОД (Темно-серый корпус + Неоновые акценты из логотипа) --- */
.node {
    position: absolute;
    z-index: 10;
    width: 180px;
    background: rgba(18, 20, 28, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    cursor: grab;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.node:active {
    cursor: grabbing;
    z-index: 100 !important;
    transform: scale(1.02);
}

/* Шапка Ноды */
.node-header {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.node-tag {
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.node-title {
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #E5E7EB;
    padding: 12px 14px;
    line-height: 1.35;
}

/* Входы и Выходы (Pins) */
.pin {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #08090d;
    border: 2px solid #6B7280;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

.pin.input {
    left: -6px;
}

.pin.output {
    right: -6px;
}

/* --- Цветовые неоновые акценты из 4-х сфер логотипа --- */
/* 1. Пурпурный/Фиолетовый (Левая сфера логотипа) */
.node[data-type="purple"] .node-tag {
    color: #be2eff;
}

.node[data-type="purple"]:hover {
    border-color: #be2eff;
    box-shadow: 0 12px 35px rgba(190, 46, 255, 0.35);
}

.node[data-type="purple"]:hover .pin {
    border-color: #be2eff;
    background: #be2eff;
    box-shadow: 0 0 12px #be2eff;
}

/* 2. Синий/Индиго (Верхняя сфера логотипа) */
.node[data-type="blue"] .node-tag {
    color: #4d52ff;
}

.node[data-type="blue"]:hover {
    border-color: #4d52ff;
    box-shadow: 0 12px 35px rgba(77, 82, 255, 0.35);
}

.node[data-type="blue"]:hover .pin {
    border-color: #4d52ff;
    background: #4d52ff;
    box-shadow: 0 0 12px #4d52ff;
}

/* 3. Оранжевый/Янтарный (Нижняя сфера логотипа) */
.node[data-type="pink"] .node-tag {
    color: #ff5500;
}

.node[data-type="pink"]:hover {
    border-color: #ff5500;
    box-shadow: 0 12px 35px rgba(255, 85, 0, 0.35);
}

.node[data-type="pink"]:hover .pin {
    border-color: #ff5500;
    background: #ff5500;
    box-shadow: 0 0 12px #ff5500;
}

/* 4. Изумрудный/Мятный (Правая сфера логотипа) */
.node[data-type="green"] .node-tag {
    color: #00d285;
}

.node[data-type="green"]:hover {
    border-color: #00d285;
    box-shadow: 0 12px 35px rgba(0, 210, 133, 0.35);
}

.node[data-type="green"]:hover .pin {
    border-color: #00d285;
    background: #00d285;
    box-shadow: 0 0 12px #00d285;
}

/* Элегантные пунктирные рамки сверху/снизу */
.canvas-bar {
    position: absolute;
    left: 30px;
    right: 30px;
    height: 36px;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #6B7280;
    pointer-events: none;
}

.bar-top {
    top: 20px;
}

.bar-bottom {
    bottom: 20px;
}

@media (max-width: 1024px) {
    .node-canvas {
        overflow-x: auto;
    }
}

/* --- 5. STATS SECTION (.hp-stats) (Frameless Layout matching Reference) --- */
.hp-stats {
    padding: 70px 0;
    background: transparent;
}

.hp-stats-row {
    display: grid;
    grid-template-columns: 240px 1fr;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
}

.hp-stats-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hp-stats-title {
    font-family: inherit;
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #ffffff;
    margin-top: 10px;
    margin-bottom: 0;
    text-transform: uppercase;
}

.hp-stats-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    align-items: flex-start;
    width: 100%;
}

.hp-stat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.hp-stat-val {
    font-family: inherit;
    font-size: clamp(2.4rem, 3.8vw, 3.8rem);
    font-weight: 400;
    line-height: 1;
    color: #ffffff;
    letter-spacing: -1px;
    margin-bottom: 12px;
}

.hp-stat-lbl {
    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;
    color: #9CA3AF;
    font-weight: 400;
    max-width: 180px;
}

@media (max-width: 1024px) {
    .hp-stats-row {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .hp-stats-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
    }
}

@media (max-width: 640px) {
    .hp-stats-list {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

/* --- 3-Й ВАРИАНТ ШРИФТА (Основной шрифт сайта / Unbounded / var(--font-secondary)) --- */
.hp-font-theme .hp-section-title,
.hp-font-theme .hp-hero-title,
.hp-font-theme .hp-why-title,
.hp-font-theme .hp-stats-title,
.hp-font-theme .hp-process-title,
.hp-font-theme .hp-services-title,
.hp-font-theme .hp-cta-title,
.hp-font-theme .hp-modal-title,
.hp-font-theme .hp-why-card-title,
.hp-font-theme .hp-stat-val,
.hp-font-theme h1,
.hp-font-theme h2,
.hp-font-theme h3,
.hp-font-style-theme .hp-section-title,
.hp-font-style-theme .hp-hero-title,
.hp-font-style-theme .hp-why-title,
.hp-font-style-theme .hp-stats-title,
.hp-font-style-theme .hp-process-title,
.hp-font-style-theme .hp-services-title,
.hp-font-style-theme .hp-cta-title,
.hp-font-style-theme .hp-modal-title,
.hp-font-style-theme .hp-why-card-title,
.hp-font-style-theme .hp-stat-val,
.hp-font-style-theme h1,
.hp-font-style-theme h2,
.hp-font-style-theme h3 {
    font-family: var(--font-secondary, var(--font-primary, 'Unbounded', 'Inter', system-ui, -apple-system, sans-serif)) !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
}

/* --- 6. CLIENT LOGOS (.hp-clients) --- */
.hp-clients {
    padding: 80px 0;
    background: #000000;
    overflow: hidden;
}

.hp-clients .hp-section-header,
.hp-clients .hp-section-header.hp-header-center,
.hp-clients .hp-tag,
.hp-clients .hp-section-title {
    text-align: left !important;
}

.hp-clients-swiper-wrap {
    width: 100%;
    position: relative;
    padding: 15px 0;
    overflow: hidden;
}

.hp-clients-swiper {
    width: 100%;
    overflow: visible;
}

.hp-clients-swiper .swiper-wrapper,
.hp-clients-row,
.hp-clients-gallery {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: center !important;
    transition-timing-function: linear !important;
}

.hp-client-slide {
    width: auto !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
}

.hp-client-logo-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: var(--client-logo-height, 50px) !important;
    max-height: 120px !important;
    transition: all 0.3s ease;
    opacity: 0.7;
    filter: grayscale(100%) brightness(1.2);
}

.hp-client-logo-item:hover {
    opacity: 1;
    filter: grayscale(0%) brightness(1);
    transform: scale(1.06);
}

.hp-client-logo-img {
    height: 100% !important;
    width: auto !important;
    max-height: var(--client-logo-height, 50px) !important;
    object-fit: contain !important;
    display: block !important;
}

.hp-client-text-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 22px !important;
    border-radius: 50px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}

.hp-client-text-item:hover {
    background: rgba(177, 140, 255, 0.1) !important;
    border-color: rgba(177, 140, 255, 0.5) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 0 15px rgba(177, 140, 255, 0.2) !important;
}

.hp-client-text-logo {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #CBD5E1;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.hp-client-text-item:hover .hp-client-text-logo {
    color: #FFFFFF;
}

/* --- 7. WHY US / BRAND DIAGRAM (.hp-why-us & .interactive-widget) --- */
.hp-why-us {
    padding: 70px 0;
    background: transparent;
}

/* 3-колончатая сетка со 100% центрированием интерактивного логотипа и симметричными отступами */
.hp-why-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 560px minmax(280px, 1fr);
    align-items: center;
    justify-content: space-between;
    gap: clamp(30px, 4vw, 60px);
    width: 100%;
}

.hp-why-col-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 440px;
    padding-top: 0;
}

.hp-why-title {
    font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: var(--hp-h1-size, clamp(2.2rem, 4vw, 3.5rem)) !important;
    font-weight: 300 !important;
    line-height: 1.12 !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    margin-top: 10px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hp-why-desc {
    font-family: inherit;
    font-size: var(--why-desc-size, 14px) !important;
    line-height: 1.65;
    color: #9CA3AF !important;
    margin-bottom: 0;
    font-weight: 400;
    max-width: 100%;
}

.hp-why-col-center {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}

/* Главный холст LOGO_code7 (без перекрытия узлов) */
.interactive-widget {
    position: relative;
    width: 520px;
    height: 480px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

/* 1. СФЕРЫ (Базовый квадрат 300x300 по центру) */
.spheres-wrapper {
    position: absolute;
    width: 300px;
    height: 300px;
    pointer-events: none;
}

.sphere {
    position: absolute;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sphere::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    filter: blur(16px);
    opacity: 0.35;
    mix-blend-mode: screen;
    transition: opacity 0.4s ease, filter 0.4s ease;
}

.sphere-top {
    top: 0;
    left: 65px;
}

.sphere-top::before {
    background: conic-gradient(from 0deg, #4d52ff, transparent, #6e72ff, transparent);
    animation: hpSpinSelf 14s linear infinite;
}

.sphere-right {
    top: 65px;
    left: 130px;
}

.sphere-right::before {
    background: conic-gradient(from 90deg, #00d285, transparent, #00ff9d, transparent);
    animation: hpSpinSelf 18s linear infinite reverse;
}

.sphere-bottom {
    top: 130px;
    left: 65px;
}

.sphere-bottom::before {
    background: conic-gradient(from 180deg, #ff5500, transparent, #ff8800, transparent);
    animation: hpSpinSelf 12s linear infinite;
}

.sphere-left {
    top: 65px;
    left: 0;
}

.sphere-left::before {
    background: conic-gradient(from 270deg, #be2eff, transparent, #8e44ad, transparent);
    animation: hpSpinSelf 16s linear infinite reverse;
}

@keyframes hpSpinSelf {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 2. ДУГИ (300x300 по центру) */
.arcs-wrapper {
    position: absolute;
    width: 300px;
    height: 300px;
    pointer-events: none;
    z-index: 10;
}

.arc {
    position: absolute;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 6px currentColor);
}

.arc-top {
    top: 0;
    left: 65px;
    border-top: 4px solid #4d52ff;
    color: #4d52ff;
}

.arc-right {
    top: 65px;
    left: 130px;
    border-right: 4px solid #00d285;
    color: #00d285;
}

.arc-bottom {
    top: 130px;
    left: 65px;
    border-bottom: 4px solid #ff5500;
    color: #ff5500;
}

.arc-left {
    top: 65px;
    left: 0;
    border-left: 4px solid #be2eff;
    color: #be2eff;
}

/* 3. ВНЕШНИЙ ТЕКСТ И ХИТБОКСЫ (Равномерное расстояние от объекта: 180px радиус от центра) */
.sector-node {
    position: absolute;
    z-index: 20;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.label-text {
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8a8a93;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    pointer-events: none;
    text-align: center;
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
    display: block;
    max-width: 140px;
    margin: 0 auto;
}

/* Позиции текста на строгом одинаковом расстоянии 180px от центра */
/* Позиции текста на строгом одинаковом расстоянии 180px от центра */
/* ==========================================================================
   ПОЗИЦИИ И ОТСТУПЫ ПОДПИСЕЙ ДИАГРАММЫ (#hp-why-us)
   ========================================================================== */

/* 1. Верхнее и нижнее горизонтальные слова */
.node-top {
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.node-bottom {
    bottom: 45px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. Левое и правое горизонтальные слова */
.node-left {
    top: 50%;
    left: 45px;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.node-right {
    top: 50%;
    right: 45px;
    transform: translate(50%, -50%);
    width: 160px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3. Горизонтальное отображение для левого и правого слов */
.node-left .label-text,
.node-right .label-text {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: none !important;
    white-space: nowrap !important;
    letter-spacing: 1px !important;
    line-height: 1.35 !important;
}

/* 4. ЦЕНТР (SUPER VISUALS) */
.center-node {
    position: relative;
    z-index: 30;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.center-title {
    font-family: inherit;
    color: #ffffff;
    text-align: center;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    pointer-events: none;
}

.center-cross {
    position: absolute;
    width: 12px;
    height: 12px;
    pointer-events: none;
    opacity: 0.4;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.center-cross::before,
.center-cross::after {
    content: '';
    position: absolute;
    background: #fff;
}

.center-cross::before {
    top: 5px;
    left: 0;
    width: 12px;
    height: 2px;
}

.center-cross::after {
    top: 0;
    left: 5px;
    width: 2px;
    height: 12px;
}

/* ЭФФЕКТЫ ИНТЕРАКТИВА */
.sector-node:hover .label-text {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* Выбранная зона: четкая обводка + уменьшенный глоу */
.sphere.active-main,
.sphere.active {
    border: 2px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
    transform: scale(1.04);
    z-index: 5;
}

.sphere.active-main::before,
.sphere.active::before {
    opacity: 0.65 !important;
    filter: blur(14px) !important;
    animation-duration: 6s !important;
}

/* Боковые смежные зоны: легкая обводка + мягкий глоу */
.sphere.active-side {
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    transform: scale(1.01);
    opacity: 0.8;
}

.sphere.active-side::before {
    opacity: 0.35 !important;
    filter: blur(16px) !important;
}

.interactive-widget.has-active .sphere:not(.active-main):not(.active-side) {
    opacity: 0.2;
}

.arc.active-main,
.arc.active {
    filter: drop-shadow(0 0 10px currentColor);
    transform: scale(1.03);
    opacity: 1 !important;
}

.arc.active-side {
    filter: drop-shadow(0 0 4px currentColor);
    opacity: 0.5 !important;
}

.interactive-widget.has-active .arc:not(.active-main):not(.active-side) {
    opacity: 0.15;
}

.interactive-widget.has-active .sector-node {
    opacity: 1;
}

/* Печатающийся текст: курсор печати */
#hpWhyDynamicText.is-typing::after {
    content: '|';
    display: inline-block;
    margin-left: 3px;
    color: #a855f7;
    font-weight: bold;
    animation: hpBlinkCursor 0.6s infinite alternate;
}

@keyframes hpBlinkCursor {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Режим "Объединения" при наведении на центр */
.center-node:hover .center-title {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 0 0 30px rgba(255, 255, 255, 0.5);
    transform: scale(1.08);
}

.center-node:hover .center-cross {
    opacity: 1;
    transform: rotate(90deg) scale(1.2);
}

.interactive-widget.unite-mode .sphere {
    border-color: rgba(255, 255, 255, 0.9);
    opacity: 1 !important;
    transform: scale(1.03);
}

.interactive-widget.unite-mode .sphere::before {
    opacity: 1 !important;
    filter: blur(18px) !important;
    animation-duration: 3s !important;
}

.interactive-widget.unite-mode .arc {
    filter: drop-shadow(0 0 14px currentColor) !important;
    opacity: 1 !important;
}

.interactive-widget.unite-mode .label-text {
    color: #ffffff !important;
}

/* Правая колонка с динамическим описанием (симметричное расположение) */
.hp-why-col-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    min-height: 480px;
    width: 100%;
    max-width: 440px;
    margin-left: auto;
    padding-top: 0;
}

.hp-why-card {
    width: 100%;
    max-width: 320px;
    padding: 32px 26px;
    background: #0b0914;
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.hp-why-card:hover {
    transform: translateY(-3px);
    border-color: rgba(168, 85, 247, 0.65);
    box-shadow: 0 12px 35px rgba(139, 92, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.hp-why-card-title {
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.25;
    letter-spacing: -0.2px;
}

.hp-why-card-subtitle {
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: #9CA3AF;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 24px;
}

.hp-btn-why-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 20px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border: 1px solid rgba(139, 92, 246, 0.5);
    border-radius: 12px;
    background: rgba(139, 92, 246, 0.05);
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hp-btn-why-card:hover {
    background: rgba(139, 92, 246, 0.22);
    border-color: rgba(168, 85, 247, 0.8);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.35);
}

.hp-card-arrow {
    font-size: 16px;
    line-height: 1;
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.hp-btn-why-card:hover .hp-card-arrow {
    transform: translateX(4px);
}

/* Mobile Responsiveness for Why-Us */
@media (max-width: 992px) {
    .hp-why-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hp-why-col-left,
    .hp-why-col-right {
        align-items: center;
        text-align: center;
        padding-top: 0;
        min-height: auto;
        height: auto;
    }

    .hp-why-info-block {
        height: auto !important;
        min-height: 120px !important;
        max-height: none !important;
        justify-content: center !important;
    }

    .hp-why-title {
        text-align: center;
    }
}

.hp-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 16px 32px;
    border-radius: 50px;
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}

.hp-btn-outline:hover {
    border-color: #ffffff;
    background: #ffffff;
    color: #000000;
}

/* --- 8. CTA BANNER (.hp-cta-banner) --- */
.hp-cta-banner {
    padding: 100px 0;
    background: #000000;
}

.hp-cta-card {
    background: linear-gradient(135deg, #0A0A16 0%, #15102C 50%, #081729 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9);
}

.hp-cta-title {
    font-size: var(--cta-title-size, clamp(2.2rem, 4vw, 3.5rem));
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 10px 0;
    letter-spacing: -1px;
}

.hp-cta-subtitle {
    font-size: var(--cta-sub-size, 18px);
    color: #A0A0A0;
    margin: 0;
}

.hp-cta-btns {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hp-btn-solid {
    background: #ffffff;
    color: #000000;
    padding: 18px 36px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hp-btn-solid:hover {
    background: #CCCCCC;
    transform: translateY(-2px);
}

.hp-btn-download {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 18px 32px;
    border-radius: 50px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hp-btn-download:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

/* --- 9. FOOTER (.hp-footer) --- */
.hp-footer {
    background: #030305;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 80px 0 60px 0;
}

.hp-footer-grid {
    display: grid !important;
    grid-template-columns: 1.5fr 2.5fr 1.5fr !important;
    gap: 40px !important;
    align-items: start !important;
}

.hp-footer-brand,
.hp-footer-nav,
.hp-footer-right-box {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.hp-footer-right-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
    justify-self: end !important;
    width: max-content !important;
    max-width: 100% !important;
}

.hp-footer-logo {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #ffffff;
    line-height: 1 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 16px;
}

.hp-footer-logo a,
.hp-footer-logo-img {
    display: block !important;
    margin-top: 0 !important;
}

.hp-plus {
    color: #B18CFF;
}

.hp-footer-copy {
    font-size: 12px;
    color: #666666;
    line-height: 1.6;
    margin: 0;
}

.hp-footer-nav {
    display: flex;
    gap: 60px;
}

.hp-footer-links {
    list-style: none;
    padding: 0;
    margin: 0 !important;
}

.hp-footer-links li:first-child {
    margin-top: 0 !important;
}

.hp-footer-links li {
    margin-bottom: 12px;
}

.hp-footer-links a {
    font-family: inherit !important;
    font-size: var(--font-h1, 14px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.14px !important;
    text-transform: uppercase !important;
    color: #AAAAAA;
    text-decoration: none;
    line-height: 1.1 !important;
    display: inline-block !important;
    margin-top: 0 !important;
    transition: color 0.3s ease;
}

.hp-footer-links a:hover {
    color: #ffffff;
}

.hp-footer-phone {
    font-family: inherit !important;
    font-size: var(--font-h3, clamp(1.4rem, 2.2vw, 2.2rem)) !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    transition: color 0.3s ease, opacity 0.3s ease !important;
}

.hp-footer-phone:hover {
    color: #ffffff !important;
    opacity: 0.8 !important;
}

/* HORIZONTAL SVG SOCIAL ICONS ROW DISTRIBUTED FULL WIDTH UNDER PHONE NUMBER */
.hp-footer-social-icons {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hp-footer-icon-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 24px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #9CA3AF !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
}

.hp-footer-icon-link:hover {
    color: #ffffff !important;
    background: transparent !important;
    border-color: transparent !important;
    transform: translateY(-2px) !important;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) !important;
}

.hp-footer-icon-link svg {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor !important;
}

/* ==========================================================================
   5. RESPONSIVE MEDIA QUERIES (@media max-width 991px)
   ========================================================================== */
@media (max-width: 991px) {
    .hp-container {
        padding: 0 20px;
    }

    .hp-hero {
        min-height: 75vh;
        padding: 80px 0 40px 0;
    }

    .hp-hero-container {
        padding: 0 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .hp-hero-scroll {
        display: none;
    }

    .hp-services-grid,
    .hp-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .hp-process-flow {
        flex-direction: column;
        gap: 16px;
    }

    .hp-process-line {
        display: none;
    }

    .hp-why-wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .hp-cta-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        padding: 40px 24px;
    }

    .hp-cta-btns {
        flex-direction: column;
        width: 100%;
    }

    .hp-btn-solid,
    .hp-btn-download {
        width: 100%;
        text-align: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .hp-footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .hp-footer-nav {
        gap: 40px;
    }
}

@media (max-width: 600px) {

    .hp-services-grid,
    .hp-stats-grid {
        grid-template-columns: 1fr;
    }

    .hp-clients-row {
        justify-content: center;
        gap: 20px 25px;
    }
}

/* ==========================================================================
   4. СТИЛИ ДЛЯ ГЛАВНОЙ СТРАНИЦЫ (Homepage / Landing Template)
   ========================================================================== */
/* --- Hero Section (.home-hero) --- */
.home-hero {
    position: relative;
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #050505;
    color: #ffffff;
    overflow: hidden;
    padding: 60px 20px;
    box-sizing: border-box;
}

.home-hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.home-hero-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

.home-hero-video-placeholder {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px dashed rgba(255, 255, 255, 0.3);
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    pointer-events: none;
}

.home-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.home-hero-subtitle {
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 35px;
    letter-spacing: -0.5px;
    color: #ffffff;
}

.home-hero-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Общие кнопки для главной страницы */
.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.home-btn-primary {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #ffffff;
}

.home-btn-primary:hover {
    background-color: transparent;
    color: #ffffff;
}

/* --- Tagline Section (.home-tagline) --- */
.home-tagline {
    background-color: #0a0a0a;
    padding: 80px 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.home-tagline-container {
    max-width: 1000px;
    margin: 0 auto;
}

.home-tagline-text {
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin: 0;
}

/* --- Featured Projects Section (#home-projects) --- */
.home-projects-section {
    padding: 80px 0 40px 0;
    background-color: #000000;
}

.home-section-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 0 20px;
}

.home-section-title {
    font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #ffffff;
    margin: 0;
}

.home-no-projects {
    text-align: center;
    color: #888888;
    font-size: 14px;
    padding: 40px 20px;
}

/* --- Trusted Logos Banner (.home-trust-banner) --- */
.home-trust-banner {
    background-color: #000000;
    color: #ffffff;
    padding: 60px 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.home-trust-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.home-trust-title {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #888888;
    margin-bottom: 40px;
}

.home-trust-logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.home-trust-logo {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #ffffff;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.home-trust-logo:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* --- Process Workflow Section (.home-process) --- */
.home-process {
    background-color: #070707;
    padding: 90px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.home-process-container {
    max-width: 1200px;
    margin: 0 auto;
}

.home-process .home-section-title {
    margin-bottom: 60px;
}

.home-process-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: nowrap;
}

.home-process-step {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 30px 20px;
    border-radius: 4px;
    text-align: center;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.home-process-step:hover {
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-4px);
}

.home-process-step .step-number {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #666666;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.home-process-step .step-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.4;
}

.home-process-arrow {
    font-size: 20px;
    color: #444444;
    user-select: none;
    flex-shrink: 0;
}

/* --- CTA / Contact Section (.home-cta) --- */
.home-cta {
    background-color: #000000;
    padding: 100px 20px;
    text-align: center;
}

.home-cta-container {
    max-width: 800px;
    margin: 0 auto;
}

.home-cta-headline {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 40px;
    letter-spacing: -0.5px;
}

.home-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.home-btn-telegram {
    background-color: #24A1DE;
    color: #ffffff;
    border: 1px solid #24A1DE;
}

.home-btn-telegram:hover {
    background-color: #1d87bd;
    border-color: #1d87bd;
    color: #ffffff;
}

.home-cta-form-wrapper {
    width: 100%;
    max-width: 600px;
    margin-top: 10px;
}

/* --- Responsive Media Queries (Mobile & Tablet <= 991px) --- */
@media (max-width: 991px) {
    .home-hero {
        min-height: 65vh;
        padding: 40px 15px;
    }

    .home-tagline {
        padding: 50px 15px;
    }

    .home-projects-section {
        padding: 50px 0 20px 0;
    }

    .home-trust-banner {
        padding: 40px 20px;
    }

    .home-trust-logos {
        justify-content: center;
        gap: 20px 35px;
    }

    .home-process {
        padding: 60px 15px;
    }

    .home-process-flow {
        flex-direction: column;
        gap: 15px;
    }

    .home-process-step {
        width: 100%;
    }

    .home-process-arrow {
        transform: rotate(90deg);
        margin: 5px 0;
    }

    .home-cta {
        padding: 60px 15px;
    }
}

/* ==========================================================================
   PAGE TEMPLATE FULL-WIDTH RESET & SHOWREEL MODAL
   ========================================================================== */
body.page-template-template-home,
.page-template-template-home #page,
.page-template-template-home #content,
.page-template-template-home #primary,
.page-template-template-home .site-main,
.page-template-template-home .site-content,
.page-template-template-home .container,
.page-template-template-home .entry-content,
.page-template-template-home article {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* --- SHOWREEL VIDEO MODAL OVERLAY --- */
.hp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.94);
    backdrop-filter: blur(16px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    padding: 20px;
    box-sizing: border-box;
}

.hp-modal-overlay.hp-modal-active {
    opacity: 1;
    visibility: visible;
}

.hp-modal-container {
    position: relative;
    width: 100%;
    max-width: 1100px;
    aspect-ratio: 16 / 9;
    background: #000000;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95);
    transform: scale(0.95);
    transition: transform 0.4s ease;
}

.hp-modal-overlay.hp-modal-active .hp-modal-container {
    transform: scale(1);
}

.hp-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: #ffffff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.3s ease;
    z-index: 10;
}

.hp-modal-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.hp-modal-video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.hp-modal-video-wrapper iframe,
.hp-modal-video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}

/* ==========================================================================
   HOMEPAGE ONLY DARK BACKGROUND RESET (SAFE FOR ALL OTHER PAGES)
   ========================================================================== */
body.page-template-template-home,
body.page-template-template-home #page,
body.page-template-template-home #content,
body.page-template-template-home #primary,
body.page-template-template-home .site,
body.page-template-template-home .site-content,
body.page-template-template-home .site-main,
body.page-template-template-home .site-footer,
body.page-template-template-home #colophon {
    background-color: #000000 !important;
    background: #000000 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.page-template-template-home .site-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ==========================================================================
   SWIPER FEATURED PROJECTS CARD FIX
   ========================================================================== */
.hp-featured-swiper .swiper-slide {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.hp-featured-swiper .type-project {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #080808 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: all 0.4s ease !important;
}

.hp-featured-swiper .type-project:hover {
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8) !important;
}

.hp-featured-swiper .type-project .project-thumbnail-link {
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
}

.hp-featured-swiper .type-project .project-thumbnail {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.hp-featured-swiper .type-project .project-thumbnail-inner {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.hp-featured-swiper .type-project img,
.hp-featured-swiper .type-project video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.hp-featured-swiper .type-project .project-caption {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

.hp-featured-swiper .type-project .project-title,
.hp-featured-swiper .type-project .entry-title,
.hp-featured-swiper .type-project h3,
.hp-featured-swiper .type-project h2,
.hp-featured-swiper .type-project h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* ==========================================================================
   HOMEPAGE HEADER INVERT (TEXT/LOGO ONLY - NO LAYOUT OVERRIDES)
   ========================================================================== */
body.page-template-template-home .site-header a,
body.page-template-template-home .site-header nav a,
body.page-template-template-home .site-header .menu-item a,
body.page-template-template-home .site-header .site-title a,
body.page-template-template-home .site-header .site-logo a {
    color: #ffffff !important;
    font-family: 'Exo 2', sans-serif !important;
}

body.page-template-template-home .site-header .menu-item.current-menu-item a,
body.page-template-template-home .site-header .menu-item a:hover {
    color: #FFFFFF !important;
}

body.page-template-template-home .site-header .logo-dark {
    display: none !important;
}

body.page-template-template-home .site-header .logo-light {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.page-template-template-home .site-header .site-social a,
body.page-template-template-home .site-header .site-social i,
body.page-template-template-home .site-header .site-social svg,
body.page-template-template-home .site-header .site-social path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
    opacity: 1 !important;
}

/* ==========================================================================
   EDGE-TO-EDGE WIDE CONTAINERS & FULL WIDTH RESET (MATCHES MOCKUP DESIGN)
   ========================================================================== */
.hp-container {
    width: 100% !important;
    max-width: 1720px !important;
    margin: 0 auto !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
    box-sizing: border-box !important;
}

@media (max-width: 1024px) {
    .hp-container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

@media (max-width: 640px) {
    .hp-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Hero Section Alignment */
.hp-hero {
    position: relative;
    width: 100%;
    min-height: 85vh !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.hp-hero-content {
    max-width: 850px !important;
    text-align: left !important;
    margin-left: 0 !important;
}

.hp-hero-title {
    text-align: left !important;
    margin-left: 0 !important;
}

@media (max-width: 480px) {
    .hp-hero-title {
        font-size: clamp(22px, 9.8vw, 44px) !important;
        letter-spacing: -1.2px !important;
        line-height: 0.92 !important;
    }
}

@media (max-width: 768px) {
    /* BEFORE/AFTER TABS: ACCORDION CHIPS LAYOUT (ACTIVE EXPANDS, INACTIVE COLLAPSES) */
    .hp-ba-browser-header {
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
        padding: 4px 0 !important;
        position: relative !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .hp-ba-tabs-bar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        width: 100% !important;
        gap: 5px !important;
        padding: 4px 0 !important;
        overflow: hidden !important;
    }

    .hp-ba-tab-btn {
        transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border-radius: 0 !important;
    }

    /* INACTIVE TABS: COMPACT SHORT CHIPS */
    .hp-ba-tab-btn:not(.active) {
        flex: 0 0 68px !important;
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
        padding: 7px 4px !important;
        font-size: 10px !important;
        overflow: hidden !important;
        text-align: center !important;
        justify-content: center !important;
        opacity: 0.65 !important;
    }

    .hp-ba-tab-btn:not(.active) .hp-ba-tab-text {
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* ACTIVE TAB: EXPANDED FULL TEXT */
    .hp-ba-tab-btn.active {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 7px 10px !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        opacity: 1 !important;
        z-index: 5 !important;
    }

    .hp-ba-tab-btn.active .hp-ba-tab-text {
        display: inline-block !important;
        width: auto !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    /* BEFORE/AFTER OVERLAY BADGES ("3D РЕНДЕР" / "ФОТО") */
    .hp-ba-badge {
        top: 8px !important;
        padding: 4px 8px !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        border-radius: 4px !important;
        backdrop-filter: blur(8px) !important;
    }

    .hp-ba-badge-before {
        left: 8px !important;
    }

    .hp-ba-badge-after {
        right: 8px !important;
    }
}

.hp-hero-subtitle {
    text-align: left !important;
    margin-left: 0 !important;
}

.hp-hero-actions {
    justify-content: flex-start !important;
}

/* ==========================================================================
   CLEAN PROJECT CARDS (LIKE /work-grid/ - NO GREY BORDER BOXES)
   ========================================================================== */
.hp-featured-swiper .type-project {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.hp-featured-swiper .type-project .project-thumbnail {
    border-radius: 8px !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
}

.hp-featured-swiper .type-project .project-caption {
    padding: 14px 0 0 0 !important;
    background: transparent !important;
}

/* Services Cards - Clean No Grey Border Boxes */
.hp-service-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ==========================================================================
   PROCESS SECTION - HIGH FIDELITY 2-COLUMN LAYOUT WITH ARROWS
   ========================================================================== */
.hp-process-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 60px;
    align-items: flex-start;
}

@media (max-width: 1024px) {
    .hp-process-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.hp-process-steps-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

@media (max-width: 768px) {
    .hp-process-steps-row {
        flex-direction: column;
        gap: 30px;
    }
}

.hp-process-step-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hp-process-step-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.hp-process-step-num {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    font-family: inherit;
}

.hp-process-step-icon {
    font-size: 22px;
    opacity: 0.9;
}

.hp-process-arrow-line {
    flex: 1;
    height: 1px;
    border-top: 1px dashed rgba(255, 255, 255, 0.25);
    margin: 0 10px;
    position: relative;
    top: -4px;
}

.hp-process-step-title {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
}

.hp-process-step-desc {
    font-size: 13px;
    color: #888888;
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   HIDE PARENT THEME'S EMPTY SITE-HERO BLOCK ON HOMEPAGE TEMPLATE ONLY
   ========================================================================== */
body.page-template-template-home .site-hero,
body.page-template-template-home .no-title.site-hero {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* ==========================================================================
   INTERACTIVE FLUID LIQUID & DIGITAL MORPHING CURSOR
   ========================================================================== */
@keyframes hp-fluid-blob {
    0% {
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    }

    33% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    66% {
        border-radius: 35% 65% 50% 50% / 30% 60% 40% 70%;
    }

    100% {
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    }
}

@keyframes hp-aura-pulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.35);
        opacity: 0.85;
    }
}

.hp-hero-cursor-btn {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: auto !important;
    cursor: pointer !important;
    user-select: none !important;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.5);
    border-radius: 12px !important;
    background: radial-gradient(circle at 30% 30%, rgba(0, 245, 212, 0.4), rgba(157, 78, 221, 0.8) 70%, rgba(15, 12, 29, 0.95) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 245, 212, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(157, 78, 221, 0.5),
        inset 0 0 15px rgba(0, 245, 212, 0.3);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    height: 48px;
    min-width: 48px;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        padding 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-radius 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.5s ease,
        border-color 0.4s ease;
    will-change: transform, opacity, width, border-radius;
}

.hp-hero-cursor-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: 140%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(157, 78, 221, 0.4) 0%, rgba(0, 245, 212, 0.2) 60%, transparent 80%);
    transform: translate(-50%, -50%) scale(1);
    z-index: -1;
    animation: hp-aura-pulse 3s infinite ease-in-out;
    pointer-events: none;
}

.hp-hero-cursor-btn.visible {
    opacity: 1;
    visibility: visible;
}

.hp-hero-cursor-btn .hp-cursor-icon {
    font-size: 12px;
    color: #00F5D4;
    transition: transform 0.3s ease, color 0.3s ease;
    display: inline-block;
    text-shadow: 0 0 10px rgba(0, 245, 212, 0.8);
}

.hp-hero-cursor-btn .hp-cursor-text {
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    white-space: nowrap;
    transition: max-width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.4s ease,
        margin-left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-block;
    overflow: hidden;
}

/* MOVING STATE: Fluid floating cursor over video */
#hp-hero-cursor-btn.hp-cursor-moving,
.hp-hero-cursor-btn.hp-cursor-moving {
    padding: 0 14px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    animation: none !important;
    background: radial-gradient(circle at 30% 30%, rgba(0, 245, 212, 0.55), rgba(157, 78, 221, 0.9) 100%) !important;
    border-color: rgba(0, 245, 212, 0.8) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 245, 212, 0.6) !important;
}

.hp-hero-cursor-btn.hp-cursor-moving .hp-cursor-text {
    max-width: 0 !important;
    opacity: 0 !important;
    margin-left: 0 !important;
}

/* STOPPED / IDLE STATE: Snaps/morphs smoothly into a 12px rounded rectangle button */
#hp-hero-cursor-btn,
#hp-hero-cursor-btn.hp-cursor-stopped,
.hp-hero-cursor-btn.hp-cursor-stopped {
    padding: 0 24px !important;
    width: auto !important;
    height: 46px !important;
    border-radius: 12px !important;
    animation: none !important;
    background: rgba(10, 8, 20, 0.88) !important;
    border-color: rgba(177, 140, 255, 0.8) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(177, 140, 255, 0.5), inset 0 0 15px rgba(157, 78, 221, 0.3) !important;
}

.hp-hero-cursor-btn.hp-cursor-stopped .hp-cursor-text {
    max-width: 220px !important;
    opacity: 1 !important;
    margin-left: 10px !important;
}

/* ==========================================================================
   PROJECT CARDS CLICKABILITY & HOVER STYLING
   ========================================================================== */
.hp-project-card-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer !important;
}

/* Hide SCROLL / СКРОЛЛ label completely */
.hp-hero-scroll,
.site-hero-scroll,
.hero-scroll,
.scroll-label,
.hp-scroll-label,
.site-hero .scroll-down,
.site-hero .scroll {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}


/* ==========================================================================
   FEATURED PROJECTS SLIDER (16:10 WIDESCREEN CARDS & 3.3 PEEKING LAYOUT)
   ========================================================================== */
.hp-featured-projects {
    width: 100% !important;
    padding-bottom: 60px !important;
    overflow: hidden !important;
    position: relative !important;
}

.hp-featured-swiper-wrap {
    width: 100% !important;
    padding-left: clamp(24px, 4vw, 80px) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.hp-featured-swiper {
    width: 100% !important;
    overflow: visible !important;
    cursor: grab !important;
    -webkit-user-drag: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

.hp-featured-swiper:active {
    cursor: grabbing !important;
}

.hp-featured-swiper img,
.hp-featured-swiper a,
.hp-featured-swiper video {
    -webkit-user-drag: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

.hp-featured-swiper .swiper-slide,
.hp-featured-swiper .hp-project-slide {
    width: 29vw !important;
    max-width: 520px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hp-featured-swiper .type-project,
.hp-featured-swiper .hp-project-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    position: relative !important;
}

/* Widescreen 16:10 Aspect Ratio */
.hp-featured-swiper .project-thumbnail,
.hp-featured-swiper .hp-project-thumb {
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 62.5% !important;
    /* 16:10 Aspect Ratio */
    overflow: hidden !important;
    margin: 0 !important;
    position: relative !important;
    background: #111111 !important;
}

.hp-featured-swiper .project-thumbnail-inner {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.hp-featured-swiper .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.hp-featured-swiper .swiper-slide:hover .hp-project-demo-img {
    transform: scale(1.04) !important;
}

/* Captions: sit directly below image, inline style with em-dash */
.hp-featured-swiper .type-project .project-caption,
.hp-featured-swiper .hp-project-meta {
    position: static !important;
    display: block !important;
    width: 100% !important;
    padding: 14px 20px 0 0 !important;
    margin: 0 !important;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
}

html body .hp-featured-swiper .type-project .project-caption h3,
html body .hp-featured-swiper .type-project .project-caption h3 a,
html body .portfolio-grid .type-project .project-caption h3,
html body .portfolio-grid .type-project .project-caption h3 a,
html body .type-project .project-caption h3,
html body .type-project .project-caption h3 a,
html body .project-caption h3,
html body .project-caption h3 a {
    margin: 0 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
}

html body .hp-featured-swiper .type-project .project-caption h3 span.project-main-title,
html body .hp-featured-swiper .hp-project-title,
html body .portfolio-grid .type-project .project-caption h3 span.project-main-title,
html body .type-project .project-caption h3 span.project-main-title,
html body .project-caption .project-main-title,
html body h3 span.project-main-title {
    font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    display: inline-block !important;
    width: auto !important;
    max-width: max-content !important;
    text-decoration: none !important;
}

.hp-featured-swiper .type-project .project-caption p,
.hp-featured-swiper .type-project .project-caption .project-excerpt,
.hp-featured-swiper .type-project .project-caption .project-subtitle-block,
.hp-featured-swiper .type-project .project-category,
.hp-featured-swiper .type-project .project-meta,
.hp-featured-swiper .hp-project-location,
.portfolio-grid .type-project .project-caption p,
.portfolio-grid .type-project .project-caption .project-excerpt,
.portfolio-grid .type-project .project-caption .project-subtitle-block,
.type-project .project-caption p,
.type-project .project-caption .project-excerpt,
.type-project .project-caption .project-subtitle-block,
.project-caption .project-subtitle-block,
.project-subtitle-block,
span.project-subtitle-block {
    font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: var(--hp-project-sub-size, var(--font-h3, 14px)) !important;
    font-weight: 400 !important;
    color: #8A8A93 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: block !important;
    margin-top: 5px !important;
    margin-bottom: 0 !important;
    line-height: 1.35 !important;
}

.hp-featured-swiper .type-project .project-caption .project-excerpt::before,
.hp-featured-swiper .type-project .project-caption p::before,
.hp-featured-swiper .hp-project-location::before,
.project-caption p::before,
.project-caption .project-excerpt::before,
.project-caption .project-subtitle-block::before,
.project-subtitle-block::before,
span.project-subtitle-block::before,
.type-project .project-caption p::before,
.type-project .project-caption .project-subtitle-block::before,
.portfolio-grid .project-caption p::before,
.portfolio-area .project-caption p::before {
    content: "" !important;
    display: none !important;
}


/* ==========================================================================
   CAMERA LENS DIAL / INFINITE FOCUS RING SCROLLER
   ========================================================================== */
.hp-lens-dial-container {
    width: 100% !important;
    padding: 30px 50px 10px 50px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
}

.hp-lens-apple-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
}

.hp-lens-dial-track {
    position: relative !important;
    width: 100% !important;
    height: 40px !important;
    background: rgba(10, 10, 10, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 8px !important;
    cursor: grab !important;
    user-select: none !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05),
        0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

.hp-lens-dial-track:active {
    cursor: grabbing !important;
}

.hp-lens-ticks {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -240px !important;
    width: calc(100% + 480px) !important;
    background-image: repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.4) 0px,
            rgba(255, 255, 255, 0.4) 1px,
            transparent 1px,
            transparent 12px) !important;
    background-size: 12px 100% !important;
    opacity: 0.9 !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

.hp-lens-center-marker {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translate3d(-50%, 0, 0) !important;
    width: 2px !important;
    background: #00F5D4 !important;
    box-shadow: 0 0 10px rgba(0, 245, 212, 0.9), 0 0 20px rgba(157, 78, 221, 0.7) !important;
    z-index: 10 !important;
    pointer-events: none !important;
    border-radius: 1px !important;
}

/* ==========================================================================
   DYNAMIC SPACING & FONT STYLING CONTROLS (TALL THIN FONT + SECTION PADDING)
   ========================================================================== */

/* 1. Tall Thin High-Tech Font Option */
.hp-main.hp-font-thin .hp-hero-title,
.hp-main.hp-font-thin .hp-section-title,
.hp-main.hp-font-thin .hp-cta-title {
    font-weight: 300 !important;
    letter-spacing: 3px !important;
    line-height: 1.15 !important;
    text-transform: uppercase;
}

.hp-main.hp-font-thin .hp-hero-title {
    font-size: clamp(2.5rem, 5.8vw, 5.5rem) !important;
}

.hp-main.hp-font-bold .hp-hero-title,
.hp-main.hp-font-bold .hp-section-title {
    font-weight: 900 !important;
    letter-spacing: -1.5px !important;
}

/* 2. Dynamic Section Height Spacing */
.hp-main.hp-spacing-compact section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

.hp-main.hp-spacing-medium section {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
}

.hp-main.hp-spacing-spacious section {
    padding-top: 140px !important;
    padding-bottom: 140px !important;
}

.hp-main section.hp-hero {
    padding-top: 100px !important;
    /* Keep hero header space */
}

/* 4. Global Design System Typography & Color Controls */
.hp-main .hp-hero-title {
    font-size: var(--hp-h1-size, clamp(2.5rem, 5.5vw, 5.2rem)) !important;
}

.hp-main .hp-section-title,
.hp-main .hp-why-title {
    font-size: var(--hp-h2-size, clamp(1.8rem, 3.2vw, 3rem)) !important;
}

.hp-main .hp-hero-subtitle {
    font-size: var(--hp-body-size, 18px) !important;
}

.hp-main .hp-tag {
    font-size: var(--hp-tags-size, 13px) !important;
}

/* High-Specificity Featured Projects Title & Subtitle/Caption Size Controls */
html body .hp-main .hp-featured-swiper .type-project .project-caption h3,
html body .hp-main .hp-featured-swiper .type-project .project-caption h3 a,
html body .hp-main .hp-featured-swiper .type-project .project-caption h3 span,
html body .hp-main .hp-featured-swiper .hp-project-title,
html body .hp-main .project-caption h3,
html body .hp-main .project-caption h3 a {
    font-size: var(--hp-project-title-size, var(--font-h2, 20px)) !important;
}

html body .hp-main .hp-featured-swiper .type-project .project-caption p,
html body .hp-main .hp-featured-swiper .type-project .project-caption .project-excerpt,
html body .hp-main .hp-featured-swiper .type-project .project-category,
html body .hp-main .hp-featured-swiper .type-project .project-meta,
html body .hp-main .hp-featured-swiper .hp-project-location,
html body .hp-main .project-caption p {
    font-size: var(--hp-project-sub-size, var(--font-h1, 14px)) !important;
    color: #9CA3AF !important;
    line-height: 1.4 !important;
}

/* Color Palette Overrides */
.hp-main.hp-col-h1-white .hp-hero-title,
.hp-main.hp-col-h1-white .hp-section-title,
.hp-main.hp-col-h1-white .hp-why-title {
    color: #FFFFFF !important;
}

.hp-main.hp-col-h1-silver .hp-hero-title,
.hp-main.hp-col-h1-silver .hp-section-title,
.hp-main.hp-col-h1-silver .hp-why-title {
    color: #E2E8F0 !important;
}

.hp-main.hp-col-h1-gray .hp-hero-title,
.hp-main.hp-col-h1-gray .hp-section-title,
.hp-main.hp-col-h1-gray .hp-why-title {
    color: #CBD5E1 !important;
}

.hp-main.hp-col-body-bright_gray .hp-hero-subtitle,
.hp-main.hp-col-body-bright_gray .hp-why-desc {
    color: #D1D5DB !important;
}

.hp-main.hp-col-body-medium_gray .hp-hero-subtitle,
.hp-main.hp-col-body-medium_gray .hp-why-desc {
    color: #9CA3AF !important;
}

.hp-main.hp-col-body-muted_gray .hp-hero-subtitle,
.hp-main.hp-col-body-muted_gray .hp-why-desc {
    color: #6B7280 !important;
}

.hp-main.hp-col-body-white .hp-hero-subtitle,
.hp-main.hp-col-body-white .hp-why-desc {
    color: #FFFFFF !important;
}

.hp-main.hp-col-tags-purple .hp-tag {
    color: #A855F7 !important;
}

.hp-main.hp-col-tags-cyan .hp-tag {
    color: #00F5D4 !important;
}

.hp-main.hp-col-tags-emerald .hp-tag {
    color: #10B981 !important;
}

.hp-main.hp-col-tags-orange .hp-tag {
    color: #F97316 !important;
}

.hp-main.hp-col-tags-white .hp-tag {
    color: #FFFFFF !important;
}

/* 3. Partner Logos Gallery (Clean Floating Logos, No Boxes) */
.hp-clients-gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 45px 65px;
    margin-top: 50px;
}

.hp-client-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    transition: transform 0.3s ease;
}

.hp-client-logo-item:hover {
    transform: translateY(-2px) scale(1.06);
}

.hp-client-logo-img {
    height: auto;
    max-height: var(--client-logo-height, 50px) !important;
    max-width: 220px;
    object-fit: contain;
    filter: brightness(0) invert(1) opacity(0.8);
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.hp-client-logo-item:hover .hp-client-logo-img {
    filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
}

.hp-clients-shortcode {
    width: 100%;
    margin-top: 40px;
}

/* --- TELEGRAM CONTACT MODAL STYLES --- */
.hp-modal-overlay,
#hp-contact-modal,
#hp-pres-modal,
#hp-showreel-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(3, 3, 5, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.35s ease, visibility 0.35s ease !important;
    padding: 20px !important;
}

.hp-modal-overlay.hp-modal-active,
#hp-contact-modal.hp-modal-active,
#hp-pres-modal.hp-modal-active,
#hp-showreel-modal.hp-modal-active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.hp-modal-box {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: rgba(15, 15, 22, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 40px 35px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(168, 85, 247, 0.15);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hp-modal-overlay.hp-modal-active .hp-modal-box {
    transform: translateY(0) scale(1);
}

.hp-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.hp-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.hp-modal-header {
    text-align: center;
    margin-bottom: 25px;
}

.hp-modal-title {
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
    margin-top: 10px;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.hp-modal-desc {
    font-size: 14px;
    color: #A0A0A0;
    line-height: 1.5;
}

.hp-form-group {
    margin-bottom: 15px;
}

.hp-form-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 18px;
    color: #ffffff;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.hp-form-input:focus {
    border-color: #A855F7;
    background: rgba(255, 255, 255, 0.07);
}

select.hp-form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A0A0A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 14px !important;
    padding-right: 40px !important;
    cursor: pointer !important;
    color: #A0A0A0 !important;
}

select.hp-form-select:focus,
select.hp-form-select:valid {
    color: #ffffff !important;
}

select.hp-form-select option {
    background: #12141c !important;
    color: #ffffff !important;
    padding: 10px !important;
}

.hp-form-consent {
    margin-top: 14px;
    margin-bottom: 12px;
    text-align: left;
}

.hp-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 12px;
    color: #A0A0A0;
    line-height: 1.45;
}

.hp-checkbox-label input[type="checkbox"] {
    accent-color: #A855F7;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
}

.hp-privacy-link,
.hp-footer-privacy-link {
    color: #A855F7 !important;
    text-decoration: underline !important;
    transition: color 0.3s ease !important;
}

.hp-privacy-link:hover,
.hp-footer-privacy-link:hover {
    color: #00F5D4 !important;
}

.hp-footer-privacy-link {
    font-size: 12px;
    display: inline-block;
    margin-top: 6px;
    opacity: 0.85;
}

.hp-btn-full {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    margin-top: 10px;
}

.hp-modal-divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

.hp-modal-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.hp-modal-divider span {
    position: relative;
    background: #0f0f16;
    padding: 0 12px;
    font-size: 11px;
    text-transform: uppercase;
    color: #666666;
    letter-spacing: 1px;
}






/* ==========================================================================
   Е Д И Н Ы Й   С Т А Н Д А Р Т   К Н О П О К (ОДИНАКОВЫЙ РАЗМЕР И СТИЛЬ)
   ========================================================================== */
.hp-btn,
.hp-hero-cursor-btn,
.hp-btn-outline,
.hp-cta-btn,
.hp-showreel-btn,
.hp-btn-solid,
.hp-btn-download {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    line-height: 48px !important;
    padding: 0 32px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    transition: all 0.3s ease !important;
}

.hp-arrow-icon {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   INTERACTIVE FLOATING CURSOR - HIGH SPEED EASE-IN EASE-OUT RESPONSIVENESS
   ========================================================================== */
#hp-hero-cursor-btn,
.hp-hero-cursor-btn {
    transition: opacity 0.25s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
    will-change: transform !important;
}

/* ==========================================================================
   SECTION 4: PROCESS PIPELINE (JOB_code23 Integration)
   ========================================================================== */
.process-section {
    position: relative !important;
    width: 100% !important;
    padding: 80px 0 !important;
    overflow: hidden !important;
}

.process-section .header-container,
.process-section .hp-section-header,
.hp-process .header-container,
.hp-process .hp-section-header {
    position: relative !important;
    z-index: 10 !important;
}

.process-section .dot-matrix-bg {
    position: absolute !important;
    inset: 0 !important;
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 80%) !important;
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 80%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.process-section .mouse-glow {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 450px !important;
    height: 220px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, rgba(77, 82, 255, 0.15) 40%, transparent 70%) !important;
    filter: blur(80px) !important;
    pointer-events: none !important;
    opacity: 0;
    z-index: 1 !important;
    transition: opacity 0.4s ease !important;
    will-change: transform;
    mix-blend-mode: screen !important;
}

.supervisor-bar {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 5px 0 !important;
    height: 36px !important;
    z-index: 5 !important;
}

.supervisor-bar .line {
    position: absolute !important;
    width: 100% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.3), rgba(77, 82, 255, 0.3), transparent) !important;
}

.supervisor-bar .line::after {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: 0 !important;
    width: 160px !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, #FFFFFF, #A855F7, transparent) !important;
    animation: sweep 7s linear infinite !important;
}

@keyframes sweep {
    0% {
        left: -15%;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        left: 115%;
        opacity: 0;
    }
}

.supervisor-bar .label {
    position: relative !important;
    z-index: 2 !important;
    background: #050507 !important;
    padding: 0 28px !important;
    font-size: var(--proc-super-font-size, 12px) !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: #8A8A93 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    line-height: 32px !important;
    transition: all 0.35s ease !important;
}

.supervisor-bar:hover .label {
    color: #FFFFFF !important;
    border-color: rgba(168, 85, 247, 0.6) !important;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.35) !important;
}

.flow-field {
    position: relative !important;
    width: 100% !important;
    height: 200px !important;
    margin: 8px 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    z-index: 5 !important;
}

.connections-svg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.flow-line {
    stroke: rgba(255, 255, 255, 0.12) !important;
    stroke-width: 1.8 !important;
    fill: none !important;
    transition: stroke 0.4s ease, stroke-width 0.4s ease, filter 0.4s ease !important;
}

.flow-line.active {
    stroke: #A855F7 !important;
    stroke-width: 2.2 !important;
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.8)) !important;
}

.flow-pulse {
    stroke: url(#pulse-grad-idle) !important;
    stroke-width: 2 !important;
    fill: none !important;
    stroke-dasharray: 14, 180 !important;
    opacity: 0.4 !important;
    animation: flowDash 3.5s linear infinite !important;
    transition: all 0.4s ease !important;
}

.flow-pulse.active {
    stroke: url(#pulse-grad-active) !important;
    stroke-width: 2.8 !important;
    opacity: 1 !important;
    animation: flowDash 1.8s linear infinite !important;
    filter: drop-shadow(0 0 6px #A855F7) !important;
}

@keyframes flowDash {
    from {
        stroke-dashoffset: 194;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.flow-column {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 25px !important;
    z-index: 4 !important;
}

.flow-node {
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    height: 50px !important;
    padding: 0 24px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(18, 20, 29, 0.85) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12), 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    user-select: none !important;
    white-space: nowrap !important;
}

.node-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 2px !important;
    background: #4B5563 !important;
    transition: all 0.3s ease !important;
}

.node-text {
    font-size: var(--proc-node-font-size, 13px) !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #D1D5DB !important;
    transition: color 0.3s ease !important;
}

.flow-node:hover {
    border-color: rgba(168, 85, 247, 0.8) !important;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(26, 28, 42, 0.95) 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(168, 85, 247, 0.3) !important;
}

.flow-node:hover .node-dot {
    background: #A855F7 !important;
    box-shadow: 0 0 10px #A855F7 !important;
}

.flow-node:hover .node-text {
    color: #FFFFFF !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6) !important;
}

.flow-field.has-active .flow-node:not(:hover) {
    opacity: 0.3 !important;
}

/* Process Pipeline SVG Wires (Glowing Neon Stroke & Pulse) */
.wire-path {
    stroke: rgba(168, 85, 247, 0.45) !important;
    stroke-width: 1.8px !important;
    fill: none !important;
    filter: drop-shadow(0 0 3px rgba(168, 85, 247, 0.5)) !important;
    transition: stroke 0.3s ease, stroke-width 0.3s ease, filter 0.3s ease !important;
}

.pulse-path {
    stroke-width: 2.2px !important;
    fill: none !important;
    stroke-dasharray: 14 120 !important;
    animation: hp-wire-pulse 3.5s linear infinite !important;
    filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.8)) !important;
}

@keyframes hp-wire-pulse {
    from {
        stroke-dashoffset: 280;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.flow-field:hover .wire-path {
    stroke: rgba(168, 85, 247, 0.7) !important;
    filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.7)) !important;
}

/* ==========================================================================
   SUPERVISOR BARS & SILKY SMOOTH LASER SWEEP ANIMATION
   ========================================================================== */
.supervisor-bar {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 25px 0 !important;
    height: 40px !important;
    z-index: 5 !important;
    overflow: hidden !important;
    width: 100% !important;
}

.supervisor-bar .line {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 100% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.3), rgba(77, 82, 255, 0.3), transparent) !important;
}

.supervisor-bar .line::after {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: 0 !important;
    width: 180px !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, #FFFFFF 40%, #A855F7 70%, transparent) !important;
    animation: hp-laser-sweep 5s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
    will-change: transform, opacity !important;
}

@keyframes hp-laser-sweep {
    0% {
        transform: translateX(-200px);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        transform: translateX(1400px);
        opacity: 0;
    }
}

/* ==========================================================================
   SECTION 6: CLIENT LOGOS FULL-WIDTH EDGE-TO-EDGE WITH FADING BLACK MASK
   ========================================================================== */
.hp-clients {
    position: relative !important;
    width: 100% !important;
    padding: 80px 0 !important;
    background: #050507 !important;
    overflow: hidden !important;
}

.hp-clients-swiper-wrap {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: 40px !important;
    padding: 20px 0 !important;
    overflow: hidden !important;
    mask-image: linear-gradient(to right, transparent 0%, #000000 15%, #000000 85%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000000 15%, #000000 85%, transparent 100%) !important;
}

.hp-clients-swiper-wrap::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 240px !important;
    height: 100% !important;
    background: linear-gradient(to right, #050507 0%, transparent 100%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

.hp-clients-swiper-wrap::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 240px !important;
    height: 100% !important;
    background: linear-gradient(to left, #050507 0%, transparent 100%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

.hp-client-slide {
    width: auto !important;
    padding: 0 40px !important;
    opacity: 0.65 !important;
    transition: opacity 0.3s ease, filter 0.3s ease !important;
}

.hp-client-slide:hover {
    opacity: 1 !important;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4)) !important;
}

/* ==========================================================================
   SECTION 7 & 9 CUSTOM LOGOS AND FOOTER STYLING
   ========================================================================== */
.hp-footer {
    position: relative !important;
    width: 100% !important;
    padding: 70px 0 50px 0 !important;
    background: #050507 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    overflow: hidden !important;
}

.hp-footer-grid {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 40px !important;
    flex-wrap: wrap !important;
}

.hp-footer-brand {
    flex: 1 1 280px !important;
}

.hp-footer-nav {
    flex: 2 1 400px !important;
    display: flex !important;
    gap: 50px !important;
    flex-wrap: wrap !important;
}

.hp-footer-right-box {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: fit-content !important;
    min-width: max-content !important;
    gap: 6px !important;
}

.hp-footer-phone {
    font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: clamp(22px, 2.5vw, 32px) !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    transition: color 0.3s ease, opacity 0.3s ease !important;
    white-space: nowrap !important;
}

.hp-footer-phone:hover {
    color: #A78BFA !important;
    opacity: 0.95 !important;
}

.hp-footer-social-icons {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 6px !important;
    gap: 0 !important;
}

.hp-footer-icon-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #9CA3AF !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.hp-footer-icon-link:hover {
    background: transparent !important;
    border: none !important;
    color: #FFFFFF !important;
    transform: scale(1.15) !important;
    box-shadow: none !important;
}

.hp-footer-icon-link svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    fill: currentColor !important;
    display: block !important;
    flex-shrink: 0 !important;
}

@media (max-width: 768px) {
    .hp-footer-grid {
        flex-direction: column !important;
        gap: 35px !important;
    }

    .hp-footer-right-box {
        align-items: flex-start !important;
        width: 100% !important;
    }

    .hp-footer-social-icons {
        justify-content: flex-start !important;
    }
}

.hp-why-center-logo {
    position: relative !important;
    z-index: 5 !important;
    object-fit: contain !important;
}

.hp-footer-logo-img {
    max-width: 200px !important;
    height: auto !important;
    display: block !important;
    margin-bottom: 16px !important;
}

/* ==========================================================================
   SECTION 8: CTA BANNER ("ЕСТЬ ИДЕЯ?") MATCHING REFERENCE
   ========================================================================== */
.hp-cta-banner {
    position: relative !important;
    width: 100% !important;
    padding: 90px 0 !important;
    background: #0B0817 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    border: none !important;
}

.hp-cta-banner:not(.has-custom-bg) .hp-cta-mesh-bg {
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(circle at 20% 50%, rgba(168, 85, 247, 0.28) 0%, transparent 60%),
        radial-gradient(circle at 80% 50%, rgba(77, 82, 255, 0.22) 0%, transparent 65%),
        radial-gradient(ellipse at 50% 100%, rgba(157, 78, 221, 0.3) 0%, transparent 70%),
        radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0 0 / 28px 28px !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.hp-cta-card {
    position: relative !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 40px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.hp-cta-title {
    font-family: var(--font-secondary, var(--font-primary, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif)) !important;
    font-size: 36px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    margin: 0 0 10px 0 !important;
    letter-spacing: -0.02em !important;
}

.hp-cta-subtitle {
    font-size: 15px !important;
    color: #C3C7D4 !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

.hp-cta-btns {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

.hp-cta-btns .hp-btn-solid {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 52px !important;
    padding: 0 32px !important;
    border-radius: 12px !important;
    background: #EBEBEF !important;
    color: #050507 !important;
    border: none !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.hp-cta-btns .hp-btn-solid:hover {
    background: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 35px rgba(255, 255, 255, 0.25) !important;
}

.hp-cta-btns .hp-btn-download {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    height: 52px !important;
    padding: 0 32px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(12px) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.hp-cta-btns .hp-btn-download:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

.hp-icon-dl {
    font-size: 16px !important;
}

/* ==========================================================================
   5. STATS SECTION ALIGNMENT & TYPOGRAPHY
   ========================================================================== */
.hp-stats {
    padding: 60px 0 !important;
}

.hp-stats-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 60px !important;
}

.hp-stats-header {
    flex-shrink: 0 !important;
    min-width: 260px !important;
}

.hp-stats-header .hp-tag {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    display: inline-block !important;
}

.hp-stats-title {
    font-size: clamp(2.4rem, 3.8vw, 3.2rem) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.5px !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase !important;
}

.hp-stats-list {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    flex-grow: 1 !important;
    gap: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hp-stat-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.hp-stat-val {
    font-size: var(--stat-val-size, var(--font-h5, 80px)) !important;
    font-weight: 800 !important;
    line-height: 0.88 !important;
    color: #ffffff !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}

.hp-stat-lbl {
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    color: #9CA3AF !important;
    margin: 0 !important;
}

/* ==========================================================================
   6. CLIENT LOGOS & PARTNERS (.hp-clients) — REMOVE GRAY OVERLAY & ENLARGE LOGOS
   ========================================================================== */
.hp-clients {
    position: relative !important;
    width: 100% !important;
    padding: 40px 0 30px 0 !important;
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.hp-clients .hp-section-header {
    margin-bottom: 12px !important;
}

.hp-clients-swiper-wrap,
.hp-clients-swiper,
.hp-client-slide,
.hp-client-logo-item,
.hp-client-text-item {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.hp-clients-swiper-wrap {
    width: 100% !important;
    margin-top: 12px !important;
}

.hp-clients-swiper {
    width: 100% !important;
    padding: 15px 0 !important;
}

.hp-client-slide {
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 25px !important;
}

.hp-client-logo-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: var(--client-logo-height, 100px) !important;
    max-height: none !important;
}

.hp-client-logo-img {
    height: var(--client-logo-height, 100px) !important;
    max-height: var(--client-logo-height, 100px) !important;
    width: auto !important;
    max-width: 500px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(0.95) !important;
    opacity: 0.9 !important;
    transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease !important;
}

.hp-client-logo-img:hover {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
    transform: scale(1.08) !important;
}

.hp-client-text-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 20px !important;
}

.hp-client-text-logo {
    font-size: clamp(1.4rem, 2.5vw, 2.2rem) !important;
    font-weight: 800 !important;
    letter-spacing: 2.5px !important;
    color: #E5E7EB !important;
    text-transform: uppercase !important;
    opacity: 0.75 !important;
    transition: opacity 0.3s ease, color 0.3s ease, transform 0.3s ease !important;
    white-space: nowrap !important;
}

.hp-client-text-logo:hover {
    color: #FFFFFF !important;
    opacity: 1 !important;
    transform: scale(1.06) !important;
}

/* ==========================================================================
   FORCE CONTACT BUTTONS CLICKABILITY & HIGH Z-INDEX
   ========================================================================== */
.hp-cta-card,
.hp-cta-btns,
.hp-btn-solid,
.hp-btn-why-card,
.hp-btn-download,
button[onclick*="hpOpenContactModal"] {
    position: relative !important;
    z-index: 99 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

#hp-contact-modal.hp-modal-active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 999999 !important;
}

/* ==========================================================================
   7. WHY US SECTION (.hp-why-us) — REMOVE CARD FRAME & ENLARGE NODE LABELS
   ========================================================================== */
.hp-why-card {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    backdrop-filter: none !important;
}

.hp-why-card-title,
.hp-why-card-subtitle,
.hp-btn-why-card {
    display: none !important;
}

.hp-why-info-block {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 440px !important;
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.hp-why-info-text {
    font-family: inherit !important;
    font-size: var(--why-desc-size, 14px) !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    color: #9CA3AF !important;
    text-align: left !important;
    direction: ltr !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transition: opacity 0.35s ease, transform 0.35s ease !important;
}

/* Interactive spheres & arcs zone hover */
.spheres-wrapper,
.arcs-wrapper {
    pointer-events: auto !important;
}

.sphere,
.arc {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.sphere {
    z-index: 6 !important;
}

.arc {
    z-index: 7 !important;
}

/* Enlarge sector node labels (КОНЦЕПЦИЯ, ТЕХНОЛОГИЯ, ЧЕЛОВЕК, АЛГОРИТМ) */
.sector-node {
    z-index: 15 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Invisible hit area bridges connecting text nodes directly to spheres */
.sector-node::before {
    content: '' !important;
    position: absolute !important;
    pointer-events: auto !important;
    background: transparent !important;
}

.sector-node.node-top::before {
    bottom: -30px !important;
    left: -30px !important;
    right: -30px !important;
    height: 45px !important;
}

.sector-node.node-bottom::before {
    top: -30px !important;
    left: -30px !important;
    right: -30px !important;
    height: 45px !important;
}

.sector-node.node-left::before {
    right: -30px !important;
    top: -30px !important;
    bottom: -30px !important;
    width: 45px !important;
}

.sector-node.node-right::before {
    left: -30px !important;
    top: -30px !important;
    bottom: -30px !important;
    width: 45px !important;
}

/* Smooth ease-in-out transitions across all interactive elements */
.sphere,
.arc,
.sector-node,
.sector-node .label-text,
.hp-why-info-text,
.hp-why-center-logo,
.center-title {
    transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.sector-node .label-text {
    font-family: inherit !important;
    font-size: var(--font-h1, 14px) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    opacity: 0.85 !important;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.3) !important;
    transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.sector-node.node-top .label-text,
.sector-node.node-bottom .label-text,
.sector-node.node-left .label-text,
.sector-node.node-right .label-text {
    letter-spacing: 1px !important;
}

.sector-node:hover .label-text,
.sector-node.active .label-text,
.interactive-widget.has-active .sector-node.active .label-text,
.interactive-widget.has-active .sector-node[data-sphere="top"].active .label-text,
.interactive-widget.has-active .sector-node[data-sphere="right"].active .label-text,
.interactive-widget.has-active .sector-node[data-sphere="bottom"].active .label-text,
.interactive-widget.has-active .sector-node[data-sphere="left"].active .label-text {
    color: #FFFFFF !important;
    opacity: 1 !important;
    text-shadow: 0 0 20px #A855F7, 0 0 35px #C084FC, 0 0 10px #FFFFFF !important;
    transform: scale(1.08) !important;
}

.sector-node.node-left:hover .label-text,
.sector-node.node-left.active .label-text,
.interactive-widget.has-active .sector-node.node-left.active .label-text,
.sector-node.node-right:hover .label-text,
.sector-node.node-right.active .label-text,
.interactive-widget.has-active .sector-node.node-right.active .label-text {
    transform: scale(1.08) !important;
}

/* Dim non-active sector nodes smoothly */
.interactive-widget.has-active .sector-node:not(.active) .label-text {
    opacity: 0.3 !important;
    color: #6B7280 !important;
    text-shadow: none !important;
}

/* Sphere and arc hover glow animations & adjacent connections */
.sphere {
    transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.sphere.active {
    opacity: 0.95 !important;
    filter: drop-shadow(0 0 25px rgba(168, 85, 247, 0.85)) !important;
    transform: scale(1.05) !important;
}

.arc {
    transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.arc.active {
    opacity: 1 !important;
    filter: drop-shadow(0 0 20px #A855F7) !important;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY HIERARCHY (H1 - H5 System)
   - Min Font Size: --font-min (>= 14px, not smaller than menu)
   - H1: --font-h1 (Same size as menu, 14px)
   - H2: --font-h2 (20px)
   - H3: --font-h3 (32px)
   - H4: --font-h4 (48px)
   - H5: --font-h5 (80px - LARGEST Hero Title)
   ========================================================================== */

/* 1. Menu & H1 (Same size as menu on Homepage) */
.page-template-template-home .hp-h1,
.page-template-template-home .hp-tag,
.page-template-template-home .hp-tag-purple {
    font-size: var(--font-h1, 14px) !important;
}

/* 2. H2 (Small headings / sub-labels) */
.page-template-template-home h2.hp-h2,
.page-template-template-home .h2 {
    font-size: var(--font-h2, 20px) !important;
}

/* HIGH SPECIFICITY FONT SIZE CONTROL FOR WHY US DESCRIPTION FROM ADMIN ACF */
.hp-why-us .hp-why-desc,
.hp-why-us .hp-why-info-text,
.page-template-template-home .hp-why-us .hp-why-desc,
.page-template-template-home .hp-why-us .hp-why-info-text,
.hp-main .hp-why-us .hp-why-desc,
.hp-main .hp-why-us .hp-why-info-text {
    font-size: var(--why-desc-size, 14px) !important;
}

.hp-stat-lbl {
    font-size: var(--stat-lbl-size, var(--font-h1, 14px)) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #9CA3AF !important;
}

/* 3. H3 (Medium section titles) */
.page-template-template-home .h3,
.page-template-template-home .hp-h3,
.page-template-template-home .hp-section-title,
.page-template-template-home .hp-clients-title {
    font-size: var(--font-h3, 32px) !important;
}

/* 4. H4 (Large section titles) */
.page-template-template-home .h4,
.page-template-template-home .hp-h4,
.page-template-template-home .hp-stats-title,
.page-template-template-home .hp-cta-title {
    font-size: var(--font-h4, 48px) !important;
}

/* 5. H5 — САМЫЙ КРУПНЫЙ ЗАГОЛОВОК (Hero Title) */
@media (min-width: 769px) {
    .page-template-template-home .h5,
    .page-template-template-home .hp-h5,
    .page-template-template-home .hp-hero-title,
    .page-template-template-home h1.hp-hero-title {
        font-size: var(--font-h5, 80px) !important;
    }
}
@media (max-width: 768px) {
    .page-template-template-home .h5,
    .page-template-template-home .hp-h5,
    .page-template-template-home .hp-hero-title,
    .page-template-template-home h1.hp-hero-title {
        font-size: clamp(26px, 12.2vw, 52px) !important;
    }
}

/* 6. Enforce minimum font size on homepage elements */
.page-template-template-home .hp-main p,
.page-template-template-home .hp-main span,
.page-template-template-home .hp-main a,
.page-template-template-home .hp-main div,
.page-template-template-home .hp-main label,
.page-template-template-home .hp-main input,
.page-template-template-home .hp-main button {
    font-size: max(var(--font-min, 14px), 14px);
}

.hp-cta-subtitle {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   FLUID 4K & WIDESCREEN CONTAINER (Контент в края на 100%, 150%, 200% и 4K)
   ========================================================================== */
.page-template-template-home .hp-container,
.page-template-template-home .container {
    width: 100% !important;
    max-width: 1840px !important;
    padding-left: clamp(24px, 4vw, 80px) !important;
    padding-right: clamp(24px, 4vw, 80px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

@media (min-width: 1921px) {

    .page-template-template-home .hp-container,
    .page-template-template-home .container {
        max-width: 92vw !important;
    }
}

/* ==========================================================================
   BEFORE-AFTER COMPARISON SLIDER (Styled matching Section 4 "Process")
   ========================================================================== */
.hp-before-after {
    padding: 90px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.hp-before-after .hp-section-header {
    text-align: left !important;
    margin-bottom: 30px !important;
}

.hp-ba-browser-window {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* TABS ATTACHED FLUSH TO TOP EDGE OF SLIDER PHOTO FRAME (NO GAP, NO BROWSER BAR BOX) */
.hp-ba-browser-header {
    display: flex !important;
    align-items: flex-end !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: none !important;
    user-select: none !important;
}

.hp-ba-tabs-bar {
    display: flex !important;
    align-items: flex-end !important;
    gap: 6px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.hp-ba-tabs-bar::-webkit-scrollbar {
    display: none !important;
}

.hp-ba-tab-btn {
    flex: 0 0 auto !important;
    min-width: 140px !important;
    max-width: 280px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: none !important;
    border-top: 2px solid transparent !important;
    color: #9CA3AF !important;
    padding: 11px 22px 10px 22px !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-family: inherit !important;
    outline: none !important;
    position: relative !important;
    top: 1px !important;
    white-space: nowrap !important;
    text-align: center !important;
    text-transform: uppercase !important;
    z-index: 2 !important;
}

.hp-ba-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-top: 2px solid rgba(255, 255, 255, 0.4) !important;
}

.hp-ba-tab-btn.active {
    background: #060609 !important;
    border: none !important;
    border-top: 2px solid #ffffff !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    z-index: 5 !important;
}

/* SLIDER WRAPPER - FLUSH CONNECTED TO ATTACHED TABS (FIXED 2:1 ASPECT RATIO) */
.hp-ba-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 2 / 1 !important;
    border-radius: 0 12px 12px 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), 0 0 30px rgba(255, 255, 255, 0.03) !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    cursor: col-resize !important;
    z-index: 1 !important;
}

/* MULTI-SLIDE TABS TRANSITION */
.hp-ba-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.35s ease, visibility 0.35s ease !important;
    pointer-events: none !important;
}

.hp-ba-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.hp-ba-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    pointer-events: none !important;
}

.hp-ba-img-after {
    z-index: 1 !important;
}

.hp-ba-img-before {
    z-index: 2 !important;
    will-change: clip-path, -webkit-clip-path !important;
}

/* MONOCHROME BADGES */
.hp-ba-badge {
    position: absolute !important;
    top: 20px !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

.hp-ba-badge-before {
    left: 20px !important;
    background: rgba(12, 12, 16, 0.75) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

.hp-ba-badge-after {
    right: 20px !important;
    background: rgba(12, 12, 16, 0.75) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* MONOCHROME CURTAIN LINE */
.hp-ba-handle {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 48px !important;
    margin-left: -24px !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: col-resize !important;
    touch-action: none !important;
}

.hp-ba-line {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 2px !important;
    margin-left: -1px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.15) 100%) !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(0, 0, 0, 0.8) !important;
}

/* HERO-STYLE INTERACTIVE BUTTON HANDLE */
.hp-ba-button {
    position: relative !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 30% 30%, rgba(0, 245, 212, 0.45), rgba(157, 78, 221, 0.85) 70%, rgba(15, 12, 29, 0.95) 100%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(0, 245, 212, 0.6) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(157, 78, 221, 0.5), inset 0 0 15px rgba(0, 245, 212, 0.3) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
    z-index: 11 !important;
}

.hp-ba-button::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 140% !important;
    height: 140% !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(157, 78, 221, 0.4) 0%, rgba(0, 245, 212, 0.25) 60%, transparent 80%) !important;
    transform: translate(-50%, -50%) scale(1) !important;
    z-index: -1 !important;
    animation: hp-aura-pulse 3s infinite ease-in-out !important;
    pointer-events: none !important;
}

.hp-ba-handle:hover .hp-ba-button,
.hp-ba-handle.active .hp-ba-button {
    transform: scale(1.15) !important;
    border-color: #00F5D4 !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 245, 212, 0.7), inset 0 0 20px rgba(157, 78, 221, 0.5) !important;
}

.hp-ba-arrow {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(0, 245, 212, 0.8), 0 0 15px rgba(157, 78, 221, 0.6) !important;
    display: inline-block !important;
    margin-left: 2px !important;
}

@media (max-width: 768px) {
    .hp-ba-wrapper {
        height: auto !important;
        aspect-ratio: 2 / 1 !important;
    }
}

/* 7. Process Section Header Position & Tight Distance to Art Direction Line */
.hp-process .header-container {
    margin-top: 20px !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
}

.hp-process .hp-section-header,
.hp-process .hp-section-subtitle {
    margin-bottom: 6px !important;
}

.hp-process .supervisor-bar {
    margin-top: 6px !important;
}

/* 8. Process Section Smooth Gradient Edge Fading (Мягкое размытие и плавный градиентный переход к краям) */
.process-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 120px !important;
    background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.85) 40%, transparent 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.process-section::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 120px !important;
    background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.85) 40%, transparent 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.process-section .dot-matrix-bg {
    mask-image: radial-gradient(ellipse 85% 65% at 50% 50%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%) !important;
    -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 50%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%) !important;
}

/* ==========================================================================
   ADVANCED INTERACTIVE VFX ICON CARDS (ICON_code1 Integration)
   ========================================================================== */
:root {
    --pink: #d033ff;
    --blue: #00d2ff;
    --orange: #ff6600;
    --green: #00ff88;
}

.hp-vfx-icon-box {
    position: relative !important;
    width: 100% !important;
    height: 180px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    perspective: 1000px !important;
    transform-style: preserve-3d !important;
    margin-bottom: 20px !important;
}

.hp-vfx-icon-box.has-custom-media {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6) !important;
    transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
}

.hp-service-card:hover .hp-vfx-icon-box.has-custom-media {
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.2) !important;
}

.hp-vfx-icon-box svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 170px !important;
    max-height: 170px !important;
    overflow: visible !important;
}

/* Custom Uploaded Service Video Styles (Cinematic 16:9 Widescreen) */
.hp-service-card-video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    border-radius: 13px !important;
    display: block !important;
    border: none !important;
    transform: none !important;
    transition: filter 0.4s ease !important;
    z-index: 5 !important;
    position: relative !important;
}

.hp-service-card:hover .hp-service-card-video {
    transform: none !important;
    filter: brightness(1.08) contrast(1.03) !important;
}

/* Glow Effects */
.hp-service-card .glow {
    transition: filter 0.4s ease !important;
}

.hp-service-card:hover .glow-pink {
    filter: drop-shadow(0 0 14px rgba(208, 51, 255, 0.9)) !important;
}

.hp-service-card:hover .glow-blue {
    filter: drop-shadow(0 0 14px rgba(0, 210, 255, 0.9)) !important;
}

.hp-service-card:hover .glow-orange {
    filter: drop-shadow(0 0 14px rgba(255, 102, 0, 0.9)) !important;
}

.hp-service-card:hover .glow-green {
    filter: drop-shadow(0 0 14px rgba(0, 255, 136, 0.9)) !important;
}

/* Video Card Custom Media Styles (Clean 16:9 frame, glow handled by outer card & glow-floor) */
.hp-vfx-icon-box.has-custom-media {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6) !important;
    filter: none !important;
    transition: border-color 0.4s ease !important;
}

.hp-service-card:hover .hp-vfx-icon-box.has-custom-media {
    filter: none !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7) !important;
}

/* 1. HUMAN HAND & PARTICLE BURST */
.digital-hand {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform-origin: 100px 190px !important;
}

.hover-core {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform-origin: 100px 50px !important;
}

.burst-particle {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease !important;
    transform-origin: 100px 85px !important;
    opacity: 0 !important;
}

.hp-service-card:hover .digital-hand {
    transform: translateY(-22px) scale(1.05) !important;
}

.hp-service-card:hover .hover-core {
    transform: scale(1.15) rotate(45deg) !important;
}

.hp-service-card:hover .bp-1 {
    transform: translate(-30px, -25px) scale(1.5) !important;
    opacity: 0.9 !important;
}

.hp-service-card:hover .bp-2 {
    transform: translate(30px, -25px) scale(1.5) !important;
    opacity: 0.9 !important;
}

.hp-service-card:hover .bp-3 {
    transform: translate(-35px, 20px) scale(1.5) !important;
    opacity: 0.9 !important;
}

.hp-service-card:hover .bp-4 {
    transform: translate(35px, 20px) scale(1.5) !important;
    opacity: 0.9 !important;
}

.hp-service-card:hover .bp-5 {
    transform: translate(0px, -35px) scale(1.8) !important;
    opacity: 1 !important;
}

/* 2. DOLLY ZOOM EFFECT (CG VERTIGO) */
.dolly-front {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform-origin: 100px 100px !important;
}

.dolly-back {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease !important;
    transform-origin: 100px 100px !important;
}

.hp-service-card:hover .dolly-front {
    transform: scale(1.22) translateZ(30px) !important;
}

.hp-service-card:hover .dolly-back {
    transform: scale(0.65) translateZ(-40px) !important;
    opacity: 0.3 !important;
}

/* 3. TIMELINE SCRUBBER */
.playhead-scrubber {
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hp-service-card:hover .playhead-scrubber {
    transform: translateX(45px) !important;
}

/* 4. PUZZLE ASSEMBLY & EINSTEIN BULB */
.puzzle-piece {
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease !important;
}

.bulb-glow-ring {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease !important;
    transform-origin: 100px 100px !important;
    opacity: 0 !important;
}

.pp-i {
    transform: translate(-15px, -15px) !important;
    opacity: 0.4 !important;
}

.pp-d {
    transform: translate(15px, -15px) !important;
    opacity: 0.4 !important;
}

.pp-e {
    transform: translate(-15px, 15px) !important;
    opacity: 0.4 !important;
}

.pp-a {
    transform: translate(15px, 15px) !important;
    opacity: 0.4 !important;
}

.hp-service-card:hover .puzzle-piece {
    transform: translate(0px, 0px) !important;
    opacity: 1 !important;
}

.hp-service-card:hover .bulb-glow-ring {
    transform: scale(1.3) !important;
    opacity: 0.8 !important;
}

/* Floor Reflection Glow with Soft Edge Radial Fade (Zero Edge Clipping) */
.glow-floor {
    position: absolute !important;
    bottom: -15px !important;
    left: 12% !important;
    width: 76% !important;
    height: 30px !important;
    border-radius: 50% !important;
    filter: blur(18px) !important;
    opacity: 0.35 !important;
    transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000000 30%, transparent 100%) !important;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000000 30%, transparent 100%) !important;
}

.hp-vfx-icon-box.has-custom-media .glow-floor {
    bottom: -18px !important;
    height: 35px !important;
    left: 10% !important;
    width: 80% !important;
    filter: blur(22px) !important;
    opacity: 0.55 !important;
}

.hp-service-card:hover .glow-floor {
    opacity: 0.85 !important;
    transform: scaleX(1.1) !important;
}

.hp-service-card:hover .has-custom-media .glow-floor {
    opacity: 0.95 !important;
    filter: blur(26px) !important;
    transform: scaleX(1.1) scaleY(1.2) !important;
}

/* High-Specificity Services Section Alignment & Typography */
html body .hp-main .hp-services .hp-service-card .hp-service-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    flex-grow: 1 !important;
}

html body .hp-main .hp-services .hp-service-card .hp-service-title {
    font-family: 'Exo 2', sans-serif !important;
    font-size: var(--hp-service-title-size, var(--font-h2, 20px)) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.25 !important;
    min-height: auto !important;
    display: block !important;
    word-break: break-word !important;
}

html body .hp-main .hp-services .hp-service-card .hp-service-desc {
    font-family: 'Exo 2', sans-serif !important;
    font-size: var(--hp-service-desc-size, var(--font-h1, 14px)) !important;
    color: #9CA3AF !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* ==========================================================================
   PRESENTATION DOWNLOAD MODAL & LEAD CAPTURE STYLES
   ========================================================================== */
#hp-pres-modal.hp-modal-active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 999999 !important;
}

.hp-pres-modal-box {
    max-width: 440px !important;
    width: 90% !important;
    padding: 36px 30px !important;
    background: rgba(13, 11, 23, 0.96) !important;
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(168, 85, 247, 0.2) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(20px) !important;
    position: relative !important;
}

.hp-pres-badge {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #a855f7 !important;
    background: rgba(168, 85, 247, 0.12) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    padding: 4px 12px !important;
    border-radius: 50px !important;
    margin-bottom: 12px !important;
}

.hp-form-consent {
    margin-top: 14px !important;
    margin-bottom: 10px !important;
}

.hp-checkbox-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: #9CA3AF !important;
    cursor: pointer !important;
}

.hp-checkbox-label input[type="checkbox"] {
    accent-color: #a855f7 !important;
    width: 16px !important;
    height: 16px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

.hp-checkbox-label a {
    color: #D1D5DB !important;
    text-decoration: underline !important;
}

.hp-pres-footer-note {
    font-size: 11px !important;
    color: #6B7280 !important;
    text-align: center !important;
    margin-top: 14px !important;
}

/* ==========================================================================
   HIDE LEGACY PARENT THEME FOOTER BAR (SUPERVISUALS © / Свет | Звук | Видеоконтент)
   ========================================================================== */
#colophon,
footer.site-footer,
.site-info,
.sub-footer,
.footer-bottom,
.bottom-footer,
.copyright-bar,
.footer-copy-bar {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ==========================================================================
   UNIFIED HEADER & TITLE VERTICAL SPACING SYSTEM (Matching Reference)
   ========================================================================== */

/* 1. Section Tags (ПРОЦЕСС, В ЦИФРАХ, ПОЧЕМУ МЫ, ЧТО МЫ СОЗДАЕМ, etc.) */
.hp-tag,
.hp-stats-tag-wrap,
.hp-why-col-left .hp-tag {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    display: inline-block !important;
}

/* 2. Main Section Titles (КАК МЫ РАБОТАЕМ, В ЦИФРАХ, СОЕДИНЯЕМ ЧЕЛОВЕЧЕСКИЙ ФАКТОР...) */
.hp-section-title,
.hp-stats-title,
.hp-why-title {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    line-height: 1.08 !important;
}

/* 3. Subtitles & Descriptions (От идеи до запуска, протоколы, сценарии...) */
.hp-section-subtitle,
.hp-why-desc,
.hp-why-info-text {
    margin-top: 6px !important;
    line-height: 1.35 !important;
}

/* Continuous Linear Transition Timing for Slow Linear Marquee Mode */
.hp-featured-swiper[data-autoscroll-mode="slow_linear"] .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* Showreel Video Modal Styling & Kinescope 16:9 Widescreen Frame */
#hp-showreel-modal .hp-modal-container {
    position: relative !important;
    width: 92% !important;
    max-width: 1100px !important;
    aspect-ratio: 16 / 9 !important;
    background: #000000 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9), 0 0 50px rgba(168, 85, 247, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

#hp-showreel-modal .hp-modal-close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 9999 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(8px) !important;
}

#hp-showreel-modal .hp-modal-close:hover {
    background: #A855F7 !important;
    border-color: #A855F7 !important;
    transform: rotate(90deg) scale(1.1) !important;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.6) !important;
}

#hp-showreel-modal .hp-modal-video-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

#hp-showreel-modal iframe,
#hp-showreel-modal video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    object-fit: contain !important;
}

/* PORTFOLIO GRID TAG FILTER VISIBILITY FIX */
.portfolio-area.grid .type-project.hidden-project {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.portfolio-area.grid .type-project:not(.hidden-project) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE ADAPTATIONS (PROCESS VERTICAL WITH WIRES & VENN DIAGRAM)
   ========================================================================== */
@media (max-width: 992px) {

    /* 1. PROCESS PIPELINE SECTION (.hp-process) - ELEGANT COMPACT VERTICAL PIPELINE */
    .hp-process .flow-field {
        position: relative !important;
        height: auto !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 0 !important;
        margin: 28px 0 !important;
        padding: 10px 0 !important;
    }

    .hp-process .flow-column {
        position: relative !important;
        width: 100% !important;
        max-width: 360px !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 32px !important;
        z-index: 4 !important;
    }

    /* Compact Node Buttons (Increased width so all text fits cleanly without truncation) */
    .hp-process .flow-node {
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: 320px !important;
        height: 44px !important;
        justify-content: center !important;
        padding: 0 16px !important;
        border-radius: 22px !important;
        box-sizing: border-box !important;
        background: rgba(12, 14, 22, 0.95) !important;
        border: 1px solid rgba(168, 85, 247, 0.45) !important;
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 12px rgba(168, 85, 247, 0.25) !important;
        text-align: center !important;
    }

    /* Dual Parallel Node Rows (Step 3 & Step 5) */
    .hp-process .flow-column:nth-child(3) .flow-node,
    .hp-process .flow-column:nth-child(5) .flow-node {
        flex: 1 1 50% !important;
        max-width: 170px !important;
        padding: 0 8px !important;
    }

    .hp-process .node-text {
        font-size: clamp(10px, 2.7vw, 11px) !important;
        letter-spacing: 0.5px !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
        overflow: visible !important;
    }

    .hp-process .node-dot {
        width: 5px !important;
        height: 5px !important;
    }

    .hp-process .connections-svg {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: visible !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }

    .hp-process .supervisor-bar {
        margin: 15px 0 !important;
    }

    .hp-process .supervisor-bar .label {
        font-size: 11px !important;
        padding: 0 16px !important;
        letter-spacing: 1.5px !important;
    }

    /* 2. WHY US VENN DIAGRAM (.hp-why-us) - PROPORTIONAL PURE SCALE (LABELS REMAIN OUTSIDE) */
    .hp-why-us {
        padding: 50px 0 !important;
        overflow: hidden !important;
    }

    .hp-why-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
    }

    .hp-why-col-left {
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    .hp-why-title {
        text-align: center !important;
        font-size: clamp(1.4rem, 5vw, 2rem) !important;
        margin-bottom: 12px !important;
    }

    .hp-why-desc {
        text-align: center !important;
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin: 0 auto !important;
    }

    .hp-why-col-center {
        width: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: -40px 0 !important;
    }

    /* Keep original 520x480 dimensions so sector-node positions stay OUTSIDE circles */
    .interactive-widget {
        width: 520px !important;
        height: 480px !important;
        transform: scale(0.68) !important;
        transform-origin: center center !important;
        margin: 0 auto !important;
        flex-shrink: 0 !important;
    }

    .hp-why-col-right {
        width: 100% !important;
        text-align: center !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    .hp-why-info-block {
        width: 100% !important;
        text-align: center !important;
    }

    .hp-why-info-text {
        text-align: center !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 480px) {
    .hp-why-col-center {
        margin: -60px 0 !important;
    }

    .interactive-widget {
        transform: scale(0.58) !important;
    }

    .hp-process .node-text {
        font-size: 10px !important;
        letter-spacing: 0.5px !important;
    }
}

/* ==========================================================================
   PRIVACY POLICY PAGE STYLING (.hp-privacy-page)
   ========================================================================== */
/* Hide default parent theme page title headers on Privacy Policy page */
.page-template-template-privacy .site-hero,
.page-template-template-privacy .has-bg,
.page-template-template-privacy .entry-header,
.page-template-template-privacy .page-header,
.page-template-template-privacy .hero-title,
.page-template-template-privacy h1.entry-title,
.page-template-template-privacy h1.page-title,
.page-template-template-privacy > h1,
.page-template-template-privacy header.header-page,
.page-template-template-privacy .site-content > header,
.page-template-template-privacy .site-main > header,
.page-template-template-privacy .site-main > h1,
body.page-id-privacy .site-hero,
body.page-id-privacy .entry-header,
body.page-id-privacy h1.entry-title {
    display: none !important;
}

/* Hide privacy policy link ONLY from top header navigation */
header li:has(a[href*="politika"]),
header li:has(a[href*="privacy"]),
header li:has(a[href*="%D0%BF%D0%BE%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0"]),
.site-header li:has(a[href*="politika"]),
.site-header li:has(a[href*="privacy"]),
.site-header li:has(a[href*="%D0%BF%D0%BE%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0"]),
.nav-menu li:has(a[href*="politika"]),
.nav-menu li:has(a[href*="privacy"]),
.nav-menu li:has(a[href*="%D0%BF%D0%BE%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0"]),
.site-header .menu-item-privacy,
.site-header a[href*="politika-konfidenczialnosti"],
.site-header a[href*="%D0%BF%D0%BE%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B0"],
.site-header a[href*="privacy"] {
    display: none !important;
}

/* Ensure footer privacy link is ALWAYS visible on its own new line below copyright */
.hp-footer-privacy-link,
.hp-footer a.hp-footer-privacy-link {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #8B5CF6 !important;
    text-decoration: underline !important;
    margin-top: 8px !important;
}

.page-template-template-privacy .site-content,
.page-template-template-privacy .site-main,
.page-template-template-privacy #primary,
.page-template-template-privacy #content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.hp-privacy-page {
    background-color: #08080A !important;
    color: #D1D5DB !important;
    padding-top: 115px !important;
    padding-bottom: 70px !important;
    min-height: 80vh;
}

.hp-privacy-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.hp-privacy-topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.hp-privacy-back-btn,
.hp-privacy-print-btn,
.hp-privacy-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #9CA3AF !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 8px !important;
    padding: 9px 16px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.hp-privacy-back-btn:hover,
.hp-privacy-print-btn:hover,
.hp-privacy-action-btn:hover {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    transform: translateY(-1px) !important;
}

.hp-privacy-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-bottom: 28px !important;
    margin-bottom: 35px !important;
}

.hp-privacy-title {
    font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: clamp(1.6rem, 3.2vw, 2.5rem) !important;
    font-weight: 300 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.5px !important;
    color: #FFFFFF !important;
    margin-top: 10px !important;
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
}

.hp-privacy-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 25px !important;
    font-size: 13.5px !important;
    color: #9CA3AF !important;
}

.hp-privacy-meta-item strong {
    color: #E5E7EB !important;
    font-weight: 500 !important;
}

.hp-privacy-meta-item a {
    color: #8B5CF6 !important;
    text-decoration: none !important;
}

.hp-privacy-meta-item a:hover {
    text-decoration: underline !important;
}

.hp-privacy-body {
    max-width: 920px !important;
    margin: 0 auto !important;
    background: rgba(14, 14, 18, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    padding: 35px 40px !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

.hp-privacy-editor-content p {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    color: #D1D5DB !important;
    margin-bottom: 14px !important;
}

.hp-privacy-editor-content h2,
.hp-privacy-editor-content h3 {
    font-family: 'Exo 2', sans-serif !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    margin-top: 25px !important;
    margin-bottom: 14px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.hp-privacy-editor-content ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-top: 12px !important;
    margin-bottom: 16px !important;
}

.hp-privacy-editor-content li {
    position: relative !important;
    padding-left: 22px !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #D1D5DB !important;
    margin-bottom: 8px !important;
}

.hp-privacy-editor-content li::before {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 9px !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background-color: #8B5CF6 !important;
}

/* Accordions for sections 1-9 */
.hp-privacy-acc {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    margin-bottom: 20px !important;
    transition: border-color 0.25s ease, background-color 0.25s ease !important;
    overflow: hidden !important;
}

.hp-privacy-acc:last-child {
    margin-bottom: 0 !important;
}

.hp-privacy-acc[open] {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.035) !important;
}

.hp-privacy-acc-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 24px !important;
    cursor: pointer !important;
    user-select: none !important;
    outline: none !important;
}

.hp-privacy-acc-header::-webkit-details-marker {
    display: none !important;
}

.hp-privacy-acc-header h2 {
    font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.hp-acc-icon {
    position: relative !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
}

.hp-acc-icon::before,
.hp-acc-icon::after {
    content: '' !important;
    position: absolute !important;
    background-color: #9CA3AF !important;
    transition: transform 0.25s ease !important;
}

.hp-acc-icon::before {
    top: 6px !important;
    left: 0 !important;
    width: 14px !important;
    height: 2px !important;
}

.hp-acc-icon::after {
    top: 0 !important;
    left: 6px !important;
    width: 2px !important;
    height: 14px !important;
}

.hp-privacy-acc[open] .hp-acc-icon::after {
    transform: rotate(90deg) opacity(0) !important;
    opacity: 0 !important;
}

.hp-privacy-acc-content {
    padding: 0 24px 24px 24px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-top: 4px !important;
    padding-top: 18px !important;
}

.hp-privacy-acc-content p {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    color: #D1D5DB !important;
    margin-bottom: 14px !important;
}

.hp-privacy-acc-content p:last-child {
    margin-bottom: 0 !important;
}

.hp-privacy-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin-top: 12px !important;
    margin-bottom: 16px !important;
}

.hp-privacy-list li {
    position: relative !important;
    padding-left: 22px !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #D1D5DB !important;
    margin-bottom: 8px !important;
}

.hp-privacy-list li::before {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 9px !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background-color: #8B5CF6 !important;
}

.hp-privacy-alert {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    background: rgba(245, 158, 11, 0.06) !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
    border-left: 3px solid #F59E0B !important;
    border-radius: 10px !important;
    padding: 15px 18px !important;
    margin: 18px 0 !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #E5E7EB !important;
}

.hp-privacy-alert-info {
    background: rgba(59, 130, 246, 0.06) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
    border-left-color: #3B82F6 !important;
}

.hp-privacy-email-link {
    color: #A78BFA !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
}

.hp-privacy-req-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 14px !important;
    margin-top: 14px !important;
}

.hp-privacy-req-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
}

.hp-privacy-req-item .label {
    display: block !important;
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #9CA3AF !important;
    margin-bottom: 4px !important;
}

.hp-privacy-req-item .value {
    display: block !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
}

.hp-privacy-req-item .value a {
    color: #A78BFA !important;
    text-decoration: none !important;
}

.hp-privacy-req-item .value a:hover {
    text-decoration: underline !important;
}

@media (max-width: 768px) {
    .hp-privacy-page {
        padding-top: 85px !important;
        padding-bottom: 50px !important;
    }

    .hp-privacy-body {
        padding: 22px 18px !important;
    }

    .hp-privacy-acc-header {
        padding: 15px 18px !important;
    }

    .hp-privacy-acc-content {
        padding: 0 18px 18px 18px !important;
    }
    
    .hp-privacy-topbar {
        margin-bottom: 16px !important;
    }
}

@media print {
    body, .hp-privacy-page {
        background: #FFFFFF !important;
        color: #000000 !important;
        padding: 0 !important;
    }

    .hp-privacy-topbar,
    .hp-footer,
    .hp-header-nav {
        display: none !important;
    }

    .hp-privacy-body {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .hp-privacy-acc {
        border: none !important;
        background: none !important;
    }

    .hp-privacy-acc-header h2 {
        color: #000000 !important;
    }

    .hp-acc-icon {
        display: none !important;
    }

    .hp-privacy-acc-content p,
    .hp-privacy-list li {
        color: #111111 !important;
    }
}

/* GLOBAL SINGLE PROJECT CTA BANNER & FOOTER (100vw Full-Bleed & Typography Parity) */
body.single-project .global-project-bottom-wrapper,
body.single .global-project-bottom-wrapper,
html body .global-project-bottom-wrapper,
.global-project-bottom-wrapper {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    background: #000000 !important;
    box-sizing: border-box !important;
    z-index: 9999 !important;
    clear: both !important;
}

.global-project-bottom-wrapper,
.global-project-bottom-wrapper * {
.global-project-bottom-wrapper .hp-btn-download span,
.global-project-bottom-wrapper .hp-btn-solid {
    font-size: var(--font-h1, 14px) !important;
}

.global-project-bottom-wrapper .hp-container,
.global-project-bottom-wrapper .container {
    width: 100% !important;
    max-width: 1840px !important;
    padding-left: clamp(24px, 4vw, 80px) !important;
    padding-right: clamp(24px, 4vw, 80px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

@media (min-width: 1921px) {
    .global-project-bottom-wrapper .hp-container,
    .global-project-bottom-wrapper .container {
        max-width: 92vw !important;
    }
}

.global-project-cta-banner {
    margin: 0 !important;
    padding: 50px 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
}

.global-project-footer {
    width: 100% !important;
    background: #050507 !important;
    margin: 0 !important;
    padding: 60px 0 40px 0 !important;
}

/* ELIMINATE EXTRA BOTTOM GAP ON SINGLE PROJECT, PORTFOLIO, BLOG/LAB & CONTACT PAGES */
body.single-project,
body.single,
body.page-template-template-portfolio,
body.page-template-template-blog,
body.page-template-template-contact,
body.page-id-1075,
body.blog,
body.archive,
body.single-project #swup,
body.single #swup,
body.page-template-template-portfolio #swup,
body.page-template-template-contact #swup,
body.blog #swup,
body.archive #swup {
    background-color: #050507 !important;
    background-image: none !important;
}

body.single-project .site-main,
body.single .site-main,
body.page-template-template-portfolio .site-main,
body.page-template-template-contact .site-main,
body.blog .site-main,
body.archive .site-main,
body.single-project .global-project-bottom-wrapper,
body.single .global-project-bottom-wrapper,
body.page-template-template-portfolio .global-project-bottom-wrapper,
body.page-template-template-contact .global-project-bottom-wrapper,
body.blog .global-project-bottom-wrapper,
body.archive .global-project-bottom-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.single-project footer:not(.hp-footer),
body.single footer:not(.hp-footer),
body.page-template-template-portfolio footer:not(.hp-footer),
body.page-template-template-contact footer:not(.hp-footer),
body.blog footer:not(.hp-footer),
body.archive footer:not(.hp-footer) {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ELEGANT TOP MARGIN DIRECTLY ABOVE "НАЧАТЬ ПРОЕКТ" CTA BANNER */
body.single-project .global-project-bottom-wrapper,
body.single .global-project-bottom-wrapper,
body.page-template-template-portfolio .global-project-bottom-wrapper,
body.blog .global-project-bottom-wrapper,
body.archive .global-project-bottom-wrapper,
html body .global-project-bottom-wrapper,
.global-project-bottom-wrapper {
    margin-top: 80px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* SOLID BLACK COVERAGE 2000px DOWNWARDS TO OVERLAY FIXED HERO BACKGROUND */
body.single-project .global-project-bottom-wrapper::after,
body.single .global-project-bottom-wrapper::after,
html body .global-project-bottom-wrapper::after,
.global-project-bottom-wrapper::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: -50vw !important;
    width: 200vw !important;
    height: 2000px !important;
    background-color: #050507 !important;
    z-index: 9999 !important;
    pointer-events: none !important;
}

/* ULTRA-HIGH SPECIFICITY ZERO PADDING-BOTTOM FOR .site-main TO OVERRIDE main.css:874 (200px) */
html body div#swup main.site-main,
html body div#swup .site-main,
html body main.site-main,
html body .site-main,
div#swup main.site-main,
div#swup .site-main,
main.site-main,
.site-main {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* FULL-WIDTH LAYOUT FOR PORTFOLIO WORK-GRID PAGE (OVERRIDE main.css:881 52vw) */
body.page-template-template-portfolio .site-main,
.page-template-template-portfolio .site-main,
body.page-template-template-portfolio #swup .site-main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE LAYOUT ENHANCEMENTS (MAX-WIDTH 768PX)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. HERO TITLE - Maximum fluid font size (12.2vw) to fill ~90% of screen width dynamically */
    .page-template-template-home .h5,
    .page-template-template-home .hp-h5,
    .page-template-template-home .hp-hero-title,
    .page-template-template-home h1.hp-hero-title,
    html body .page-template-template-home .hp-main .hp-hero-title,
    html body .page-template-template-home .hp-hero-title,
    html body .page-template-template-home h1.hp-hero-title,
    html body h1.hp-hero-title,
    html body .hp-hero-title {
        font-size: clamp(26px, 12.2vw, 52px) !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: manual !important;
        white-space: normal !important;
        letter-spacing: -1.5px !important;
        line-height: 0.9 !important;
    }

    /* 2. FEATURED PROJECTS CAROUSEL - ~2.5x larger project cards on mobile */
    html body .hp-featured-swiper .swiper-slide,
    html body .hp-featured-swiper .hp-project-slide,
    html body .hp-main .hp-featured-swiper .swiper-slide,
    html body .hp-main .hp-featured-swiper .hp-project-slide {
        width: 78vw !important;
        max-width: 85vw !important;
        flex: 0 0 78vw !important;
    }

    html body .hp-featured-swiper .type-project .project-caption,
    html body .hp-featured-swiper .hp-project-meta,
    html body .hp-main .hp-featured-swiper .type-project .project-caption {
        padding-top: 10px !important;
        padding-right: 10px !important;
    }

    html body .hp-main .hp-featured-swiper .type-project .project-caption h3,
    html body .hp-main .hp-featured-swiper .hp-project-title,
    html body .hp-featured-swiper .hp-project-title,
    html body .hp-featured-swiper .type-project .project-caption h3 {
        font-size: 15px !important;
    }

    /* 3. IDEA / RESULT (BEFORE - AFTER) - Compact fit-to-width tabs & 1:1 Aspect Ratio */
    html body .hp-ba-tabs-bar {
        gap: 4px !important;
        width: 100% !important;
        display: flex !important;
    }

    html body .hp-ba-tab-btn {
        flex: 1 1 0px !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 8px 3px !important;
        font-size: clamp(8px, 2.5vw, 11px) !important;
        letter-spacing: 0px !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    html body .hp-ba-wrapper {
        aspect-ratio: 1 / 1 !important;
    }

    /* 4. FOOTER / CONTACTS BLOCK - Ultra-compact column flow without vertical gaps */
    html body .hp-footer,
    html body footer.hp-footer {
        padding: 25px 0 20px 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }

    html body .hp-footer-grid {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        gap: 15px !important;
        height: auto !important;
        min-height: 0 !important;
    }

    html body .hp-footer-brand {
        flex: 0 0 auto !important;
        width: 100% !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    html body .hp-footer-logo {
        margin-bottom: 6px !important;
    }

    html body .hp-footer-copy {
        font-size: 11px !important;
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    html body .hp-footer-nav {
        flex: 0 0 auto !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 30px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    html body .hp-footer-links {
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .hp-footer-links li {
        margin-bottom: 5px !important;
    }

    html body .hp-footer-links a {
        font-size: 13px !important;
    }

    html body .hp-footer-right-box {
        flex: 0 0 auto !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        justify-self: start !important;
        margin-top: 5px !important;
        gap: 8px !important;
        height: auto !important;
        min-height: 0 !important;
    }

    html body .hp-footer-phone {
        text-align: left !important;
        font-size: 20px !important;
        margin-bottom: 4px !important;
    }

    html body .hp-footer-social-icons {
        justify-content: flex-start !important;
        gap: 16px !important;
        width: auto !important;
    }
}

@media (max-width: 480px) {
    .page-template-template-home .h5,
    .page-template-template-home .hp-h5,
    .page-template-template-home .hp-hero-title,
    .page-template-template-home h1.hp-hero-title,
    html body .page-template-template-home .hp-main .hp-hero-title,
    html body .page-template-template-home .hp-hero-title,
    html body .page-template-template-home h1.hp-hero-title,
    html body h1.hp-hero-title,
    html body .hp-hero-title {
        font-size: clamp(24px, 12.0vw, 50px) !important;
        letter-spacing: -1.5px !important;
        line-height: 0.9 !important;
        white-space: normal !important;
    }

    html body .hp-featured-swiper .swiper-slide,
    html body .hp-featured-swiper .hp-project-slide,
    html body .hp-main .hp-featured-swiper .swiper-slide,
    html body .hp-main .hp-featured-swiper .hp-project-slide {
        width: 82vw !important;
        flex: 0 0 82vw !important;
    }

    html body .hp-ba-tab-btn {
        padding: 7px 2px !important;
        font-size: 10px !important;
    }
}

/* ==========================================================================
   MOBILE ONLY MENU OVERLAY & INVERTED COLORS (@media max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    /* 1. CLOSED MOBILE HAMBURGER BUTTON (BRIGHT WHITE) */
    body:not(.toggled-on) .menu-toggle,
    body:not(.toggled-on) .menu-toggle *,
    body:not(.toggled-on) .menu-toggle::before,
    body:not(.toggled-on) .menu-toggle::after,
    .menu-toggle,
    .menu-toggle span,
    .menu-toggle i,
    .menu-toggle div,
    .menu-toggle::before,
    .menu-toggle::after {
        color: #ffffff !important;
        border-color: #ffffff !important;
        fill: #ffffff !important;
        stroke: #ffffff !important;
    }

    .menu-toggle span,
    .menu-toggle i,
    .menu-toggle div,
    .menu-toggle::before,
    .menu-toggle::after {
        background-color: #ffffff !important;
    }

    .menu-toggle {
        background: transparent !important;
        background-color: transparent !important;
    }

    /* 2. OPEN MOBILE MENU OVERLAY (FULLSCREEN WHITE BACKDROP) */
    .site-menu-wrap::before {
        z-index: 1 !important;
        background-color: #ffffff !important;
        background: #ffffff !important;
    }

    html body.toggled-on .site-menu-wrap,
    body.toggled-on .site-menu-wrap {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: 100vh !important;
        max-height: 100vh !important;
        width: 100vw !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        z-index: 9990 !important;
        padding: 80px 30px 45px 30px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
    }

    /* 3. CLOSE TOGGLE BUTTON ("X") - BLACK ICON */
    body.toggled-on .menu-toggle,
    body.toggled-on .menu-toggle *,
    body.toggled-on .menu-toggle::before,
    body.toggled-on .menu-toggle::after {
        color: #000000 !important;
        border-color: #000000 !important;
        fill: #000000 !important;
        stroke: #000000 !important;
        z-index: 9999 !important;
    }

    body.toggled-on .menu-toggle span,
    body.toggled-on .menu-toggle i,
    body.toggled-on .menu-toggle div,
    body.toggled-on .menu-toggle::before,
    body.toggled-on .menu-toggle::after {
        background-color: #000000 !important;
    }

    /* 4. NAV CONTAINERS - BOTTOM-LEFT ALIGNED */
    html body.toggled-on .site-menu-wrap .site-menu,
    html body.toggled-on .site-menu-wrap .site-social,
    html body.toggled-on .site-menu,
    html body.toggled-on .site-social,
    body.toggled-on .site-menu,
    body.toggled-on .site-social {
        position: relative !important;
        z-index: 10 !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        width: 100% !important;
        margin: 0 !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    /* 5. NAV MENU LIST - ORIGINAL THEME SPACING (margin-top: 15px) */
    html body.toggled-on #menu-sv-menu,
    html body.toggled-on .site-menu ul,
    html body.toggled-on .site-menu ol,
    html body.toggled-on nav.site-menu ul,
    html body.toggled-on .site-menu-wrap ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        gap: 0px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        max-height: none !important;
        transform: none !important;
    }

    html body.toggled-on #menu-sv-menu li,
    html body.toggled-on .site-menu li,
    html body.toggled-on .site-menu-wrap li,
    html body.toggled-on .menu-item {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        margin: 0 !important;
        margin-top: 15px !important;
        padding: 0 !important;
        height: auto !important;
    }

    html body.toggled-on #menu-sv-menu li:first-child,
    html body.toggled-on .site-menu li:first-child {
        margin-top: 0 !important;
    }

    /* 6. MENU LINKS - EXACT ORIGINAL FONT & LINE-HEIGHT */
    html body.toggled-on #menu-sv-menu a,
    html body.toggled-on #menu-sv-menu li a,
    html body.toggled-on .site-menu a,
    html body.toggled-on .site-menu li a,
    html body.toggled-on nav.site-menu a,
    html body.toggled-on .site-menu-wrap a,
    html body.toggled-on .menu-item a {
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
        font-size: clamp(24px, 7vw, 38px) !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0px !important;
        text-decoration: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block !important;
        line-height: 1.15 !important;
        padding-bottom: 2px !important;
        text-align: left !important;
        transition: color 0.2s ease !important;
    }

    html body.toggled-on #menu-sv-menu a:hover,
    html body.toggled-on .site-menu a:hover,
    html body.toggled-on .site-menu-wrap a:hover {
        color: #555555 !important;
        -webkit-text-fill-color: #555555 !important;
    }

    /* 7. SOCIAL ICONS AT BOTTOM LEFT - EXACT ORIGINAL THEME GAP (14px) */
    html body.toggled-on .site-social {
        margin-top: 25px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        width: 100% !important;
    }

    html body.toggled-on .site-social a {
        margin-right: 0 !important;
    }

    html body.toggled-on .site-social a,
    html body.toggled-on .site-social i,
    html body.toggled-on .site-social svg,
    html body.toggled-on .site-social svg *,
    html body.toggled-on .site-social .svg-icon,
    html body.toggled-on .site-social .svg-icon *,
    html body.toggled-on .site-social * {
        color: #000000 !important;
        fill: #000000 !important;
        stroke: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
        visibility: visible !important;
    }

    html body.toggled-on .site-social svg,
    html body.toggled-on .site-social .svg-icon {
        width: 24px !important;
        height: 24px !important;
    }

    /* 8. PURE SOFT FADE-IN ANIMATION FOR SOCIAL ICONS */
    @keyframes socialPureFadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    html body.toggled-on .site-social a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        animation: socialPureFadeIn 0.5s ease both !important;
    }

    html body.toggled-on .site-social a:nth-child(1) { animation-delay: 0.15s !important; }
    html body.toggled-on .site-social a:nth-child(2) { animation-delay: 0.25s !important; }
    html body.toggled-on .site-social a:nth-child(3) { animation-delay: 0.35s !important; }
    html body.toggled-on .site-social a:nth-child(4) { animation-delay: 0.45s !important; }

    html body.toggled-on .site-social a:hover {
        opacity: 0.6 !important;
        transition: opacity 0.2s ease !important;
    }
}

/* PROJECT & SERVICE CARDS: TIGHTEN SPACING BETWEEN IMAGE/VIDEO AND TEXT */
.project-caption,
.entry-caption,
.hp-project-slide .project-caption,
.hp-service-content {
    margin-top: 6px !important;
    padding-top: 0 !important;
}

.project-thumbnail,
.entry-thumbnail,
.hp-service-visual,
.hp-vfx-icon-box {
    margin-bottom: 6px !important;
}

.project-main-title,
.hp-service-title {
    margin-top: 2px !important;
    margin-bottom: 4px !important;
    line-height: 1.15 !important;
}

.project-subtitle-block,
.hp-service-desc {
    margin-top: 4px !important;
    line-height: 1.35 !important;
}

/* Distinct separation between separate cards */
.project,
.portfolio-item,
.hp-project-slide,
.hp-service-card {
    margin-bottom: 48px !important;
}


/* ==========================================================================
   SUPERVISUALS LAB SECTION ONLY (https://supervisuals.ru/blog-grid/)
   ========================================================================== */

.page-template-template-blog .site-main,
body.page-id-1073 .site-main,
.page-template-template-blog #swup .site-main,
.page-template-template-blog .lab-header-hero,
body.page-id-1073 .lab-header-hero,
.lab-header-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 40px !important;
    margin-bottom: 25px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
}

.page-template-template-blog .lab-header-title,
body.page-id-1073 .lab-header-title,
.lab-header-title,
.lab-header-hero h1,
h1.lab-header-title {
    font-family: 'Exo 2', -apple-system, sans-serif !important;
    font-size: clamp(22px, 3.4vw, 48px) !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: -0.5px !important;
    line-height: 1.15 !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    text-align: left !important;
    align-self: flex-start !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
}

.page-template-template-blog .lab-header-subtitle,
body.page-id-1073 .lab-header-subtitle,
.lab-header-subtitle,
.lab-header-hero p {
    font-family: 'Exo 2', 'Inter', -apple-system, sans-serif !important;
    font-size: clamp(14px, 1.4vw, 18px) !important;
    font-weight: 400 !important;
    color: #9E9EA8 !important;
    max-width: 760px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    text-align: left !important;
    align-self: flex-start !important;
}

/* WORK-GRID MATCHING FILTER TAGS (TEXT WITH WHITE BOTTOM BORDER, NO ROUNDED PILLS) */
.portfolio-filter-tags,
.blog-filter-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 35px !important;
    margin-bottom: 35px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    text-align: center !important;
    background: transparent !important;
}

.portfolio-filter-tags .filter-tag,
.blog-filter-tags .filter-tag {
    font-family: 'Exo 2', -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #666666 !important;
    text-decoration: none !important;
    transition: color 0.3s ease, border-color 0.3s ease !important;
    border-bottom: 2px solid transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 0 3px 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
}

.portfolio-filter-tags .filter-tag:hover,
.portfolio-filter-tags .filter-tag.active,
.blog-filter-tags .filter-tag:hover,
.blog-filter-tags .filter-tag.active {
    color: #ffffff !important;
    border-bottom-color: #ffffff !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ==========================================================================
   MOMENT FACTORY LAB PURE-MEDIA GRID & HOVER OVERLAY STYLING
   ========================================================================== */

/* Hide static captions underneath cards & unnecessary metadata */
.blog-area.grid .post-excerpt,
.blog-area.grid .post-meta,
.blog-area.grid .post-footer,
.blog-area.grid .entry-meta,
.blog-area.grid .entry-summary {
    display: none !important;
}

/* Overlay Container on each Article Card - Hidden by default, visible on HOVER ONLY */
.blog-area.grid .entry-header,
.blog-area.grid .post-caption,
.blog-area.grid .project-caption {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 10 !important;
    padding: 32px 24px 20px 24px !important;
    background: linear-gradient(to top, rgba(10, 10, 12, 0.95) 0%, rgba(10, 10, 12, 0.4) 65%, transparent 100%) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
}

.blog-area.grid > article:hover .entry-header,
.blog-area.grid > article:hover .post-caption,
.blog-area.grid > article:hover .project-caption,
.blog-area.grid > .type-post:hover .entry-header,
.blog-area.grid > .type-post:hover .post-caption,
.blog-area.grid > .post:hover .entry-header,
.blog-area.grid > .post:hover .post-caption {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Post/Project Title Styling */
.blog-area.grid .entry-title,
.blog-area.grid .post-title,
.blog-area.grid .project-title,
.blog-area.grid .entry-header h2,
.blog-area.grid .entry-header h3 {
    font-family: 'Unbounded', 'Exo 2', -apple-system, sans-serif !important;
    font-size: clamp(14px, 1.25vw, 18px) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

.blog-area.grid .entry-title a,
.blog-area.grid .post-title a,
.blog-area.grid .project-title a {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Category/Tags Metadata Styling */
.blog-area.grid .post-terms-list,
.blog-area.grid .project-terms-list,
.blog-area.grid .entry-meta,
.blog-area.grid .post-cat,
.blog-area.grid .post-categories {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-family: 'Exo 2', -apple-system, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.blog-area.grid .post-terms-list a,
.blog-area.grid .project-terms-list a {
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.blog-area.grid > article:hover .post-terms-list a,
.blog-area.grid > article:hover .project-terms-list a {
    color: #ffffff !important;
}

/* PURE MEDIA VISIBILITY: FORCE INSTANT UNCONDITIONAL OPACITY 1 & VISIBILITY FOR ALL LAB CARDS & IMAGES */
.blog-area.grid article,
.blog-area.grid .type-post,
.blog-area.grid .post,
.blog-area.grid .post-thumbnail,
.blog-area.grid .post-thumbnail-inner,
.blog-area.grid a,
.blog-area.grid img,
.blog-area.grid video {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Moment Factory LAB 3-Column Dense Masonry Grid for .blog-area.grid ONLY */
@media (min-width: 1024px), (min-width: 992px) {
    html body .blog-area.grid,
    html body #swup .blog-area.grid,
    div.area.blog-area.grid,
    .blog-area.grid {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px !important;
        column-count: auto !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        margin-top: 0 !important;
        margin-bottom: 60px !important;
        padding: 0 40px !important;
        box-sizing: border-box !important;
    }

    .blog-area.grid .lab-masonry-col {
        flex: 1 1 0 !important;
        width: 33.333% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    .blog-area.grid article,
    .blog-area.grid .type-post,
    .blog-area.grid .post,
    .lab-masonry-col article,
    .lab-masonry-col .type-post,
    .lab-masonry-col .post {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        position: relative !important;
        box-sizing: border-box !important;
        background: #0d0d0f !important;
        border-radius: 6px !important;
        overflow: hidden !important;
        border: none !important;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
    }

    /* COMPLETE COLLAPSE FOR HIDDEN CARDS (ZERO SLOTS / ZERO GAPS) */
    .blog-area.grid article.hidden-post,
    .blog-area.grid .type-post.hidden-post,
    .blog-area.grid .post.hidden-post,
    .blog-area.grid article.hidden-project,
    .blog-area.grid .type-post.hidden-project,
    .blog-area.grid .post.hidden-project,
    .blog-area.grid article[style*="display: none"],
    .blog-area.grid .type-post[style*="display: none"],
    .blog-area.grid .post[style*="display: none"] {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 0px !important;
        max-width: 0 !important;
        min-height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .blog-area.grid .post-thumbnail,
    .blog-area.grid .project-thumbnail,
    .blog-area.grid .post-thumbnail-inner,
    .blog-area.grid .project-thumbnail-inner,
    .lab-masonry-col .post-thumbnail,
    .lab-masonry-col .project-thumbnail,
    .lab-masonry-col .post-thumbnail-inner,
    .lab-masonry-col .project-thumbnail-inner {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        position: relative !important;
        overflow: hidden !important;
        background: transparent !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .blog-area.grid img,
    .blog-area.grid video,
    .blog-area.grid article img,
    .blog-area.grid article video,
    .blog-area.grid .post-thumbnail-inner img,
    .blog-area.grid .post-thumbnail-inner video,
    .blog-area.grid .project-thumbnail-inner img,
    .blog-area.grid .project-thumbnail-inner video,
    .lab-masonry-col img,
    .lab-masonry-col video,
    .lab-masonry-col article img,
    .lab-masonry-col article video,
    .lab-masonry-col .post-thumbnail-inner img,
    .lab-masonry-col .post-thumbnail-inner video {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: block !important;
        object-fit: cover !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 1 !important;
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
}

    .blog-area.grid > article:hover,
    .blog-area.grid > .type-post:hover,
    .blog-area.grid > .post:hover {
        transform: translateY(-3px) !important;
        z-index: 5 !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
    }

    .blog-area.grid .post-thumbnail,
    .blog-area.grid .project-thumbnail {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        overflow: hidden !important;
        background: #0d0d0f !important;
    }

    .blog-area.grid .post-thumbnail-inner,
    .blog-area.grid .project-thumbnail-inner {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .blog-area.grid img,
    .blog-area.grid video {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        display: block !important;
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .blog-area.grid > *:hover img,
    .blog-area.grid > *:hover video {
        transform: scale(1.05) !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .blog-area.grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        transform: none !important;
        margin: 0 auto 40px auto !important;
        padding: 0 24px !important;
        box-sizing: border-box !important;
    }

    .blog-area.grid .lab-masonry-col {
        width: 50% !important;
    }

    .blog-area.grid article,
    .blog-area.grid .type-post,
    .blog-area.grid .post,
    .lab-masonry-col article,
    .lab-masonry-col .type-post,
    .lab-masonry-col .post {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        background: #0d0d0f !important;
        border-radius: 6px !important;
        overflow: hidden !important;
    }

    .blog-area.grid .post-thumbnail,
    .blog-area.grid .project-thumbnail,
    .lab-masonry-col .post-thumbnail,
    .lab-masonry-col .project-thumbnail {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .blog-area.grid img,
    .blog-area.grid video,
    .lab-masonry-col img,
    .lab-masonry-col video {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .blog-area.grid > *:hover img,
    .blog-area.grid > *:hover video {
        transform: scale(1.05) !important;
    }
}

@media (max-width: 767px) {
    .page-template-template-blog .lab-header-hero,
    body.page-id-1073 .lab-header-hero,
    .lab-header-hero {
        margin: 20px auto 20px auto !important;
        padding: 0 20px !important;
    }

    .blog-filter-tags {
        margin-bottom: 20px !important;
        padding: 0 20px 10px 20px !important;
    }

    .blog-area.grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        transform: none !important;
        margin: 0 auto 40px auto !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }

    .blog-area.grid .lab-masonry-col {
        width: 100% !important;
    }

    .blog-area.grid article,
    .blog-area.grid .type-post,
    .blog-area.grid .post,
    .lab-masonry-col article,
    .lab-masonry-col .type-post,
    .lab-masonry-col .post {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        background: #0d0d0f !important;
        border-radius: 6px !important;
        overflow: hidden !important;
    }

    .blog-area.grid .post-thumbnail,
    .blog-area.grid .project-thumbnail {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .blog-area.grid img,
    .blog-area.grid video {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
}

.blog-area.grid > *.hidden-post,
.blog-area.grid > *.hidden-project {
    display: none !important;
}

/* HEADER BACKDROP ON SCROLL (MOMENT FACTORY STYLE - ELIMINATES TEXT OVERLAP) */
.site-header {
    transition: background 0.3s ease, backdrop-filter 0.3s ease, border-bottom 0.3s ease, box-shadow 0.3s ease !important;
}

.site-header.is-scrolled,
.site-header.header-scrolled,
.site-header.sticky,
.site-header.is-sticky,
html body .site-header.is-scrolled {
    background: rgba(3, 3, 5, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================================================
   THEME SIGNATURE UNDERLINE HOVER ANIMATION (STRICTLY ON TITLE TEXT WIDTH)
   ========================================================================== */
html body .project-caption h3,
html body .type-project .project-caption h3,
html body .portfolio-grid .type-project .project-caption h3 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
}

html body .project-caption h3 a,
html body .type-project .project-caption h3 a {
    text-decoration: none !important;
    display: inline !important;
    color: #ffffff !important;
}

html body .project-caption .project-main-title,
html body span.project-main-title,
html body .type-project .project-caption .project-main-title,
html body .portfolio-grid .type-project .project-caption .project-main-title,
html body .hp-main .project-caption .project-main-title {
    font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    display: inline-block !important;
    width: auto !important;
    max-width: max-content !important;
    position: relative !important;
    background-image: linear-gradient(#ffffff, #ffffff) !important;
    background-size: 0% 2px !important;
    background-repeat: no-repeat !important;
    background-position: left bottom !important;
    padding-bottom: 2px !important;
    transition: background-size 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

@media (min-width: 1200px) {
    html body .project-caption .project-main-title,
    html body span.project-main-title,
    html body .type-project .project-caption .project-main-title {
        font-size: 24px !important;
    }
}

/* TRIGGER HOVER ON CARD OR LINK */
html body .type-project:hover .project-main-title,
html body .portfolio-item:hover .project-main-title,
html body .hp-project-card:hover .project-main-title,
html body .hp-project-slide:hover .hp-project-title,
html body .project-caption a:hover .project-main-title,
html body .project-thumbnail-link:hover ~ .project-caption .project-main-title,
html body .project:hover .project-main-title {
    background-size: 100% 2px !important;
}

/* SUBTITLE TIGHT SPACING UNDER TITLE */
html body .project-subtitle-block,
html body span.project-subtitle-block,
html body p.project-subtitle-block {
    display: block !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1.35 !important;
}

/* REMOVE FLOATING HERO CURSOR BUTTON */
#hp-hero-cursor-btn,
.hp-hero-cursor-btn {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* SINGLE PROJECT PAGES & WORK GRID RESPONSIVE HERO / TITLES (MOBILE OPTIMIZATION) */
.single-project-hero,
.project-hero,
body.single-project .hero,
body.single .hero {
    position: relative;
    padding: 140px 40px 60px 40px;
    max-width: 1440px;
    margin: 0 auto;
}

.single-project-title,
body.single-project h1,
body.single-project .hero-title,
body.single-project .entry-title,
body.single-project .project-title,
body.single h1.entry-title,
body.single .single-project-title,
.hero-content h1 {
    font-family: var(--font-secondary, var(--font-primary, 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif)) !important;
    font-size: clamp(28px, 6.5vw, 64px) !important;
    font-weight: 500 !important;
    line-height: 0.95 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    margin: 0 0 20px 0 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    hyphens: manual !important;
    white-space: normal !important;
    letter-spacing: -1.5px !important;
}

@media (max-width: 768px) {
    .single-project-hero,
    .project-hero,
    body.single-project .hero,
    body.single .hero {
        padding: 100px 20px 40px 20px !important;
    }

    .single-project-title,
    body.single-project h1,
    body.single-project .hero-title,
    body.single-project .entry-title,
    body.single-project .project-title,
    body.single h1.entry-title,
    body.single .single-project-title,
    .hero-content h1 {
        font-size: clamp(22px, 9.8vw, 44px) !important;
        letter-spacing: -1.2px !important;
        line-height: 0.92 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: manual !important;
        white-space: normal !important;
    }

    html body .project-caption h3,
    html body .project-caption h3 a,
    html body .project-caption .project-main-title,
    html body span.project-main-title,
    html body .type-project .project-caption h3,
    html body .type-project .project-caption h3 a,
    html body .type-project .project-caption .project-main-title {
        font-size: clamp(16px, 4.8vw, 20px) !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: manual !important;
    }
}

/* CLEAN MONOCHROME "НА ГЛАВНУЮ" LINK */
.hp-footer-right-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.hp-footer-home-link {
    display: inline-block;
    font-family: 'Exo 2', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    white-space: nowrap !important;
}

.hp-footer-home-link:hover {
    opacity: 0.65 !important;
    transform: translateY(-2px);
}

@media (max-width: 480px) {
    .single-project-hero,
    .project-hero,
    body.single-project .hero,
    body.single .hero {
        padding: 90px 16px 30px 16px !important;
    }

    .single-project-title,
    body.single-project h1,
    body.single-project .hero-title,
    body.single-project .entry-title,
    body.single-project .project-title,
    body.single h1.entry-title,
    body.single .single-project-title,
    .hero-content h1 {
        font-size: clamp(22px, 9.8vw, 44px) !important;
        letter-spacing: -1.2px !important;
        line-height: 0.92 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: manual !important;
        white-space: normal !important;
    }
}