* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}
:root {
    --red: #ca2d1b;
    --red-d: #a82415;
    --ink: #222729;
    --navy: #004b60;
    --navy2: #00313e;
    --bg: #f5f5f6;
    --mut: #5d676e;
    --line: #e0e4e8;
}
body {
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #292929;
    background-color: #f5f5f6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.is-modal-open {
    overflow: hidden;
}

a {
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

button {
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

input {
    font-family: inherit;
}

ion-icon {
    display: inline-block;
    vertical-align: middle;
}

.is-header {
    background-color: #ffffff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 100;
    font-family: "Manrope", sans-serif;
    flex-shrink: 0;
}

.is-header-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.svg-icon {
    height: 25px;
    width: 25px;
}

.is-header-top-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    gap: 24px;
}

.is-header-top-links {
    display: flex;
    align-items: center;
    gap: 22px;
}

.is-header-top-links > a {
    font-size: 14px;
    font-weight: 400;
    color: #4a5154;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.is-header-top-links > a:hover {
    color: #ca2d1b;
}

.is-header-top-item {
    position: relative;
    display: flex;
    align-items: center;
}

.is-header-top-link {
    font-size: 14px;
    font-weight: 400;
    color: #4a5154;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.is-header-top-link:hover {
    color: #ca2d1b;
}

.is-header-top-item--dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
}

.is-header-top-item--dropdown:hover .is-header-chevron {
    transform: rotate(180deg);
}

.is-header-top-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 300px;
    background: #ffffff;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
    z-index: 200;
}

.is-header-top-item--dropdown:hover .is-header-top-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.is-header-top-info {
    display: flex;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
}

.is-header-hours {
    font-size: 14px;
    font-weight: 400;
    color: #5a6270;
}

.is-header-max {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.is-header-max:hover {
    transform: scale(1.08);
}

.is-header-phone {
    font-size: 14px;
    font-weight: 600;
    color: #222729;
    text-decoration: none;
    transition: color 0.2s ease;
}

.is-header-phone:hover {
    color: #ca2d1b;
}

.is-header-bottom {
    position: relative;
}

.is-header-bottom-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 70px;
}

.is-header-logo {
    display: block;
    flex-shrink: 0;
}

.is-header-logo img {
    height: 40px;
    width: auto;
    display: block;
}

.is-header-menu {
    display: flex;
    align-items: center;
    gap: 26px;
}

.is-header-menu-item {
    position: relative;
}

.is-header-menu-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 400;
    color: #222729;
    text-decoration: none;
    padding: 8px 0;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.is-header-menu-link:hover {
    color: #ca2d1b;
}

.is-header-chevron {
    font-size: 14px;
    transition: transform 0.25s ease;
}

.is-header-menu-item--dropdown:hover .is-header-chevron {
    transform: rotate(180deg);
}

.is-header-menu-item--dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
}

.is-header-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
    z-index: 200;
}

.is-header-menu-item--dropdown:hover .is-header-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.is-header-dropdown-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 7px;
    text-decoration: none;
    color: #222729;
    font-size: 14px;
    font-weight: 400;
    border-radius: 8px;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.is-header-dropdown-link:hover {
    background: #fdf6f5;
    color: #ca2d1b;
}

.is-header-red-square {
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: #ca2d1b;
    flex-shrink: 0;
    border-radius: 0;
}

.is-header-search {
    flex: 1 1 auto;
    min-width: 0;
}

.is-header-search-form {
    position: relative;
}

.is-header-search-input {
    width: 100%;
    padding: 11px 42px 11px 16px;
    border-radius: 40px;
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
    font-size: 14px;
    color: #292929;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.is-header-search-input::placeholder {
    color: #9aa3b0;
}

.is-header-search-input:focus {
    border-color: #ca2d1b;
    outline: none;
    box-shadow: 0 2px 10px rgba(202, 45, 27, 0.1);
}

.is-header-search-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #3f4a5a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    font-size: 20px;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.is-header-search-btn:hover {
    color: #ca2d1b;
}

.is-header-region-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 20px;
    background-color: #f5f5f6;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 300;
    color: #292929;
    white-space: nowrap;
    flex-shrink: 0;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.is-header-region-btn:hover {
    background-color: #efeff0;
    border-color: #ca2d1b;
}

.is-header-region-icon {
    font-size: 20px;
    color: #ca2d1b;
    flex-shrink: 0;
}

.is-header-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background-color: #f5f5f6;
    color: #292929;
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.is-header-burger:hover {
    background-color: #efeff0;
}

.is-header-modal {
    display: flex;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.is-header-modal.is-visible {
    visibility: visible;
    opacity: 1;
}

.is-header-modal-content {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 16px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.is-header-modal.is-visible .is-header-modal-content {
    transform: scale(1);
}

.is-header-modal-close {
    align-self: flex-end;
    cursor: pointer;
    font-size: 28px;
    color: #7f8c9a;
    transition:
        transform 0.2s ease,
        color 0.2s ease;
    margin-bottom: 10px;
}

.is-header-modal-close:hover {
    transform: rotate(90deg);
    color: #ca2d1b;
}

.is-header-modal-title {
    font-size: 20px;
    margin-bottom: 14px;
    color: #222729;
    font-weight: 600;
}

.is-header-region-search {
    margin-bottom: 20px;
    position: relative;
}

.is-header-region-search input {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border-radius: 30px;
    border: 1px solid #e0e0e0;
    font-size: 16px;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.is-header-region-search input:focus {
    border-color: #ca2d1b;
    outline: none;
    box-shadow: 0 2px 8px rgba(202, 45, 27, 0.1);
}

.is-header-region-search .search-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #222729;
    font-size: 20px;
    pointer-events: none;
}

.is-header-region-clear-btn {
    position: absolute;
    right: 48px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #ca2d1b;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 5px;
    font-size: 20px;
    transition: color 0.2s ease;
}

.is-header-region-clear-btn:hover {
    color: #a82415;
}

.is-header-region-list-container {
    height: 300px;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e9ecf0;
    border-radius: 8px;
    margin-bottom: 20px;
}

.is-header-city-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid #f0f2f5;
}

.is-header-city-item:last-child {
    border-bottom: none;
}

.is-header-city-item:hover {
    background-color: #fdf6f5;
}

.is-header-city-item.selected {
    background-color: #fbeeed;
    color: #ca2d1b;
    font-weight: 600;
}

.is-header-city-item ion-icon {
    color: #ca2d1b;
    font-size: 20px;
    flex-shrink: 0;
}

.is-header-selected-region-info {
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    background-color: #f9fafc;
}

.info-left {
    flex: 1 1 200px;
}

.info-label {
    font-size: 12px;
    color: #9b9b9b;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-region-name {
    font-weight: 600;
    font-size: 20px;
    color: #222729;
}

.info-right {
    flex: 2 1 300px;
    color: #222729;
}

.info-right .office-name {
    font-weight: 600;
    margin-bottom: 5px;
}

.info-right .office-address {
    font-size: 16px;
    margin-bottom: 5px;
}

.info-right .office-phone {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.info-right .office-phone a {
    color: #ca2d1b;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.info-right .office-phone a:hover {
    text-decoration: underline;
}

.info-right .office-phone ion-icon {
    font-size: 20px;
    color: #ca2d1b;
}

.is-header-search-modal .is-header-modal-content {
    max-width: 600px;
}

.is-header-search-modal .is-header-search-form {
    position: relative;
}

.is-header-search-modal .is-header-search-input {
    display: block;
    padding-right: 48px;
}

.is-header-search-modal .is-header-search-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

/* ============================= HERO ============================= */

.hero {
    position: relative;
    flex: 1 1 auto;
    min-height: calc(100vh - 106px);
    background-color: #00222b;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- Большой фоновый слайдер (слайд-эффект) --- */
.hero-bg-swiper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.hero-bg-swiper .swiper-wrapper,
.hero-bg-swiper .swiper-slide {
    height: 100%;
}

.hero-bg-swiper .swiper-slide {
    background-color: #00222b;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    z-index: 1;
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 70px 24px 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.hero-title {
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1.15;
    color: #ffffff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
    max-width: 1000px;
    text-align: left;
}

.hero-title span {
    display: block;
}

/* --- Точки-линии над карточками --- */
.hero-slider-dots {
    --hero-progress: 6000ms;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: auto;
    padding-bottom: 18px;
}

.hero-dot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    width: 78px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #ffffff;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.hero-dot-line {
    position: relative;
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.32);
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.hero-dot-fill {
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: #ca2d1b;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

.hero-dot.is-active .hero-dot-line {
    background: rgba(255, 255, 255, 0.45);
}

.hero-dot.is-active .hero-dot-fill {
    animation: heroDotFill var(--hero-progress) linear forwards;
}

@keyframes heroDotFill {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.hero-dot-num {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.55);
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.hero-dot.is-active .hero-dot-num {
    color: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
    .hero-dot:hover .hero-dot-line {
        background: rgba(255, 255, 255, 0.6);
    }

    .hero-dot:hover .hero-dot-num {
        color: #ffffff;
    }
}

.hero-dot:focus-visible {
    outline: none;
}

.hero-dot:focus-visible .hero-dot-line {
    outline: 2px solid #ca2d1b;
    outline-offset: 3px;
}

/* --- Карточки --- */
.ns-slide-cards-wrapper {
    width: calc(100% + 48px);
    max-width: 1440px;
    margin: 0 -24px;
    padding: 8px 0 28px;
    position: relative;
}

.ns-card-swiper {
    width: 100%;
    overflow: hidden;
    padding: 4px 2px 10px 2px;
}

.ns-card-swiper .swiper-wrapper {
    align-items: stretch;
}

.ns-card-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.ns-card-arrow {
    position: absolute;
    top: 50%;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
    border: 1px solid #d6e2e6;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    color: #222729;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%) scale(0.85);
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

.ns-card-arrow.prev {
    inset-inline-start: 6px;
}

.ns-card-arrow.next {
    inset-inline-end: 6px;
}

.ns-card-arrow ion-icon {
    font-size: 14px;
}

.ns-card-arrow.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
}

@media (hover: hover) and (pointer: fine) {
    .ns-card-arrow.visible:hover {
        background: #ca2d1b;
        border-color: #ca2d1b;
        color: #fff;
        transform: translateY(-50%) scale(1.08);
        box-shadow: 0 10px 30px rgba(176, 141, 87, 0.35);
    }
}

.ns-card-arrow.visible:active {
    transform: translateY(-50%) scale(0.96);
}

.ns-card {
    flex: 1;
    background-color: #00222b;
    background-image: none;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    outline: 1px solid rgba(255, 255, 255, 0.14);
    outline-offset: -1px;
    padding: clamp(16px, 2vw, 24px) clamp(14px, 1.5vw, 20px);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    contain: layout style paint;
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        outline-color 0.35s ease;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    height: 325px;
    color: #fff;
    cursor: default;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.ns-card:not([data-loaded="true"]) {
    background-image: linear-gradient(
        90deg,
        #0a2d37 25%,
        #173d47 50%,
        #0a2d37 75%
    ) !important;
    background-size: 200% 100% !important;
    background-position: 0 0 !important;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.ns-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.8) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.ns-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        177deg,
        rgb(255 255 255 / 44%) 0%,
        rgb(255 255 255) 100%
    );
    z-index: 1;
    pointer-events: none;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.ns-card > * {
    position: relative;
    z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
    .ns-card:hover {
        transform: translate3d(0, -2px, 0);
        outline-color: #ca2d1b;
    }

    .ns-card:hover::after {
        transform: translateY(0);
    }

    .ns-card:hover .ns-card-title {
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    }
}

@media (hover: none) {
    .ns-card:active {
        transform: scale(0.98);
        outline-color: #ca2d1b;
    }

    .ns-card:active::after {
        opacity: 1;
    }
}

.ns-card-icon {
    font-size: clamp(28px, 2.5vw, 36px);
    color: #e4968d;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(42px, 4vw, 52px);
    height: clamp(42px, 4vw, 52px);
    border-radius: 50%;
    background: #fff;
    border: 1px solid #fff;
    margin-bottom: 0;
    flex-shrink: 0;
}

.ns-card-icon ion-icon {
    font-size: clamp(20px, 2vw, 26px);
    --ionicon-stroke-width: 28px;
}

.ns-card-icon img {
    width: 62%;
    height: 62%;
    object-fit: contain;
}

.ns-card-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.ns-card-title {
    font-family: "Manrope", sans-serif;
    font-size: calc((100vw - 760px) / (1920 - 760) * (23 - 16) + 16px);
    font-weight: 600;
    letter-spacing: 0px;
    line-height: 25px;
    margin-bottom: 14px;
    color: #ffffff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
    transition: text-shadow 0.35s ease;
}

.ns-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: transparent;
    border: none;
    color: #fff;
    padding: clamp(10px, 1.2vw, 14px) clamp(18px, 2vw, 28px);
    font-family: inherit;
    font-size: clamp(11px, 0.8vw + 0.3rem, 12px);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    z-index: 1;
    outline: none;
    isolation: isolate;
    outline: 1px solid rgba(255, 255, 255, 0.25);
    outline-offset: -1px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: color 0.4s ease;
}

.ns-card-btn__fill {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 2;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.ns-card-btn__text,
.ns-card-btn__icon {
    position: relative;
    z-index: 3;
}

.ns-card-btn__icon {
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
    .ns-card-btn:hover {
        color: #000;
    }

    .ns-card-btn:hover::before {
        opacity: 1;
    }

    .ns-card-btn:hover .ns-card-btn__fill {
        transform: translate(-50%, -50%) scale(1);
    }

    .ns-card-btn:hover .ns-card-btn__icon {
        transform: translateX(4px);
    }
}

@media (hover: none) {
    .ns-card-btn:active {
        color: #000;
    }

    .ns-card-btn:active::before {
        opacity: 1;
    }

    .ns-card-btn:active .ns-card-btn__fill {
        transform: translate(-50%, -50%) scale(1);
    }
}

.ns-card-btn:focus-visible {
    outline: 2px solid #ca2d1b;
    outline-offset: 3px;
    color: #000;
}

.ns-card-btn:focus-visible .ns-card-btn__fill {
    transform: translate(-50%, -50%) scale(1);
}

.ns-card-btn:focus-visible::before {
    opacity: 1;
}

.ns-card-btn:focus:not(:focus-visible) {
    outline: none;
}

.ns-card-btn:active {
    transform: scale(0.98);
    transition-duration: 0.1s;
}

.section-content {
    height: 1800px;
}

.ns-card-swiper .swiper-button-next,
.ns-card-swiper .swiper-button-prev,
.ns-card-swiper .swiper-pagination {
    display: none !important;
}

@media (max-width: 1280px) {
    .is-header-container {
        padding: 0 20px;
    }

    .is-header-bottom-inner {
        gap: 20px;
    }

    .is-header-menu {
        gap: 18px;
    }

    .is-header-menu-link {
        font-size: 14px;
    }

    .is-header-top-links {
        gap: 22px;
    }

    .is-header-top-info {
        gap: 16px;
    }

    .hero-title {
        font-size: 40px;
    }
}

@media (max-width: 1260px) {
    .is-header-search {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .is-header-search .is-header-search-form {
        display: flex;
    }

    .is-header-search .is-header-search-input {
        display: none;
    }

    .is-header-search .is-header-search-btn {
        position: static;
        transform: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #f5f5f6;
        font-size: 20px;
    }

    .is-header-search .is-header-search-btn:hover {
        background-color: #efeff0;
        color: #ca2d1b;
    }
}

@media (max-width: 1080px) {
    .is-header-top-links {
        gap: 16px;
    }

    .is-header-top-links > a,
    .is-header-top-link {
        font-size: 12px;
    }

    .is-header-top-info {
        gap: 14px;
    }

    .is-header-hours {
        font-size: 12px;
    }

    .is-header-phone {
        font-size: 14px;
    }

    .is-header-menu {
        gap: 14px;
    }

    .is-header-menu-link {
        font-size: 14px;
    }

    .is-header-region-btn {
        padding: 10px 16px;
        font-size: 14px;
    }

    .hero-title {
        font-size: 40px;
    }
}

@media (max-width: 970px) {
    .is-header-bottom-inner {
        gap: 10px;
    }

    .is-header-menu {
        gap: 10px;
    }

    .is-header-menu-link {
        font-size: 12px;
    }

    .is-header-logo img {
        height: 32px;
    }

    .is-header-region-btn {
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .is-header-region-btn .is-header-region-name {
        display: none;
    }

    .is-header-region-icon {
        font-size: 20px;
    }

    .hero-title {
        font-size: 40px;
    }
}

@media (max-width: 800px) {
    .is-header-hours {
        display: none;
    }
}

@media (max-width: 767px) {
    .is-header-container {
        padding: 0 14px;
    }

    .is-header-top-links {
        display: none;
    }

    .is-header-hours {
        display: none;
    }

    .is-header-top-inner {
        justify-content: flex-end;
        height: 40px;
    }

    .is-header-top-info {
        gap: 12px;
    }

    .is-header-phone {
        font-size: 12px;
    }

    .is-header-bottom-inner {
        height: 68px;
        gap: 8px;
    }

    .is-header-logo img {
        height: 28px;
    }

    .is-header-menu {
        display: none;
    }

    .is-header-burger {
        display: inline-flex;
        order: 1;
        margin-left: 0;
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .is-header-search {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .is-header-search .is-header-search-btn {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .is-header-region-btn {
        width: 36px;
        height: 36px;
    }

    .is-header-modal-content {
        padding: 16px;
    }

    .is-header-modal-title {
        font-size: 20px;
    }

    .is-header-selected-region-info {
        padding: 14px;
    }

    .hero {
        min-height: calc(100vh - 108px);
    }

    .hero-inner {
        padding: 40px 14px 0;
    }

    .hero-slider-dots {
        gap: 12px;
        padding-bottom: 14px;
    }

    .hero-dot {
        width: 56px;
        gap: 7px;
    }

    .hero-dot-num {
        font-size: 12px;
    }

    .ns-slide-cards-wrapper {
        width: calc(100% + 28px);
        margin-left: -14px;
        margin-right: -14px;
        padding: 4px 0 20px;
    }

    .ns-card-title {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .ns-card {
        max-width: 300px;
    }

    .ns-card-arrow {
        width: 36px;
        height: 36px;
    }

    .ns-card-arrow ion-icon {
        font-size: 16px;
    }
}

@media (max-width: 350px) {
    .hero-title {
        font-size: 28px;
    }
}

@media (min-width: 1024px) {
    .ns-card-arrow {
        width: 48px;
        height: 48px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
        inset-inline-start: -14px;
    }

    .ns-card-arrow.next {
        inset-inline-start: auto;
        inset-inline-end: -14px;
    }

    .ns-card-arrow ion-icon {
        font-size: 20px;
    }
}

/* hero: карточки без пиктограмм, с эффектами */
@property --sp {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
.ns-card {
    background-size: 100% 100%;
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        outline-color 0.35s ease,
        background-size 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        --sp 0.4s;
}
.ns-card::before {
    background:
        radial-gradient(
            200px circle at var(--mx, 50%) var(--my, 40%),
            rgba(255, 255, 255, calc(var(--sp) * 0.22)),
            transparent 62%
        ),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}
.ns-card-title {
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 12px;
}
.ns-card-title:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background: #ca2d1b;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
    .ns-card:hover {
        --sp: 1;
    }
    .ns-card:hover .ns-card-title:after {
        width: 72px;
    }
}
.ns-card-swiper .swiper-slide .ns-card {
    animation: nsRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ns-card-swiper .swiper-slide:nth-child(2) .ns-card {
    animation-delay: 0.07s;
}
.ns-card-swiper .swiper-slide:nth-child(3) .ns-card {
    animation-delay: 0.14s;
}
.ns-card-swiper .swiper-slide:nth-child(4) .ns-card {
    animation-delay: 0.21s;
}
.ns-card-swiper .swiper-slide:nth-child(5) .ns-card {
    animation-delay: 0.28s;
}
.ns-card-swiper .swiper-slide:nth-child(6) .ns-card {
    animation-delay: 0.35s;
}
@keyframes nsRise {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .ns-card-swiper .swiper-slide .ns-card {
        animation: none;
    }
    .ns-card,
    .hp-route,
    .hp-route .bgp {
        transition: none;
    }
}

/* ===== Главная: секции ниже hero (v4) ===== */
.section-content {
    height: auto !important;
}
.hp {
    --red: #ca2d1b;
    --red-d: #a82415;
    --ink: #222729;
    --navy: #004b60;
    --navy2: #00313e;
    --bg: #f5f5f6;
    --mut: #5d676e;
    --line: #e0e4e8;
    font-family: "Manrope", sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}
.hp * {
    box-sizing: border-box;
}
:where(.hp) a {
    color: inherit;
}
.hp button,
.hp a {
    touch-action: manipulation;
}
.hp a:focus-visible,
.hp button:focus-visible,
.hp input:focus-visible,
.hp [tabindex]:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
}
.hp-ar a:focus-visible,
.hp-ar button:focus-visible,
.hp-routes a:focus-visible,
.hp-cta a:focus-visible {
    outline-color: #fff;
}
.hp-wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}
.hp-sec {
    padding: 40px 0;
}
.hp-sec--w {
    background: #fff;
}
.hp-sec--g {
    background: var(--bg);
}
.hp-eyebrow {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 14px;
}
.hp-h2 {
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1.06;
    margin: 0;
    text-wrap: balance;
}
.hp-lead {
    color: var(--mut);
    font-size: 16px;
    line-height: 1.65;
    margin: 16px 0 0;
    max-width: 540px;
    text-wrap: pretty;
}
.hp-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.hp-link {
    color: var(--red);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid transparent;
    padding: 4px 0;
    transition: border-color 0.2s;
}
.hp-link:hover {
    border-color: currentColor;
}
.hp-link:after {
    content: " →";
    display: inline-block;
    transition: transform 0.2s;
}
.hp-link:hover:after {
    transform: translateX(3px);
}
.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    color: #fff !important;
    border: 1px solid var(--red);
    font: 600 12px Manrope;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 17px 30px;
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color 0.2s,
        color 0.2s,
        border-color 0.2s;
    min-height: 50px;
}
.hp-btn:hover {
    background: var(--red-d);
    border-color: var(--red-d);
}
.hp-btn--ghost {
    background: transparent;
    color: var(--red) !important;
}
.hp-btn--ghost:hover {
    background: var(--red);
    color: #fff !important;
}
.hp-btn--light {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.6);
}
.hp-btn--light:hover {
    background: #fff;
    border-color: #fff;
    color: var(--navy2) !important;
}
@media (prefers-reduced-motion: reduce) {
    .js .rv {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .hp-hot .dot {
        animation: none !important;
    }
}

/* фоновые баннеры секций */
.hp-bgimg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.hp-bgimg:after {
    content: "";
    position: absolute;
    inset: 0;
}

/* выберите свой путь: компактная полоса */
@property --sp {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
.hp-routes {
    position: relative;
    color: #fff;
    background: #00313e;
    overflow: hidden;
    padding: 24px 0;
}
.hp-routes .hp-bgimg {
    background-image: url(main/scenes/kitchen-modern.jpg);
}
.hp-routes .hp-bgimg:after {
    background: linear-gradient(
        90deg,
        rgba(0, 49, 62, 0.95),
        rgba(0, 49, 62, 0.82)
    );
}
.hp-routes .hp-wrap {
    position: relative;
}
.hp-rgrid {
    display: grid;
    grid-template-columns: minmax(210px, 0.8fr) repeat(3, 1.2fr);
    gap: 14px;
    align-items: stretch;
}
.hp-rt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding-right: 12px;
}
.hp-rt h2 {
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1.05;
    margin: 0;
    color: #fff;
    text-wrap: balance;
}
.hp-rt p {
    margin: 0;
    font-size: 14px;
    color: #b3c9cf;
    line-height: 1.5;
}
.hp-route {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 20px 22px;
    min-height: 104px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    text-decoration: none;
    transition: border-color 0.3s;
}
.hp-route .bgp {
    display: none;
} /* фото в карточках убраны: при наведении они мелькали */
.hp-route:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        90deg,
        rgba(0, 49, 62, 0.86),
        rgba(0, 49, 62, 0.5)
    );
}
.hp-route:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--red);
    opacity: 0;
    transition: opacity 0.3s;
}
/* спокойное наведение: без движения, зума и подсветки за курсором */
.hp-route:hover {
    border-color: rgba(255, 255, 255, 0.5);
}
.hp-route:hover:before {
    opacity: 1;
}
.hp-route .n {
    font-family: "Manrope", sans-serif;
    font-size: 28px;
    color: #e4968d;
    line-height: 1;
    transition: transform 0.4s;
}

.hp-route .tx {
    display: grid;
    gap: 5px;
    min-width: 0;
}
.hp-route .who {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #b3c9cf;
}
.hp-route strong {
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.12;
    text-wrap: balance;
}
.hp-route .go {
    width: 26px;
    height: 2px;
    background: #fff;
    transition: background-color 0.3s;
}
.hp-route:hover .go {
    background: var(--red);
}
/* каталог */
.hp-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 34px;
    overflow-x: auto;
    scrollbar-width: none;
}
.hp-tabs::-webkit-scrollbar {
    display: none;
}
.hp-tabs button {
    background: #fff;
    border: 1px solid var(--line);
    padding: 13px 22px;
    font: 600 14px Manrope;
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color 0.2s,
        color 0.2s,
        border-color 0.2s;
    min-height: 48px;
}
.hp-tabs button:hover {
    border-color: var(--ink);
}
.hp-tabs button.on {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.hp-tabs .hp-link {
    margin-left: auto;
    align-self: center;
}
.hp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 22px;
}
.hp-decor {
    display: block;
    text-decoration: none;
    color: inherit;
}
.hp-decor .im {
    position: relative;
    aspect-ratio: 3/2;
    overflow: hidden;
    background: #e4e7ea;
}
.hp-decor .im img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s;
}
.hp-decor:hover .im img {
    transform: scale(1.06);
}
.hp-decor .tag {
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 7px 11px;
}
.hp-decor .tag.n {
    color: var(--red);
}
.hp-decor .tag.t {
    color: var(--navy);
}
.hp-decor h3 {
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 28px;
    margin: 14px 0 2px;
    line-height: 1.15;
    transition: color 0.2s;
}
.hp-decor:hover h3 {
    color: var(--red);
}
.hp-decor p {
    margin: 0;
    font-size: 14px;
}
.hp-decor .m {
    font-size: 14px;
    color: var(--mut);
    margin-top: 4px;
}
.hp-more {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}

/* ИИ-дизайнер + AR — на фоне баннера */
.hp-ar {
    position: relative;
    background: #00222b;
    overflow: hidden;
}
.hp-ar .hp-bgimg {
    background-image: url(main/projects/neva.jpg);
}
.hp-ar .hp-bgimg:after {
    background: rgba(0, 49, 62, 0.8);
}
.hp-ar .hp-wrap {
    position: relative;
}
.hp-card {
    display: grid;
    grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
    background: rgba(0, 49, 62, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.hp-left {
    padding: 50px 44px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}
.hp-chip {
    align-self: flex-start;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #e4968d;
}
.hp-left h2 {
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1.08;
    margin: 0;
    text-wrap: balance;
}
.hp-left h2 em {
    font-style: normal;
    color: #e4968d;
}
.hp-seg {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.hp-seg button {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: #b3c9cf;
    font: 600 14px Manrope;
    padding: 12px 0;
    margin-right: 28px;
    cursor: pointer;
    transition:
        color 0.2s,
        border-color 0.2s;
    min-height: 48px;
}
.hp-seg button:hover {
    color: #fff;
}
.hp-seg button.on {
    color: #fff;
    border-color: var(--red);
}
.hp-pane {
    display: none;
    flex-direction: column;
    gap: 22px;
}
.hp-pane.on {
    display: flex;
}
.hp-pane p {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: #ccdbdf;
    text-wrap: pretty;
}
.hp-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
    font-size: 14px;
    counter-reset: s;
}
.hp-steps li {
    display: flex;
    gap: 14px;
    align-items: center;
    counter-increment: s;
}
.hp-steps li:before {
    content: counter(s);
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e4968d;
    color: #e4968d;
    font-size: 14px;
    font-weight: 600;
    display: grid;
    place-items: center;
}
.hp-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.d-only {
    display: inline;
}
.m-only {
    display: none;
}
.hp-note {
    margin-top: auto;
    font-size: 14px;
    color: #99b8bf;
    line-height: 1.55;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 18px;
}
.hp-right {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #ebebec;
}
.hp-view {
    display: none;
    flex: 1;
    position: relative;
    flex-direction: column;
    min-width: 0;
}
.hp-view.on {
    display: flex;
}
#view-ar {
    min-height: 620px;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-direction: row;
    padding: 32px;
    background: linear-gradient(160deg, #eceef0, #cdd2d6);
}
.hp-arbg {
    position: absolute;
    left: 36px;
    top: 32px;
    color: #8a1f12;
}
.hp-arbg b {
    display: block;
    font-size: 28px;
    letter-spacing: 0.03em;
}
.hp-arbg span {
    font-weight: 600;
    font-size: 20px;
    color: #555;
}
.hp-arbg small {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    letter-spacing: 0.14em;
    color: #777;
    text-transform: uppercase;
}
.hp-phone {
    position: relative;
    z-index: 1;
    width: 300px;
    height: 560px;
    background: #101418;
    border-radius: 40px;
    padding: 11px;
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35);
    flex: none;
}
.hp-screen {
    background: #fff;
    border-radius: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--ink);
}
.hp-scr-head {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 28px 14px 10px;
    font-weight: 600;
    font-size: 16px;
    min-height: 68px;
}
.hp-scr-head em {
    font-style: normal;
    color: var(--red);
}
.hp-scr-head button {
    border: 0;
    background: #fbeeed;
    color: var(--red);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font: 600 16px Manrope;
    flex: none;
}
.hp-scr-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 12px 14px;
    display: grid;
    gap: 10px;
    align-content: start;
}
.hp-scr-body.g2 {
    grid-template-columns: 1fr 1fr;
}
.hp-bt {
    background: #f4f5f6;
    border: 0;
    border-radius: 10px;
    padding: 16px 8px;
    text-align: center;
    cursor: pointer;
    font: inherit;
    display: grid;
    gap: 8px;
    justify-items: center;
    transition:
        background-color 0.2s,
        transform 0.2s;
}
.hp-bt:hover {
    background: #eaecee;
    transform: translateY(-2px);
}
.hp-bt .lg {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    font-weight: 600;
    color: var(--ink);
    font-size: 16px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.14);
}
.hp-bt b {
    font-size: 14px;
}
.hp-bt span.t {
    font-size: 14px;
    color: var(--red);
    background: #fbeeed;
    border-radius: 10px;
    padding: 3px 8px;
    line-height: 1.3;
}
.hp-dt {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.hp-dt .im {
    aspect-ratio: 3/2;
    overflow: hidden;
    display: block;
    border-radius: 6px;
}
.hp-dt .im img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}
.hp-dt:hover .im img {
    transform: scale(1.08);
}
.hp-dt b {
    display: block;
    font-size: 14px;
    margin-top: 6px;
    line-height: 1.25;
}
.hp-dt span.s {
    font-size: 14px;
    color: var(--mut);
}
.hp-final {
    display: grid;
    gap: 12px;
    text-align: center;
}
.hp-final .im {
    aspect-ratio: 3/2;
    overflow: hidden;
    border-radius: 8px;
}
.hp-final .im img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hp-final b {
    font-size: 16px;
}
.hp-final p {
    margin: 0;
    font-size: 14px;
    color: var(--mut);
    line-height: 1.5;
}
.hp-final .go {
    background: var(--red);
    color: #fff;
    border: 0;
    padding: 15px;
    font: 600 12px Manrope;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    min-height: 48px;
}
.hp-qrcard {
    position: relative;
    z-index: 1;
    width: 240px;
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    display: grid;
    gap: 14px;
    justify-items: center;
    text-align: center;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
    color: var(--ink);
}
.hp-qrcode {
    width: 156px;
    height: 156px;
    border: 8px solid #fff;
    outline: 1px solid var(--line);
    background: repeating-conic-gradient(#222 0 25%, #fff 0 50%) 0 0/22px 22px;
    opacity: 0.2;
    transition: opacity 0.4s;
}
.hp-qrcard.on .hp-qrcode {
    opacity: 1;
}
.hp-qrtxt b {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
}
.hp-qrtxt span {
    font-size: 14px;
    color: var(--mut);
    line-height: 1.5;
}
#view-des {
    background: #1a1e21;
}
.hp-hintbar {
    background: #33383c;
    color: #fff;
    font-size: 14px;
    padding: 13px 18px;
    line-height: 1.4;
}
.hp-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1600/770;
    background: #222;
    overflow: hidden;
}
.hp-stage svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.zsel {
    fill: none;
    stroke: #e4968d;
    stroke-width: 5;
    stroke-dasharray: 14 9;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.zsel.on {
    opacity: 1;
}
.hp-hot {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: var(--ink);
    border: 0;
    border-radius: 26px;
    padding: 6px 16px 6px 6px;
    font: 600 12px Manrope;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    transition:
        background-color 0.2s,
        color 0.2s;
    white-space: nowrap;
    min-height: 44px;
}
.hp-hot .dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--navy);
    display: grid;
    place-items: center;
    animation: hpPulse 2.2s infinite;
}
.hp-hot .dot:after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
}
.hp-hot.on {
    background: var(--navy2);
    color: #fff;
}
.hp-hot.on .dot {
    background: var(--red);
    animation: none;
}
@keyframes hpPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 75, 96, 0.55);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(0, 75, 96, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 75, 96, 0);
    }
}
.hp-compare {
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.95);
    border: 0;
    border-radius: 22px;
    padding: 11px 18px;
    font: 600 12px Manrope;
    cursor: pointer;
    color: var(--navy2);
    user-select: none;
    min-height: 44px;
    transition:
        background-color 0.2s,
        color 0.2s;
}
.hp-compare.on {
    background: var(--red);
    color: #fff;
}
.hp-disc {
    position: absolute;
    left: 12px;
    bottom: 10px;
    font-size: 14px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: 4px 9px;
    border-radius: 4px;
}
.hp-editor {
    background: #fff;
    padding: 18px 22px 20px;
    display: grid;
    gap: 16px;
    color: var(--ink);
}
.hp-zones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.hp-zones button {
    background: #f1f3f4;
    border: 0;
    border-radius: 22px;
    padding: 10px 18px;
    font: 600 12px Manrope;
    cursor: pointer;
    color: var(--ink);
    transition:
        background-color 0.2s,
        color 0.2s;
    min-height: 44px;
}
.hp-zones button.on {
    background: var(--navy2);
    color: #fff;
}
.hp-sw {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    scrollbar-width: thin;
}
.hp-sw button {
    flex: none;
    width: 68px;
    height: 68px;
    padding: 0;
    border: 2px solid transparent;
    outline: 1px solid var(--line);
    cursor: pointer;
    overflow: hidden;
    background: #eee;
    transition:
        transform 0.2s,
        border-color 0.2s;
}
.hp-sw button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hp-sw button:hover {
    transform: translateY(-2px);
}
.hp-sw button.on {
    border-color: var(--red);
    outline-color: var(--red);
}
.hp-ed-foot {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.hp-info b {
    display: block;
    font-family: "Manrope", sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
}
.hp-info span {
    font-size: 14px;
    color: var(--mut);
}
.hp-edlinks {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

/* проекты */
.hp-bento {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    grid-template-rows: 300px 300px;
    gap: 16px;
}
.hp-proj {
    position: relative;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: flex-end;
    background: #222;
}
.hp-proj img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s;
}
.hp-proj:hover img {
    transform: scale(1.05);
}
.hp-proj:first-child {
    grid-row: span 2;
}
.hp-proj:nth-child(2) {
    grid-column: span 2;
}
.hp-proj:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(6, 18, 26, 0.92) 0,
        rgba(6, 18, 26, 0.62) 34%,
        rgba(6, 18, 26, 0) 68%
    );
}
.hp-proj .cap {
    position: relative;
    z-index: 1;
    padding: 24px 26px;
    width: 100%;
}
.hp-proj small {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ff9a88;
    margin-bottom: 8px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.hp-proj h3 {
    color: #fff;
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.12;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
    text-wrap: balance;
}

/* цифры */
.hp-num {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 20px;
    align-items: stretch;
}
.hp-stat {
    background: var(--navy);
    color: #fff;
    padding: 54px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 42px 30px;
    align-content: center;
}
.hp-stat b {
    display: block;
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1;
}
.hp-stat span {
    font-size: 14px;
    color: #b3c9cf;
    line-height: 1.5;
    display: block;
    margin-top: 10px;
}
.hp-video {
    position: relative;
    min-height: 360px;
    background: url(main/img/hero_static.jpg) center/cover;
    display: grid;
    place-items: center;
    cursor: pointer;
    border: 0;
    width: 100%;
    color: #fff;
    font: inherit;
    padding: 0;
}
.hp-video:before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 49, 62, 0.5);
    transition: background-color 0.3s;
}
.hp-video:hover:before {
    background: rgba(0, 49, 62, 0.35);
}
.hp-play {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.14);
    transition:
        background-color 0.3s,
        border-color 0.3s;
}
.hp-play:after {
    content: "";
    position: absolute;
    left: 36px;
    top: 28px;
    border-left: 24px solid #fff;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
}
.hp-video:hover .hp-play {
    background: var(--red);
    border-color: var(--red);
}
.hp-vcap {
    position: absolute;
    left: 30px;
    bottom: 26px;
    font-family: "Manrope", sans-serif;
    font-size: 28px;
    z-index: 1;
}

/* журнал — компактный список */
.hp-jgrid {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
}
.hp-jgrid.on {
    display: grid;
}
.hp-j {
    display: grid;
    grid-template-columns: 184px 1fr;
    gap: 22px;
    padding: 22px 0;
    border-top: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    align-items: start;
}
.hp-j .pic {
    aspect-ratio: 3/2;
    overflow: hidden;
    background: #e4e7ea;
    display: block;
}
.hp-j .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s;
}
.hp-j:hover .pic img {
    transform: scale(1.06);
}
.hp-j .meta {
    display: flex;
    gap: 10px;
    font-size: 14px;
    color: var(--mut);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.hp-j .meta em {
    font-style: normal;
    color: var(--red);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 14px;
}
.hp-j .dl {
    background: #fbeeed;
    color: var(--red);
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 14px;
}
.hp-j h3 {
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.18;
    margin: 0;
    transition: color 0.2s;
    text-wrap: balance;
}
.hp-j:hover h3 {
    color: var(--red);
}
.hp-j p {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--mut);
    line-height: 1.55;
}

/* призыв и подвал */
.hp-cta {
    background: var(--ink);
    color: #fff;
    padding: 36px 0;
}
.hp-cta .hp-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}
.hp-cta h2 {
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 40px;
    margin: 0 0 10px;
    text-wrap: balance;
}
.hp-cta p {
    margin: 0;
    color: #b9c0c4;
    font-size: 16px;
}
.hp-foot {
    background: #f6f7f8;
    padding: 64px 0 32px;
    font-size: 14px;
}
.hp-fg {
    display: grid;
    grid-template-columns: 300px repeat(4, 1fr);
    gap: 32px;
}
.hp-fc {
    background: #fff;
    border-top: 3px solid var(--red);
    padding: 24px;
    display: grid;
    gap: 10px;
    align-content: start;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}
.hp-fc img {
    height: 28px;
    justify-self: start;
}
.hp-fc a {
    color: var(--ink);
    text-decoration: none;
}
.hp-fc .tel {
    font-weight: 600;
    font-size: 20px;
}
.hp-fc small {
    color: var(--mut);
    line-height: 1.5;
}
.hp-foot h4 {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 600;
    color: var(--red);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.hp-foot ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
}
.hp-foot ul a {
    text-decoration: none;
    color: var(--ink);
}
.hp-foot ul a:hover {
    color: var(--red);
}
.hp-foot ul ul {
    padding-left: 14px;
    margin-top: 8px;
    color: var(--mut);
}
.hp-fb {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
    align-items: center;
}
.hp-fb a {
    background: #fff;
    border: 1px solid var(--line);
    padding: 14px 18px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    font-size: 14px;
    transition:
        border-color 0.2s,
        color 0.2s;
}
.hp-fb a:hover {
    border-color: var(--red);
    color: var(--red);
}
.hp-fb span {
    font-weight: 600;
    color: var(--red);
    margin-right: 6px;
}
.hp-bottom {
    background: var(--navy2);
    color: #99b8bf;
    font-size: 14px;
    padding: 18px 0;
}
.hp-bottom .hp-wrap {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.hp-bottom a {
    color: #99b8bf;
    text-decoration: none;
}
.hp-mbar {
    display: none;
}

@media (max-width: 1180px) {
    .hp-h2 {
        font-size: 40px;
    }
    .hp-card {
        grid-template-columns: minmax(0, 1fr);
    }
    .hp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hp-rgrid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .hp-rt {
        grid-column: 1/-1;
        padding: 0 0 6px;
    }
    .hp-route {
        grid-template-columns: auto 1fr;
        min-height: 96px;
    }
    .hp-route .go {
        display: none;
    }
    .hp-num {
        grid-template-columns: 1fr;
    }
    .hp-fg {
        grid-template-columns: 1fr 1fr;
    }
    .hp-fc {
        grid-column: span 2;
    }
    .hp-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 280px 220px 220px;
    }
    .hp-proj:first-child {
        grid-row: auto;
        grid-column: span 2;
    }
    .hp-proj:nth-child(2) {
        grid-column: auto;
    }
    .hp-jgrid {
        grid-template-columns: 1fr;
    }
    .hp-arbg {
        display: none;
    }
    #view-ar {
        padding: 36px 20px;
    }
}
@media (max-width: 760px) {
    .hp-wrap {
        padding: 0 16px;
    }
    .hp-sec {
        padding: 28px 0;
    }
    .hp-routes {
        padding: 32px 0 36px;
    }
    .hp-h2 {
        font-size: 40px;
    }
    .hp-lead {
        font-size: 16px;
    }
    .hp-head {
        margin-bottom: 28px;
    }
    .hp-btn {
        width: 100%;
    }
    .hp-rgrid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .hp-rt h2 {
        font-size: 28px;
    }
    .hp-route {
        padding: 16px 18px;
        min-height: 84px;
    }
    .hp-route strong {
        font-size: 20px;
    }
    .hp-grid {
        gap: 24px 14px;
    }
    .hp-decor h3 {
        font-size: 20px;
    }
    .hp-decor p {
        font-size: 14px;
    }
    .hp-left {
        padding: 32px 20px;
    }
    .hp-left h2 {
        font-size: 28px;
    }
    .d-only {
        display: none;
    }
    .m-only {
        display: inline;
    }
    .hp-qrcard,
    .hp-arbg {
        display: none;
    }
    #view-ar {
        padding: 14px 12px;
        background: #e9ebed;
        min-height: 0;
    }
    .hp-phone {
        width: 100%;
        height: auto;
        background: none;
        padding: 0;
        box-shadow: none;
        border-radius: 0;
    }
    .hp-screen {
        height: auto;
        border-radius: 12px;
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
    }
    .hp-scr-head {
        padding: 16px 14px 8px;
        min-height: 0;
    }
    .hp-scr-body {
        overflow: visible;
        padding-bottom: 16px;
    }
    .hp-final .go {
        font-size: 14px;
    }
    .hp-hot span {
        display: none;
    }
    .hp-hot {
        padding: 6px;
    }
    .hp-compare {
        right: 10px;
        top: 10px;
        padding: 10px 14px;
    }
    .hp-disc {
        display: none;
    }
    .hp-editor {
        padding: 16px;
    }
    .hp-zones {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    .hp-zones button {
        white-space: nowrap;
    }
    .hp-sw button {
        width: 62px;
        height: 62px;
    }
    .hp-bento {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: 230px;
    }
    .hp-proj:first-child,
    .hp-proj:nth-child(2) {
        grid-column: auto;
    }
    .hp-proj:first-child {
        grid-row: span 2;
    }
    .hp-proj h3 {
        font-size: 28px;
    }
    .hp-stat {
        padding: 32px 22px;
        gap: 28px 16px;
    }
    .hp-stat b {
        font-size: 40px;
    }
    .hp-video {
        min-height: 240px;
    }
    .hp-j {
        grid-template-columns: 112px 1fr;
        gap: 16px;
        padding: 18px 0;
    }
    .hp-j h3 {
        font-size: 20px;
    }
    .hp-j p {
        display: none;
    }
    .hp-cta h2 {
        font-size: 28px;
    }
    .hp-fg {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .hp-fc {
        grid-column: auto;
        margin-bottom: 12px;
    }
    .hp-foot h4 {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0;
        padding: 16px 0;
    }
    .hp-foot h4:after {
        content: "+";
        font-size: 20px;
        font-weight: 400;
    }
    .hp-foot h4.open:after {
        content: "–";
    }
    .hp-foot h4 + ul {
        display: none;
        padding: 12px 0 8px;
    }
    .hp-foot h4.open + ul {
        display: grid;
    }
    .hp-foot h4[style] {
        margin-top: 0 !important;
    }
    .hp-fb {
        gap: 8px;
    }
    .hp-fb span {
        width: 100%;
        margin: 8px 0 0 !important;
    }
    .hp-bottom {
        padding-bottom: 84px;
    }
    .hp-mbar {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        background: #fff;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .hp-mbar a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 56px;
        font: 600 14px Manrope;
        color: var(--ink);
        text-decoration: none;
    }
    .hp-mbar a:first-child {
        background: var(--red);
        color: #fff;
    }
}

/* полоса «Выберите свой путь»: быстрые ссылки в карточках */
.hp-route {
    cursor: pointer;
}
.hp-route .rmain {
    color: inherit;
    text-decoration: none;
}
.hp-route .rmain:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.hp-route .rlinks {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    margin-top: 6px;
    position: relative;
    z-index: 2;
}
.hp-route .rlinks a {
    font-size: 14px;
    font-weight: 600;
    color: #b3c9cf;
    text-decoration: none;
    padding: 5px 0;
    border-bottom: 1px solid rgba(184, 207, 217, 0.35);
    transition:
        color 0.2s,
        border-color 0.2s;
}
.hp-route .rlinks a:hover {
    color: #fff;
    border-color: #e4968d;
}
@media (max-width: 760px) {
    .hp-route .rlinks {
        gap: 0 16px;
    }
    .hp-route .rlinks a {
        padding: 9px 0;
    }
}

/* Interstone в цифрах: живая версия */
.hp-stat {
    background:
        linear-gradient(rgba(0, 75, 96, 0.94), rgba(0, 49, 62, 0.96)),
        url(main/decors/g-m732.jpg) center/cover;
    position: relative;
    overflow: hidden;
}
.hp-stat > div {
    position: relative;
    padding-top: 22px;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-stat > div:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 2px;
    background: var(--red);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-stat > div:last-child:before {
    display: none;
}
.hp-stat > div:last-child {
    padding-top: 0;
}
.hp-stat > div:hover:before {
    width: 100%;
}
.hp-stat > div:hover {
    transform: translateY(-3px);
}
.hp-stat b {
    transition: color 0.3s;
    font-variant-numeric: tabular-nums;
}
.hp-stat > div:hover b {
    color: #e4968d;
}
.hp-video {
    overflow: hidden;
    background: #004b60;
}
.hp-video .vimg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url(main/img/hero_static.jpg) center/cover;
    transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-video:hover .vimg {
    transform: scale(1.08);
}
.hp-video:before {
    z-index: 1;
}
.hp-play,
.hp-vcap {
    z-index: 2;
}
.hp-play:before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.7);
    animation: hpRing 2.6s ease-out infinite;
}
@keyframes hpRing {
    0% {
        transform: scale(1);
        opacity: 0.9;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}
.hp-vcap:after {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    background: var(--red);
    margin-top: 10px;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-video:hover .hp-vcap:after {
    width: 96px;
}
@media (prefers-reduced-motion: reduce) {
    .hp-play:before {
        animation: none;
    }
    .hp-video .vimg,
    .hp-stat > div {
        transition: none;
    }
}

/* форма обратной связи */
.hp-dlg {
    margin: auto;
    inset: 0;
    border: 0;
    padding: 0;
    width: min(520px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow: auto;
    background: #fff;
    color: #222729;
    font-family: "Manrope", sans-serif;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
}
.hp-dlg::backdrop {
    background: rgba(0, 49, 62, 0.7);
}
html:has(dialog[open]) {
    overflow: hidden;
}
.hp-fm {
    padding: 36px 36px 32px;
    display: grid;
    gap: 16px;
    position: relative;
}
.hp-fm h2 {
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1.1;
    margin: 0;
}
.hp-ft {
    margin: 0;
    font-size: 14px;
    color: #5d676e;
    line-height: 1.55;
}
.hp-ft b {
    color: #222729;
}
.hp-dx {
    position: absolute;
    right: 20px;
    top: 18px;
    background: none;
    border: 0;
    font: 600 14px Manrope;
    color: #5d676e;
    cursor: pointer;
    padding: 8px;
    min-height: 44px;
}
.hp-dx:hover {
    color: #ca2d1b;
}
.hp-fl {
    display: grid;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
}
.hp-fl input,
.hp-fl select,
.hp-fl textarea {
    font: 400 16px Manrope;
    color: #222729;
    border: 1px solid #cfd5da;
    background: #fff;
    padding: 13px 14px;
    min-height: 48px;
    width: 100%;
    border-radius: 0;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}
.hp-fl textarea {
    resize: vertical;
    min-height: 84px;
}
.hp-fl input:focus-visible,
.hp-fl select:focus-visible,
.hp-fl textarea:focus-visible {
    outline: none;
    border-color: #ca2d1b;
    box-shadow: 0 0 0 3px rgba(202, 45, 27, 0.18);
}
.hp-fl input:user-invalid {
    border-color: #ca2d1b;
}
.hp-frow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.hp-fk {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #5d676e;
    line-height: 1.5;
    align-items: flex-start;
}
.hp-fk input {
    margin-top: 2px;
    width: 20px;
    height: 20px;
    flex: none;
    accent-color: #ca2d1b;
}
.hp-fk a {
    color: #ca2d1b;
}
.hp-fe {
    margin: 0;
    color: #a82415;
    font-size: 14px;
}
.hp-fm .hp-btn {
    width: 100%;
}
@media (max-width: 560px) {
    .hp-fm {
        padding: 28px 20px 24px;
    }
    .hp-frow {
        grid-template-columns: 1fr;
    }
    .hp-fm h2 {
        font-size: 28px;
    }
}
.hp-fm[hidden],
.hp-fe[hidden] {
    display: none;
}

/* AR-проект: отдельный светлый блок */
.hp-arsec {
    background: linear-gradient(160deg, #eef1f3, #d9dee2);
}
.hp-arwrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 64px;
    align-items: center;
}
.hp-artext .hp-lead {
    max-width: 480px;
}
.hp-artext .hp-steps {
    margin: 28px 0 32px;
    color: var(--ink);
}
.hp-steps--l li:before {
    border-color: var(--red);
    color: var(--red);
}
.hp-arwrap #view-ar {
    min-height: 0;
    padding: 0;
    background: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 28px;
}
@media (max-width: 1180px) {
    .hp-arwrap {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}
@media (max-width: 760px) {
    .hp-arwrap #view-ar {
        padding: 0;
        background: none;
    }
    .hp-artext .hp-steps {
        margin: 22px 0 24px;
    }
}

/* ИИ-дизайнер: загрузка фото */
.ai-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 22px;
}
.ai-step {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 16px;
    align-items: start;
}
.ai-step .num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #e4968d;
    color: #e4968d;
    font-size: 14px;
    font-weight: 600;
    display: grid;
    place-items: center;
    transition:
        background-color 0.3s,
        color 0.3s;
}
.ai-step.done .num {
    background: #e4968d;
    color: #00313e;
}
.ai-step .body {
    display: grid;
    gap: 12px;
    min-width: 0;
}
.ai-step b {
    font-size: 16px;
}
.ai-drop {
    position: relative;
    display: grid;
    gap: 4px;
    border: 1.5px dashed rgba(255, 255, 255, 0.4);
    padding: 20px 18px;
    cursor: pointer;
    transition:
        border-color 0.2s,
        background-color 0.2s;
    background: rgba(255, 255, 255, 0.04);
}
.ai-drop:hover,
.ai-drop.over {
    border-color: #e4968d;
    background: rgba(255, 138, 118, 0.08);
}
.ai-drop input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.ai-drop:focus-within {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
.ai-drop .t {
    font-weight: 600;
    font-size: 14px;
}
.ai-drop .s {
    font-size: 14px;
    color: #99b8bf;
}
.ai-sample {
    justify-self: start;
    background: none;
    border: 0;
    color: #e4968d;
    font: 600 14px Manrope;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 138, 118, 0.5);
    cursor: pointer;
    min-height: 36px;
}
.ai-sample:hover {
    color: #fff;
    border-color: #fff;
}
.ai-err {
    margin: 0;
    color: #ffb3a6;
    font-size: 14px;
}
.ai-err[hidden] {
    display: none;
}
.ai-decors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.ai-decors button {
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid transparent;
    outline: 1px solid rgba(255, 255, 255, 0.25);
    background: #222;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 0.2s,
        border-color 0.2s;
}
.ai-decors button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ai-decors button:hover {
    transform: translateY(-2px);
}
.ai-decors button[aria-checked="true"] {
    border-color: var(--red);
    outline-color: var(--red);
}
.ai-all {
    justify-self: start;
}
.ai-step .hp-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.ai-right {
    background: #10181d;
}
.ai-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1600/770;
    background: #1a232a;
    overflow: hidden;
}
.ai-img,
.ai-after {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.ai-img {
    object-fit: cover;
}
.ai-after {
    clip-path: inset(0 0 0 var(--pos, 55%));
}
.ai-after[hidden],
.ai-img[hidden] {
    display: none;
}
.ai-stage[data-state="done"][data-mode="user"] .ai-after {
    display: none;
}
.ai-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 8px;
    text-align: center;
    color: #99b8bf;
    font-size: 14px;
    background: repeating-linear-gradient(
        135deg,
        #1a232a 0 18px,
        #1d2830 18px 36px
    );
}
.ai-empty b {
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 28px;
    color: #fff;
}
.ai-stage:not([data-state="empty"]) .ai-empty {
    display: none;
}
.ai-scan {
    position: absolute;
    inset: 0;
    background: rgba(0, 49, 62, 0.45);
}
.ai-scan[hidden] {
    display: none;
}
.ai-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #e4968d, transparent);
    box-shadow: 0 0 24px 6px rgba(255, 138, 118, 0.55);
    animation: aiScan 1.8s ease-in-out infinite;
}
@keyframes aiScan {
    0% {
        top: 0;
    }
    50% {
        top: calc(100% - 3px);
    }
    100% {
        top: 0;
    }
}
.ai-status {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    background: rgba(0, 49, 62, 0.92);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 20px;
    white-space: nowrap;
}
.ai-lab {
    position: absolute;
    top: 14px;
    z-index: 2;
    background: rgba(0, 49, 62, 0.85);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 7px 12px;
}
.ai-lab--b {
    left: 14px;
}
.ai-lab--a {
    right: 14px;
}
.ai-lab[hidden] {
    display: none;
}
.ai-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos, 55%);
    width: 2px;
    background: #fff;
    z-index: 2;
    pointer-events: none;
    transform: translateX(-1px);
}
.ai-handle[hidden] {
    display: none;
}
.ai-handle span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.ai-handle span:before,
.ai-handle span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    transform: translateY(-50%);
}
.ai-handle span:before {
    left: 5px;
    border-right-color: #00313e;
}
.ai-handle span:after {
    right: 5px;
    border-left-color: #00313e;
}
.ai-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ew-resize;
    z-index: 3;
    margin: 0;
}
.ai-range[hidden] {
    display: none;
}
.ai-mock {
    position: absolute;
    left: 14px;
    bottom: 14px;
    background: rgba(202, 45, 27, 0.95);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 14px;
    z-index: 2;
}
.ai-mock[hidden] {
    display: none;
}
.ai-bar {
    background: #fff;
    color: var(--ink);
    padding: 16px 22px;
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
@media (prefers-reduced-motion: reduce) {
    .ai-line {
        animation: none;
        top: 50%;
    }
}
@media (max-width: 760px) {
    .ai-decors {
        grid-template-columns: repeat(4, 1fr);
    }
    .ai-bar {
        padding: 14px 16px;
    }
    .ai-empty b {
        font-size: 20px;
    }
    .ai-status {
        font-size: 14px;
        padding: 9px 14px;
        white-space: normal;
        text-align: center;
        width: calc(100% - 24px);
    }
}
.ai-right {
    display: flex;
    flex-direction: column;
}
.ai-stage {
    flex: 1;
    aspect-ratio: auto;
    min-height: 340px;
}
@media (max-width: 1180px) {
    .ai-stage {
        flex: none;
        aspect-ratio: 4/3;
        min-height: 0;
    }
}

.hp-hl {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: center;
}
@media (max-width: 760px) {
    .hp-hl {
        gap: 6px 24px;
    }
}

.ai-lead {
    font-size: 16px;
    color: #ccdbdf;
    margin: 0;
}
.ai-right .hp-view {
    flex: 1;
}
@media (max-width: 1180px) {
    .ai-right #view-ai {
        flex: none;
    }
}
.hp-arbg {
    display: none;
}

/* подвал: как на сайте, без пиктограмм */
.hp-foot2 {
    background: #fff;
    padding: 0 0 40px;
    border-top: 0;
}
.hp-foot2:before {
    content: "";
    display: block;
    height: 1px;
    max-width: 1392px;
    margin: 0 auto 56px;
    background: linear-gradient(
        90deg,
        transparent,
        #ca2d1b 18%,
        #004b60 50%,
        #ca2d1b 82%,
        transparent
    );
}
.f2-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1.05fr) 1.2fr 1fr 1.1fr;
    gap: 40px;
}
.f2-card {
    background: linear-gradient(180deg, #fbeeed, #fff 55%);
    border: 1px solid #f4d5d1;
    border-top: 3px solid #ca2d1b;
    border-radius: 8px;
    padding: 28px 28px 26px;
    display: grid;
    gap: 14px;
    align-content: start;
}
.f2-t {
    font-size: 20px;
    color: #ca2d1b;
    padding-bottom: 12px;
    border-bottom: 1px solid #eadcda;
    font-weight: 400;
}
.f2-logo {
    justify-self: center;
    margin: 8px 0 2px;
}
.f2-tel {
    justify-self: center;
    color: #004b60;
    font-weight: 600;
    font-size: 20px;
    text-decoration: none;
}
.f2-addr {
    border-top: 1px solid #eadcda;
    padding-top: 14px;
    display: grid;
    gap: 8px;
}
.f2-addr p {
    margin: 0;
    color: #667078;
    font-size: 14px;
    line-height: 1.5;
}
.f2-addr a {
    color: #004b60;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    justify-self: start;
}
.f2-addr a:hover {
    color: #ca2d1b;
}
.f2-soc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid #eadcda;
    padding-top: 16px;
}
.f2-soc a,
.f2-acc {
    background: #e9eef0;
    color: #004b60;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 14px;
    border-radius: 20px;
    transition:
        background-color 0.2s,
        color 0.2s;
}
.f2-soc a:hover,
.f2-acc:hover {
    background: #004b60;
    color: #fff;
}
.f2-acc {
    justify-self: start;
    border-radius: 4px;
    border: 1px solid #cfd8dc;
    background: #fff;
}
.hp-foot2 .f2-col h4,
.hp-foot2 .f2-about h4 {
    display: block;
    position: relative;
    font-size: 20px;
    font-weight: 400;
    color: #ca2d1b;
    margin: 0 0 20px;
    padding: 0 0 12px;
    border-bottom: 0;
}
.hp-foot2 .f2-col h4:before,
.hp-foot2 .f2-about h4:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 72px;
    height: 2px;
    background: linear-gradient(90deg, #ca2d1b, #004b60);
}
.hp-foot2 .f2-col h4 + ul {
    margin-bottom: 34px;
}
.f2-cat {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}
.f2-cat > li {
    position: relative;
    padding-left: 26px;
    font-size: 14px;
}
.f2-cat > li:before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.4em;
    width: 10px;
    height: 10px;
    background: #ca2d1b;
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}
.f2-cat a {
    color: #222729;
    text-decoration: none;
    transition: color 0.2s;
}
.f2-cat a:hover {
    color: #ca2d1b;
}
.f2-cat ul {
    list-style: none;
    margin: 12px 0 0;
    padding: 0 0 0 2px;
    display: grid;
    gap: 12px;
}
.f2-cat ul li {
    font-size: 14px;
    padding-left: 16px;
    position: relative;
}
.f2-cat ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 1px;
    background: #9aa4aa;
}
.f2-cat ul a {
    color: #667078;
}
.f2-flat > li {
    line-height: 1.4;
}
.f2-about {
    margin-top: 12px;
}
.f2-inline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 34px;
    font-size: 14px;
}
.f2-inline li {
    position: relative;
    padding-left: 16px;
}
.f2-inline li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 8px;
    height: 8px;
    background: #ca2d1b;
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}
.f2-inline a {
    color: #222729;
    text-decoration: none;
}
.f2-inline a:hover {
    color: #ca2d1b;
}
.f2-btns {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 40px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #e0e4e8;
}
.f2-t2 {
    font-size: 20px;
    font-weight: 400;
    color: #ca2d1b;
    margin-bottom: 16px;
}
.f2-brow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.f2-brow a {
    background: #fff;
    border: 1px solid #d9dee2;
    padding: 14px 22px;
    text-decoration: none;
    color: #222729;
    font-weight: 600;
    font-size: 14px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition:
        border-color 0.2s,
        color 0.2s,
        transform 0.2s;
}
.f2-brow a:hover {
    border-color: #ca2d1b;
    color: #ca2d1b;
    transform: translateY(-2px);
}
@media (max-width: 1180px) {
    .f2-grid {
        grid-template-columns: 1fr 1fr;
    }
    .f2-card {
        grid-column: 1/-1;
    }
    .f2-btns {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 760px) {
    .hp-foot2 {
        padding-bottom: 20px;
    }
    .hp-foot2:before {
        margin-bottom: 32px;
    }
    .f2-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .hp-foot2 .f2-col h4,
    .hp-foot2 .f2-about h4 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0;
        padding: 16px 0;
        border-bottom: 1px solid #e0e4e8;
        font-size: 20px;
        cursor: pointer;
    }
    .hp-foot2 .f2-col h4:before,
    .hp-foot2 .f2-about h4:before {
        display: none;
    }
    .hp-foot2 .f2-col h4 + ul {
        margin-bottom: 0;
    }
    .hp-foot2 h4 + ul {
        padding: 16px 0 8px;
    }
    .f2-about {
        margin-top: 0;
    }
    .f2-card {
        padding: 22px 20px;
    }
    .f2-brow a {
        flex: 1 1 calc(50% - 6px);
        justify-content: center;
        text-align: center;
    }
}
.hp-foot2 ul.f2-inline {
    display: flex;
    gap: 10px 34px;
}
.hp-foot2 ul.f2-inline a {
    color: #222729;
}

/* подвал v3: структура и градация как в шапке, без градиентов */
.hp-foot2:before {
    background: #e0e4e8 !important;
}
.f3-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1.15fr) 1fr 1fr 1fr;
    gap: 48px;
}
.f3-card {
    background: #fff;
    border: 1px solid #e0e4e8;
    border-top: 3px solid #ca2d1b;
    border-radius: 6px;
    padding: 28px;
    display: grid;
    gap: 14px;
    align-content: start;
}
.f3-t {
    font-size: 20px;
    color: #ca2d1b;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e4e8;
    font-weight: 400;
}
.f3-logo {
    justify-self: start;
    margin: 6px 0 0;
}
.f3-tel {
    color: #004b60;
    font-weight: 600;
    font-size: 20px;
    text-decoration: none;
}
.f3-hours {
    margin: -6px 0 0;
    color: #667078;
    font-size: 14px;
}
.f3-addr {
    border-top: 1px solid #e0e4e8;
    padding-top: 14px;
    display: grid;
    gap: 8px;
}
.f3-addr p {
    margin: 0;
    color: #667078;
    font-size: 14px;
    line-height: 1.5;
}
.f3-addr a {
    color: #004b60;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    justify-self: start;
}
.f3-addr a:hover {
    color: #ca2d1b;
}
.f3-soc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid #e0e4e8;
    padding-top: 16px;
}
.f3-soc a {
    border: 1px solid #d9dee2;
    color: #004b60;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    padding: 9px 14px;
    border-radius: 20px;
    transition:
        background-color 0.2s,
        color 0.2s,
        border-color 0.2s;
}
.f3-soc a:hover {
    background: #004b60;
    border-color: #004b60;
    color: #fff;
}
.hp-foot2 .f3-col h4 {
    display: block;
    font-size: 20px;
    font-weight: 400;
    color: #ca2d1b;
    margin: 0 0 16px;
    padding: 0 0 12px;
    border-bottom: 1px solid #e0e4e8;
}
.f3-sub {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    gap: 12px;
}
.hp-foot2 ul.f3-sub {
    display: grid;
}
.f3-sub li {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.4;
}
.f3-sub li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 7px;
    height: 7px;
    background: #ca2d1b;
}
.f3-sub a {
    color: #222729;
    text-decoration: none;
    transition: color 0.2s;
}
.f3-sub a:hover {
    color: #ca2d1b;
}
.f3-h {
    font-size: 20px;
    font-weight: 400;
    padding: 0 0 12px;
    margin: 0 0 16px;
    border-bottom: 1px solid #e0e4e8;
}
.f3-h a {
    color: #ca2d1b;
    text-decoration: none;
    transition: color 0.2s;
}
.f3-h a:hover {
    color: #a82415;
}
.f3-bar {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #e0e4e8;
}
.f3-app {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.f3-t2 {
    font-size: 20px;
    font-weight: 400;
    color: #ca2d1b;
    margin-right: 12px;
}
.f3-app a {
    border: 1px solid #d9dee2;
    padding: 14px 22px;
    text-decoration: none;
    color: #222729;
    font-weight: 600;
    font-size: 14px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    transition:
        border-color 0.2s,
        color 0.2s;
}
.f3-app a:hover {
    border-color: #ca2d1b;
    color: #ca2d1b;
}
@media (max-width: 1180px) {
    .f3-grid {
        grid-template-columns: 1fr 1fr;
    }
    .f3-card {
        grid-column: 1/-1;
    }
}
@media (max-width: 760px) {
    .f3-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .f3-card {
        padding: 22px 20px;
        margin-bottom: 10px;
    }
    .hp-foot2 .f3-col h4 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0;
        padding: 16px 0;
        font-size: 20px;
        cursor: pointer;
    }
    .hp-foot2 .f3-col h4 + ul {
        margin: 0;
        padding: 16px 0 12px;
    }
    .f3-h {
        font-size: 20px;
        padding: 16px 0;
        margin: 0;
    }
    .f3-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .f3-t2 {
        width: 100%;
        margin: 0;
    }
    .f3-app a {
        flex: 1 1 100%;
        justify-content: center;
    }
}
.hp-foot2 ul.f3-sub {
    margin: 0 0 28px;
}
@media (max-width: 760px) {
    .hp-foot2 .f3-col h4 + ul.f3-sub {
        display: none;
    }
    .hp-foot2 .f3-col h4.open + ul.f3-sub {
        display: grid;
    }
}

/* Примерка камня: компактнее */
.hp-sec.hp-ar {
    padding: 28px 0;
}
.hp-ar .hp-left {
    padding: 32px 36px 28px;
    gap: 16px;
}
.hp-ar .hp-left h2 {
    font-size: 40px;
}
.hp-ar .ai-lead {
    display: none;
}
.hp-ar .hp-pane {
    gap: 14px;
}
.hp-ar .ai-steps {
    gap: 16px;
}
.hp-ar .ai-step .body {
    gap: 10px;
}
.hp-ar .ai-drop {
    padding: 14px 16px;
}
.hp-ar .ai-decors {
    gap: 6px;
}
.hp-ar .ai-decors button {
    aspect-ratio: 3/2;
}
.hp-ar .hp-note {
    padding-top: 12px;
}
.hp-ar .ai-stage {
    min-height: 300px;
}
.hp-ar .hp-left {
    padding: 26px 32px 22px;
    gap: 12px;
}
.hp-ar .hp-left h2 {
    font-size: 28px;
    line-height: 1.1;
}
.hp-ar .hp-seg button {
    min-height: 40px;
    padding: 8px 0;
    font-size: 14px;
}
.hp-ar .ai-steps {
    gap: 12px;
}
.hp-ar .ai-step {
    gap: 12px;
}
.hp-ar .ai-step .body {
    gap: 8px;
}
.hp-ar .ai-step b {
    font-size: 14px;
}
.hp-ar .ai-drop {
    padding: 10px 14px;
}
.hp-ar .ai-drop .t {
    font-size: 14px;
}
.hp-ar .ai-sample {
    min-height: 28px;
    padding: 2px 0;
    font-size: 14px;
}
.hp-ar .ai-decors {
    grid-template-columns: repeat(8, 1fr);
    gap: 5px;
}
.hp-ar .ai-decors button {
    aspect-ratio: 1;
}
.hp-ar .ai-all {
    font-size: 14px;
    padding: 0;
}
.hp-ar .ai-step .hp-btn {
    min-height: 42px;
    padding: 11px 20px;
}
.hp-ar .hp-note {
    font-size: 14px;
    padding-top: 10px;
}
.hp-ar #view-ar {
    min-height: 480px;
    padding: 24px;
}
.hp-ar .hp-phone {
    width: 260px;
    height: 470px;
}
.hp-ar .hp-card {
    grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
}
@media (max-width: 1180px) {
    .hp-ar .hp-card {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 760px) {
    .hp-sec.hp-ar {
        padding: 24px 0;
    }
    .hp-ar .hp-left {
        padding: 24px 18px;
    }
    .hp-ar .hp-left h2 {
        font-size: 28px;
    }
    .hp-ar #view-ar {
        min-height: 0;
        padding: 14px 12px;
    }
    .hp-ar .hp-phone {
        width: 100%;
        height: auto;
    }
}
/* hero: заканчивается сразу под карточками, без пустой полосы фото (как в макете) */
.hero {
    min-height: 0;
}
/* hero: фото карточек в исходном качестве */
.ns-card {
    background-image: none;
}
.ns-card > .ns-bg {
    position: absolute;
    inset: 0;
    z-index: 0 !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.ns-card > .ns-bg[style*="hero-quartz"] {
    background-position: center 30%;
}
@media (hover: hover) and (pointer: fine) {
    .ns-card:hover .ns-bg {
        transform: scale(1.1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .ns-card > .ns-bg {
        transition: none;
    }
}

/* анонс лаборатории */
.lt-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
}
.lt-img {
    display: block;
    aspect-ratio: 16/11;
    overflow: hidden;
    background: #cfd5da;
}
.lt-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.lt-img:hover img {
    transform: scale(1.05);
}
.lt-list {
    list-style: none;
    margin: 26px 0 32px;
    padding: 0;
    display: grid;
    gap: 12px;
    font-size: 16px;
    line-height: 1.5;
}
.lt-list li {
    position: relative;
    padding-left: 22px;
}
.lt-list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    background: #ca2d1b;
}
@media (max-width: 1180px) {
    .lt-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}
@media (max-width: 760px) {
    .lt-list {
        margin: 20px 0 24px;
    }
}

/* подвал: панель «Где посмотреть и заказать» */
.f3-find {
    background: #f5f5f6;
    border-left: 3px solid #ca2d1b;
    padding: 20px 22px;
    display: grid;
    gap: 12px;
    margin-top: 6px;
}
.f3-fh {
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    color: #222729;
    line-height: 1.1;
    font-weight: 400;
}
.f3-find p {
    margin: 0;
    font-size: 14px;
    color: #667078;
    line-height: 1.5;
}
.f3-fb {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.f3-fb a {
    border: 1px solid #cfd5da;
    background: #fff;
    padding: 11px 16px;
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
    color: #222729;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    transition:
        border-color 0.2s,
        color 0.2s;
}
.f3-fb a:hover {
    border-color: #ca2d1b;
    color: #ca2d1b;
}

/* подвал: «Где нас найти» и бренды в колонке камня */
.f3-find {
    background: #f5f5f6;
    border-left: 3px solid #ca2d1b;
    padding: 18px 20px 8px;
    display: grid;
    gap: 0;
    margin-top: 6px;
}
.f3-fh {
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    color: #222729;
    line-height: 1.1;
    font-weight: 400;
    margin-bottom: 8px;
}
.f3-fr {
    display: grid;
    gap: 2px;
    padding: 12px 0;
    border-top: 1px solid #dfe4e8;
    text-decoration: none;
    color: #222729;
}
.f3-fr b {
    font-size: 16px;
    font-weight: 600;
    transition: color 0.2s;
}
.f3-fr span {
    font-size: 12px;
    color: #667078;
}
.f3-fr:hover b {
    color: #ca2d1b;
}
.f3-fr b:after {
    content: " →";
    color: #ca2d1b;
}
.hp-foot2 .f3-sub ul {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 7px;
}
.hp-foot2 .f3-sub ul li {
    padding-left: 16px;
    font-size: 14px;
}
.hp-foot2 .f3-sub ul li:before {
    width: 6px;
    height: 1px;
    top: 0.7em;
    background: #9aa4aa;
}
.hp-foot2 .f3-sub ul a {
    color: #667078;
}
.hp-foot2 .f3-sub ul a:hover {
    color: #ca2d1b;
}

/* Наши бренды */
.br-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.br-g {
    background: #f5f5f6;
    border-top: 3px solid #ca2d1b;
    padding: 24px 24px 12px;
}
.br-g h3 {
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: 20px;
    margin: 0 0 10px;
    line-height: 1.1;
}
.br-r {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid #dfe4e8;
    text-decoration: none;
    color: #222729;
    transition: color 0.2s;
}
.br-r .lg {
    height: 30px;
    display: flex;
    align-items: center;
}
.br-r .lg img {
    width: 30px;
    height: 30px;
    display: block;
    transition: transform 0.3s;
}
.br-r:hover .lg img {
    transform: scale(1.06);
}
.br-r:hover .nm {
    color: #ca2d1b;
}
.br-r .nm {
    font-size: 14px;
    font-weight: 600;
    display: grid;
    gap: 2px;
    transition: color 0.2s;
}
.br-r .nm em {
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ca2d1b;
}
@media (max-width: 1180px) {
    .br-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 760px) {
    .br-grid {
        grid-template-columns: 1fr;
    }
}
/* О компании: широкое видео и цифры */
/* ИИ-дизайнер: выбор декора */
.ai-pick {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    padding: 6px 14px 6px 6px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition:
        border-color 0.2s,
        background-color 0.2s;
    min-height: 60px;
}
.ai-pick:hover {
    border-color: #e4968d;
    background: rgba(255, 138, 118, 0.08);
}
.ai-pick img {
    width: 72px;
    height: 48px;
    object-fit: cover;
    display: block;
}
.ai-pick .tx {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.ai-pick .tx b {
    font-size: 14px;
}
.ai-pick .tx small {
    font-size: 14px;
    color: #99b8bf;
}
.ai-pick .ch {
    font-size: 14px;
    font-weight: 600;
    color: #e4968d;
    white-space: nowrap;
}
.ai-hint {
    font-size: 14px;
    color: #99b8bf;
    line-height: 1.4;
}
.hp-ar .ai-decors {
    grid-template-columns: repeat(8, 1fr);
}
.dec-dlg {
    width: min(980px, calc(100vw - 24px));
}
.dec-dlg[open] {
    display: flex;
    flex-direction: column;
}
.dec-hd {
    padding: 28px 32px 12px;
    display: grid;
    gap: 12px;
}
.dec-hd h2 {
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1.1;
    margin: 0;
}
.dec-hd p {
    margin: 0;
    color: #5d676e;
    font-size: 14px;
    line-height: 1.55;
}
.dec-hd input {
    font: 400 16px Manrope;
    border: 1px solid #cfd5da;
    padding: 13px 16px;
    min-height: 48px;
    width: 100%;
    border-radius: 0;
}
.dec-hd input:focus-visible {
    outline: 2px solid #ca2d1b;
    outline-offset: 2px;
    border-color: #ca2d1b;
}
.dec-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.dec-tabs button {
    background: #f1f3f4;
    border: 0;
    border-radius: 22px;
    padding: 9px 16px;
    font: 600 12px Manrope;
    cursor: pointer;
    min-height: 40px;
    color: #222729;
    transition:
        background-color 0.2s,
        color 0.2s;
}
.dec-tabs button:hover {
    background: #e3e7ea;
}
.dec-tabs button.on {
    background: #00313e;
    color: #fff;
}
.dec-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 8px 32px 16px;
    overflow: auto;
    flex: 1;
    min-height: 200px;
    align-content: start;
}
.dec-c {
    background: #fff;
    border: 2px solid transparent;
    outline: 1px solid #e0e4e8;
    padding: 0 0 10px;
    text-align: left;
    cursor: pointer;
    display: grid;
    gap: 2px;
    font: inherit;
    color: #222729;
    transition:
        outline-color 0.2s,
        border-color 0.2s;
}
.dec-c:hover {
    outline-color: #ca2d1b;
}
.dec-c.sel {
    border-color: #ca2d1b;
    outline-color: #ca2d1b;
}
.dec-c .im {
    aspect-ratio: 3/2;
    overflow: hidden;
    display: block;
    margin-bottom: 6px;
}
.dec-c .im img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dec-c b {
    font-size: 14px;
    padding: 0 10px;
}
.dec-c small {
    font-size: 14px;
    padding: 0 10px;
    line-height: 1.3;
}
.dec-c em {
    font-style: normal;
    font-size: 14px;
    color: #667078;
    padding: 0 10px;
}
.dec-empty {
    grid-column: 1/-1;
    background: #f5f5f6;
    padding: 32px;
    display: grid;
    gap: 10px;
    justify-items: start;
}
.dec-empty b {
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 28px;
}
.dec-empty p {
    margin: 0;
    color: #667078;
}
.dec-ft {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 14px 32px 20px;
    border-top: 1px solid #e0e4e8;
}
.dec-ft span {
    font-size: 14px;
    color: #667078;
}
.dec-ft .hp-btn {
    padding: 11px 18px;
    min-height: 42px;
}
.dec-ft [hidden] {
    display: none;
}
@media (max-width: 760px) {
    .dec-hd {
        padding: 22px 16px 10px;
    }
    .dec-hd h2 {
        font-size: 28px;
    }
    .dec-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 8px 16px 14px;
    }
    .dec-ft {
        padding: 12px 16px 16px;
    }
    .hp-ar .ai-decors {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* регион в шапке: только значок */
.is-header-region-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}
.is-header-region-btn .is-header-region-name {
    display: none;
}
.is-header-region-icon {
    font-size: 20px;
}

/* О компании: видео 16:9 и строка цифр */
.ab2 {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 56px;
    align-items: center;
}
.ab2-txt p {
    margin: 22px 0 26px;
    font-size: 16px;
    line-height: 1.65;
    color: #4a545b;
    max-width: 46ch;
}
.ab2-vid {
    min-height: 0;
    aspect-ratio: 16/9;
}
.ab2-vid .vimg {
    background-image: url(main/img/video-poster.jpg);
}
.ab2-vid:before {
    background: rgba(0, 49, 62, 0.22);
}
.ab2-vid:hover:before {
    background: rgba(0, 49, 62, 0.1);
}
.ab2-vid .hp-vcap {
    font-size: 28px;
}
.ab2-stats {
    display: grid;
    grid-template-columns: 1.1fr repeat(5, 1fr);
    margin-top: 32px;
    border-top: 1px solid #c9d3da;
}
.ab2-stats > div {
    padding: 28px 24px 0 0;
    display: grid;
    gap: 8px;
    align-content: start;
}
.ab2-stats > div + div {
    padding-left: 24px;
    border-left: 1px solid #dde4e9;
}
.ab2-t {
    white-space: nowrap;
}
.ab2-stats .ab2-t span {
    font-family: "Manrope", sans-serif;
    font-size: 40px;
    line-height: 1;
    font-weight: 400;
    color: #004b60;
    max-width: none;
}
.ab2-t em {
    font-family: "Manrope", sans-serif;
    font-style: normal;
    font-size: 20px;
    color: var(--red);
}
.ab2-stats b {
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1;
    color: #004b60;
    font-variant-numeric: tabular-nums;
}
.ab2-w b {
    font-size: 40px;
    padding-top: 0;
}
.ab2-stats div:not(.ab2-t) > span {
    font-size: 14px;
    line-height: 1.5;
    color: #5d676e;
    max-width: 200px;
}
.vid-dlg {
    width: min(1100px, calc(100vw - 24px));
    background: #000;
    overflow: visible;
}
.vid-dlg video {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
}
.vid-dlg .hp-dx {
    top: -52px;
    right: 0;
    color: #fff;
}
@media (max-width: 1180px) {
    .ab2 {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .ab2-txt p {
        max-width: 60ch;
    }
    .ab2-stats {
        grid-template-columns: repeat(6, 1fr);
        margin-top: 40px;
    }
    .ab2-stats > div {
        grid-column: span 2;
    }
    .ab2-t {
        grid-column: 1/-1 !important;
        padding-bottom: 4px !important;
        display: flex !important;
        align-items: baseline;
        gap: 12px;
    }
    .ab2-stats > div:nth-child(5),
    .ab2-stats > div:nth-child(6) {
        grid-column: span 3;
    }
    .ab2-stats > div:nth-child(2),
    .ab2-stats > div:nth-child(5) {
        padding-left: 0;
        border-left: 0;
    }
    .ab2-stats > div:nth-child(n + 2) {
        padding-bottom: 6px;
    }
}
@media (max-width: 760px) {
    .ab2-txt p {
        font-size: 16px;
        margin: 16px 0 20px;
    }
    .ab2-vid .hp-play {
        width: 64px;
        height: 64px;
    }
    .ab2-vid .hp-play:after {
        left: 26px;
        top: 19px;
        border-left-width: 18px;
        border-top-width: 12px;
        border-bottom-width: 12px;
    }
    .ab2-vid .hp-vcap {
        left: 16px;
        bottom: 14px;
        font-size: 20px;
    }
    .ab2-stats {
        grid-template-columns: 1fr 1fr;
        margin-top: 32px;
    }
    .ab2-stats > div {
        grid-column: span 1 !important;
        padding: 22px 12px 0 0 !important;
        border-left: 0 !important;
    }
    .ab2-stats > div:nth-child(even) {
        padding-left: 0 !important;
    }
    .ab2-stats > div:nth-child(odd):not(:first-child) {
        padding-left: 16px !important;
        border-left: 1px solid #dde4e9 !important;
    }
    .ab2-stats > .ab2-t {
        grid-column: 1/-1 !important;
        border-left: 0 !important;
        padding-left: 0 !important;
    }
    .ab2-stats > div:nth-child(6) {
        grid-column: 1/-1 !important;
        border-left: 0 !important;
        padding-left: 0 !important;
    }
    .ab2-stats b {
        font-size: 40px;
    }
    .ab2-w b {
        font-size: 28px;
    }
    .ab2-stats .ab2-t span {
        font-size: 40px;
    }
}
/* иконка материала на плитках первого экрана */
.ns-ig {
    display: flex;
    align-items: flex-start;
}
.ns-ig-i svg {
    display: block;
    width: 44px;
    height: 44px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1.5px solid #fff;
    color: #fff;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    backdrop-filter: blur(4px);
    transition:
        color 0.3s,
        border-color 0.3s,
        background-color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
    .ns-card:hover .ns-ig-i svg {
        color: #222729;
        border-color: #222729;
        background: transparent;
    }
}
.hp b,
.hp strong,
.hp h1,
.hp h2,
.hp h3,
.hp h4 {
    font-weight: 600;
}
.hp-h2 {
    font-size: 40px;
    letter-spacing: -0.01em;
}
/* типографика: три начертания Manrope. Semibold: заголовки и акценты, Regular: основной текст, Light: главный заголовок и вводные */
.hero-title,
.hero-title span {
    font-size: clamp(28px, 3vw, 40px) !important;
    font-weight: 300 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
}
.hp h2,
.hp .hp-h2,
.hp-cta h2,
.hp-rt h2,
.hp-dlg h2 {
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.hp h2 em {
    font-size: inherit;
    font-weight: 300;
}
.hp h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}
.hp-proj h3 {
    font-size: clamp(17px, 1.6vw, 20px);
}
.hp-decor h3 {
    font-size: 20px;
}
.ab2-stats b {
    font-size: 40px;
}
.ab2-t span {
    font-size: 28px;
}
.hp-route .n {
    font-size: 20px;
}
.hp-vcap {
    font-size: 20px;
}
.ai-bar b {
    font-size: 20px;
}
.ai-empty b,
.hp-arbg b {
    font-size: 20px;
}
.hp-lead {
    font-weight: 300;
    font-size: 16px;
}
/* подвал: белый фон, карточка контактов как раньше, колонки по порядку направлений */
.hp-foot2 {
    background: #fff;
    padding: 0 0 24px;
}
.hp-foot2:before {
    margin-bottom: 32px !important;
}
.f3-grid {
    gap: 36px;
}
.f3-card {
    gap: 12px;
}
.f3-logo {
    width: 230px;
    height: auto;
    margin: 4px 0 2px;
}
.hp-foot2 .f3-col h4 {
    font-size: 14px;
    font-weight: 600;
    color: #222729;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 0;
    padding: 0 0 10px;
    margin: 0 0 12px;
    position: relative;
}
.f3-sub {
    gap: 8px;
    margin: 0 0 18px;
}
.f3-sub li {
    font-size: 14px;
}
.hp-foot2 .f3-sub ul {
    margin: 6px 0 0;
    gap: 5px;
}
.f3-h {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    padding: 0 0 10px;
    margin: 0 0 12px;
    border-bottom: 0;
}
.f3-h a {
    color: #222729;
}
.f3-h a:hover {
    color: #ca2d1b;
}
.f3-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 32px;
    margin-top: 24px;
    padding: 14px 0;
    border-top: 1px solid #dfe4e8;
    border-bottom: 1px solid #dfe4e8;
}
.f3-line .f3-fh {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}
.f3-line a {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    color: #222729;
    transition: color 0.2s;
}
.f3-line a b {
    font-size: 14px;
    font-weight: 600;
}
.f3-line a span {
    font-size: 12px;
    color: #667078;
}
.f3-line a:after {
    content: "→";
    color: #ca2d1b;
}
.f3-line a:hover b {
    color: #ca2d1b;
}
.f3-bar {
    margin-top: 16px;
    padding-top: 0;
    border-top: 0;
}
.f3-t2 {
    font-size: 14px;
    font-weight: 600;
    color: #222729;
    margin-right: 8px;
}
.f3-app a {
    padding: 8px 16px;
    min-height: 40px;
}
@media (max-width: 760px) {
    .f3-line {
        flex-direction: column;
        align-items: flex-start;
    }
}
.rq {
    color: #ca2d1b;
    font-style: normal;
    margin-left: 2px;
}
.hp-fl .rq {
    font-weight: 600;
}

/* адаптивность: общие исправления для узких экранов (320-560 px) */
img,
video,
iframe {
    max-width: 100%;
}
.hp-wrap {
    min-width: 0;
}
@media (max-width: 760px) {
    .st {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .eqt-grid,
    .mp,
    .mp-g,
    .pg-facts,
    .pg-facts--3,
    .fl {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .eqt-grid > *,
    .mp > *,
    .mp-g > *,
    .st > *,
    .fl > * {
        min-width: 0;
    }
    .mp-main,
    .big {
        max-width: 100%;
    }
    .hp-btn,
    button.hp-btn {
        white-space: normal;
        text-align: center;
        line-height: 1.25;
        min-height: 46px;
        max-width: 100%;
    }
    .ai-pick {
        grid-template-columns: 72px minmax(0, 1fr) !important;
    }
    .ai-pick .ch {
        display: none;
    }
    h1,
    h2,
    h3 {
        overflow-wrap: anywhere;
    }
}
@media (max-width: 760px) {
    .bt {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .bt .hp-btn {
        flex: 1 1 140px;
        min-width: 0;
    }
    .mk {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .mk > * {
        min-width: 0;
    }
}

/* Interstone, версия 3. Правило: то, с чем взаимодействуют, скруглено; то, что только сообщает информацию, остаётся с прямыми углами.
   Скруглено: кнопки, вкладки, чипы, поля ввода, поиск, карточки-ссылки, плитки категорий, окна.
   Прямые углы: секции и плиты, колонки брендов, цифры, характеристики, подвал, контакты, баннеры, фильтры. */
:root {
    --r-pill: 999px;
    --r-card: 14px;
    --r-field: 10px;
    --focus: #004b60;
    --tap: 44px;
}

/* 1. интерактивное: скругление */
.hp-btn,
.hp-btn--ghost,
.hp-btn--light,
.ns-card-btn,
.hp-link {
    border-radius: var(--r-pill) !important;
}
.hp-tabs button,
.pg-tabs button,
.hp-seg button,
.lt-nav a,
.pg-nav a,
.fl-t,
.pg-use li,
.bp-facts li,
.f3-soc a,
.f3-app a,
.is-header-top-link {
    border-radius: var(--r-pill) !important;
}
.is-header-search-input,
.is-header-region-search input,
.pg-search input {
    border-radius: var(--r-pill) !important;
}
.hp-fl input,
.hp-fl textarea,
.hp-fl select,
.lf input,
.lab-row input,
.fl-c input[type="text"] {
    border-radius: var(--r-field) !important;
}
.ns-card,
.hp-decor .im,
.pg-d,
.sc,
.mc,
.pc,
.lab-v,
.new-card,
.pg-k,
.cb,
.pg-a,
.pg-l,
.wb-c,
.hp-j .pic,
.hp-proj {
    border-radius: var(--r-card) !important;
    overflow: hidden;
}
.ns-card-arrow {
    border-radius: 50% !important;
}
.hp-dlg {
    border-radius: 18px !important;
    overflow: hidden;
}
.is-header-dropdown,
.is-header-dropdown-menu {
    border-radius: 0 0 var(--r-card) var(--r-card) !important;
    overflow: hidden;
}
.lf-ok,
.lab-msg,
.hp-fe {
    border-radius: var(--r-field);
}

/* 2. информационное: прямые углы (явно, чтобы вторая версия не просочилась) */
.br-g,
.ab2-stats,
.hp-routes,
.hp-cta,
.f3-card,
.hp-foot2,
.pg-facts,
.pg-hero,
.lab-hero,
.sk-hero,
.pg-cta,
.lab-form,
.fl-s,
.mp-side,
.hp-card,
.hp-ar,
.lf-box,
.pg-det,
.st {
    border-radius: 0 !important;
}

/* 3. UX: состояния и доступность */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}
.hp-btn,
.hp-tabs button,
.pg-tabs button,
.pg-nav a,
.lt-nav a,
.f3-soc a,
.f3-app a {
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hp-fl input,
.lf input,
.lab-row input {
    min-height: 48px;
}
a.pg-d,
a.sc,
a.mc,
a.hp-decor,
a.hp-j,
a.hp-proj,
a.cb,
a.pg-k,
a.new-card,
a.pc {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}
a.pg-d:hover,
a.sc:hover,
a.mc:hover,
a.hp-decor:hover,
a.hp-j:hover,
a.hp-proj:hover,
a.cb:hover,
a.pg-k:hover,
a.new-card:hover,
a.pc:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.hp-btn:active,
.pg-tabs button:active,
.hp-tabs button:active {
    transform: scale(0.98);
}
.hp-btn:disabled,
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* поля: понятная подсветка и ошибка */
.hp-fl input:focus,
.hp-fl textarea:focus,
.lf input:focus,
.lab-row input:focus {
    border-color: var(--focus) !important;
    box-shadow: 0 0 0 3px rgba(0, 75, 96, 0.18);
}
.hp-fl input:user-invalid,
.lf input:user-invalid,
.lab-row input:user-invalid {
    border-color: #ca2d1b !important;
    box-shadow: 0 0 0 3px rgba(202, 45, 27, 0.14);
}
/* активная вкладка видна без цвета: подчёркивание */
.pg-nav a.on,
.lt-nav a.on,
.pg-tabs button.on,
.hp-tabs button.on {
    font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
    *,
    *:before,
    *:after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
@media (max-width: 760px) {
    .hp-btn,
    .f3-app a {
        width: 100%;
    }
    .hp-btns {
        flex-direction: column;
    }
}

/* подвал: соцсети и магазины приложений значками */
.f3-ic {
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9dee2;
    background: #fff;
    color: #004b60;
    text-decoration: none;
    transition:
        background-color 0.2s,
        color 0.2s,
        border-color 0.2s;
}
.f3-ic svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}
.f3-ic i {
    font-size: 20px;
    line-height: 1;
}
.f3-ic img {
    display: block;
}
.f3-ic:hover {
    background: #004b60;
    border-color: #004b60;
    color: #fff;
}
.f3-soc a.f3-ic,
.f3-app a.f3-ic {
    min-height: 0;
    font-size: 0;
}
.f3-app a.f3-ic {
    padding: 0;
}
@media (max-width: 760px) {
    .f3-app a.f3-ic {
        flex: 0 0 44px;
        width: 44px;
    }
    .f3-soc a.f3-ic {
        width: 44px;
    }
    .f3-app {
        flex-wrap: wrap;
    }
}
/* «Interstone в цифрах»: без курсива */
.ab2-t em {
    font-style: normal;
}

/* «Смотреть каталог» в карточках первого экрана: простая смена цвета при наведении, без раскрывающейся заливки */
.ns-card-btn {
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
    box-shadow: none;
}
.ns-card-btn__fill {
    display: none !important;
}
.ns-card-btn:hover,
.ns-card-btn:active,
.ns-card-btn:focus-visible {
    background: #fff;
    color: #222729;
}
.ns-card-btn:active {
    transform: none;
}
.ns-card-btn:hover .ns-card-btn__icon {
    transform: none;
}

/* регион: в верхней строке шапки, текстом (название области целиком) */
.is-header-top-info .is-header-region-btn {
    width: auto !important;
    height: auto !important;
    max-width: 240px;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    gap: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #4a5154;
    order: -1;
}
.is-header-top-info .is-header-region-btn .is-header-region-name {
    display: inline !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.is-header-top-info .is-header-region-btn ion-icon {
    font-size: 16px;
    color: #ca2d1b;
    flex: none;
}
.is-header-top-info .is-header-region-btn:hover {
    color: #ca2d1b;
}
@media (max-width: 1180px) {
    .is-header-hours {
        display: none;
    }
    .is-header-top-info .is-header-region-btn {
        max-width: 170px;
    }
}
@media (min-width: 761px) and (max-width: 900px) {
    .is-header-top-info .is-header-region-btn .is-header-region-name {
        display: none !important;
    }
}
@media (max-width: 760px) {
    .is-header-top-inner {
        justify-content: space-between !important;
    }
    .is-header-top-info .is-header-region-btn {
        max-width: 150px;
        font-size: 12px;
    }
}

/* ссылки «Весь каталог →» и подобные: без красной подчёркивающей линии и сдвига стрелки, при наведении меняется только цвет */
.hp-link {
    border-bottom: 0 !important;
    border-radius: 0 !important;
    transition: color 0.2s ease;
}
.hp-link:hover {
    color: #a82415;
}
.hp-link:hover:after {
    transform: none;
}

/* вкладки каталога: обычный текст без плашек, активная подчёркнута */
.hp-tabs {
    gap: 6px 32px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--line);
}
.hp-tabs button {
    background: none !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    min-height: 44px;
    margin-bottom: -1px;
    font:
        400 16px Manrope,
        sans-serif;
    color: #5d676e;
    transition:
        color 0.2s,
        border-color 0.2s;
}
.hp-tabs button:hover {
    color: #ca2d1b;
    border-bottom-color: transparent !important;
}
.hp-tabs button.on {
    background: none !important;
    color: #222729;
    font-weight: 600;
    border-bottom-color: #ca2d1b !important;
}
.hp-tabs button:active {
    transform: none;
}

/* первый экран: заголовок по центру свободного места над карточками */
@media (min-width: 761px) {
    .hero-inner {
        padding-top: 0;
    }
    .hero-title {
        margin-top: auto;
        margin-bottom: auto;
        padding: 44px 0;
    }
}

/* шкала шрифтов: 12 / 14 / 16 / 20 / 28 / 40 px; плавающие размеры заменены ступенями */
.hero-title,
.hero-title span,
.pg-hero h1,
.pg-hero--s h1,
.lab-hero h1,
.sk-hero h1 {
    font-size: 40px !important;
}
.hp h2,
.hp .hp-h2,
.hp-cta h2,
.hp-rt h2,
.hp-dlg h2,
.lab-form h2,
.pg-cta h2,
.hp-ar .hp-left h2,
.sk-w h3,
.sk-dlg h2,
.hp-fm h2 {
    font-size: 28px !important;
}
.hp-proj h3 {
    font-size: 20px !important;
}
.cat-row h1 {
    font-size: 28px !important;
}
.ns-card-title {
    font-size: 20px !important;
}
.ns-card-btn {
    font-size: 12px !important;
}
@media (max-width: 760px) {
    .hero-title,
    .hero-title span,
    .pg-hero h1,
    .pg-hero--s h1,
    .lab-hero h1,
    .sk-hero h1 {
        font-size: 28px !important;
    }
    .hp h2,
    .hp .hp-h2,
    .hp-cta h2,
    .hp-rt h2,
    .hp-dlg h2,
    .lab-form h2,
    .pg-cta h2,
    .hp-ar .hp-left h2,
    .sk-w h3,
    .sk-dlg h2,
    .hp-fm h2 {
        font-size: 20px !important;
    }
    .hp-proj h3,
    .ns-card-title {
        font-size: 16px !important;
    }
}

/* не больше трёх уровней внутри блока: 28 / 16 / 14 (в первом экране 40 / 20 / 12, в подвале 20 / 14 / 12) */
#catalog h3,
#brands h3,
#journal h3,
.hp-routes h3,
#lab-teaser h3,
#ai-designer b,
.hp-proj h3 {
    font-size: 16px !important;
}
.hp-route strong,
.rmain strong {
    font-size: 16px !important;
}
#about .ab2-stats b {
    font-size: 28px !important;
}
#about .ab2-t span {
    font-size: 40px !important;
}
#about .ab2-t em {
    font-size: 16px !important;
}
#about .hp-vcap {
    font-size: 16px !important;
}
.hp-sec .hp-btn,
.hp-routes .hp-btn,
#contact .hp-btn {
    font-size: 14px !important;
}
.hp-route .n {
    font-size: 16px !important;
}

.br-r .nm em {
    font-size: 14px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.hp h2,
.hp .hp-h2,
.hp-cta h2,
.hp-rt h2,
.hp-dlg h2 {
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.hp-h2 {
    font-size: 28px;
       font-weight: 600;
}