@font-face {
    font-family: 'HelveticaNeueCV';
    src: url('../font/HelveticaNeueCyr-Roman.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeueCV';
    src: url('../font/HelveticaNeueCyr-Medium.woff2') format('woff2');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeueCV';
    src: url('../font/HelveticaNeueCyr-Bold.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    --cv-bg: #000209;
    --cv-bg-soft: #0d0d0d;
    --cv-white: #f9f9f9;
    --cv-black: #090909;
    --cv-blue: #7590a9;
    --cv-line: rgba(255, 255, 255, .86);
    --cv-shell: 1248px;
    --cv-radius: 5px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.cv-body {
    margin: 0;
    background: var(--cv-bg);
    color: #fff;
    font-family: 'HelveticaNeueCV', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.cv-menu-open {
    overflow: hidden;
}

.cv-page {
    background: var(--cv-bg);
    min-height: 100vh;
    overflow: clip;
}

.cv-page img {
    display: block;
    max-width: 100%;
}

.cv-page a {
    color: inherit;
    text-decoration: none;
}

.cv-page button,
.cv-page input,
.cv-page select,
.cv-page textarea {
    font: inherit;
}

.cv-page button {
    color: inherit;
}

.cv-shell {
    width: min(var(--cv-shell), calc(100% - 64px));
    margin: 0 auto;
}

.cv-title {
    margin: 0;
    font-weight: 700;
    font-size: clamp(24px, 2.5vw, 36px);
    line-height: .98;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.cv-title--dark {
    color: var(--cv-black);
}

/* header */
.cv-header {
    position: fixed;
    z-index: 1000;
    inset: 0 0 auto 0;
    height: 100px;

    background: rgba(2, 4, 10, .62);

    -webkit-backdrop-filter: blur(18px) saturate(115%);
    backdrop-filter: blur(18px) saturate(115%);

    border-bottom: 1px solid rgba(255, 255, 255, .18);

    box-shadow: 0 1px 0 rgba(255, 255, 255, .035) inset,
    0 12px 32px rgba(0, 0, 0, .18);

    transition: background .25s ease,
    backdrop-filter .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.cv-header.is-scrolled {
    background: rgba(2, 4, 10, .74);

    -webkit-backdrop-filter: blur(22px) saturate(120%);
    backdrop-filter: blur(22px) saturate(120%);

    border-bottom-color: rgba(255, 255, 255, .22);

    box-shadow: 0 1px 0 rgba(255, 255, 255, .045) inset,
    0 14px 38px rgba(0, 0, 0, .24);
}

.cv-header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cv-header__logo {
    width: 126px;
    flex: 0 0 auto;
}

.cv-header__logo img {
    width: 126px;
    filter: grayscale(1) brightness(0) invert(1);
}

.cv-header__nav {
    display: flex;
    align-items: center;
    gap: 31px;
    font-size: 15px;
    line-height: 1.2;
}

.cv-header__nav a {
    position: relative;
    opacity: .96;
    padding-bottom: 4px;
    transition: opacity .2s ease;
}

.cv-header__nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;

    background: rgba(255, 255, 255, .72);

    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .22s ease;
}

.cv-header__nav a:hover {
    opacity: 1;
}

.cv-header__nav a:hover::after {
    transform: scaleX(1);
}

.cv-header__request {
    padding-bottom: 4px;
}

.cv-header__burger {
    display: none;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: none;
    position: relative;
}

.cv-header__burger span {
    position: absolute;
    left: 4px;
    right: 4px;
    height: 1px;
    background: #fff;
    transition: transform .2s ease, top .2s ease;
}

.cv-header__burger span:first-child {
    top: 12px;
}

.cv-header__burger span:last-child {
    top: 21px;
}

.cv-header__burger[aria-expanded="true"] span:first-child {
    top: 17px;
    transform: rotate(45deg);
}

.cv-header__burger[aria-expanded="true"] span:last-child {
    top: 17px;
    transform: rotate(-45deg);
}

.cv-mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 96px 20px 36px;
    background: rgba(0, 2, 9, .98);
    display: flex;
    flex-direction: column;
    gap: 26px;
    font-size: 22px;
    z-index: -1;
}

.cv-mobile-menu[hidden] {
    display: none;
}

/* hero */
.cv-hero {
    height: 863px;
    position: relative;
    overflow: hidden;
    background: #000209;
}

.cv-hero::after {
    content: '';

    position: absolute;
    z-index: 0;

    top: 325px;

    width: 100%;
    height: 538px;

    /*
     * Визуальный эквивалент Figma.
     *
     * Буквальный stop:
     * #fff -147.3%
     * в браузере даёт слишком светлый серый низ.
     */
    background: linear-gradient(
            180deg,
            rgba(0, 3, 15, 0) 0%,
            rgba(0, 3, 15, 0) 18.9%,
            rgba(11, 13, 18, .28) 58%,
            rgba(42, 43, 48, .96) 100%
    );

    pointer-events: none;
}

.cv-hero__artboard {
    z-index: 1;
}

.cv-hero__content {
    z-index: 2;
}

.cv-hero__artboard {
    position: absolute;
    width: 1440px;
    height: 863px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.cv-hero__glass-svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 1440px;
    height: 540px;
    overflow: visible;
}

.cv-hero__glass-fill {
    fill: url(#cvHeroGlassFill);
}

/* Soft reflected light around the glass edge. Keep this broad and low-opacity:
   the visible edge itself is drawn by the two layers below. */
.cv-hero__glass-shadow {
    fill: none;
    stroke: rgba(205, 220, 232, .16);
    stroke-width: 28;
    filter: url(#cvHeroGlassShadow);
    vector-effect: non-scaling-stroke;
}

/* Optical thickness of the glass. It must read as translucent material,
   not as a second parallel white line. */
.cv-hero__glass-thickness {
    fill: none;
    stroke: url(#cvHeroEdgeGradient);
    stroke-width: 20;
    opacity: .46;
    filter: url(#cvHeroGlassThicknessSoft);
    vector-effect: non-scaling-stroke;
}

/* One crisp highlight on the outer edge. */
.cv-hero__glass-edge {
    fill: none;
    stroke: rgba(250, 253, 255, .88);
    stroke-width: 10;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, .42));
}

.cv-hero__glass-outer-glow {
    fill: none;
    stroke: rgba(220, 230, 240, .28);
    stroke-width: 18;
    filter: url(#cvHeroOuterGlow);
    mask: url(#cvHeroOuterMask);
    vector-effect: non-scaling-stroke;
}

/* Reflection on the glass edge.
   The manually reconstructed glass path passes ~14px above the original
   Figma flare centre, therefore the flare group is shifted up to meet
   the actual edge used on the page. */
.cv-hero__flare {
    position: absolute;
    left: 906px;
    top: 216px;
    width: 226px;
    height: 226px;
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: transform, opacity, filter;
    --cv-flare-x: 0px;
    --cv-flare-y: 0px;
    --cv-flare-scale: 1;
    --cv-flare-opacity: .94;
    --cv-flare-glow: 11px;
    transform: translate(var(--cv-flare-x), var(--cv-flare-y)) scale(var(--cv-flare-scale));
    opacity: var(--cv-flare-opacity);
    filter: drop-shadow(0 0 var(--cv-flare-glow) rgba(255, 255, 255, .38));
}

/* soft optical bloom; deliberately asymmetric and compact */
.cv-hero__flare::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 82px;
    height: 82px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle,
    rgba(255, 255, 255, .98) 0 3%,
    rgba(247, 252, 255, .92) 7%,
    rgba(215, 237, 255, .58) 18%,
    rgba(160, 211, 255, .24) 35%,
    rgba(120, 184, 236, .08) 55%,
    transparent 74%);
    filter: blur(2.8px);
}

/* small hard specular centre */
.cv-hero__flare-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 14%, rgba(255, 255, 255, .94) 25%, rgba(226, 244, 255, .55) 52%, transparent 76%);
    box-shadow: 0 0 7px rgba(255, 255, 255, .95),
    0 0 18px rgba(211, 238, 255, .64),
    0 0 34px rgba(151, 207, 255, .25);
    animation: cvHeroFlareCorePulse 2.8s ease-in-out infinite;
}

.cv-hero__flare-ray {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 3px;
    transform-origin: 50% 50%;
    border-radius: 0;
    background: linear-gradient(90deg,
    transparent 0%,
    rgba(220, 240, 255, .08) 10%,
    rgba(242, 249, 255, .50) 34%,
    rgba(255, 255, 255, .98) 49%,
    rgba(255, 255, 255, .98) 51%,
    rgba(242, 249, 255, .46) 66%,
    rgba(220, 240, 255, .06) 90%,
    transparent 100%);
    box-shadow: 0 0 7px rgba(229, 244, 255, .38);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    animation: cvHeroFlareRayBreath 3.2s ease-in-out infinite;
}

/* Angles and relative lengths are based on the five flare layers
   in the Figma hero rather than an even radial star. */
.cv-hero__flare-ray--1 {
    animation-delay: 0s;
    width: 222px;
    height: 2.4px;
    transform: translate(-50%, -50%) rotate(171.65deg);
    opacity: .66;
    filter: blur(.55px);
}

.cv-hero__flare-ray--2 {
    animation-delay: -.6s;
    width: 156px;
    height: 4.2px;
    transform: translate(-50%, -50%) rotate(66.65deg);
    opacity: .88;
    filter: blur(.7px);
}

.cv-hero__flare-ray--3 {
    animation-delay: -1.1s;
    width: 119px;
    height: 3.4px;
    transform: translate(-50%, -50%) rotate(126.65deg);
    opacity: .66;
    filter: blur(.55px);
}

.cv-hero__flare-ray--4 {
    animation-delay: -.35s;
    width: 138px;
    height: 3.2px;
    transform: translate(-50%, -50%) rotate(-143.35deg);
    opacity: .54;
    filter: blur(.65px);
}

.cv-hero__flare-ray--5 {
    animation-delay: -.9s;
    width: 46px;
    height: 5px;
    transform: translate(-50%, -50%) rotate(63.52deg);
    opacity: .96;
    filter: blur(.8px);
}

/* a very soft second bloom, stretched along the dominant ray */
.cv-hero__flare::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 170px;
    height: 26px;
    transform: translate(-50%, -50%) rotate(171.65deg);
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, .26) 0%,
    rgba(199, 229, 255, .12) 38%,
    transparent 74%);
    filter: blur(8px);
}


@keyframes cvHeroFlareCorePulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(.94);
        opacity: .84;
    }
    48% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 1;
    }
    64% {
        transform: translate(-50%, -50%) scale(.99);
        opacity: .92;
    }
}

@keyframes cvHeroFlareRayBreath {
    0%, 100% {
        opacity: .72;
    }
    48% {
        opacity: .96;
    }
    70% {
        opacity: .82;
    }
}

.cv-hero__content {
    height: 100%;
    position: relative;
    z-index: 2;
}

.cv-hero__wordmark {
    position: absolute;
    width: 549px;
    max-width: none;
    left: 50%;
    top: 534px;
    transform: translateX(-50%);
    filter: brightness(0) invert(1);
}

.cv-hero__tagline {
    position: absolute;
    top: 618px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    white-space: nowrap;
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .03em;
}

.cv-hero__aig {
    position: absolute;
    width: 126px;
    left: 50%;
    top: 774px;
    transform: translateX(-50%);
    filter: grayscale(1) brightness(0) invert(1);
    opacity: .96;
}

/* =========================================================
   VIDEO PLAYER
   ========================================================= */

.cv-intro-video {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0;
    background: #07090d;
}

.cv-video {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

.cv-video__media {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
    object-position: center;

    background: #000;
}

.cv-video__shade {
    position: absolute;
    z-index: 2;
    inset: 0;

    background: rgba(0, 0, 0, .08);

    pointer-events: none;

    opacity: 1;
    transition: opacity .25s ease;
}

.cv-video.is-playing .cv-video__shade {
    opacity: 0;
}


/* ---------------------------------------------------------
   PLAY / PAUSE
   --------------------------------------------------------- */

.cv-play {
    position: absolute;
    z-index: 7;

    left: 50%;
    top: 50%;

    width: 92px;
    height: 92px;

    padding: 0;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 50%;

    background: rgba(0, 0, 0, .12);

    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);

    cursor: pointer;

    opacity: 1;

    transform: translate(-50%, -50%) scale(1);

    transition: opacity .28s ease,
    transform .22s ease,
    background .22s ease;
}

.cv-play span {
    width: 0;
    height: 0;

    margin-left: 6px;

    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 18px solid #fff;
}

/* pause */
.cv-video.is-playing .cv-play span {
    position: relative;

    width: 18px;
    height: 24px;

    margin: 0;

    border: 0;
}

.cv-video.is-playing .cv-play span::before,
.cv-video.is-playing .cv-play span::after {
    content: '';

    position: absolute;
    top: 0;

    width: 5px;
    height: 24px;

    background: #fff;
}

.cv-video.is-playing .cv-play span::before {
    left: 1px;
}

.cv-video.is-playing .cv-play span::after {
    right: 1px;
}

.cv-play:hover {
    background: rgba(255, 255, 255, .10);

    transform: translate(-50%, -50%) scale(1.045);
}


/* ---------------------------------------------------------
   BOTTOM CUSTOM CONTROLS
   --------------------------------------------------------- */

.cv-video__controls {
    position: absolute;
    z-index: 8;

    left: 24px;
    right: 24px;
    bottom: 20px;

    height: 44px;

    display: flex;
    align-items: center;

    gap: 12px;

    opacity: 1;

    transition: opacity .28s ease,
    transform .28s ease;

    transform: translateY(0);
}

.cv-video__progress {
    flex: 1;

    min-width: 0;
    height: 18px;

    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    background: transparent;

    cursor: pointer;
}

.cv-video__progress::-webkit-slider-runnable-track {
    height: 2px;

    background: rgba(255, 255, 255, .55);

    border-radius: 2px;
}

.cv-video__progress::-moz-range-track {
    height: 2px;

    background: rgba(255, 255, 255, .55);

    border-radius: 2px;
}

.cv-video__progress::-webkit-slider-thumb {
    width: 10px;
    height: 10px;

    margin-top: -4px;

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    border-radius: 50%;

    background: #fff;
}

.cv-video__progress::-moz-range-thumb {
    width: 10px;
    height: 10px;

    border: 0;
    border-radius: 50%;

    background: #fff;
}

.cv-video__control {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    padding: 8px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;

    background: rgba(0, 0, 0, .18);

    color: #fff;

    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);

    cursor: pointer;

    transition: background .2s ease,
    transform .2s ease;
}

.cv-video__control:hover {
    background: rgba(255, 255, 255, .12);
    transform: scale(1.05);
}

.cv-video__control svg {
    width: 100%;
    height: 100%;

    overflow: visible;
}


/* sound */

.cv-video__sound-body {
    fill: currentColor;
}

.cv-video__sound-wave,
.cv-video__sound-slash {
    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.cv-video__sound.is-muted .cv-video__sound-wave {
    opacity: 0;
}

.cv-video__sound.is-muted .cv-video__sound-slash {
    opacity: 1;
}

.cv-video__sound:not(.is-muted) .cv-video__sound-wave {
    opacity: 1;
}

.cv-video__sound:not(.is-muted) .cv-video__sound-slash {
    opacity: 0;
}


/* fullscreen */

.cv-video__fullscreen svg {
    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ---------------------------------------------------------
   AUTO HIDE
   --------------------------------------------------------- */

.cv-video.is-playing.is-controls-hidden .cv-play,
.cv-video.is-playing.is-controls-hidden .cv-video__controls {
    opacity: 0;

    pointer-events: none;
}

.cv-video.is-playing.is-controls-hidden .cv-video__controls {
    transform: translateY(5px);
}

@media (hover: hover) and (pointer: fine) {
    .cv-video.is-playing.is-controls-hidden {
        cursor: none;
    }
}


/* ---------------------------------------------------------
   PRODUCTION
   --------------------------------------------------------- */

.cv-production {
    position: relative;

    width: 100%;
    height: auto;

    overflow: hidden;

    background: #111;
}

.cv-video--production .cv-video__media {
    object-position: center 58%;
}

.cv-video--production::before {
    content: '';

    position: absolute;
    z-index: 2;

    top: 0;
    left: 0;

    width: 100%;
    height: 103px;

    background: rgba(0, 0, 0, .76);

    opacity: 1;

    transition: opacity .25s ease;

    pointer-events: none;
}

.cv-production__content {
    position: absolute;
    z-index: 3;

    inset: 0;

    height: 103px;

    padding-top: 50px;
    padding-left: 8px;

    pointer-events: none;

    opacity: 1;

    transition: opacity .25s ease;
}

.cv-production__content .cv-title {
    font-size: 36px;
    line-height: 32px;
    font-weight: 700;

    letter-spacing: .03em;
}

.cv-video--production.is-playing::before,
.cv-video--production.is-playing .cv-production__content {
    opacity: 0;
}

/* comparison */

.cv-comparison {
    position: relative;

    width: 100%;
    height: 747px;

    margin: 0;

    overflow: hidden;

    background: #efecf3;
    color: #0d0d0d;
}

.cv-comparison__glass {
    position: absolute;
    z-index: 1;

    left: 50%;
    bottom: -100px;

    width: auto;
    height: 130%;

    min-width: 100%;

    max-width: none;

    display: block;

    pointer-events: none;

    --cv-comparison-y: 0px;

    transform: translateX(-50%) translate3d(0, var(--cv-comparison-y), 0);

    transform-origin: center bottom;

    will-change: transform;
}


.cv-comparison__content {
    position: relative;
    z-index: 2;

    padding-top: 58px;
}


.cv-comparison__content .cv-title {
    max-width: 560px;

    font-size: 36px;
    line-height: 1;
    font-weight: 700;
}


.cv-comparison__lead {
    margin: 20px 0 74px 26px;

    font-size: 17px;
    line-height: 1.15;
    font-weight: 400;

    text-transform: uppercase;
    letter-spacing: .015em;
}


.cv-comparison__labels {
    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 18px;

    padding: 0 28px;

    font-size: 15px;
    line-height: 1;
}

.cv-comparison__labels i {
    height: 1px;
    position: relative;

    background: linear-gradient(#121212, #121212) left center / 0% 1px no-repeat;

    transition: background-size 1.15s cubic-bezier(.22, .61, .36, 1);
}

.cv-comparison__labels i::before {
    content: '';
    position: absolute;

    left: -3px;
    top: -3px;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #121212;

    opacity: 0;
    transform: scale(.5);

    transition: opacity .25s ease,
    transform .35s ease;
}

.cv-comparison__labels i::after {
    content: '';
    position: absolute;

    right: 0;
    top: -3px;

    width: 6px;
    height: 6px;

    border-top: 1px solid #121212;
    border-right: 1px solid #121212;

    transform: rotate(45deg) translate(-3px, 3px);
    opacity: 0;

    transition: opacity .25s ease .9s,
    transform .35s ease .9s;
}

.cv-comparison__labels span:last-child {
    opacity: 0;
    transform: translateX(-8px);

    transition: opacity .4s ease 1s,
    transform .5s ease 1s;
}

.cv-comparison.is-visible .cv-comparison__labels i {
    background-size: 100% 1px;
}

.cv-comparison.is-visible .cv-comparison__labels i::before {
    opacity: 1;
    transform: scale(1);
}

.cv-comparison.is-visible .cv-comparison__labels i::after {
    opacity: 1;
    transform: rotate(45deg) translate(0, 0);
}

.cv-comparison.is-visible .cv-comparison__labels span:last-child {
    opacity: 1;
    transform: translateX(0);
}

/* tech */
.cv-tech {
    position: relative;
    height: 900px;
    overflow: hidden;
    background: #000;
}

.cv-tech__background {
    position: absolute;
    z-index: 0;

    top: 0;
    left: 50%;

    width: 100%;
    #max-width: 1920px;
    height: 900px;

    transform: translateX(-50%);

    background-image: url('../img/tech-bg.webp');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;

    pointer-events: none;
}

.cv-tech__inner {
    position: relative;
    z-index: 2;
}

.cv-tech__inner {
    position: relative;
    z-index: 2;
    padding: 62px 0 78px;
}

.cv-tech > .cv-tech__inner > .cv-title {
    max-width: 620px;
    font-size: 30px;
    line-height: 1;
    letter-spacing: .025em;
}

.cv-tech__cards {
    display: grid;
    grid-template-columns: repeat(3, 280px);
    justify-content: space-between;

    gap: 0;
    margin: 34px 26px 46px;
}

.cv-tech-card {
    width: 280px;
    height: 345px;

    padding: 18px 20px 20px;

    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 5px;

    background: linear-gradient(
            180deg,
            rgba(255, 255, 255, .12) 0%,
            rgba(255, 255, 255, .045) 23%,
            rgba(5, 7, 11, .18) 62%,
            rgba(0, 0, 0, .42) 100%
    );

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);

    box-shadow: inset 0 0 24px rgba(255, 255, 255, .055),
    0 5px 11px rgba(0, 0, 0, .32);

    display: grid;
    grid-template-rows: 104px 48px 1px auto;
    align-content: start;
}

.cv-tech-card__divider {
    width: 100%;
    height: 1px;

    margin-top: 14px;

    background: rgba(255, 255, 255, .72);
}

.cv-tech-card__value {
    font-weight: 700;
    font-size: 92px;
    line-height: .82;
    letter-spacing: -.075em;
}

.cv-tech-card__label {
    font-size: 13px;
    line-height: 1.15;
    align-self: end;
}

.cv-tech-card p {
    margin: 20px 0 0;

    font-size: 13px;
    line-height: 1.15;
}

.cv-tech-card__label span {
    font-weight: 400;
}

.cv-tech-card__label strong {
    font-weight: 700;
}

.cv-tech-card__divider {
    background: rgba(255, 255, 255, .65);
    margin-top: 18px;
}

.cv-tech-card p {
    font-size: 16px;
    line-height: 1.1;
    margin: 24px 0 0;
}

.cv-tech__statement {
    margin: 46px 26px 0;
    max-width: 1000px;
}

.cv-tech__statement p {
    max-width: 820px;
    margin: 12px 0 0 26px;

    font-size: 16px;
    line-height: 1.25;
}

.cv-tech-card {
    opacity: 0;

    transform: translate3d(0, 12px, 0);

    transition: opacity .45s ease,
    transform .6s cubic-bezier(.22, .61, .36, 1);
}

.cv-tech.is-visible .cv-tech-card {
    opacity: 1;

    transform: translate3d(0, 0, 0);
}

.cv-tech.is-visible .cv-tech-card:nth-child(1) {
    transition-delay: .05s;
}

.cv-tech.is-visible .cv-tech-card:nth-child(2) {
    transition-delay: .15s;
}

.cv-tech.is-visible .cv-tech-card:nth-child(3) {
    transition-delay: .25s;
}

/* benefits */
.cv-benefits {
    position: relative;
    height: 842px;
    overflow: hidden;

    background: #fff;
    color: #0d0d0d;

    border-radius: 0 0 var(--cv-radius) var(--cv-radius);
}

.cv-benefits__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.cv-benefits__bg {
    position: absolute;
    display: block;

    background-repeat: no-repeat;
    background-size: 100% 100%;

    pointer-events: none;
}

.cv-benefits__bg--top {
    width: 100%;
    max-width: 2000px;
    height: 635px;

    left: calc(50% - 720px - 125px);
    top: -54px;

    background-image: url('../img/benefits-bg-top.webp');

    /*
     * Если экспортировал элемент уже перевёрнутым из Figma,
     * transform здесь НЕ нужен.
     */
}

.cv-benefits__bg--bottom {
    width: 100%;
    max-width: 2000px;
    height: 347px;

    #left: calc(50% - 720px);
    top: 506px;

    background-image: url('../img/benefits-bg-bottom.webp');
}

.cv-benefits__inner {
    position: relative;
    z-index: 2;
    padding-top: 138px;
}

.cv-benefits__grid {
    width: 884px;

    display: grid;
    grid-template-columns: repeat(3, 248px);
    grid-template-rows: repeat(2, 179px);

    column-gap: 70px;
    row-gap: 72px;

    margin-top: 90px;
    margin-left: 161px;
}

.cv-benefit-card {
    width: 248px;
    height: 179px;
    min-height: 0;

    padding: 26px 17px 18px;

    border: 0;
    border-radius: 5px;

    background: rgba(245, 245, 245, .25);

    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);

    box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}

.cv-benefit-card h3 {
    width: 215px;
    min-height: 38px;

    margin: 0 0 12px;

    font-size: 16px;
    line-height: 19px;
    font-weight: 700;

    letter-spacing: .03em;
    text-transform: uppercase;
}

.cv-benefit-card p {
    width: 215px;
    margin: 0;

    font-size: 12px;
    line-height: 12px;
    font-weight: 400;

    letter-spacing: .03em;
}

.cv-benefits {
    --benefits-top-x: 0px;
    --benefits-top-y: 0px;
    --benefits-bottom-x: 0px;
    --benefits-bottom-y: 0px;
}

.cv-benefits__bg--top {
    transform: translate3d(
            var(--benefits-top-x),
            var(--benefits-top-y),
            0
    );
    will-change: transform;
}

.cv-benefits__bg--bottom {
    transform: translate3d(
            var(--benefits-bottom-x),
            var(--benefits-bottom-y),
            0
    );
    will-change: transform;
}

.cv-benefit-card {
    opacity: 0;

    transform: translate3d(0, 18px, 0) scale(.985);

    transition: opacity .55s ease,
    transform .7s cubic-bezier(.22, .61, .36, 1),
    box-shadow .25s ease;
}

.cv-benefit-card:hover {
    transform: translate3d(0, -3px, 0) scale(1);

    box-shadow: 0 5px 12px rgba(0, 0, 0, .10),
    0 2px 0 rgba(0, 0, 0, .20);
}

.cv-benefits.is-visible .cv-benefit-card {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.cv-benefits.is-visible .cv-benefit-card:nth-child(1) {
    transition-delay: .04s;
}

.cv-benefits.is-visible .cv-benefit-card:nth-child(2) {
    transition-delay: .10s;
}

.cv-benefits.is-visible .cv-benefit-card:nth-child(3) {
    transition-delay: .16s;
}

.cv-benefits.is-visible .cv-benefit-card:nth-child(4) {
    transition-delay: .22s;
}

.cv-benefits.is-visible .cv-benefit-card:nth-child(5) {
    transition-delay: .28s;
}

.cv-benefits.is-visible .cv-benefit-card:nth-child(6) {
    transition-delay: .34s;
}

/* formats */
/* formats */
.cv-formats {
    height: 580px;
    min-height: 0;

    padding: 79px 0 0;

    background: #000;
    overflow: hidden;
}

.cv-formats .cv-title {
    margin-left: 8px;

    font-size: 36px;
    line-height: 32px;
    font-weight: 700;

    letter-spacing: .03em;
    text-transform: uppercase;
}

.cv-formats__grid {
    position: relative;

    width: 1054px;
    height: 338px;

    margin: 62px auto 0;

    display: block;
}

/* Общая карточка */
.cv-format-card {
    position: absolute;

    height: 135px;

    padding: 0;

    border: 0;
    border-radius: 5px;

    background: linear-gradient(
            180.15deg,
            rgba(255, 255, 255, .10) 47.65%,
            rgba(0, 0, 0, .10) 89.72%
    );

    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .52);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

/* DLF */
.cv-format-card:nth-child(1) {
    width: 248px;
    left: 0;
    top: 0;
}

/* SDLF */
.cv-format-card:nth-child(2) {
    width: 248px;
    left: 403px;
    top: 0;
}

/* PLF */
.cv-format-card:nth-child(3) {
    width: 248px;
    left: 806px;
    top: 0;
}

/* OVERSIZE */
.cv-format-card:nth-child(4) {
    width: 377px;
    left: 110px;
    top: 203px;
}

/* ТОЛЩИНЫ */
.cv-format-card:nth-child(5) {
    width: 377px;
    left: 539px;
    top: 203px;
}

.cv-format-card h3 {
    margin: 0;

    font-size: 40px;
    line-height: 1;
    font-weight: 700;
}

.cv-format-card p {
    margin: 7px 0 0;

    font-size: 30px;
    line-height: 1.2;
    font-weight: 400;

    letter-spacing: -.02em;
}

.cv-format-card {
    opacity: 0;
    filter: blur(7px);

    transition: opacity .5s ease,
    filter .65s ease,
    box-shadow .25s ease;
}

.cv-formats.is-visible .cv-format-card {
    opacity: 1;
    filter: blur(0);
}

/* Карточки появляются именно по одной */
.cv-formats.is-visible .cv-format-card:nth-child(1) {
    transition-delay: .05s;
}

.cv-formats.is-visible .cv-format-card:nth-child(2) {
    transition-delay: .23s;
}

.cv-formats.is-visible .cv-format-card:nth-child(3) {
    transition-delay: .41s;
}

.cv-formats.is-visible .cv-format-card:nth-child(4) {
    transition-delay: .59s;
}

.cv-formats.is-visible .cv-format-card:nth-child(5) {
    transition-delay: .77s;
}

.cv-formats.is-visible .cv-format-card:hover {
    animation: cvFormatWobble 1.05s ease-in-out;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .68),
    0 8px 24px rgba(0, 0, 0, .18);
}

@keyframes cvFormatWobble {
    0% {
        transform: translateX(0) rotate(0deg);
    }

    20% {
        transform: translateX(-3px) rotate(-0.25deg);
    }

    40% {
        transform: translateX(3px) rotate(0.25deg);
    }

    60% {
        transform: translateX(-2px) rotate(-0.15deg);
    }

    80% {
        transform: translateX(1px) rotate(0.08deg);
    }

    100% {
        transform: translateX(0) rotate(0deg);
    }
}

/* production */
.cv-production {
    height: 690px;
    position: relative;
    overflow: hidden;
    background: #111;
}

.cv-production__content {
    position: absolute;
    inset: 0;
    padding-top: 50px;
}

/* products */
.cv-products {
    position: relative;

    height: 791px;
    min-height: 0;

    padding: 119px 0 0;

    overflow: hidden;
    background: #000209;
}

/* Синее свечение из Figma */
.cv-products__glow {
    position: absolute;
    z-index: 0;
    inset: 0;

    background: linear-gradient(
            180deg,
            #fff -147.3%,
            rgba(43, 40, 40, 0) 81.13%
    );

    pointer-events: none;
}

/* Lumin-2 */
.cv-products::before {
    content: '';

    position: absolute;
    z-index: 1;

    top: 40px;
    left: 50%;

    width: 1318px;
    height: 751px;

    transform: translateX(-50%);

    background: url('../img/products-bg.webp') center / 100% 100% no-repeat;

    border-radius: 5px;

    pointer-events: none;
}

.cv-products__inner {
    position: relative;
    z-index: 2;
}

.cv-products .cv-title {
    margin-left: 7px;

    font-size: 37px;
    line-height: 32px;
    font-weight: 700;

    letter-spacing: .03em;
}

.cv-products__lead {
    margin: 7px 0 0 34px;

    font-size: 18px;
    line-height: 18px;
    font-weight: 700;
}

.cv-products__grid {
    position: relative;

    width: 1054px;
    height: 333px;

    margin: 42px auto 0;

    display: block;
}

.cv-product-card {
    position: absolute;

    padding: 16px 16px 10px;

    border: 1px solid transparent;
    border-radius: 5px;

    background: rgba(255, 255, 255, .23);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);

    box-shadow: 0 2px 0 rgba(0, 0, 0, .25);

    display: flex;
    flex-direction: column;

    transition: transform .28s cubic-bezier(.22, .61, .36, 1),
    border-radius .28s ease,
    border-color .28s ease,
    background .28s ease;

    cursor: pointer;
}

/* TopL / TopLT */
.cv-product-card:nth-child(1) {
    left: 0;
    top: 0;

    width: 248px;
    height: 179px;
}

/* Miroglass / Decomatt / Lumilac */
.cv-product-card:nth-child(2) {
    left: 402px;
    top: 0;

    width: 248px;
    height: 179px;
}

/* Phoenix */
.cv-product-card:nth-child(3) {
    left: 806px;
    top: 0;

    width: 248px;
    height: 177px;
}

/* Stratosafe */
.cv-product-card:nth-child(4) {
    left: 107px;
    top: 239px;

    width: 390px;
    height: 93px;
}

/* Vision */
.cv-product-card:nth-child(5) {
    left: 582px;
    top: 240px;

    width: 365px;
    height: 93px;
}

.cv-product-card h3 {
    margin: 0;

    font-size: 24px;
    line-height: 24px;
    font-weight: 700;

    letter-spacing: .03em;
    text-transform: uppercase;
}

.cv-product-card p {
    width: 215px;

    margin: auto 0 0;

    font-size: 12px;
    line-height: 13px;
    font-weight: 400;

    letter-spacing: .03em;
}

.cv-product-card {
    border-radius: 5px;

    transform: scale(1.025);

    transition: transform .35s cubic-bezier(.22, .61, .36, 1),
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    opacity .45s ease;
}

.cv-products.is-visible .cv-product-card {
    transform: scale(1);
}

@media (hover: hover) and (pointer: fine) {
    .cv-products.is-visible .cv-product-card:hover {
        transform: translateY(-5px) scale(1);

        border-color: #fff;

        box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
    }
}

/* applications */
.cv-applications {
    position: relative;

    height: 972px;
    min-height: 0;

    overflow: hidden;

    background: #000209;
}

.cv-applications__stage {
    position: absolute;
    inset: 0;

    background: url('../img/applications-bg.webp') center bottom / 100% 100% no-repeat;
}

.cv-applications__inner {
    position: relative;
    z-index: 3;

    padding-top: 150px;
}

.cv-applications .cv-title {
    margin-left: 9px;

    font-size: 36px;
    line-height: 46px;
    font-weight: 700;

    letter-spacing: .03em;
}

.cv-application-card {
    position: absolute;
    z-index: 4;

    padding: 18px 12px;

    color: #fff;

    background: rgba(255, 255, 255, .23);

    border-radius: 5px;

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);

    box-shadow: 0 10px 8px rgba(191, 191, 191, .25),
    inset 0 0 30px rgba(255, 255, 255, .25);

    opacity: 0;
    visibility: hidden;

    transform: translateY(8px) scale(.985);

    transition: opacity .20s ease,
    visibility .20s ease,
    transform .28s cubic-bezier(.22, .61, .36, 1);

    pointer-events: none;
}

.cv-application-card.is-active {
    opacity: 1;
    visibility: visible;

    transform: translateY(0) scale(1);
}

.cv-application-card--business {
    left: 9.028%;
    top: 309px;

    width: 240px;
    height: 212px;
}

.cv-application-card--residential {
    left: 34.236%;
    top: 295px;

    width: 232px;
    height: 234px;
}

.cv-application-card--private {
    left: 58%;
    top: 497px;

    width: 231px;
    height: 179px;
}

.cv-application-card--tourism {
    left: 72.431%;
    top: 480px;

    width: 267px;
    height: 216px;
}

.cv-application-card--culture {
    left: 18.472%;
    top: 606px;

    width: 215px;
    height: 201px;
}

.cv-application-card h3 {
    margin: 0;

    font-size: 24px;
    line-height: 24px;
    font-weight: 700;

    letter-spacing: .03em;
    text-transform: uppercase;
}

.cv-application-card ul {
    margin: 12px 0 0;
    padding: 0;

    list-style: none;

    font-size: 12px;
    line-height: 16px;
    font-weight: 400;

    letter-spacing: .03em;
}

.cv-application-card li::before {
    content: '• ';
}

.cv-application-card--business h3 {
    width: 180px;
}

.cv-application-card--residential h3 {
    width: 180px;
}

.cv-application-card--private h3 {
    width: 160px;
}

.cv-application-card--tourism h3 {
    width: 234px;
}

.cv-application-card--culture h3 {
    width: 182px;
}

.cv-application-card__connector {
    position: absolute;

    left: 50%;
    top: 100%;

    width: 1px;

    background: #fff;

    transform-origin: top center;
}

.cv-application-card__connector::after {
    content: '';

    position: absolute;

    width: 4px;
    height: 4px;

    left: -1.5px;
    bottom: -2px;

    border-radius: 50%;

    background: #fff;
}

.cv-application-card--residential .cv-application-card__connector {
    height: 69px;
}

.cv-application-card--private .cv-application-card__connector {
    height: 72px;
}

.cv-application-card--tourism .cv-application-card__connector {
    height: 47px;
}

.cv-application-card--culture .cv-application-card__connector {
    height: 42px;
}

.cv-application-card--business .cv-application-card__connector {
    left: 120px;
    top: 100%;

    width: 1px;
    height: 96px;

    background: #fff;
}

.cv-application-card--business .cv-application-card__connector::before {
    content: '';

    position: absolute;

    right: 0;
    bottom: 0;

    width: 79px;
    height: 1px;

    background: #fff;
}

.cv-application-card--business .cv-application-card__connector::after {
    content: '';

    position: absolute;

    left: -80px;
    bottom: -1.5px;

    width: 4px;
    height: 4px;

    border-radius: 50%;
    background: #fff;
}

.cv-application-hotspot {
    position: absolute;
    z-index: 5;

    padding: 0;
    margin: 0;

    border: 0;
    outline: 0;
    background: transparent;

    cursor: pointer;
}

/*.cv-application-hotspot {*/
/*    background: rgba(255, 0, 0, .12);*/
/*    outline: 1px solid rgba(255, 0, 0, .7);*/
/*}*/

/* левая башня */
.cv-application-hotspot--business {
    left: 0;
    top: 500px;

    width: 10%;
    height: 430px;
}

/* нижнее классическое здание */
.cv-application-hotspot--culture {
    left: 8%;
    top: 820px;

    width: 21%;
    height: 152px;
}

/* центральный жилой корпус */
.cv-application-hotspot--residential {
    left: 32%;
    top: 590px;

    width: 21%;
    height: 382px;
}

/* частные дома */
.cv-application-hotspot--private {
    left: 53%;
    top: 690px;

    width: 19%;
    height: 282px;
}

/* правый комплекс */
.cv-application-hotspot--tourism {
    left: 72%;
    top: 690px;

    width: 28%;
    height: 282px;
}

.cv-applications-mobile {
    display: none;
}

.cv-featured-carousel__pagination {
    display: none;
}

/* cases */
.cv-cases {
    min-height: 800px;
    padding: 92px 0 90px;
}

/* interior cases */

.cv-cases--interior {
    position: relative;
    z-index: 3;

    height: 800px;
    min-height: 0;

    padding: 0;

    overflow: visible;

    background: #e7e7e7 url('../img/interior-projects-bg.png') center center / cover no-repeat;

    color: #000;
}

.cv-resources {
    position: relative;
    z-index: 1;
}

.cv-interior__background {
    position: absolute;
    z-index: 0;

    left: 50%;
    top: -20px;

    width: 1526px;
    height: 839px;

    transform: translateX(-50%);

    background: url('../img/interior-projects-bg.png') center / 100% 100% no-repeat;

    pointer-events: none;
}

.cv-interior__background {
    display: none;
}

.cv-featured-head--interior {
    position: relative;
    z-index: 5;

    height: 120px;
    padding-top: 69px;
}

.cv-featured-head--interior .cv-title {
    margin-left: 12px;

    color: #000;

    font-size: 36px;
    line-height: 32px;
    font-weight: 700;

    letter-spacing: -.02em;
}

.cv-featured-head__all--interior {
    background: #000;
    color: #fff !important;
}

.cv-featured-head__all--interior i {
    background: #fff;
}

.cv-featured-head__all--interior i::after {
    border-color: #fff;
}

.cv-featured-carousel--interior {
    position: absolute;

    z-index: 2;

    inset: 0;

    width: 100%;
    height: 800px;
}

.cv-interior-swiper {
    position: absolute;

    left: 50%;
    top: 159px;

    width: min(1440px, 100%);
    height: 539px;

    transform: translateX(-50%);

    overflow: hidden;
}

.cv-featured-card--interior {
    background: rgba(255, 255, 255, .10);
}

.cv-interior-swiper
.swiper-slide-active
.cv-featured-card--interior {
    background: rgba(255, 255, 255, .43);
}

.cv-interior-swiper
.swiper-slide-active
.cv-featured-card {
    width: 499px;
    height: 539px;

    margin-top: 0;
}

.cv-interior-swiper
.swiper-slide-active
.cv-featured-card__media {
    left: 24px;
    top: 22px;

    width: 450px;
    height: 300px;
}

.cv-interior-swiper .cv-featured-card h3 {
    font-size: 16px;
    line-height: 18px;
    font-weight: 400;
}

.cv-interior-swiper
.swiper-slide-prev
.cv-featured-card h3 {
    left: auto;
    right: 31px;

    top: 292px;

    width: 294px;

    text-align: right;
}

.cv-interior-swiper
.swiper-slide-next
.cv-featured-card h3 {
    left: 25px;
    top: 288px;

    width: 302px;

    text-align: left;
}

.cv-interior-swiper
.swiper-slide-active
.cv-featured-card h3 {
    left: 50%;
    top: 348px;

    width: 300px;

    transform: translateX(-50%);

    text-align: center;
}

.cv-interior-swiper
.cv-featured-card__description {
    font-size: 12px;
    line-height: 12px;
}

.cv-interior-swiper
.swiper-slide-active
.cv-featured-card__description,
.cv-interior-swiper
.swiper-slide-active
.cv-featured-card__link {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}

.cv-featured-card__link i {
    transition: transform .2s ease;
}

.cv-featured-carousel__arrow i {
    transition: transform .22s ease;
}

.cv-featured-carousel__arrow--prev:hover i {
    transform: translateX(-6px);
}

.cv-featured-carousel__arrow--next:hover i {
    transform: translateX(6px);
}

.cv-featured-carousel__arrow {
    transition: background .22s ease,
    box-shadow .22s ease;
}

.cv-featured-carousel__arrow:hover {
    background: #f2f2f2;

    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}

.cv-featured-card__link {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* сама стрелка */
.cv-featured-card__link i {
    position: relative;

    width: 38px;
    height: 8px;

    flex: 0 0 38px;

    transition: transform .2s ease;
}


/* линия */
.cv-featured-card__link i::before {
    content: '';

    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    height: 1px;

    background: currentColor;

    transform: translateY(-50%);
}


/* наконечник */
.cv-featured-card__link i::after {
    content: '';

    position: absolute;

    right: 0;
    top: 50%;

    width: 6px;
    height: 6px;

    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;

    transform: translateY(-50%) rotate(45deg);
}


/* как на основном сайте */
.cv-featured-card__link:hover i {
    transform: translateX(4px);
}

.cv-interior-swiper .swiper-wrapper {
    align-items: flex-start;
}

.cv-interior-swiper .swiper-slide {
    width: 499px !important;
    height: 539px;

    display: flex;
    justify-content: center;
    align-items: flex-start;
}


.cv-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.cv-slider-nav {
    display: flex;
    gap: 10px;
}

.cv-slider-nav button {
    width: 48px;
    height: 32px;
    border: 1px solid #101010;
    background: transparent;
    color: #101010;
    border-radius: 20px;
    cursor: pointer;
}

.cv-case-card {
    flex: 0 0 31.3%;
    scroll-snap-align: start;
}

.cv-case-card:nth-child(2) {
    flex-basis: 36%;
}

.cv-case-card a {
    display: block;
}

.cv-case-card img {
    width: 100%;
    aspect-ratio: 1.15/1;
    object-fit: cover;
    border-radius: var(--cv-radius);
}

.cv-case-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 13px;
    align-items: flex-start;
}

.cv-case-card__meta h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.15;
    font-weight: 500;
}

.cv-case-card__meta p {
    margin: 0;
    font-size: 13px;
    color: #626262;
}

.cv-interior__glyph {
    position: absolute;
    z-index: 6;

    width: 242px;
    height: auto;

    left: calc(50% + 369px);
    top: 660px;

    max-width: none;

    transform: translate3d(0, 0, 0) rotate(-8.04deg);

    transform-origin: 50% 50%;

    pointer-events: none;

    will-change: transform;

    animation: cvInteriorGlyphFloat 9s ease-in-out -2s infinite;
}

@keyframes cvInteriorGlyphFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-8.04deg);
    }

    25% {
        transform: translate3d(-8px, -10px, 0) rotate(-5.5deg);
    }

    50% {
        transform: translate3d(4px, -17px, 0) rotate(-9.5deg);
    }

    75% {
        transform: translate3d(9px, -7px, 0) rotate(-11deg);
    }
}

/* architecture featured carousel */

.cv-cases--architecture {
    position: relative;

    height: 800px;
    min-height: 0;

    padding: 0;

    overflow: hidden;

    background: linear-gradient(
            180deg,
            rgba(255, 255, 255, .16) -147.3%,
            rgba(43, 40, 40, 0) 81.13%
    ),
    #000;
}

.cv-featured-head {
    position: relative;
    z-index: 5;

    height: 120px;
    padding-top: 68px;
}

.cv-cases--architecture .cv-title {
    margin-left: 12px;

    color: #fff;

    font-size: 37px;
    line-height: 32px;
    font-weight: 700;

    letter-spacing: -.02em;
}

.cv-featured-head__all {
    position: absolute;

    top: 75px;
    right: 20px;

    width: 180px;
    height: 27px;

    padding: 0 20px 0 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-radius: 10px;

    background: #fff;
    color: #000 !important;

    font-size: 12px;
    line-height: 1;
}

.cv-featured-head__all i {
    position: relative;

    width: 37px;
    height: 1px;

    background: #000;
}

.cv-featured-head__all i::after {
    content: '';

    position: absolute;
    right: 0;
    top: -3px;

    width: 6px;
    height: 6px;

    border-top: 1px solid #000;
    border-right: 1px solid #000;

    transform: rotate(45deg);
}

.cv-featured-head__all i {
    transition: transform .2s ease;
}

.cv-featured-head__all:hover i {
    transform: translateX(5px);
}

/* =========================================================
   CASE LINKS — GLOBAL
   ========================================================= */


/* Смотреть все — интерьерные кейсы */
.cv-featured-head__all--interior {
    background: #000;
    color: #fff !important;
}

.cv-featured-head__all--interior i {
    background: #fff;
}

.cv-featured-head__all--interior i::after {
    border-top-color: #fff;
    border-right-color: #fff;
}

.cv-featured-carousel {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 800px;

    transform: none;
}

.cv-featured-carousel__stage {
    position: absolute;
    inset: 0;
}


.cv-architecture-swiper {
    position: absolute;

    left: 50%;
    top: 159px;

    width: min(1440px, 100%);
    height: 539px;

    transform: translateX(-50%);

    overflow: hidden;
}

.cv-architecture-swiper .swiper-wrapper {
    align-items: flex-start;
}

/*
 * ВАЖНО:
 * ширина самого swiper-slide всегда одинаковая.
 * Поэтому Swiper во время движения ничего не пересчитывает.
 */
.cv-architecture-swiper .swiper-slide {
    width: 499px !important;
    height: 539px;

    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.cv-featured-card {
    position: relative;

    width: 401px;
    height: 401px;

    margin-top: 26px;

    overflow: hidden;

    border-radius: 5px;

    background: #bababa;

    box-shadow: 0 10px 8px rgba(191, 191, 191, .25),
    inset 0 0 30px rgba(255, 255, 255, .25);

    transition: width .42s cubic-bezier(.22, .61, .36, 1),
    height .42s cubic-bezier(.22, .61, .36, 1),
    margin-top .42s cubic-bezier(.22, .61, .36, 1);

    cursor: pointer;
}

.cv-featured-card {
    transition: width .42s cubic-bezier(.22, .61, .36, 1),
    height .42s cubic-bezier(.22, .61, .36, 1),
    margin-top .42s cubic-bezier(.22, .61, .36, 1),
    transform .4s ease,
    box-shadow .4s ease,
    background .4s ease;
}

.cv-featured-card__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease,
    filter .5s ease;
}

.cv-architecture-swiper .swiper-slide-active .cv-featured-card {
    width: 499px;
    height: 539px;

    margin-top: 0;
}

.cv-featured-card__media {
    position: absolute;

    left: 25px;
    top: 16px;

    width: 350px;
    height: 250px;

    overflow: hidden;

    border-radius: 10px;

    transition: left .4s ease,
    top .4s ease,
    width .4s ease,
    height .4s ease;
}

.cv-featured-card__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.cv-architecture-swiper
.swiper-slide-active
.cv-featured-card__media {
    left: 24px;
    top: 22px;

    width: 450px;
    height: 300px;
}

.cv-architecture-swiper
.swiper-slide-prev
.cv-featured-card h3 {
    left: auto;
    right: 31px;

    top: 303px;

    width: 294px;

    text-align: right;
}

.cv-architecture-swiper
.swiper-slide-active
.cv-featured-card h3 {
    left: 50%;
    top: 348px;

    width: 314px;

    transform: translateX(-50%);

    text-align: center;
}

.cv-featured-card__description,
.cv-featured-card__link {
    opacity: 0;
    visibility: hidden;

    transition: opacity .2s ease,
    visibility .2s ease;

    pointer-events: none;
}

.cv-featured-card__description {
    position: absolute;

    left: 24px;
    top: 374px;

    width: 450px;

    margin: 0;

    color: #000;

    font-size: 16px;
    line-height: 18px;

    text-align: center;
}

.cv-featured-card__link {
    position: absolute;

    right: 25px;
    top: 469px;

    display: flex;
    align-items: center;

    gap: 17px;

    color: #000 !important;

    font-size: 11px;
    line-height: 11px;
}

.cv-architecture-swiper
.swiper-slide-active
.cv-featured-card__description,
.cv-architecture-swiper
.swiper-slide-active
.cv-featured-card__link {
    opacity: 1;
    visibility: visible;

    transition-delay: .2s;

    pointer-events: auto;
}

.cv-featured-card h3 {
    position: absolute;

    left: 25px;
    top: 288px;

    width: 302px;

    margin: 0;

    color: #000;

    font-size: 20px;
    line-height: 22px;
    font-weight: 500;

    letter-spacing: -.02em;

    text-shadow: 0 3px 3px rgba(8, 27, 77, .1);
}


.cv-featured-carousel__arrow {
    position: absolute;
    z-index: 10;

    top: 482px;

    width: 76px;
    height: 74px;

    padding: 0;

    border: 0;

    background: #fff;

    cursor: pointer;
}

.cv-featured-carousel__arrow--prev {
    left: 0;

    border-radius: 0 10px 10px 0;
}

.cv-featured-carousel__arrow--next {
    right: 0;

    border-radius: 10px 0 0 10px;
}

.cv-featured-carousel__arrow i {
    position: absolute;

    top: 35px;
    left: 20px;

    width: 36px;
    height: 4px;

    background: #000;
}

.cv-featured-carousel__arrow i::after {
    content: '';

    position: absolute;

    top: -7px;

    width: 14px;
    height: 14px;

    border-top: 4px solid #000;
    border-right: 4px solid #000;
}

.cv-featured-carousel__arrow--next i::after {
    right: 0;
    transform: rotate(45deg);
}

.cv-featured-carousel__arrow--prev i::after {
    left: 0;
    transform: rotate(-135deg);
}

@media (hover: hover) {

    .cv-cases--architecture .cv-featured-card:hover,
    .cv-cases--interior .cv-featured-card:hover {
        transform: translateY(-8px);

        box-shadow: 0 18px 42px rgba(5, 22, 60, .26),
        inset 0 1px 1px rgba(255, 255, 255, .45);
    }

    .cv-cases--architecture .cv-featured-card:hover
    .cv-featured-card__media img,
    .cv-cases--interior .cv-featured-card:hover
    .cv-featured-card__media img {
        transform: scale(1.04);

        filter: saturate(1.04) contrast(1.03);
    }

    .cv-cases--interior .cv-featured-card:hover {
        background: rgba(255, 255, 255, .22);
    }

    .cv-cases--interior
    .swiper-slide-active
    .cv-featured-card:hover {
        background: rgba(255, 255, 255, .52);
    }
}

/* =========================================================
   MATERIALS / RESOURCES / PUBLICATIONS
   ========================================================= */

/*
 * Общая геометрия Figma:
 *
 * весь блок:       1143 × 903
 * resources:       y = 0 ... 366
 * publications:    y = 366 ... 903
 *
 * artboard: 1440px
 * content left: 105px
 */


/* ---------------------------------------------------------
   RESOURCES
   --------------------------------------------------------- */

.cv-resources {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 366px;

    padding: 0;

    background: #000209;
}

.cv-resources {
    position: relative;
    z-index: 1;

    width: 100%;

    /*
     * 118px — расстояние от конца интерьерных кейсов
     * до заголовка ресурсов по Figma.
     *
     * 366px — сам блок ресурсов от его заголовка
     * до заголовка публикаций.
     */
    height: 484px;

    padding: 0;

    background: #000209;
}


/*
 * Общая рабочая область Figma 1143px.
 *
 * Для resources она начинается через 118px от начала секции,
 * для publications — сразу с начала своей секции.
 */
.cv-resources > .cv-shell,
.cv-publications > .cv-shell {
    position: relative;

    width: 1143px;
    max-width: none;

    margin: 0;

    left: calc(50% - 720px + 105px);
}


.cv-resources > .cv-shell {
    top: 118px;
    height: 366px;
}


.cv-publications > .cv-shell {
    top: 0;
    height: 537px;
}


/* [ Материалы и ресурсы ] */
.cv-resources .cv-title {
    position: absolute;

    left: 0;
    top: 0;

    width: max-content;
    max-width: none;

    margin: 0;

    white-space: nowrap;

    font-size: 36px;
    line-height: 32px;
    font-weight: 700;

    letter-spacing: .03em;
    text-transform: uppercase;

    color: #fff;
}


/*
 * Figma:
 *
 * first card x = 193
 * content x    = 105
 *
 * => 88px
 *
 * cards:
 * 209 + 73 + 209 + 73 + 209 + 73 + 209
 */
.cv-resources__grid {
    position: absolute;

    left: 88px;
    top: 83px;

    width: 1055px;

    margin: 0;
    padding: 0;

    display: grid;
    grid-template-columns: repeat(4, 209px);
    column-gap: 73px;

    align-items: start;
}


/* resource card */
.cv-resource-card {
    position: relative;

    width: 209px;
    height: 181px;
    min-height: 0;

    padding: 17px 14px;

    display: block;

    overflow: hidden;

    border: 1px solid #eee;
    border-radius: 5px;

    background: rgba(195, 195, 195, .25);

    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

    /*
     * entrance state
     */
    opacity: 0;

    transform: translate3d(0, 18px, 0) scale(.985);

    transition: opacity .5s ease,
    transform .65s cubic-bezier(.22, .61, .36, 1),
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}


/* staggered appearance */
.cv-resources.is-visible .cv-resource-card {
    opacity: 1;

    transform: translate3d(0, 0, 0) scale(1);
}

.cv-resources.is-visible .cv-resource-card:nth-child(1) {
    transition-delay: .05s;
}

.cv-resources.is-visible .cv-resource-card:nth-child(2) {
    transition-delay: .13s;
}

.cv-resources.is-visible .cv-resource-card:nth-child(3) {
    transition-delay: .21s;
}

.cv-resources.is-visible .cv-resource-card:nth-child(4) {
    transition-delay: .29s;
}


/* after intro animation — hover must react immediately */
.cv-resources.is-ready .cv-resource-card {
    transition-delay: 0s;
}


/* resource title */
.cv-resource-card h3 {
    width: 178px;

    margin: 0;

    font-size: 20px;
    line-height: 20px;
    font-weight: 700;

    letter-spacing: .03em;

    text-transform: uppercase;

    color: #fff;
}


/* resource description */
.cv-resource-card p {
    position: absolute;

    left: 14px;
    top: 70px;

    width: 182px;

    margin: 0;

    font-size: 12px;
    line-height: 12px;
    font-weight: 400;

    letter-spacing: .03em;

    color: #fff;
}


/* download */
.cv-resource-card a {
    position: absolute;

    left: 14px;
    bottom: 16px;

    width: 89px;
    height: 27px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 10px;

    background: #fff;

    color: #000 !important;

    font-size: 11px;
    line-height: 11px;
    font-weight: 400;

    transition: transform .22s ease,
    box-shadow .22s ease;
}


/* ---------------------------------------------------------
   PUBLICATIONS
   --------------------------------------------------------- */

.cv-publications {
    position: relative;
    z-index: 1;

    width: 100%;

    /*
     * 537px — содержимое публикаций по Figma
     * 100px — нижний воздух перед следующим блоком
     */
    height: 637px;

    padding: 0;

    background: #000209;
}


/* [ публикации ] */
.cv-publications .cv-title {
    position: absolute;

    left: 0;
    top: 0;

    width: max-content;
    max-width: none;

    margin: 0;

    white-space: nowrap;

    font-size: 36px;
    line-height: 32px;
    font-weight: 700;

    letter-spacing: .03em;
    text-transform: uppercase;

    color: #fff;
}


/*
 * Figma positions:
 *
 * 193 => 88px from content origin
 * 583 => 478px
 * 976 => 871px
 */
.cv-publications__grid {
    position: absolute;

    left: 88px;
    top: 87px;

    width: 1052px;

    margin: 0;
    padding: 0;

    display: grid;

    grid-template-columns:
        264px
        267px
        269px;

    column-gap: 126px;

    align-items: start;
}


/* publication */
.cv-publication-card {
    position: relative;

    width: 100%;
    height: 450px;

    min-width: 0;

    opacity: 0;

    transform: translate3d(0, 22px, 0) scale(.985);

    transition: opacity .55s ease,
    transform .72s cubic-bezier(.22, .61, .36, 1);
}


/* sequential appearance */
.cv-publications.is-visible .cv-publication-card {
    opacity: 1;

    transform: translate3d(0, 0, 0) scale(1);
}

.cv-publications.is-visible .cv-publication-card:nth-child(1) {
    transition-delay: .06s;
}

.cv-publications.is-visible .cv-publication-card:nth-child(2) {
    transition-delay: .17s;
}

.cv-publications.is-visible .cv-publication-card:nth-child(3) {
    transition-delay: .28s;
}

.cv-publications.is-ready .cv-publication-card {
    transition-delay: 0s;
}


/* text area */
.cv-publication-card__text {
    height: 85px;
    min-height: 0;
}


/* source */
.cv-publication-card strong {
    display: block;

    margin: 0;

    font-size: 20px;
    line-height: 20px;
    font-weight: 700;

    letter-spacing: .03em;
    text-transform: uppercase;

    color: #fff;
}


/* article title */
.cv-publication-card h3 {
    width: 182px;

    margin: 9px 0 0;

    font-size: 12px;
    line-height: 12px;
    font-weight: 400;

    letter-spacing: .03em;

    color: #fff;
}


/* image */
.cv-publication-card img {
    width: 100%;
    height: 323px;

    display: block;

    object-fit: cover;

    border-radius: 5px;

    transform: translateZ(0);

    transition: transform .45s cubic-bezier(.22, .61, .36, 1),
    filter .4s ease,
    box-shadow .4s ease;
}


/* read more */
.cv-publication-card > a {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 180px;
    height: 27px;

    padding: 0 18px 0 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-radius: 10px;

    background: #fff;
    color: #000 !important;

    font-size: 12px;
    line-height: 12px;
    font-weight: 400;

    text-transform: uppercase;
}

.cv-publication-card__arrow {
    position: relative;

    width: 39px;
    height: 14px;

    flex: 0 0 39px;

    transition: transform .3s ease;
}


/* длинная линия */
.cv-publication-card__arrow::before {
    content: '';

    position: absolute;

    left: 0;
    right: 1px;
    top: 50%;

    height: 1.5px;

    background: #000;

    border-radius: 2px;

    transform: translateY(-50%);
}


/* наконечник */
.cv-publication-card__arrow::after {
    content: '';

    position: absolute;

    right: 1px;
    top: 50%;

    width: 8px;
    height: 8px;

    border-top: 1.5px solid #000;
    border-right: 1.5px solid #000;

    transform: translateY(-50%) rotate(45deg);
}


/* как на основном сайте */
.cv-publication-card > a:hover .cv-publication-card__arrow {
    transform: translateX(10px);
}

/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

@media (hover: hover) {

    /*
     * resource:
     * glass panel lifts and becomes slightly brighter
     */
    .cv-resources.is-ready .cv-resource-card:hover {
        transform: translate3d(0, -6px, 0) scale(1);

        background: rgba(195, 195, 195, .34);

        border-color: #fff;

        box-shadow: 0 14px 32px rgba(0, 0, 0, .25),
        inset 0 0 28px rgba(255, 255, 255, .12);
    }


    .cv-resource-card a:hover {
        transform: translateX(4px);

        box-shadow: 0 5px 14px rgba(0, 0, 0, .18);
    }


    /*
     * publications:
     * do not move the complete layout;
     * only photograph lifts slightly
     */
    .cv-publication-card:hover img {
        transform: translate3d(0, -5px, 0) scale(1.018);

        filter: saturate(1.05) contrast(1.035);

        box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
    }


    .cv-publication-card > a:hover {
        transform: translateY(-2px);

        box-shadow: 0 5px 14px rgba(0, 0, 0, .18);
    }


}


/* ---------------------------------------------------------
   SAFETY FOR ARTBOARD ON SMALLER DESKTOPS
   --------------------------------------------------------- */

@media (max-width: 1439px) {

    .cv-resources > .cv-shell,
    .cv-publications > .cv-shell {
        left: 50%;

        transform: translateX(-50%);

        width: min(1143px, calc(100% - 64px));
    }
}

/* =========================================================
   FEEDBACK
   ========================================================= */

.cv-feedback {
    position: relative;

    width: 100%;
    height: 800px;

    overflow: hidden;

    background: #000;
    color: #fff;
}


/* ---------------------------------------------------------
   BACKGROUND AIG GLYPH
   Figma:
   left   -6.81%
   right  -4.79%
   top    10.75%
   bottom 4.75%
   --------------------------------------------------------- */

.cv-feedback__aig {
    position: absolute;
    z-index: 0;

    /*
     * Figma: секция 1440 × 800.
     *
     * Vector:
     * left   = -6.81%  ≈ -98px
     * right  = -4.79%  ≈ -69px
     * top    = 10.75%  = 86px
     * bottom = 4.75%   = 38px
     *
     * Поэтому фактический bbox:
     * 1607 × 676px.
     *
     * ВАЖНО: размер фиксируем относительно
     * 1440px артборда, а не viewport.
     */
    left: calc(50% - 720px - 98px);
    top: 86px;

    width: 1607px;
    height: 676px;

    max-width: none;

    overflow: visible;

    pointer-events: none;

    opacity: 0;

    transform: scale(.985);
    transform-origin: center center;

    transition: opacity 1.1s ease,
    transform 1.3s cubic-bezier(.22, .61, .36, 1);
}

.cv-feedback__aig path {
    fill: rgba(255, 255, 255, .15) !important;
}


/* ---------------------------------------------------------
   ARTBOARD CONTENT

   Figma:
   left edge  = 193px
   right edge = 193px

   1440 - 193 - 193 = 1054px
   --------------------------------------------------------- */

@media (min-width: 861px) {

    .cv-feedback__inner {
        position: relative;
        z-index: 2;

        width: 1054px;
        max-width: none;
        height: 800px;

        margin: 0 auto;
        padding: 0;

        display: block;
    }


    /* -----------------------------------------------------
       LEFT COPY
       ----------------------------------------------------- */
    .cv-feedback__copy {
        position: static;
    }


    .cv-feedback__copy h2 {
        position: absolute;

        left: 0;
        top: 40px;

        width: 397px;
        height: 41px;

        margin: 0;

        font-size: 37px;
        line-height: 41px;
        font-weight: 700;

        letter-spacing: -.02em;

        text-transform: uppercase;

        color: #fff;

        opacity: 0;

        transform: translate3d(-18px, 0, 0);

        transition: opacity .65s ease .08s,
        transform .8s cubic-bezier(.22, .61, .36, 1) .08s;
    }


    .cv-feedback__copy p {
        position: absolute;

        left: 0;
        top: 694px;

        width: 369px;
        height: 68px;

        margin: 0;

        display: flex;
        align-items: center;

        font-size: 17px;
        line-height: 20px;
        font-weight: 400;

        letter-spacing: -.02em;

        color: #fff;

        opacity: 0;

        transform: translate3d(0, 14px, 0);

        transition: opacity .65s ease .32s,
        transform .8s cubic-bezier(.22, .61, .36, 1) .32s;
    }


    /* -----------------------------------------------------
       FORM
       x = 662px on 1440 artboard
       relative to content x=193 => 469px
       ----------------------------------------------------- */
    .cv-feedback-form {
        position: absolute;

        left: 469px;
        top: 40px;

        width: 585px;
        height: 712px;

        margin: 0;
        padding: 0;

        display: block;

        border: 1px solid rgba(255, 255, 255, .72);

        border-radius: 5px;

        background: rgba(0, 0, 0, .40);

        -webkit-backdrop-filter: blur(8px);

        backdrop-filter: blur(8px);

        box-shadow: inset 0 0 32px rgba(255, 255, 255, .035);

        opacity: 0;

        transform: translate3d(22px, 0, 0) scale(.992);

        transition: opacity .7s ease .16s,
        transform .9s cubic-bezier(.22, .61, .36, 1) .16s,
        border-color .3s ease,
        box-shadow .3s ease;
    }


    /*
     * First six rows.
     */
    .cv-feedback-form > label:nth-of-type(1),
    .cv-feedback-form > label:nth-of-type(2),
    .cv-feedback-form > label:nth-of-type(3),
    .cv-feedback-form > label:nth-of-type(4),
    .cv-feedback-form > label:nth-of-type(5),
    .cv-feedback-form > label:nth-of-type(6) {
        position: absolute;

        left: 38px;

        width: 510px;
        height: 25px;

        margin: 0;

        display: block;
    }


    .cv-feedback-form > label:nth-of-type(1) {
        top: 38px;
    }

    .cv-feedback-form > label:nth-of-type(2) {
        top: 115px;
    }

    .cv-feedback-form > label:nth-of-type(3) {
        top: 192px;
    }

    .cv-feedback-form > label:nth-of-type(4) {
        top: 269px;
    }

    .cv-feedback-form > label:nth-of-type(5) {
        top: 346px;
    }

    .cv-feedback-form > label:nth-of-type(6) {
        top: 423px;
    }


    /*
     * Label text.
     */
    .cv-feedback-form
    > label:nth-of-type(-n+6)
    > span:first-child {
        position: relative;
        z-index: 2;

        display: block;

        margin: 0;

        font-size: 17px;
        line-height: 20px;
        font-weight: 400;

        letter-spacing: -.02em;

        color: #fff;

        pointer-events: none;
    }


    /*
     * Inputs / selects.
     *
     * Border position gives Figma lines:
     * 62, 140, 217, 293, 369, 446.
     */
    .cv-feedback-form
    > label:nth-of-type(-n+6)
    input:not([type="checkbox"]),
    .cv-feedback-form
    > label:nth-of-type(-n+6)
    select {
        position: absolute;

        left: 0;
        top: 0;

        width: 510px;
        height: 25px;

        padding: 0 24px 0 0;

        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .9);

        border-radius: 0;

        outline: 0;

        background: transparent;

        color: #fff;

        font-size: 17px;
        line-height: 20px;

        transition: border-color .25s ease,
        box-shadow .25s ease;
    }


    /*
     * The visible text in select is provided by
     * the label exactly as in Figma.
     */
    .cv-feedback-form
    > label:nth-of-type(5)
    select,
    .cv-feedback-form
    > label:nth-of-type(6)
    select {
        appearance: none;
        -webkit-appearance: none;

        color: transparent;

        cursor: pointer;
    }


    .cv-feedback-form select option {
        color: #111;
        background: #fff;
    }


    /* select arrows */
    .cv-feedback-form__select::after {
        content: '';

        position: absolute;
        z-index: 3;

        right: 0;
        top: 4px;

        width: 10px;
        height: 7px;

        background: #d9d9d9;

        clip-path: polygon(
                0 0,
                100% 0,
                50% 100%
        );

        pointer-events: none;

        transition: transform .2s ease;
    }


    .cv-feedback-form__select:focus-within::after {
        transform: rotate(180deg);
    }


    /* -----------------------------------------------------
       MESSAGE
       ----------------------------------------------------- */
    .cv-feedback-form__message {
        position: absolute;

        left: 38px;
        top: 485px;

        width: 510px;
        height: 81px;

        margin: 0;

        display: block;
    }


    .cv-feedback-form__message
    > span:first-child {
        display: block;

        margin: 0;

        width: 90px;
        height: 20px;

        font-size: 17px;
        line-height: 20px;
        font-weight: 400;

        letter-spacing: -.02em;

        color: #fff;
    }


    .cv-feedback-form__message textarea {
        position: absolute;

        left: 0;
        top: 23px;

        width: 510px;
        height: 58px;

        margin: 0;
        padding: 7px 9px;

        resize: none;

        border: 1px solid rgba(255, 255, 255, .9);

        border-radius: 0;

        outline: 0;

        background: rgba(0, 0, 0, .04);

        color: #fff;

        transition: border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
    }


    /* -----------------------------------------------------
       CONSENT
       ----------------------------------------------------- */
    .cv-feedback-form__consent {
        position: absolute;

        left: 46px;
        top: 591px;

        width: 492px;
        height: 28px;

        margin: 0;

        display: grid !important;

        grid-template-columns:
            17px
            468px;

        column-gap: 7px;

        align-items: center;

        font-size: 11px;
        line-height: 11px;
        font-weight: 300;

        color: #fff;

        text-shadow: 0 4px 4px rgba(0, 0, 0, .25);

        cursor: pointer;
    }


    .cv-feedback-form__consent input {
        position: absolute;

        opacity: 0;

        pointer-events: none;
    }


    .cv-feedback-form__consent i {
        position: relative;

        width: 17px;
        height: 17px;

        border: 1px solid rgba(255, 255, 255, .9);

        border-radius: 2px;

        background: transparent;

        transition: background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
    }


    .cv-feedback-form__consent
    input:checked + i {
        background: rgba(255, 255, 255, .16);

        box-shadow: inset 0 0 7px rgba(255, 255, 255, .15);
    }


    .cv-feedback-form__consent
    input:checked + i::after {
        content: '';

        position: absolute;

        left: 3px;
        top: 3px;

        width: 8px;
        height: 5px;

        border-left: 2px solid #fff;

        border-bottom: 2px solid #fff;

        transform: rotate(-45deg);
    }


    .cv-feedback-form__consent a {
        text-decoration: underline;
        text-underline-offset: 2px;
    }


    /* -----------------------------------------------------
       SUBMIT
       ----------------------------------------------------- */
    .cv-feedback-form
    button[type="submit"] {
        position: absolute;

        left: 176px;
        top: 643px;

        width: 234px;
        height: 42px;

        margin: 0;
        padding: 0;

        overflow: hidden;

        border: 1px solid rgba(255, 255, 255, .72);

        border-radius: 20px;

        background: linear-gradient(
                180deg,
                rgba(255, 255, 255, .12) 0%,
                rgba(255, 255, 255, .035) 100%
        );

        color: #fff;

        font-size: 12px;
        line-height: 12px;
        font-weight: 500;

        letter-spacing: -.03em;

        cursor: pointer;

        box-shadow: inset 0 0 18px rgba(255, 255, 255, .06);

        transition: transform .22s ease,
        background .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
    }


    .cv-feedback-form
    button[type="submit"]::before {
        content: '';

        position: absolute;

        top: -60%;
        left: -35%;

        width: 40%;
        height: 220%;

        background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, .18),
                transparent
        );

        transform: rotate(18deg) translateX(-180%);

        transition: transform .55s ease;

        pointer-events: none;
    }


    .cv-feedback-form
    button[type="submit"]:hover {
        transform: translateY(-2px);

        border-color: #fff;

        background: rgba(255, 255, 255, .12);

        box-shadow: 0 8px 20px rgba(0, 0, 0, .25),
        inset 0 0 22px rgba(255, 255, 255, .09);
    }


    .cv-feedback-form
    button[type="submit"]:hover::before {
        transform: rotate(18deg) translateX(430%);
    }


    .cv-feedback-form
    button[type="submit"]:active {
        transform: translateY(0);
    }


    .cv-feedback-form
    button[type="submit"]:disabled {
        opacity: .55;
        cursor: default;

        transform: none;
    }


    /* status message */
    .cv-feedback-form__status {
        position: absolute;

        left: 38px;
        top: 688px;

        width: 510px;
        min-height: 18px;

        margin: 0;

        text-align: center;

        font-size: 11px;
        line-height: 14px;
    }
}


/* ---------------------------------------------------------
   FIELD INTERACTION
   --------------------------------------------------------- */

.cv-feedback-form input:not([type="checkbox"]):focus,
.cv-feedback-form select:focus,
.cv-feedback-form textarea:focus {
    border-color: rgba(164, 203, 239, .96);

    box-shadow: 0 4px 8px -7px rgba(117, 144, 169, .95);
}


/* ---------------------------------------------------------
   SECTION ENTRANCE
   --------------------------------------------------------- */

.cv-feedback.is-visible .cv-feedback__aig {
    opacity: 1;
    transform: scale(1);
}


.cv-feedback.is-visible
.cv-feedback__copy h2,
.cv-feedback.is-visible
.cv-feedback__copy p,
.cv-feedback.is-visible
.cv-feedback-form {
    opacity: 1;

    transform: translate3d(0, 0, 0) scale(1);
}

/* =========================================================
   FOOTER
   ========================================================= */

.cv-footer {
    position: relative;

    width: 100%;
    height: 303px;

    overflow: hidden;

    background: #f9f9f9;
    color: #000;
}


/*
 * Для desktop повторяем координаты Figma
 * относительно artboard 1440px.
 */
.cv-footer__top,
.cv-footer__bottom {
    position: absolute;

    left: 50%;
    top: 0;

    width: 1440px;
    max-width: none;
    height: 303px;

    margin: 0;
    padding: 0;

    transform: translateX(-50%);

    /*
     * Оба слоя занимают весь footer и иначе
     * перекрывают интерактивные элементы друг друга.
     */
    pointer-events: none;
}

.cv-footer__logo,
.cv-footer__nav,
.cv-footer__legal,
.cv-footer__social,
.cv-footer__studio {
    pointer-events: auto;
}

.cv-footer a {
    cursor: pointer;
}

/* ---------------------------------------------------------
   LOGO
   Figma: x 194 / y 63 / 182 × 82
   --------------------------------------------------------- */

.cv-footer__logo {
    position: absolute;

    left: 194px;
    top: 63px;

    width: 182px;
    height: 82px;

    display: block;
}


.cv-footer__logo img {
    width: 182px;
    height: 82px;

    object-fit: contain;
    object-position: left center;

    /*
     * Исходный aig-logo.svg цветной.
     * В макете footer-версия полностью чёрная.
     */
    filter: brightness(0) saturate(100%);
}


/* ---------------------------------------------------------
   MAIN NAV
   Figma: x 452 / y 101 / width 797
   --------------------------------------------------------- */

.cv-footer__nav {
    position: absolute;

    left: 452px;
    top: 101px;

    width: 797px;
    height: 24px;

    margin: 0;

    display: flex;
    align-items: center;

    gap: 0;

    font-size: 16px;
    line-height: 24px;
    font-weight: 400;

    color: #000;
}


/*
 * Раскладываем пункты по всей ширине 797px,
 * как в Figma.
 */
.cv-footer__nav {
    justify-content: space-between;
}


.cv-footer__nav a {
    position: relative;

    display: inline-block;

    padding-bottom: 4px;

    white-space: nowrap;

    color: #000 !important;

    opacity: 1;

    transition: opacity .2s ease;
}


/*
 * Тот же hover, что в основном меню:
 * линия раскрывается слева направо.
 */
.cv-footer__nav a::after {
    content: '';

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background: rgba(0, 0, 0, .72);

    transform: scaleX(0);
    transform-origin: left center;

    transition: transform .22s ease;
}


.cv-footer__nav a:hover::after {
    transform: scaleX(1);
}


/* ---------------------------------------------------------
   LEGAL
   Figma: x 194 / y 235
   --------------------------------------------------------- */

.cv-footer__legal {
    position: absolute;

    left: 194px;
    top: 235px;

    width: 523px;
    height: 11px;

    margin: 0;

    display: flex;
    align-items: center;

    gap: 25px;

    flex-wrap: nowrap;

    font-size: 11px;
    line-height: 11px;
    font-weight: 400;

    white-space: nowrap;

    color: #000;
}


.cv-footer__legal span,
.cv-footer__legal a {
    width: auto;

    color: #000 !important;
}


/* нижние текстовые ссылки — тот же underline hover */
.cv-footer__legal a,
.cv-footer__studio {
    position: relative;

    padding-bottom: 3px;
}


.cv-footer__legal a::after,
.cv-footer__studio::after {
    content: '';

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background: rgba(0, 0, 0, .72);

    transform: scaleX(0);
    transform-origin: left center;

    transition: transform .22s ease;
}


.cv-footer__legal a:hover::after,
.cv-footer__studio:hover::after {
    transform: scaleX(1);
}


/* ---------------------------------------------------------
   SOCIAL
   Figma:
   first  x 935 / y 229 / ~23 × 23
   second x 974 / y 229 / ~23 × 23
   --------------------------------------------------------- */

.cv-footer__social {
    position: absolute;

    left: 935px;
    top: 229px;

    width: 63px;
    height: 23px;

    margin: 0;

    display: flex;
    align-items: center;

    gap: 16px;
}


.cv-footer__social a {
    position: relative;

    width: 23px;
    height: 23px;

    display: block;

    flex: 0 0 23px;

    transition: transform .2s ease,
    opacity .2s ease;
}


.cv-footer__social img {
    width: 23px;
    height: 23px;

    display: block;

    object-fit: contain;

    /*
     * Иконки в макете чёрные.
     */
    filter: brightness(0) saturate(100%);
}


.cv-footer__social a:hover {
    transform: translateY(-2px);
    opacity: .72;
}


/* ---------------------------------------------------------
   LOGIC
   Figma: x 1136 / y 235 / 113 × 11
   --------------------------------------------------------- */

.cv-footer__studio {
    position: absolute;

    left: 1136px;
    top: 235px;

    width: 113px;
    height: 14px;

    margin: 0;

    display: block;

    font-size: 11px;
    line-height: 11px;
    font-weight: 400;

    white-space: nowrap;

    color: #000 !important;
}


/* ---------------------------------------------------------
   DESKTOP SAFETY

   До перехода к отдельному mobile-макету просто сохраняем
   1440px artboard по центру страницы.
   --------------------------------------------------------- */

@media (min-width: 2400px) {
    .cv-comparison__glass {
        height: 140%;
    }
}

@media (min-width: 1800px) {
    .cv-comparison__glass {
        height: 120%;
        min-width: 100%;
    }
}


@media (max-width: 1439px) and (min-width: 861px) {

    .cv-footer__top,
    .cv-footer__bottom {
        transform: translateX(-50%) scale(calc(100vw / 1440));

        transform-origin: center top;
    }
}

@media (max-width: 1180px) {
    .cv-header__nav {
        gap: 18px;
        font-size: 13px;
    }

    .cv-tech__cards {
        gap: 54px;
    }

    .cv-benefits__grid {
        gap: 48px;
    }

    .cv-products__grid {
        gap: 50px 74px;
    }

    .cv-resources__grid, .cv-publications__grid {
        gap: 36px;
        margin-left: 30px;
        margin-right: 30px;
    }
}

@media (max-width: 860px) {
    .cv-shell {
        width: calc(100% - 40px);
    }

    .cv-title {
        font-size: 18px;
        line-height: 1;
    }

    /* mobile header */
    .cv-header {
        transition: background-color 0.25s ease,
        backdrop-filter 0.25s ease;
    }

    .cv-body.cv-menu-open .cv-header {
        background: rgba(2, 5, 12, 0.94);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .cv-mobile-menu {
        background: transparent;
    }

    .cv-body.cv-menu-open .cv-header {
        min-height: 100 dvh;
    }

    .cv-mobile-menu {
        flex: 1;
    }

    .cv-header {
        height: 72px;

        background: transparent;

        -webkit-backdrop-filter: none;
        backdrop-filter: none;

        border-bottom: 0;

        box-shadow: none;
    }

    .cv-header.is-scrolled {
        background: rgba(0, 2, 9, .88);

        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);

        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }


    /*
     * Figma:
     * слева только знак A,
     * без подписи AIG.
     */
    .cv-header__inner {
        width: calc(100% - 40px);

        height: 72px;

        margin: 0 auto;
    }


    .cv-header__logo {
        width: 44px;
        height: 44px;

        flex: 0 0 44px;

        overflow: hidden;
    }


    .cv-header__logo img {
        width: auto;
        max-width: none;
        height: 44px;

        display: block;

        filter: grayscale(1) brightness(0) invert(1);
    }


    /* desktop navigation off */
    .cv-header__nav {
        display: none;
    }


    /*
     * Вместо hamburger в макете написано "Меню".
     * HTML менять не требуется.
     */
    .cv-header__burger {
        position: relative;

        width: auto;
        height: 34px;

        padding: 0;

        display: flex;
        align-items: center;

        border: 0;

        background: none;

        color: #fff;

        font-size: 22px;
        line-height: 1;
        font-weight: 400;

        cursor: pointer;
    }


    .cv-header__burger::before {
        content: 'Меню';
    }


    .cv-header__burger[aria-expanded="true"]::before {
        content: 'Закрыть';
    }


    .cv-header__burger span {
        display: none;
    }


    /* раскрытое меню */
    .cv-mobile-menu {
        top: 72px;
        bottom: 0;

        padding: 36px 20px;

        z-index: 10;

        background: rgba(0, 2, 9, .98);

        font-size: 20px;
        line-height: 1.2;
    }

    .cv-hero {
        height: 384px;
    }

    .cv-hero:after {
        height: 26%;
        opacity: .25;
    }

    .cv-hero__glass {
        width: 504px;
        height: 434px;
        top: -154px;
        right: -132px;
        border-width: 2px;
    }

    .cv-hero__flare {
        width: 120px;
        height: 120px;
        left: 37%;
        bottom: 10%;
    }

    .cv-hero__wordmark {
        left: 20px;
        top: 300px;
        transform: none;
        width: 321px;
        max-width: calc(100vw - 60px);
    }

    .cv-hero__tagline {
        left: 20px;
        top: 344px;
        transform: none;
        font-size: 14px;
        white-space: normal;
        width: 325px;
        line-height: 1.15;
    }

    .cv-hero__aig {
        display: none;
    }

    /* mobile video player */
    .cv-intro-video,
    .cv-production {
        width: 100%;
        height: auto;

        margin: 0;
        padding: 0;

        overflow: visible;

        background: #07090d;
    }


    .cv-production {
        position: relative;

        width: 100%;
        height: 203px;
        min-height: 203px;

        margin: 0;
        padding: 0;

        overflow: hidden;

        background: #000;
    }

    .cv-intro-video .cv-video,
    .cv-production .cv-video {
        width: 100%;
        height: auto;

        aspect-ratio: 16 / 9;

        overflow: hidden;

        background: #000;
    }

    .cv-video__media {
        width: 100%;
        height: 100%;

        object-fit: contain !important;
        object-position: center !important;
    }

    .cv-play {
        width: 62px;
        height: 62px;
    }

    .cv-play span {
        border-top-width: 9px;
        border-bottom-width: 9px;
        border-left-width: 14px;
    }

    .cv-video.is-playing .cv-play span {
        width: 14px;
        height: 18px;
    }

    .cv-video.is-playing .cv-play span::before,
    .cv-video.is-playing .cv-play span::after {
        width: 4px;
        height: 18px;
    }

    .cv-video__controls {
        left: 10px;
        right: 10px;
        bottom: 8px;

        height: 34px;

        gap: 8px;
    }

    .cv-video__control {
        width: 32px;
        height: 32px;

        flex-basis: 32px;

        padding: 7px;
    }

    .cv-video--production::before {
        height: 48px;
    }

    .cv-production__content {
        height: 48px;

        padding: 17px 12px 0;
    }

    .cv-production__content .cv-title {
        font-size: 15px;
        line-height: 16px;
    }

    /* production title */
    .cv-video--production::before {
        height: 48px;
    }


    .cv-production__content {
        height: 48px;

        padding: 17px 12px 0;
    }


    .cv-production__content .cv-title {
        font-size: 15px;
        line-height: 16px;
    }

    /* =========================================================
      MOBILE PRODUCTS
      normal document flow
      ========================================================= */
    .cv-products {
        position: relative;

        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 42px 20px 24px;

        overflow: hidden;

        background: #7590a9;
        border-radius: 5px;

        background-image: url('../img/products-bg.webp');
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: auto 100%;
    }


    /* Декор остаётся absolute — ему это как раз подходит */
    .cv-products::before {
        display: none;
        content: '';

        position: absolute;
        z-index: 0;

        inset: 0;

        background-image: url('../img/products-bg.webp');
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: auto 100%;

        pointer-events: none;
    }


    .cv-products__glow {
        display: none;
    }


    /* Контент обычным потоком */
    .cv-products__inner {
        position: relative;
        z-index: 2;

        width: 100%;
        height: auto;

        margin: 0;
        padding: 0;
    }


    /* title */
    .cv-products .cv-title {
        position: relative;

        left: auto;
        top: auto;

        width: 220px;
        max-width: 100%;

        margin: 0;

        font-size: 18px;
        line-height: 18px;
        font-weight: 700;

        letter-spacing: .03em;
        text-transform: uppercase;
    }


    /* lead */
    .cv-products__lead {
        position: relative;

        left: auto;
        top: auto;

        width: 100%;
        max-width: 353px;

        margin: 10px 0 0 9px;

        font-size: 14px;
        line-height: 14px;
        font-weight: 700;

        letter-spacing: .03em;

        color: #fff;
    }


    /* cards */
    .cv-products__grid {
        position: relative;

        left: auto;
        right: auto;
        top: auto;

        width: 100%;
        height: auto;

        margin: 22px 0 0;
        padding: 0;

        display: flex;
        flex-direction: column;

        gap: 18px;
    }


    /* Полностью убираем desktop absolute positioning */
    .cv-product-card,
    .cv-product-card:nth-child(n) {
        position: relative;

        left: auto;
        top: auto;

        width: 100%;
        height: auto;
        min-height: 100px;

        margin: 0;
        padding: 18px 9px;

        display: flex;
        flex-direction: column;
        justify-content: center;

        border: 0;
        border-radius: 5px;

        background: rgba(255, 255, 255, .23);

        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);

        box-shadow: 0 2px 0 rgba(0, 0, 0, .25);

        transform: none !important;
    }


    /* длинные первые карточки */
    .cv-product-card:nth-child(1),
    .cv-product-card:nth-child(2) {
        min-height: 160px;
    }


    /* остальные */
    .cv-product-card:nth-child(3),
    .cv-product-card:nth-child(4),
    .cv-product-card:nth-child(5) {
        min-height: 100px;
    }


    .cv-product-card h3 {
        width: 100%;

        margin: 0 0 8px;

        font-size: 18px;
        line-height: 18px;
        font-weight: 700;

        letter-spacing: .03em;
        text-transform: uppercase;
    }


    .cv-product-card p {
        width: 100%;

        margin: 0;

        font-size: 14px;
        line-height: 14px;
        font-weight: 400;

        letter-spacing: .03em;
    }

    .cv-comparison {
        position: relative;

        width: 100%;
        height: 374px;

        margin: 0;

        overflow: hidden;

        background: #f4f5f7;
        color: #0d0d0d;

        border-radius: 0 0 5px 5px;
    }


    .cv-comparison__content {
        position: relative;
        z-index: 2;

        width: calc(100% - 40px);

        margin: 0 auto;
        padding-top: 24px;
    }


    .cv-comparison__content .cv-title {
        width: 100%;
        max-width: 330px;

        font-size: 24px;
        line-height: .94;
        font-weight: 700;
    }


    .cv-comparison__lead {
        margin: 15px 0 0 8px;

        font-size: 14px;
        line-height: 1;

        white-space: nowrap;
    }


    .cv-comparison__labels {
        position: absolute;
        z-index: 3;

        left: 20px;
        right: 20px;
        top: 224px;

        display: grid;
        grid-template-columns: auto 1fr auto;

        align-items: center;

        gap: 7px;
        padding: 0;

        font-size: 10px;
        line-height: 1;
    }


    .cv-comparison__glass {
        position: absolute;
        z-index: 1;

        /*
         * Никакого центрирования через left: 50%.
         * Изображение просто занимает ширину секции.
         */
        left: 0;
        right: auto;
        bottom: -150px;

        width: 100%;
        height: 140%;

        max-width: none;

        display: block;

        object-fit: initial;
        object-position: initial;

        /*
         * На mobile parallax в JS всё равно = 0.
         */
        transform: translate3d(
                0,
                var(--cv-comparison-y),
                0
        );

        transform-origin: center bottom;
    }

    /* =========================================================
   MOBILE TECH
   Figma artboard: 403 × 540
   ========================================================= */
    .cv-tech {
        position: relative;

        width: 100%;
        height: auto;
        min-height: 540px;

        padding: 42px 20px 29px;

        overflow: hidden;

        background: #000;
    }

    /*
     * В Figma фон занимает весь artboard 403 × 540
     * и зеркально отражён по горизонтали.
     */
    .cv-tech__background {
        position: absolute;
        z-index: 0;

        left: 50%;
        top: 0;

        width: 100%;
        height: 540px;

        max-width: none;

        background-image: url('../img/tech-bg.webp');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 540px;
        transform-origin: center center;

        pointer-events: none;
    }


    /*
     * В mobile больше не используем desktop shell
     * как обычный поток.
     */
    .cv-tech__inner {
        position: relative;
        z-index: 2;

        width: 100%;
        height: auto;

        margin: 0;
        padding: 0;
    }

    .cv-shell.cv-tech__inner {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }


    /* [ технические характеристики ] */
    .cv-tech > .cv-tech__inner > .cv-title {
        position: static;

        width: 218px;
        max-width: 100%;

        margin: 0;

        font-size: 18px;
        line-height: 18px;
        font-weight: 700;

        letter-spacing: .03em;
        text-transform: uppercase;
    }


    /* =========================================================
       CARDS
       ========================================================= */
    .cv-tech__cards {
        position: static;

        width: 100%;
        height: auto;

        margin: 23px 0 0;

        display: flex;
        flex-direction: column;

        gap: 9.5px;
    }


    /*
     * Figma: 362 × 85
     */
    .cv-tech-card {
        position: relative;

        width: 100%;
        height: 85px;
        min-height: 85px;

        padding: 0;

        display: block;

        border: 1px solid rgba(255, 255, 255, .72);
        border-radius: 5px;

        background: linear-gradient(
                180.15deg,
                rgba(255, 255, 255, .10) 47.65%,
                rgba(0, 0, 0, .10) 89.72%
        );

        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);

        box-shadow: 0 10px 8px rgba(191, 191, 191, .25),
        inset 0 0 30px rgba(255, 255, 255, .25);

        overflow: hidden;
    }


    /* число */
    .cv-tech-card__value {
        position: absolute;

        left: 7px;
        top: 12px;

        width: 85px;
        height: 60px;

        display: flex;
        align-items: center;

        margin: 0;

        font-weight: 700;
        font-size: 60px;
        line-height: 60px;

        letter-spacing: -.04em;

        color: #fff;
    }

    /* 8 — оптически опускаем чуть ниже */
    .cv-tech-card:nth-child(2) .cv-tech-card__value {
        top: 15px;
    }


    /* 100 — меньше кегль и почти без отрицательного кернинга */
    .cv-tech-card:nth-child(3) .cv-tech-card__value {
        top: 15px;

        width: 88px;

        font-size: 46px;
        line-height: 46px;

        letter-spacing: -.01em;
    }


    /* LT / LR / CRI */
    .cv-tech-card__label {
        position: absolute;

        left: 95px;
        top: 26px;

        width: 78px;
        height: 36px;

        margin: 0;

        display: block;

        font-size: 10px;
        line-height: 12px;
        font-weight: 400;

        letter-spacing: -.02em;

        color: #fff;
    }


    /*
     * В текущем HTML label разбит на span + strong.
     * На mobile показываем их как одну компактную подпись.
     */
    .cv-tech-card__label span,
    .cv-tech-card__label strong {
        display: inline;

        font-size: inherit;
        line-height: inherit;
    }

    .cv-tech-card__label strong {
        font-weight: 700;
    }


    /* вертикальная линия */
    .cv-tech-card__divider {
        position: absolute;

        left: 181px;
        top: 8px;

        width: 1px;
        height: 68px;

        margin: 0;

        display: block;

        background: rgba(255, 255, 255, .9);
    }


    /* описание справа */
    .cv-tech-card p {
        position: absolute;

        left: 190px;
        right: 10px;
        top: 26px;

        width: auto;

        margin: 0;

        font-size: 12px;
        line-height: 12px;
        font-weight: 400;

        color: #fff;
    }


    /* =========================================================
       STATEMENT
       ========================================================= */
    .cv-tech__statement {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: none;

        margin: 35px 0 0;

        background: none;
    }

    .cv-tech__statement::before {
        content: '';

        position: absolute;
        z-index: -1;

        left: -10px;
        top: -8px;

        width: calc(100% + 20px);
        height: calc(100% + 16px);

        background: linear-gradient(
                90deg,
                rgba(0, 0, 0, .72) 0%,
                rgba(0, 0, 0, .58) 68%,
                rgba(0, 0, 0, .18) 88%,
                rgba(0, 0, 0, 0) 100%
        );

        border-radius: 10px;

        filter: blur(2px);

        pointer-events: none;
    }


    .cv-tech__statement .cv-title {
        width: 283px;
        max-width: none;

        margin: 0;

        font-size: 18px;
        line-height: 18px;
        font-weight: 700;

        letter-spacing: .03em;
    }


    .cv-tech__statement p {
        width: 281px;
        max-width: none;

        margin: 9px 0 0 9px;

        font-size: 14px;
        line-height: 14px;
        font-weight: 400;

        letter-spacing: .03em;

        color: #fff;
    }

    /* =========================================================
   MOBILE BENEFITS
   Figma: 400 × 821
   ========================================================= */
    .cv-benefits {
        position: relative;

        width: 100%;
        height: auto;
        min-height: 0;

        padding: 53px 20px 44px;

        overflow: hidden;

        background: #fff;
        color: #000;

        border-radius: 0 0 5px 5px;
    }


    /* ---------------------------------------------------------
       BACKGROUND
       --------------------------------------------------------- */
    .cv-benefits__decor {
        position: absolute;
        z-index: 0;

        inset: 0;

        overflow: hidden;

        pointer-events: none;
    }


    .cv-benefits__bg {
        position: absolute;

        max-width: none;

        background-repeat: no-repeat;
        background-size: 100% 100%;

        pointer-events: none;
    }


    /*
     * Большой верхний слой.
     *
     * Figma:
     * 1457.97 × 635
     * x = -125
     * y = -53
     * rotate(-180deg)
     */
    .cv-benefits__bg--top {
        position: absolute;

        left: 50%;
        top: -55px;

        width: 720px;
        height: 315px;

        max-width: none;

        background-image: url('../img/benefits-bg-top.webp');

        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% 100%;

        transform: translateX(-50%);

        pointer-events: none;
    }


    /*
     * Второй декоративный слой.
     *
     * Оставляем отдельно — он отвечает за нижние
     * диагональные грани.
     */
    .cv-benefits__bg--bottom {
        position: absolute;

        left: 50%;
        bottom: -45px;
        top: auto;

        width: 720px;
        height: 250px;

        max-width: none;

        background-image: url('../img/benefits-bg-bottom.webp');

        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100% 100%;

        transform: translateX(-50%);

        pointer-events: none;
    }


    /* ---------------------------------------------------------
       CONTENT
       --------------------------------------------------------- */
    .cv-benefits__inner {
        position: relative;
        z-index: 2;

        width: 100%;
        height: auto;

        margin: 0;
        padding: 0;
    }


    .cv-benefits__inner > .cv-title {
        position: static;

        width: 312px;
        max-width: 100%;

        margin: 0;

        font-size: 18px;
        line-height: 18px;
        font-weight: 700;

        letter-spacing: .03em;

        text-transform: uppercase;
    }

    /* ---------------------------------------------------------
       GRID
       --------------------------------------------------------- */
    .cv-benefits__grid {
        position: static;

        width: 100%;
        height: auto;

        margin: 13px 0 0;

        display: flex;
        flex-direction: column;

        gap: 21px;
    }


    /*
     * 362 × 98 на 402px artboard.
     *
     * На более узком телефоне ширина автоматически
     * уменьшается на те же внешние отступы.
     */
    .cv-benefit-card {
        position: relative;

        width: 100%;
        height: 98px;
        min-height: 98px;

        margin: 0;
        padding: 0 9px;

        display: flex;
        flex-direction: column;
        justify-content: center;

        border: 0;
        border-radius: 5px;

        background: rgba(245, 245, 245, .25);

        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);

        box-shadow: 0 3px 3px rgba(0, 0, 0, .25);

        color: #000;
    }

    .cv-benefit-card:nth-child(6) p {
        font-size: 13px;
        line-height: 13px;
    }

    .cv-benefit-card h3 {
        width: 100%;
        min-height: 0;

        margin: 0 0 4px;

        font-size: 14px;
        line-height: 14px;
        font-weight: 700;

        letter-spacing: .03em;

        text-transform: uppercase;
    }

    .cv-benefit-card:nth-child(6) h3 {
        font-size: 13px;
        line-height: 13px;

        white-space: nowrap;
    }


    .cv-benefit-card p {
        width: 100%;

        margin: 0;

        font-size: 14px;
        line-height: 14px;
        font-weight: 400;

        letter-spacing: .01em;
    }


    /* =========================================================
   MOBILE FORMATS
   Figma artboard: ~400 × 478
   ========================================================= */
    .cv-formats {
        position: relative;

        width: 100%;
        height: 565px;
        min-height: 565px;

        padding: 0;

        overflow: hidden;

        background: #000;
    }


    .cv-formats > .cv-shell {
        position: relative;

        width: min(400px, 100%);
        height: 565px;

        margin: 0 auto;
        padding: 0;
    }


    /* Заголовок */
    .cv-formats .cv-title {
        position: absolute;

        left: 16px;
        top: 48px;

        width: 321px;
        max-width: none;

        margin: 0;

        font-size: 18px;
        line-height: 18px;
        font-weight: 700;

        letter-spacing: .03em;
        text-transform: uppercase;
    }


    /* Карточки начинаются через 45px после заголовка */
    .cv-formats__grid {
        position: absolute;

        left: 29px;
        right: 18px;
        top: 93px;

        width: auto;
        height: 433px;

        margin: 0;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        grid-template-rows:
            135px
            135px
            139px;

        column-gap: 15px;
        row-gap: 12px;
    }


    .cv-format-card,
    .cv-format-card:nth-child(n),
    .cv-format-card--normal,
    .cv-format-card--wide {
        position: relative;

        left: auto;
        top: auto;

        width: auto;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 0;

        grid-column: auto;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        border: 0;
        border-radius: 5px;

        background: linear-gradient(
                180.15deg,
                rgba(255, 255, 255, .10) 47.65%,
                rgba(0, 0, 0, .10) 89.72%
        );

        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .52);

        text-align: center;

        opacity: 1;
        filter: none;
    }


    .cv-format-card:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .cv-format-card:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .cv-format-card:nth-child(3) {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .cv-format-card:nth-child(4) {
        grid-column: 1;
        grid-row: 3;
    }

    .cv-format-card:nth-child(5) {
        grid-column: 2;
        grid-row: 3;
    }


    .cv-format-card h3 {
        margin: 0;

        font-size: 24px;
        line-height: 24px;
        font-weight: 700;
    }


    .cv-format-card p {
        margin: 6px 0 0;

        font-size: 16px;
        line-height: 16px;
        font-weight: 300;

        letter-spacing: -.02em;
    }


    /* =========================================
   MOBILE: APPLICATIONS
   ========================================= */
    /*
     * Desktop applications полностью скрываем.
     * На mobile используется отдельный slider
     * из двух готовых композиций Figma.
     */
    .cv-applications {
        display: none;
    }


    .cv-applications-mobile {
        display: block;

        position: relative;

        width: 100%;

        margin: 0;
        padding: 42px 0 26px;

        overflow: hidden;

        background: #000209;
    }


    /* title */
    .cv-applications-mobile__head {
        width: calc(100% - 40px);

        margin: 0 auto 28px;
    }

    .cv-applications-mobile .cv-title {
        width: max-content;
        max-width: 100%;

        margin: 0;

        white-space: nowrap;

        font-size: 18px;
        line-height: 18px;
        font-weight: 700;

        letter-spacing: .03em;

        text-transform: uppercase;

        color: #fff;
    }


    /* swiper */
    .cv-applications-mobile-swiper {
        position: relative;

        width: 100%;

        margin: 0;
        padding: 0 0 38px;

        overflow: hidden;
    }

    .cv-applications-mobile-swiper .swiper-wrapper {
        align-items: flex-start;
    }

    .cv-applications-mobile-swiper .swiper-slide {
        width: 100% !important;
        height: auto;

        display: flex;
        justify-content: center;
        align-items: flex-start;

        background: #000209;
    }

    .cv-applications-mobile__stage {
        position: relative;

        width: 402px;
        max-width: 100%;
        height: 700px;

        margin: 0 auto;

        overflow: hidden;

        background: #000209;
    }

    .cv-applications-mobile__image {
        position: absolute;

        left: 50%;
        bottom: 0;

        width: 402px;
        height: auto;
        max-width: none;

        display: block;

        transform: translateX(-50%);

        user-select: none;
        -webkit-user-drag: none;

        pointer-events: none;
    }

    .cv-applications-mobile-card {
        position: absolute;
        z-index: 2;

        isolation: isolate;

        padding: 15px 12px;

        border: 1px solid rgba(255, 255, 255, .55);
        border-radius: 5px;

        background: rgba(255, 255, 255, .23);

        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);

        box-shadow: 0 10px 8px rgba(191, 191, 191, .18),
        inset 0 0 30px rgba(255, 255, 255, .20);

        color: #fff;
    }

    .cv-applications-mobile-card h3 {
        margin: 0 0 8px;

        font-size: 16px;
        line-height: 16px;
        font-weight: 700;

        letter-spacing: .03em;
        text-transform: uppercase;
    }

    .cv-applications-mobile-card ul {
        margin: 0;
        padding: 0;

        list-style: none;

        font-size: 12px;
        line-height: 14px;
    }

    .cv-applications-mobile-card li::before {
        content: '• ';
    }

    /* ---------------------------------------------------------
   APPLICATIONS MOBILE — CONNECTORS
   --------------------------------------------------------- */
    .cv-applications-mobile-card__connector {
        position: absolute;
        z-index: -1;

        top: 100%;

        width: 1px;

        background: rgba(255, 255, 255, .95);

        pointer-events: none;
    }

    /* точка на конце */
    .cv-applications-mobile-card__connector::after {
        content: '';

        position: absolute;

        width: 6px;
        height: 6px;

        left: 50%;
        bottom: -3px;

        transform: translateX(-50%);

        border-radius: 50%;

        background: #fff;
    }


    /* =========================================================
       SLIDE 1
       ========================================================= */
    /* Бизнес- и торговые центры:
       вниз, затем влево к башне */
    .cv-applications-mobile-card--business
    .cv-applications-mobile-card__connector {
        left: 88px;

        height: 252px;
    }

    .cv-applications-mobile-card--business
    .cv-applications-mobile-card__connector::before {
        content: '';

        position: absolute;

        right: 0;
        bottom: 0;

        width: 35px;
        height: 1px;

        background: #fff;
    }

    /* точка переносится на левый конец горизонтальной линии */
    .cv-applications-mobile-card--business
    .cv-applications-mobile-card__connector::after {
        left: -34px;
        bottom: -2.5px;

        transform: translateX(-50%);
    }


    /* Жилые комплексы */
    .cv-applications-mobile-card--residential
    .cv-applications-mobile-card__connector {
        left: 50%;

        height: 160px;
    }


    /* Культурные центры */
    .cv-applications-mobile-card--culture
    .cv-applications-mobile-card__connector {
        left: 50%;

        height: 45px;
    }


    /* =========================================================
       SLIDE 2
       ========================================================= */
    /* Частные дома */
    .cv-applications-mobile-card--private
    .cv-applications-mobile-card__connector {
        left: 42%;

        height: 335px;
    }


    /* Туристические и гостиничные комплексы */
    .cv-applications-mobile-card--tourism
    .cv-applications-mobile-card__connector {
        left: 50%;

        height: 118px;
    }

    .cv-applications-mobile-card--business {
        left: 20px;
        top: 48px;

        width: 170px;
    }

    .cv-applications-mobile-card--residential {
        right: 20px;
        top: 142px;

        width: 155px;
    }

    .cv-applications-mobile-card--culture {
        left: 50%;
        top: 390px;

        width: 145px;

        transform: translateX(-50%);
    }

    .cv-applications-mobile-card--private {
        left: 20px;
        top: 90px;

        width: 180px;
    }

    .cv-applications-mobile-card--tourism {
        right: 20px;
        top: 300px;

        width: 180px;
    }


    /* pagination */
    .cv-applications-mobile__pagination {
        position: absolute !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 10px !important;

        width: 100% !important;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 8px;

        z-index: 5;
    }

    .cv-applications-mobile__pagination
    .swiper-pagination-bullet {
        width: 8px;
        height: 8px;

        margin: 0 !important;

        border: 0;
        border-radius: 50%;

        background: rgba(255, 255, 255, .34);

        opacity: 1;

        transition: background .2s ease,
        transform .2s ease;
    }

    .cv-applications-mobile__pagination
    .swiper-pagination-bullet-active {
        background: #fff;

        transform: scale(1.12);
    }


    /* =========================================================
       MOBILE CASES — FIGMA
       ========================================================= */
    .cv-cases {
        position: relative;

        width: 100%;
        min-height: 0;

        margin: 0;
        padding: 0;

        overflow: hidden;
    }


    /* =========================================================
       ARCHITECTURE
       402 × 541
       ========================================================= */
    .cv-cases--architecture {
        height: 541px;
        min-height: 541px;

        background: linear-gradient(
                0deg,
                #fff -147.3%,
                rgba(43, 40, 40, 0) 81.13%
        ),
        #000209;
    }


    /* header перестаёт быть positioning context,
       чтобы "смотреть все" можно было поставить в низ section */
    .cv-featured-head {
        position: static;

        width: 100%;
        height: auto;

        margin: 0;
        padding: 0;
    }


    .cv-cases--architecture .cv-title {
        position: absolute;
        z-index: 10;

        left: 20px;
        top: 42px;

        width: 272px;

        margin: 0;

        font-size: 18px;
        line-height: 18px;
        font-weight: 700;

        letter-spacing: .03em;
        text-transform: uppercase;

        color: #fff;
    }


    /* slider outer */
    .cv-cases--architecture .cv-featured-carousel {
        position: absolute;

        left: 0;
        top: 88px;

        width: 100%;
        height: 375px;

        overflow: hidden;
    }


    /* ровно 362px */
    .cv-architecture-swiper {
        position: relative;

        left: auto;
        top: auto;

        width: 362px;
        height: 375px;

        margin: 0 auto;

        transform: none;

        overflow: visible;
    }


    .cv-architecture-swiper .swiper-slide {
        width: 362px !important;
        height: 375px !important;
    }


    /* CARD */
    .cv-cases--architecture .cv-featured-card,
    .cv-cases--architecture
    .swiper-slide-active
    .cv-featured-card {
        position: relative;

        width: 362px;
        height: 375px;
        min-height: 0;

        margin: 0;

        overflow: hidden;

        border-radius: 5px;

        background: #bababa;

        transform: none;

        box-shadow: 0 10px 8px rgba(191, 191, 191, .25),
        inset 0 0 30px rgba(255, 255, 255, .25);
    }


    /* photo: Figma 344 × 220 */
    .cv-cases--architecture .cv-featured-card__media,
    .cv-cases--architecture
    .swiper-slide-active
    .cv-featured-card__media {
        position: absolute;

        left: 9px;
        top: 8px;

        width: 344px;
        height: 220px;

        aspect-ratio: auto;

        overflow: hidden;

        border-radius: 10px;
    }


    .cv-cases--architecture .cv-featured-card__media img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    /* project name */
    .cv-cases--architecture .cv-featured-card h3,
    .cv-cases--architecture
    .swiper-slide-active
    .cv-featured-card h3,
    .cv-cases--architecture
    .swiper-slide-prev
    .cv-featured-card h3,
    .cv-cases--architecture
    .swiper-slide-next
    .cv-featured-card h3 {
        position: absolute;

        left: 9px;
        top: 242px;

        width: 344px;

        margin: 0;

        transform: none;

        font-size: 14px;
        line-height: 18px;
        font-weight: 700;

        text-align: center;

        color: #000;
    }


    /* description */
    .cv-cases--architecture .cv-featured-card__description,
    .cv-cases--architecture
    .swiper-slide-active
    .cv-featured-card__description {
        position: absolute;

        left: 9px;
        top: 263px;

        width: 344px;
        height: 85px;

        margin: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        opacity: 1;
        visibility: visible;

        font-size: 14px;
        line-height: 14px;
        font-weight: 400;

        letter-spacing: .03em;
        text-align: center;

        color: #000;
    }


    /*
     * В макете mobile ссылка "Смотреть проект"
     * внутри карточки не отображается.
     */
    .cv-cases--architecture .cv-featured-card__link {
        display: none;
    }


    /* arrows mobile off */
    .cv-cases--architecture .cv-featured-carousel__arrow {
        display: none;
    }


    /* pagination */
    .cv-architecture-pagination {
        position: absolute !important;

        left: 0 !important;
        top: 475px !important;
        bottom: auto !important;

        width: 100% !important;
        height: 15px;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 15px;

        margin: 0;
    }


    .cv-architecture-pagination .swiper-pagination-bullet {
        width: 10px;
        height: 10px;

        margin: 0 !important;

        background: #d9d9d9;

        opacity: 1;
    }


    .cv-architecture-pagination .swiper-pagination-bullet-active {
        width: 15px;
        height: 15px;

        background: #d9d9d9;
    }


    /* SEE ALL */
    .cv-cases--architecture .cv-featured-head__all {
        display: flex;

        position: absolute;
        z-index: 20;

        left: 50%;
        right: auto;
        top: 502px;

        width: 125px;
        height: 19px;

        padding: 0;

        transform: translateX(-50%);

        align-items: center;
        justify-content: center;

        border-radius: 10px;

        background: #fff;

        color: #000 !important;

        font-size: 12px;
        line-height: 12px;
    }


    .cv-cases--architecture .cv-featured-head__all i {
        display: none;
    }


    /* =========================================================
       INTERIOR
       402 × 574
       ========================================================= */
    .cv-cases--interior {
        position: relative;

        height: 574px;
        min-height: 574px;

        margin: 0;
        padding: 0;

        overflow: hidden;

        color: #000;

        background: #e7e7e7 url('../img/interior-projects-bg.png') center / cover no-repeat;
    }


    .cv-featured-head--interior {
        position: static;

        width: 100%;
        height: auto;

        margin: 0;
        padding: 0;
    }


    .cv-featured-head--interior .cv-title {
        position: relative;
        z-index: 10;

        left: 20px;

        margin: 20px 10px;
        width: 100%;

        font-size: 18px;
        line-height: 18px;
        font-weight: 700;

        letter-spacing: .03em;
        text-transform: uppercase;

        color: #000;
    }


    .cv-featured-carousel--interior {
        position: absolute;

        left: 0;
        top: 62px;

        width: 100%;
        height: 419px;

        overflow: hidden;
    }


    .cv-interior-swiper {
        position: relative;

        left: auto;
        top: auto;

        width: 362px;
        height: 419px;

        margin: 0 auto;

        transform: none;

        overflow: visible;
    }


    .cv-interior-swiper .swiper-slide {
        width: 362px !important;
        height: 419px !important;
    }


    .cv-cases--interior .cv-featured-card,
    .cv-cases--interior
    .swiper-slide-active
    .cv-featured-card {
        position: relative;

        width: 362px;
        height: 419px;
        min-height: 0;

        margin: 0;

        border-radius: 5px;

        background: rgba(255, 255, 255, .10);

        transform: none;

        box-shadow: 0 10px 8px rgba(191, 191, 191, .25),
        inset 0 0 30px rgba(255, 255, 255, .25);
    }


    /* 344 × 250 */
    .cv-cases--interior .cv-featured-card__media,
    .cv-cases--interior
    .swiper-slide-active
    .cv-featured-card__media {
        position: absolute;

        left: 9px;
        top: 10px;

        width: 344px;
        height: 250px;

        aspect-ratio: auto;

        border-radius: 10px;

        overflow: hidden;
    }


    .cv-cases--interior .cv-featured-card__media img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    /* name */
    .cv-cases--interior .cv-featured-card h3,
    .cv-cases--interior
    .swiper-slide-active
    .cv-featured-card h3,
    .cv-cases--interior
    .swiper-slide-prev
    .cv-featured-card h3,
    .cv-cases--interior
    .swiper-slide-next
    .cv-featured-card h3 {
        position: absolute;

        left: 9px;
        top: 280px;

        width: 344px;

        margin: 0;

        transform: none;

        font-size: 18px;
        line-height: 18px;
        font-weight: 700;

        text-align: center;

        color: #000;
    }


    /* description */
    .cv-cases--interior .cv-featured-card__description,
    .cv-cases--interior
    .swiper-slide-active
    .cv-featured-card__description {
        position: absolute;

        left: 9px;
        top: 310px;

        width: 344px;
        height: 85px;

        margin: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        opacity: 1;
        visibility: visible;

        font-size: 14px;
        line-height: 14px;

        letter-spacing: .03em;

        text-align: center;

        color: #000;
    }


    .cv-cases--interior .cv-featured-card__link {
        display: none;
    }


    .cv-cases--interior .cv-featured-carousel__arrow {
        display: none;
    }


    /* pagination */
    .cv-interior-pagination {
        position: absolute !important;

        left: 0 !important;
        top: 504px !important;
        bottom: auto !important;

        width: 100% !important;
        height: 15px;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 15px;

        margin: 0;
    }


    .cv-interior-pagination .swiper-pagination-bullet {
        width: 10px;
        height: 10px;

        margin: 0 !important;

        opacity: 1;

        background: #000;
    }


    .cv-interior-pagination .swiper-pagination-bullet-active {
        width: 15px;
        height: 15px;

        background: #000;
    }


    /* SEE ALL */
    .cv-cases--interior .cv-featured-head__all {
        display: flex;

        position: absolute;
        z-index: 20;

        left: 50%;
        right: auto;
        top: 531px;

        width: 125px;
        height: 19px;

        padding: 0;

        transform: translateX(-50%);

        align-items: center;
        justify-content: center;

        border-radius: 10px;

        background: #fff;

        color: #000 !important;

        font-size: 12px;
        line-height: 12px;
    }


    .cv-cases--interior .cv-featured-head__all i {
        display: none;
    }


    /* desktop decorative glyph на mobile не нужен */
    .cv-interior__glyph,
    .cv-interior__background {
        display: none;
    }

    /* =========================================================
   MOBILE RESOURCES
   Figma:
   title y = 0
   cards y = 40
   2 × 2
   ========================================================= */
    .cv-resources {
        position: relative;

        width: 100%;
        height: 451px;
        min-height: 451px;

        margin: 0;
        padding: 0;

        overflow: hidden;

        background: #000209;
    }


    /* Сбрасываем desktop shell */
    .cv-resources > .cv-shell {
        position: relative;

        left: 0;
        top: 0;

        width: 100%;
        max-width: none;
        height: 451px;

        margin: 0;
        padding: 0;

        transform: none;
    }


    /* [ Материалы и ресурсы ] */
    .cv-resources .cv-title {
        position: absolute;

        left: 18px;
        top: 46px;
        width: 276px;
        max-width: none;

        margin: 0;

        white-space: nowrap;

        font-size: 18px;
        line-height: 18px;
        font-weight: 700;

        letter-spacing: .03em;
        text-transform: uppercase;

        color: #fff;
    }


    /* 362px рабочей ширины */
    .cv-resources__grid {
        position: absolute;

        left: 20px;
        right: 20px;
        top: 85px;

        width: auto;

        margin: 0;
        padding: 0;

        display: grid;

        grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

        grid-auto-rows: 160px;

        column-gap: 8px;
        row-gap: 7px;

        overflow: visible;
    }


    /* 176–177 × 160 */
    .cv-resource-card {
        position: relative;

        width: auto;
        height: 160px;
        min-height: 160px;

        flex: none;

        margin: 0;
        padding: 0;

        overflow: hidden;

        border: 1px solid #eee;
        border-radius: 5px;

        background: rgba(195, 195, 195, .25);

        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);

        /* mobile не ждёт entrance state */
        opacity: 1;
        transform: none;

        transition: background .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
    }


    /* заголовок карточки */
    .cv-resource-card h3 {
        position: absolute;

        left: 12px;
        right: 8px;
        top: 15px;

        width: auto;

        margin: 0;

        font-size: 18px;
        line-height: 18px;
        font-weight: 700;

        letter-spacing: .03em;
        text-transform: uppercase;

        color: #fff;
    }


    /* описание */
    .cv-resource-card p {
        position: absolute;

        left: 12px;
        right: 9px;
        top: 50px;

        width: auto;

        margin: 0;

        font-size: 14px;
        line-height: 14px;
        font-weight: 400;

        letter-spacing: .03em;

        color: #fff;
    }


    /* скачать */
    .cv-resource-card a {
        position: absolute;

        left: 12px;
        bottom: 14px;

        width: 75px;
        height: 24px;

        padding: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        border: 0;
        border-radius: 10px;

        background: #fff;

        color: #000 !important;

        font-size: 12px;
        line-height: 12px;
        font-weight: 400;
    }

    /* =========================================================
   MOBILE PUBLICATIONS
   Figma: 319 × 1483 content area
   ========================================================= */
    .cv-publications {
        position: relative;

        width: 100%;
        height: 1483px;
        min-height: 1483px;

        margin: 0;
        padding: 0;

        overflow: hidden;

        background: #000209;
    }


    /* Сбрасываем desktop artboard */
    .cv-publications > .cv-shell {
        position: relative;

        left: 0;
        top: 0;

        width: 100%;
        max-width: none;
        height: 1483px;

        margin: 0;
        padding: 0;

        transform: none;
    }


    /* [ публикации ] */
    .cv-publications .cv-title {
        position: absolute;

        left: 18px;
        top: 0;

        width: 173px;

        margin: 0;

        white-space: nowrap;

        font-size: 18px;
        line-height: 18px;
        font-weight: 700;

        letter-spacing: .03em;
        text-transform: uppercase;

        color: #fff;
    }


    /*
     * Figma:
     * first publication x = 73
     * first publication y = 50
     */
    .cv-publications__grid {
        position: absolute;

        left: 60px;
        top: 50px;

        width: 264px;
        height: 1433px;

        margin: 0;
        padding: 0;

        display: block;
    }


    /* publication base */
    .cv-publication-card,
    .cv-publication-card:nth-child(n) {
        position: absolute;

        left: 0;

        width: 264px;
        min-width: 0;

        margin: 0;

        display: block;

        opacity: 1;
        transform: none;
    }


    /* ARCHI.RU */
    .cv-publication-card:nth-child(1) {
        top: 0;
        height: 440px;
    }


    /* TATLIN */
    .cv-publication-card:nth-child(2) {
        top: 507px;
        height: 448px;
    }


    /* ПРОЕКТ РОССИЯ */
    .cv-publication-card:nth-child(3) {
        top: 1013px;
        height: 420px;
    }


    /* source */
    .cv-publication-card strong {
        display: block;

        margin: 0;

        font-size: 18px;
        line-height: 20px;
        font-weight: 700;

        letter-spacing: .03em;
        text-transform: uppercase;

        color: #fff;
    }


    /* article title */
    .cv-publication-card h3 {
        width: 182px;

        margin: 4px 0 0;

        font-size: 14px;
        line-height: 14px;
        font-weight: 400;

        letter-spacing: .03em;

        color: #fff;
    }


    .cv-publication-card__text {
        height: auto;
        min-height: 0;
    }


    /* Images — Figma */
    .cv-publication-card img {
        position: absolute;

        left: 0;

        width: 264px;

        display: block;

        object-fit: cover;

        border-radius: 5px;

        transform: none;

        aspect-ratio: auto;
    }


    /* Archi.ru */
    .cv-publication-card:nth-child(1) img {
        top: 75px;
        height: 324px;
    }


    /* Tatlin */
    .cv-publication-card:nth-child(2) img {
        top: 74px;
        height: 323px;
    }


    /* Проект Россия */
    .cv-publication-card:nth-child(3) img {
        top: 45px;
        height: 324px;
    }


    /* read more */
    .cv-publication-card > a {
        position: absolute;

        left: 0;
        bottom: 0;

        width: 180px;
        height: 27px;

        margin: 0;
        padding: 0 18px 0 22px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        border: 0;
        border-radius: 10px;

        background: #fff;

        color: #000 !important;

        font-size: 12px;
        line-height: 12px;
        font-weight: 400;

        text-transform: uppercase;
    }

    /* =========================================================
   MOBILE FEEDBACK
   FIGMA: 367 × 812
   ========================================================= */
    .cv-feedback {
        position: relative;

        width: 100%;
        height: 850px;
        min-height: 812px;

        margin: 0;
        padding: 0;

        overflow: hidden;

        background: #000;
        color: #fff;

        border-radius: 0;
    }


    /* =========================================================
       BIG AIG BACKGROUND
       ========================================================= */
    .cv-feedback__aig {
        display: block;

        position: absolute;
        z-index: 0;

        left: 50%;
        top: 50%;

        width: 720px;
        height: auto;
        max-width: none;

        opacity: 1;

        transform: translate(-50%, -50%) rotate(90deg);

        transform-origin: center;

        pointer-events: none;
    }


    .cv-feedback.is-visible .cv-feedback__aig {
        opacity: 1;

        transform: translate(-50%, -50%) rotate(90deg);
    }


    .cv-feedback__aig path {
        fill: rgba(255, 255, 255, .15) !important;
    }


    /* =========================================================
       CONTENT
       ========================================================= */
    .cv-feedback__inner {
        position: relative;
        z-index: 2;

        left: 0;
        top: 25px;

        width: 100% !important;
        max-width: none;
        height: 812px;

        margin: 0;
        padding: 0;

        display: block;

        transform: none;
    }


    /* =========================================================
       TITLE
       ========================================================= */
    .cv-feedback__copy {
        position: static;
    }


    .cv-feedback__copy h2 {
        position: absolute;
        z-index: 3;

        left: 18px;
        top: 0;

        width: 218px;
        height: 18px;

        margin: 0;

        font-size: 18px;
        line-height: 18px;
        font-weight: 700;

        letter-spacing: .03em;
        text-transform: uppercase;

        color: #fff;

        opacity: 1;
        transform: none;
    }


    /* =========================================================
       BOTTOM TEXT
       ========================================================= */
    .cv-feedback__copy p {
        position: absolute;
        z-index: 3;

        left: 13px;
        top: 744px;

        width: 345px;
        height: 68px;

        margin: 0;

        display: flex;
        align-items: center;

        font-size: 12px;
        line-height: 12px;
        font-weight: 400;

        color: #fff;

        opacity: 1;
        transform: none;
    }


    /* =========================================================
       FORM
       362 × 712
       ========================================================= */
    .cv-feedback-form {
        position: absolute !important;
        z-index: 2;

        left: 20px;
        right: 20px;
        top: 32px;

        width: auto;
        height: 712px;
        min-height: 0;

        margin: 0;
        padding: 0;

        display: block !important;

        overflow: hidden;

        border: 1px solid rgba(255, 255, 255, .72);
        border-radius: 5px;

        background: rgba(0, 0, 0, .40);

        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);

        box-shadow: inset 0 0 32px rgba(255, 255, 255, .035);

        opacity: 1;

        transform: none !important;
    }


    .cv-feedback.is-visible .cv-feedback-form {
        opacity: 1;
        transform: none !important;
    }


    /* =========================================================
       FIRST 6 FIELDS
       ========================================================= */
    .cv-feedback-form > label:nth-of-type(1),
    .cv-feedback-form > label:nth-of-type(2),
    .cv-feedback-form > label:nth-of-type(3),
    .cv-feedback-form > label:nth-of-type(4),
    .cv-feedback-form > label:nth-of-type(5),
    .cv-feedback-form > label:nth-of-type(6) {
        position: absolute !important;

        left: 9px;
        right: 9px;

        width: auto;
        height: 25px;

        margin: 0;
        padding: 0;

        display: block !important;
    }


    .cv-feedback-form > label:nth-of-type(1) {
        top: 38px;
    }

    .cv-feedback-form > label:nth-of-type(2) {
        top: 115px;
    }

    .cv-feedback-form > label:nth-of-type(3) {
        top: 192px;
    }

    .cv-feedback-form > label:nth-of-type(4) {
        top: 269px;
    }

    .cv-feedback-form > label:nth-of-type(5) {
        top: 346px;
    }

    .cv-feedback-form > label:nth-of-type(6) {
        top: 423px;
    }


    /* label text:
       line begins at x=9,
       text begins at x=38
       => +29px
     */
    .cv-feedback-form
    > label:nth-of-type(-n+6)
    > span:first-child {
        position: absolute;
        z-index: 2;

        left: 29px;
        top: 0;

        display: block;

        margin: 0;

        font-size: 14px;
        line-height: 17px;
        font-weight: 400;

        color: #fff;

        pointer-events: none;
    }


    /* =========================================================
       INPUT LINES
       ========================================================= */
    .cv-feedback-form
    > label:nth-of-type(-n+6)
    input:not([type="checkbox"]),
    .cv-feedback-form
    > label:nth-of-type(-n+6)
    select {
        position: absolute !important;

        left: 0;
        top: 0;

        width: 100% !important;
        height: 25px !important;

        margin: 0 !important;
        padding: 0 24px 0 29px !important;

        border: 0 !important;
        border-bottom: 1px solid #fff !important;

        border-radius: 0 !important;
        outline: 0;

        background: transparent !important;

        color: #fff !important;

        font-size: 14px;
        line-height: 17px;

        box-shadow: none !important;
    }


    /*
     * В select отображаем подпись из span,
     * как в макете.
     */
    .cv-feedback-form
    > label:nth-of-type(5)
    select,
    .cv-feedback-form
    > label:nth-of-type(6)
    select {
        appearance: none;
        -webkit-appearance: none;

        color: transparent !important;

        cursor: pointer;
    }


    .cv-feedback-form select option {
        color: #111;
        background: #fff;
    }


    /* =========================================================
       SELECT ARROWS
       ========================================================= */
    .cv-feedback-form__select::after {
        content: '';

        position: absolute;
        z-index: 4;

        right: 0;
        top: 5px;

        width: 10px;
        height: 7px;

        background: #d9d9d9;

        clip-path: polygon(
                0 0,
                100% 0,
                50% 100%
        );

        pointer-events: none;

        transition: transform .2s ease;
    }


    .cv-feedback-form__select:focus-within::after {
        transform: rotate(180deg);
    }


    /* =========================================================
       MESSAGE
       ========================================================= */
    .cv-feedback-form__message {
        position: absolute !important;

        left: 9px !important;
        right: 9px;
        top: 485px !important;

        width: auto !important;
        height: 81px;

        margin: 0 !important;
        padding: 0;

        display: block !important;
    }


    .cv-feedback-form__message > span:first-child {
        position: absolute;

        left: 29px;
        top: 0;

        width: auto;
        height: 17px;

        margin: 0;

        font-size: 14px;
        line-height: 17px;
        font-weight: 400;

        color: #fff;
    }


    .cv-feedback-form__message textarea {
        position: absolute !important;

        left: 0;
        top: 23px;

        width: 100% !important;
        height: 58px !important;

        min-height: 58px !important;
        max-height: 58px !important;

        margin: 0 !important;
        padding: 7px 9px !important;

        resize: none;

        border: 1px solid #fff !important;
        border-radius: 0 !important;

        outline: 0;

        background: rgba(0, 0, 0, .04) !important;
        color: #fff !important;

        box-shadow: none !important;
    }


    /* =========================================================
       CONSENT
       ========================================================= */
    .cv-feedback-form__consent {
        position: absolute !important;

        left: 9px !important;
        right: 9px;
        top: 591px !important;

        width: auto !important;
        height: 28px;

        margin: 0 !important;
        padding: 0;

        display: grid !important;

        grid-template-columns:
        17px
        minmax(0, 1fr);

        column-gap: 7px;

        align-items: center;

        font-size: 12px;
        line-height: 12px;
        font-weight: 300;

        color: #fff;

        text-shadow: 0 4px 4px rgba(0, 0, 0, .25);

        cursor: pointer;
    }


    .cv-feedback-form__consent input {
        position: absolute;

        width: 1px;
        height: 1px;

        opacity: 0;

        pointer-events: none;
    }


    .cv-feedback-form__consent i {
        position: relative;

        width: 17px;
        height: 17px;

        display: block;

        border: 1px solid #fff;
        border-radius: 2px;

        background: transparent;
    }


    .cv-feedback-form__consent input:checked + i {
        background: rgba(255, 255, 255, .16);
    }


    .cv-feedback-form__consent input:checked + i::after {
        content: '';

        position: absolute;

        left: 3px;
        top: 3px;

        width: 8px;
        height: 5px;

        border-left: 2px solid #fff;
        border-bottom: 2px solid #fff;

        transform: rotate(-45deg);
    }


    .cv-feedback-form__consent span {
        display: block;

        min-width: 0;

        color: #fff;
    }


    .cv-feedback-form__consent a {
        color: #fff !important;

        text-decoration: underline;
        text-underline-offset: 2px;
    }


    /* =========================================================
       SUBMIT
       ========================================================= */
    .cv-feedback-form button[type="submit"] {
        position: absolute !important;

        left: 64px;
        top: 639px;

        width: 234px !important;
        height: 42px;

        margin: 0 !important;
        padding: 0 !important;

        display: flex;
        align-items: center;
        justify-content: center;

        overflow: hidden;

        border: 1px solid rgba(255, 255, 255, .72);
        border-radius: 20px;

        background: linear-gradient(
                180deg,
                rgba(255, 255, 255, .12) 0%,
                rgba(255, 255, 255, .035) 100%
        );

        color: #fff;

        font-size: 14px;
        line-height: 14px;
        font-weight: 500;

        letter-spacing: -.03em;

        box-shadow: inset 0 0 18px rgba(255, 255, 255, .06);

        cursor: pointer;
    }


    /* status */
    .cv-feedback-form__status {
        position: absolute;

        left: 9px;
        right: 9px;
        top: 688px;

        width: auto;
        min-height: 14px;

        margin: 0;

        text-align: center;

        font-size: 11px;
        line-height: 14px;
    }

    /* =========================================================
     MOBILE FOOTER
     FIGMA: 402 × 250
     ========================================================= */
    .cv-footer {
        position: relative;

        width: 100%;
        #height: 290px;
        min-height: 250px;

        margin: 0;
        padding: 0;

        overflow: hidden;

        background: #f9f9f9;
        color: #000;
    }


    /* Сбрасываем desktop artboard */
    .cv-footer__top,
    .cv-footer__bottom {
        position: absolute;

        left: 0;
        top: 0;

        width: 100%;
        max-width: none;
        height: 250px;

        margin: 0;
        padding: 0;

        transform: none;

        display: block;

        pointer-events: none;
    }


    /* =========================================================
       LOGO
       x29 / y17 / 141 × 64
       ========================================================= */
    .cv-footer__logo {
        position: absolute;

        left: 29px;
        top: 17px;

        width: 141px;
        height: 64px;

        display: block;

        pointer-events: auto;
    }


    .cv-footer__logo img {
        width: 141px;
        height: 64px;

        max-width: none;

        object-fit: contain;
        object-position: left top;

        filter: brightness(0) saturate(100%);
    }


    /* =========================================================
       NAV
       x226 / y14
       ========================================================= */
    .cv-footer__nav {
        position: absolute;

        left: 226px;
        top: 14px;

        width: 140px;
        height: 133px;

        margin: 0;
        padding: 0;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        gap: 0;

        font-size: 14px;
        line-height: 19px;
        font-weight: 400;

        color: #000;

        pointer-events: auto;
    }


    .cv-footer__nav a {
        position: relative;

        display: block;

        width: auto;

        padding: 0;

        white-space: nowrap;

        color: #000 !important;
    }


    /* underline hover оставляем */
    .cv-footer__nav a::after {
        bottom: 0;
    }


    /* =========================================================
       SOCIAL
       ========================================================= */
    .cv-footer__social {
        position: absolute;

        left: 29px;
        top: 104px;

        width: auto;
        height: 27px;

        margin: 0;

        display: flex;
        align-items: center;

        gap: 14px;

        pointer-events: auto;
    }


    .cv-footer__social a {
        position: relative;

        width: 26px;
        height: 26px;

        flex: 0 0 26px;

        display: block;
    }


    .cv-footer__social img {
        width: 26px;
        height: 26px;

        max-width: none;

        object-fit: contain;

        filter: brightness(0) saturate(100%);
    }


    /* =========================================================
       LEGAL
       x29 / y163 / 344 × 32
       ========================================================= */
    .cv-footer__legal {
        position: absolute;

        left: 29px;
        top: 163px;

        width: 344px;
        height: 32px;

        margin: 0;
        padding: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 0 10px;

        flex-wrap: wrap;

        font-size: 12px;
        line-height: 16px;
        font-weight: 400;

        text-align: center;
        white-space: normal;

        color: #000;

        pointer-events: auto;
    }


    .cv-footer__legal span,
    .cv-footer__legal a {
        width: auto;

        color: #000 !important;
    }


    /* copyright — вся первая строка */
    .cv-footer__legal span {
        flex-basis: 100%;

        text-align: center;
    }


    /* =========================================================
       LOGIC
       ========================================================= */
    .cv-footer__studio {
        position: absolute;

        left: 50%;
        top: 212px;

        width: 123px;
        height: 14px;

        margin: 0;

        transform: translateX(-50%);

        display: block;

        font-size: 12px;
        line-height: 12px;
        font-weight: 400;

        text-align: center;
        white-space: nowrap;

        color: #000 !important;

        pointer-events: auto;
    }
}

@media (max-width: 430px) {
    .cv-shell {
        width: calc(100% - 40px);
    }

    .cv-hero__wordmark {
        width: 321px;
    }

    .cv-shell.cv-products__inner,
    .cv-shell.cv-benefits__inner {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}


@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .cv-hero__flare {
        animation: none;
    }

    * {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 767px) {
    /* =========================================================
    MOBILE HERO
    ========================================================= */
    .cv-hero {
        position: relative;

        width: 100%;
        height: 384px;

        overflow: hidden;

        background: #000209;
    }

    .cv-hero::after {
        display: none;
    }

    /* =========================================================
    MOBILE HERO GLASS
    Figma: 402 × 384
    ========================================================= */
    .cv-hero__artboard {
        position: absolute;
        z-index: 1;

        left: 50%;
        top: 0;

        width: 402px;
        height: 384px;

        overflow: hidden;

        transform: translateX(-50%);

        pointer-events: none;
    }


    /*
     * Если остались предыдущие попытки рисовать стекло
     * через псевдоэлементы — полностью отключаем.
     */
    .cv-hero__artboard::before,
    .cv-hero__artboard::after {
        content: none !important;
    }


    /*
     * Ключевой момент.
     *
     * Исходный SVG имеет пропорцию:
     * 1440 / 540 = 2.6667
     *
     * Figma задаёт высоту mobile-группы 434px.
     *
     * 434 × 1440 / 540 = 1157.33px
     *
     * Поэтому SVG НЕ сжимаем до 504px.
     * Мы сохраняем его пропорции и просто кадрируем viewport'ом.
     */
    .cv-hero__glass-svg {
        display: block;

        position: absolute;

        left: -380px;
        top: -155px;

        width: 1157.33px;
        height: 434px;

        max-width: none;

        overflow: visible;
    }


    /*
     * Мобильная толщина грани ближе к Figma:
     * border там около 5px.
     */
    .cv-hero__glass-shadow {
        stroke: rgba(205, 220, 232, .17);
        stroke-width: 10;
    }

    .cv-hero__glass-thickness {
        stroke-width: 7;
        opacity: .38;
    }

    .cv-hero__glass-edge {
        stroke: rgba(250, 253, 255, .82);
        stroke-width: 3.5;
    }

    .cv-hero__glass-outer-glow {
        stroke-width: 8;
        opacity: .72;
    }


    /*
     * Figma:
     * яркое ядро приблизительно x=249 / y=199.
     *
     * Контейнер блика 86×86,
     * значит:
     * left = 249 - 43 = 206
     * top  = 199 - 43 = 156
     */
    .cv-hero__flare {
        left: 206px;
        top: 156px;

        width: 86px;
        height: 86px;

        --cv-flare-x: 0px;
        --cv-flare-y: 0px;
        --cv-flare-scale: 1;
        --cv-flare-opacity: .94;
        --cv-flare-glow: 6px;
    }

    .cv-hero__flare::before {
        width: 38px;
        height: 38px;
        filter: blur(1.8px);
    }

    .cv-hero__flare-core {
        width: 10px;
        height: 10px;

        box-shadow: 0 0 5px rgba(255, 255, 255, .95),
        0 0 12px rgba(211, 238, 255, .55),
        0 0 20px rgba(151, 207, 255, .22);
    }

    .cv-hero__flare::after {
        width: 74px;
        height: 14px;
        filter: blur(5px);
    }

    .cv-hero__flare-ray--1 {
        width: 96px;
        height: 1.8px;
    }

    .cv-hero__flare-ray--2 {
        width: 68px;
        height: 3px;
    }

    .cv-hero__flare-ray--3 {
        width: 52px;
        height: 2.4px;
    }

    .cv-hero__flare-ray--4 {
        width: 60px;
        height: 2.2px;
    }

    .cv-hero__flare-ray--5 {
        width: 20px;
        height: 3.5px;
    }


    /* text */
    .cv-hero__content {
        width: 100%;

        margin: 0;
    }

    .cv-hero__wordmark {
        left: 20px;
        top: 300px;

        width: 321px;
        max-width: none;

        transform: none;
    }

    .cv-hero__tagline {
        left: 20px;
        top: 344px;

        width: 325px;

        margin: 0;

        transform: none;

        white-space: nowrap;

        font-size: 14px;
        line-height: 14px;
        font-weight: 700;

        letter-spacing: .03em;
    }

    .cv-hero__aig {
        display: none;
    }

    .cv-comparison__labels i {
        background-size: 100% 1px;
    }

    .cv-comparison__labels i::before,
    .cv-comparison__labels i::after,
    .cv-comparison__labels span:last-child {
        opacity: 1;
        transform: none;
    }

    .cv-comparison__labels i::after {
        transform: rotate(45deg);
    }

    .cv-benefit-card {
        opacity: 1;
        transform: none;
    }

    .cv-format-card {
        opacity: 1;
        filter: none;
    }

    .cv-formats.is-visible .cv-format-card:hover {
        animation: none;
    }


    .cv-interior__glyph {
        animation: none;
    }
}

@media (max-width: 860px) {

    .cv-production {
        position: relative;

        width: 100%;
        height: auto;
        min-height: 203px;

        margin: 0;
        padding: 0;

        overflow: hidden;

        background: #000;
    }


    /*
     * Весь video-контейнер занимает production целиком.
     * Его больше НЕ двигаем вниз.
     */
    .cv-production .cv-video,
    .cv-video--production {
        position: relative;

        left: auto;
        top: auto;

        width: 100%;
        height: auto;

        margin: 0;
        padding: 0;

        aspect-ratio: auto;

        overflow: hidden;

        background: #000;
    }


    /*
     * Двигаем вниз только непосредственно видео.
     *
     * Figma:
     * 30px — зона заголовка
     * 173px — видео
     */
    .cv-production .cv-video__media {
        position: relative;

        left: 0;
        #top: 30px;
        right: auto;
        bottom: auto;

        width: 100%;
        height: auto;

        max-width: none;

        margin: 0;
        padding: 0;

        object-fit: cover !important;
        object-position: center center !important;

        display: block;
    }


    /*
     * Shade тоже должен лежать только над картинкой,
     * а не поверх заголовка.
     */
    .cv-production .cv-video__shade {
        position: absolute;
        z-index: 2;

        left: 0;
        right: 0;
        bottom: auto;

        width: 100%;
        height: 211px;

        background: rgba(0, 0, 0, .08);
    }


    .cv-video--production::before {
        display: none !important;
        content: none !important;
    }


    /*
     * Заголовок остаётся внутри .cv-video,
     * но теперь находится в верхних 30px,
     * где видео отсутствует.
     */
    .cv-production__content {
        position: absolute;
        z-index: 20;

        left: 13px;
        top: 0;
        right: auto;
        bottom: auto;

        width: 188px;
        height: 18px;

        margin: 0;
        padding: 0;

        opacity: 1 !important;
        pointer-events: none;
    }


    .cv-production__content .cv-title {
        width: 188px;
        max-width: none;

        margin: 0;
        padding: 0;

        font-size: 18px;
        line-height: 18px;
        font-weight: 700;

        letter-spacing: .03em;
        text-transform: uppercase;

        color: #fff;
    }


    /*
     * Play относительно области изображения,
     * а не всей секции.
     *
     * 30 + 173/2 = 116.5
     */
    .cv-video--production .cv-play {
        left: 50%;
        top: 116.5px;

        width: 46px;
        height: 46px;

        background: rgba(224, 224, 224, .74);

        transform: translate(-50%, -50%);
    }


    /*
     * Контролы тоже привязываем к нижнему краю видео.
     */
    .cv-video--production .cv-video__controls {
        left: 28px;
        right: 28px;
        bottom: 2px;

        height: 28px;
    }
}

/* Product cards are catalog links. */
.cv-product-card {
    color: #fff;
    text-decoration: none;
}

.cv-product-card:hover, .cv-product-card:focus-visible {
    color: #fff;
    text-decoration: none;
}

.cv-product-card:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Single case: there is nothing to scroll. */
.cv-cases--single-slide .cv-featured-carousel__arrow {
    display: none !important;
}


/* Ограничение описания в карточках кейсов */
.cv-cases .cv-featured-card__description,
.cv-cases .swiper-slide-active .cv-featured-card__description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;

    overflow: hidden;
    max-height: 72px;

    text-overflow: ellipsis;
}

/* Мобильная версия */
@media (max-width: 860px) {
    .cv-cases .cv-featured-card__description,
    .cv-cases .swiper-slide-active .cv-featured-card__description {
        height: auto;
        max-height: 56px;
        -webkit-line-clamp: 4;
    }
}

/* Crystalvision editable resource cards: keep text clear of the download button. */
.cv-resources .cv-resource-card h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.cv-resources .cv-resource-card p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    max-height: 48px;
    overflow-wrap: anywhere;
}

/* CV publications: protect fixed-size cards from long blog headlines. */
.cv-publications .cv-publication-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cv-publications .cv-publication-card h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
}

@media (max-width: 860px) {
    /* Last mobile tile has a shorter title-to-image gap in the original design. */
    .cv-publications .cv-publication-card:nth-child(3) h3 {
        -webkit-line-clamp: 1;
    }
}

/* CV_FEEDBACK_FIELD_OVERLAP_FIX_V1
 * Labels stay on the original row; entered text and the select value
 * appear on the next line. Scoped to the Crystalvision feedback form.
 */
.cv-feedback-form > label:nth-of-type(-n+6) > span:first-child {
    top: 0 !important;
}

.cv-feedback-form > label:nth-of-type(-n+6) > input:not([type="checkbox"]),
.cv-feedback-form > label:nth-of-type(-n+6) > select {
    top: 23px !important;
}

/* Previously the selected option was transparent, since it shared
 * space with the caption. We now display it under the caption. */
.cv-feedback-form > label:nth-of-type(5) > select,
.cv-feedback-form > label:nth-of-type(6) > select {
    color: #fff !important;
}

.cv-feedback-form > label:nth-of-type(5)::after,
.cv-feedback-form > label:nth-of-type(6)::after {
    top: 6px !important;
}

/* CV_FEEDBACK_PLACEHOLDERS_V2
 * AIG-style placeholders, no duplicate field captions. Overrides the
 * previous overlap workaround without changing unrelated landing styles.
 */
.cv-feedback-form > label:nth-of-type(-n+6) input:not([type="checkbox"]),
.cv-feedback-form > label:nth-of-type(-n+6) select {
    top: 0 !important;
    padding-left: 0 !important;
    color: #fff !important;
}

.cv-feedback-form > label:nth-of-type(5) > select,
.cv-feedback-form > label:nth-of-type(6) > select {
    color: #fff !important;
}

.cv-feedback-form__select::after {
    top: 8px !important;
}

.cv-feedback-form input:not([type="checkbox"])::placeholder,
.cv-feedback-form textarea::placeholder {
    color: #fff;
    opacity: 1;
}

.cv-feedback-form input:not([type="checkbox"]):focus::placeholder,
.cv-feedback-form textarea:focus::placeholder {
    color: rgba(255, 255, 255, .60);
}

.cv-feedback-form .cv-feedback-form__message textarea {
    top: 0 !important;
    padding: 0 0 6px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .9) !important;
    border-radius: 0 !important;
}

.cv-feedback-form button[type="submit"] {
    text-transform: none !important;
    font-size: 14px !important;
}


/* =========================================================
   CRYSTALVISION PUBLICATIONS — FLEXIBLE LAYOUT
   ========================================================= */

.cv-publications {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0 0 100px;
    overflow: visible;
}

.cv-publications > .cv-shell {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
}

.cv-publications .cv-title {
    position: relative;
    top: auto;
    left: auto;
    margin: 0;
}

/* Desktop: up to 3 cards per row */
.cv-publications__grid {
    --publication-gap: clamp(24px, 6vw, 126px);

    position: relative;
    top: auto;
    left: auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;

    width: 100%;
    height: auto;
    margin: 55px 0 0;
    padding: 0;

    column-gap: var(--publication-gap);
    row-gap: 65px;
}

.cv-publications .cv-publication-card,
.cv-publications .cv-publication-card:nth-child(n) {
    position: relative;
    top: auto;
    left: auto;

    display: flex;
    flex-direction: column;

    flex: 0 0 calc(
            (100% - 2 * var(--publication-gap)) / 3
    );

    width: auto;
    max-width: 269px;
    height: auto;
    min-height: 450px;
    margin: 0;
}

.cv-publications .cv-publication-card__text {
    height: auto;
    min-height: 85px;
    flex: 0 0 auto;
}

.cv-publications .cv-publication-card img,
.cv-publications .cv-publication-card:nth-child(n) img {
    position: relative;
    top: auto;
    left: auto;

    display: block;
    width: 100%;
    height: 323px;

    flex: 0 0 auto;
    object-fit: cover;
}

.cv-publications .cv-publication-card > a {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;

    flex: 0 0 auto;
    margin-top: auto;
}

/* Mobile: one card per row */
@media (max-width: 860px) {

    .cv-publications {
        height: auto;
        min-height: 0;
        padding: 0 0 65px;
        overflow: visible;
    }

    .cv-publications > .cv-shell {
        position: relative;
        top: auto;
        left: auto;

        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 0;

        transform: none;
    }

    .cv-publications .cv-title {
        position: relative;
        top: auto;
        left: auto;

        width: auto;
        margin: 0 18px;
    }

    .cv-publications__grid {
        position: relative;
        top: auto;
        left: auto;

        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;

        width: 100%;
        height: auto;

        margin: 32px 0 0;
        padding: 0;

        gap: 65px;
    }

    .cv-publications .cv-publication-card,
    .cv-publications .cv-publication-card:nth-child(n) {
        position: relative;
        top: auto;
        left: auto;

        display: flex;
        flex-direction: column;

        flex: 0 0 auto;

        width: min(264px, calc(100% - 36px));
        max-width: none;
        height: auto;
        min-height: 0;

        margin: 0;

        opacity: 1;
        transform: none;
    }

    .cv-publications .cv-publication-card__text {
        height: auto;
        min-height: 75px;
    }

    .cv-publications .cv-publication-card img,
    .cv-publications .cv-publication-card:nth-child(n) img {
        position: relative;
        top: auto;
        left: auto;

        width: 100%;
        height: 324px;
        max-height: none;
        margin: 0;

        object-fit: cover;
    }

    .cv-publications .cv-publication-card > a {
        position: relative;
        top: auto;
        left: auto;
        bottom: auto;

        margin: 40px 0 0;
    }

    .cv-publications .cv-publication-card h3 {
        -webkit-line-clamp: 3;
    }
}


/* =========================================================
   PUBLICATIONS — HEADING POSITION
   ========================================================= */

.cv-publications {
    height: auto;
    min-height: 0;
    padding-top: 0;
}

.cv-publications > .cv-shell {
    position: relative;
    top: auto;
    left: auto;

    width: min(1143px, calc(100% - 64px));
    max-width: none;
    height: auto;

    margin: 0 auto;
    transform: none;
}

.cv-publications .cv-title {
    position: relative;
    top: auto;
    left: auto;

    display: block;
    width: auto;
    max-width: 100%;
    margin: 0;

    white-space: normal;
}

/* Maintain the original horizontal alignment */
.cv-publications__grid {
    margin-top: 55px;
}

/* Mobile heading */
@media (max-width: 860px) {

    .cv-publications > .cv-shell {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .cv-publications .cv-title {
        width: auto;
        margin: 0 18px;

        font-size: 18px;
        line-height: 18px;
    }

    .cv-publications__grid {
        margin-top: 32px;
    }
}


/* =========================================================
   CRYSTALVISION — FLEXIBLE RESOURCES LAYOUT
   ========================================================= */

.cv-resources {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 118px 0 100px;
    overflow: visible;
}

.cv-resources > .cv-shell {
    position: relative;
    top: auto;
    left: auto;
    width: min(1143px, calc(100% - 64px));
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0 auto;
    transform: none;
}

.cv-resources .cv-title {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    max-width: 100%;
    margin: 0;
}

/* Four cards per row; incomplete rows are centered */
.cv-resources__grid {
    position: relative;
    top: auto;
    left: auto;
    right: auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;

    width: 100%;
    height: auto;
    margin: 83px 0 0;
    padding: 0;

    column-gap: clamp(16px, 5vw, 73px);
    row-gap: 20px;
}

.cv-resources .cv-resource-card {
    position: relative;
    top: auto;
    left: auto;

    display: flex;
    flex-direction: column;

    flex: 0 0 209px;
    width: 209px;
    height: 181px;
    min-height: 181px;
    max-width: 100%;

    margin: 0;
    padding: 17px 14px;

    box-sizing: border-box;
}

/* Title */
.cv-resources .cv-resource-card h3 {
    position: relative;
    top: auto;
    left: auto;
    right: auto;

    width: 100%;
    height: auto;
    margin: 0 0 12px;

    flex: 0 0 auto;
}

/* Description */
.cv-resources .cv-resource-card p {
    position: relative;
    top: auto;
    left: auto;
    right: auto;

    width: 100%;
    height: auto;
    margin: 0;

    flex: 0 1 auto;
    max-height: none;

    -webkit-line-clamp: 4;
}

/* Download button */
.cv-resources .cv-resource-card a {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;

    flex: 0 0 auto;
    margin: auto 0 0;
}

/* =========================================================
   MOBILE — TWO CARDS PER ROW
   ========================================================= */

@media (max-width: 860px) {

    .cv-resources {
        height: auto;
        min-height: 0;
        padding: 46px 0 50px;
        overflow: visible;
    }

    .cv-resources > .cv-shell {
        position: relative;
        top: auto;
        left: auto;

        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 0 20px;
        box-sizing: border-box;

        transform: none;
    }

    .cv-resources .cv-title {
        position: relative;
        top: auto;
        left: auto;

        width: auto;
        max-width: 100%;
        margin: 0 0 0 -2px;

        font-size: 18px;
        line-height: 18px;
        white-space: normal;
    }

    .cv-resources__grid {
        position: relative;
        top: auto;
        left: auto;
        right: auto;

        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;

        width: 100%;
        height: auto;

        margin: 21px 0 0;
        padding: 0;

        column-gap: 8px;
        row-gap: 7px;

        overflow: visible;
    }

    .cv-resources .cv-resource-card {
        position: relative;
        top: auto;
        left: auto;

        flex: 0 0 calc((100% - 8px) / 2);

        width: calc((100% - 8px) / 2);
        max-width: none;

        height: 160px;
        min-height: 160px;

        margin: 0;
        padding: 15px 12px 14px;

        box-sizing: border-box;

        display: flex;
        flex-direction: column;

        opacity: 1;
        transform: none;
    }

    .cv-resources .cv-resource-card h3 {
        position: relative;
        top: auto;
        left: auto;
        right: auto;

        width: 100%;
        margin: 0 0 12px;

        font-size: 18px;
        line-height: 18px;
    }

    .cv-resources .cv-resource-card p {
        position: relative;
        top: auto;
        left: auto;
        right: auto;

        width: 100%;
        margin: 0;

        font-size: 14px;
        line-height: 14px;

        max-height: none;
        -webkit-line-clamp: 4;
    }

    .cv-resources .cv-resource-card a {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;

        width: 75px;
        height: 24px;

        margin: auto 0 0;
        font-size: 12px;
    }
}


/* =========================================================
   CRYSTALVISION — RESPONSIVE FOOTER
   ========================================================= */

.cv-footer {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: 100%;
    height: auto;
    min-height: 303px;

    padding: 63px 0 54px;
    box-sizing: border-box;

    overflow: visible;
    background: #f9f9f9;
    color: #000;
}

/* Общий контейнер footer */
.cv-footer > .cv-shell {
    position: relative;
    top: auto;
    left: auto;

    width: min(1052px, calc(100% - 64px));
    max-width: none;
    height: auto;

    margin: 0 auto;
    padding: 0;

    transform: none;
    pointer-events: auto;
}

/* Верхняя строка */
.cv-footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* Логотип */
.cv-footer__logo {
    position: relative;
    top: auto;
    left: auto;

    display: block;
    flex: 0 0 182px;

    width: 182px;
    height: 82px;
}

.cv-footer__logo img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: left center;
    filter: brightness(0) saturate(100%);
}

/* Навигация */
.cv-footer__nav {
    position: relative;
    top: auto;
    left: auto;

    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;

    width: auto;
    height: auto;
    min-width: 0;

    margin: 0;
    padding: 0;
    gap: 12px 24px;

    font-size: 16px;
    line-height: 24px;
}

.cv-footer__nav a {
    position: relative;
    display: inline-block;

    width: auto;
    padding-bottom: 4px;

    color: #000 !important;
    white-space: nowrap;
}

/* Нижняя строка */
.cv-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Юридическая информация */
.cv-footer__legal {
    position: relative;
    top: auto;
    left: auto;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;

    width: auto;
    height: auto;

    margin: 0;
    padding: 0;
    gap: 10px 25px;

    font-size: 11px;
    line-height: 16px;
    white-space: normal;
}

.cv-footer__legal span,
.cv-footer__legal a {
    width: auto;
    color: #000 !important;
}

/* Социальные сети */
.cv-footer__social {
    position: relative;
    top: auto;
    left: auto;

    display: flex;
    align-items: center;
    flex: 0 0 auto;

    width: auto;
    height: auto;

    margin: 0;
    gap: 16px;
}

.cv-footer__social a {
    position: relative;
    display: block;

    width: 23px;
    height: 23px;
    flex: 0 0 23px;
}

.cv-footer__social img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) saturate(100%);
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (min-width: 861px) and (max-width: 1180px) {
    .cv-footer > .cv-shell {
        width: calc(100% - 64px);
    }

    .cv-footer__top {
        gap: 24px;
    }

    .cv-footer__nav {
        gap: 10px 18px;
        font-size: 14px;
        line-height: 20px;
    }
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 860px) {

    .cv-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        justify-content: stretch;

        height: auto;
        min-height: 0;

        margin: 0;
        padding: 24px 20px 28px;

        column-gap: 16px;
        row-gap: 24px;

        overflow: visible;
    }

    /* Убираем промежуточные слои */
    .cv-footer > .cv-shell {
        display: contents;
    }

    /* Логотип слева */
    .cv-footer__logo {
        position: relative;
        top: auto;
        left: auto;

        grid-column: 1;
        grid-row: 1;

        width: min(141px, 100%);
        height: auto;
        aspect-ratio: 141 / 64;
        flex: none;

        margin: 0;
        transform: none;
    }

    .cv-footer__logo img {
        width: 100%;
        height: 100%;
        max-width: 100%;
    }

    /* Меню справа */
    .cv-footer__nav {
        position: relative;
        top: auto;
        left: auto;

        grid-column: 2;
        grid-row: 1 / span 2;

        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: flex-start;

        width: 100%;
        height: auto;
        min-width: 0;

        margin: 0;
        gap: 3px;

        font-size: 14px;
        line-height: 19px;
    }

    .cv-footer__nav a {
        display: block;
        width: auto;
        max-width: 100%;

        padding: 0;

        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Соцсети под логотипом */
    .cv-footer__social {
        position: relative;
        top: auto;
        left: auto;

        grid-column: 1;
        grid-row: 2;

        display: flex;
        align-items: center;

        width: auto;
        height: auto;

        margin: 0;
        gap: 14px;
        transform: none;
    }

    .cv-footer__social a {
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
    }

    .cv-footer__social img {
        width: 100%;
        height: 100%;
    }

    /* Юридическая информация внизу */
    .cv-footer__legal {
        position: relative;
        top: auto;
        left: auto;

        grid-column: 1 / -1;
        grid-row: 3;

        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: auto;

        margin: 0;
        padding: 0;
        gap: 7px;

        font-size: 12px;
        line-height: 16px;

        text-align: center;
        white-space: normal;

        transform: none;
    }

    .cv-footer__legal span,
    .cv-footer__legal a {
        display: block;
        flex: none;

        width: auto;
        max-width: 100%;

        text-align: center;
        overflow-wrap: anywhere;
    }
}


/* =========================================================
   CRYSTALVISION CASES — UNIFIED LAYOUT
   Architecture + Interior
   ========================================================= */

/* ---------------------------------------------------------
   1. SECTIONS
   --------------------------------------------------------- */

.cv-cases.cv-cases--architecture,
.cv-cases.cv-cases--interior {
    position: relative;
    display: flex;
    flex-direction: column;

    width: 100%;
    height: auto;
    min-height: 0;

    margin: 0;
    padding: 65px 0 85px;

    overflow: hidden;
    box-sizing: border-box;
}

.cv-cases.cv-cases--architecture {
    background: linear-gradient(
            180deg,
            rgba(255, 255, 255, .08) 0%,
            rgba(0, 0, 0, 0) 85%
    ), #000209;
    color: #fff;
}

.cv-cases.cv-cases--interior {
    background: #e7e7e7 url('../img/interior-projects-bg.png') center center / cover no-repeat;

    color: #000;
}

/* ---------------------------------------------------------
   2. SECTION HEADINGS
   --------------------------------------------------------- */

.cv-cases .cv-featured-head,
.cv-cases .cv-featured-head--interior {
    position: relative;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: min(1143px, calc(100% - 64px));
    height: auto;

    margin: 0 auto 55px;
    padding: 0;

    gap: 24px;
    box-sizing: border-box;
}

.cv-cases .cv-featured-head .cv-title {
    position: relative;

    top: auto;
    left: auto;
    right: auto;

    width: auto;
    height: auto;

    margin: 0;
    padding: 0;

    transform: none;
}

.cv-cases .cv-featured-head__all,
.cv-cases .cv-featured-head__all--interior {
    position: relative;
    z-index: 6;

    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    flex: 0 0 auto;

    width: 180px;
    height: 27px;

    margin: 0;
    padding: 0 20px 0 22px;

    transform: none;
}

.cv-cases--architecture .cv-featured-head__all {
    background: #fff;
    color: #000 !important;
}

.cv-cases--interior .cv-featured-head__all {
    background: #000;
    color: #fff !important;
}

/* ---------------------------------------------------------
   3. CAROUSEL CONTAINERS
   --------------------------------------------------------- */

.cv-cases .cv-featured-carousel,
.cv-cases .cv-featured-carousel--interior {
    position: relative;
    z-index: 2;

    top: auto;
    bottom: auto;
    left: auto;
    right: auto;

    width: 100%;
    height: auto;
    min-height: 0;

    margin: 0;
    padding: 0;

    transform: none;
    overflow: visible;
}

.cv-cases .cv-architecture-swiper,
.cv-cases .cv-interior-swiper {
    position: relative;

    top: auto;
    left: auto;
    right: auto;

    width: min(1650px, 100%);
    height: auto;
    min-height: 0;

    margin: 0 auto;
    padding: 0;

    transform: none;
    overflow: hidden;
}

/*
 * Swiper сохраняет одинаковую ширину слайдов.
 * Высота определяется содержимым центральной карточки.
 */

.cv-cases .cv-architecture-swiper .swiper-wrapper,
.cv-cases .cv-interior-swiper .swiper-wrapper {
    height: auto;
    min-height: 0;
    align-items: flex-start;
}

.cv-cases .cv-architecture-swiper .swiper-slide,
.cv-cases .cv-interior-swiper .swiper-slide {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    flex-shrink: 0;

    width: 540px !important;
    height: auto !important;
    min-height: 0;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

/* ---------------------------------------------------------
   4. INACTIVE CARDS
   --------------------------------------------------------- */

.cv-cases .cv-featured-card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    flex: 0 0 auto;

    width: 401px;
    height: 401px;
    min-height: 0;

    margin: 26px 0 0;
    padding: 16px 25px 24px;

    box-sizing: border-box;
    overflow: hidden;

    border-radius: 5px;
    background: #bababa;

    cursor: pointer;

    transform: none;

    transition: width .42s cubic-bezier(.22, .61, .36, 1),
    height .42s cubic-bezier(.22, .61, .36, 1),
    margin-top .42s cubic-bezier(.22, .61, .36, 1),
    background .3s ease,
    box-shadow .3s ease,
    transform .3s ease;
}

.cv-cases--interior
.swiper-slide:not(.swiper-slide-active)
.cv-featured-card {
    background: rgba(160, 160, 160, .55);
}

/* ---------------------------------------------------------
   5. ACTIVE CARDS
   --------------------------------------------------------- */

.cv-cases .swiper-slide-active .cv-featured-card {
    width: 499px;
    height: auto;
    min-height: 539px;

    margin-top: 0;
    padding: 22px 24px 70px;

    background: #f5f5f5;
}

.cv-cases--interior
.swiper-slide-active
.cv-featured-card {
    background: rgba(255, 255, 255, .65);
}

/* ---------------------------------------------------------
   6. IMAGES
   --------------------------------------------------------- */

.cv-cases .cv-featured-card__media,
.cv-cases .swiper-slide-active .cv-featured-card__media {
    position: relative;

    top: auto;
    bottom: auto;
    left: auto;
    right: auto;

    display: block;
    flex: 0 0 auto;

    width: 100%;
    height: 250px;

    margin: 0 0 22px;
    padding: 0;

    border-radius: 10px;
    overflow: hidden;
}

.cv-cases .swiper-slide-active
.cv-featured-card__media {
    height: 300px;
    margin-bottom: 24px;
}

.cv-cases .cv-featured-card__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .45s ease;
}

/* ---------------------------------------------------------
   7. CARD TITLES
   --------------------------------------------------------- */

.cv-cases .cv-featured-card h3,
.cv-cases .swiper-slide-prev .cv-featured-card h3,
.cv-cases .swiper-slide-next .cv-featured-card h3,
.cv-cases .swiper-slide-active .cv-featured-card h3 {
    position: relative;

    top: auto;
    bottom: auto;
    left: auto;
    right: auto;

    display: block;
    flex: 0 0 auto;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    font-size: 20px;
    line-height: 24px;
    font-weight: 500;

    color: #000;
    text-align: center;

    transform: none;
}

.cv-cases .swiper-slide-active
.cv-featured-card h3 {
    margin-bottom: 15px;
}

/* ---------------------------------------------------------
   8. DESCRIPTIONS
   --------------------------------------------------------- */

/* Неактивные карточки компактные */
.cv-cases .cv-featured-card__description {
    display: none;
}

/* Активная карточка — полный текст */
.cv-cases .swiper-slide-active
.cv-featured-card__description {
    position: relative;

    top: auto;
    bottom: auto;
    left: auto;
    right: auto;

    display: block;
    flex: 0 0 auto;

    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;

    margin: 0;
    padding: 0;

    overflow: visible;
    white-space: normal;
    text-overflow: clip;

    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    line-clamp: unset;

    opacity: 1;
    visibility: visible;

    font-size: 16px;
    line-height: 20px;
    font-weight: 400;

    color: #000;
    text-align: center;

    transform: none;
}

/* ---------------------------------------------------------
   9. FULL CARD LINKS
   --------------------------------------------------------- */

.cv-cases .cv-featured-card__link,
.cv-cases .swiper-slide-active
.cv-featured-card__link {
    position: absolute;
    z-index: 5;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    color: #000 !important;
    text-decoration: none;
}

/* Подпись показываем только у активной карточки */
.cv-cases .cv-featured-card__link span,
.cv-cases .cv-featured-card__link i {
    display: none;
}

.cv-cases .swiper-slide-active
.cv-featured-card__link span {
    position: absolute;

    right: 74px;
    bottom: 25px;

    display: block;

    font-size: 11px;
    line-height: 16px;
    white-space: nowrap;
}

.cv-cases .swiper-slide-active
.cv-featured-card__link i {
    position: absolute;

    right: 25px;
    bottom: 29px;

    display: block;
}

.cv-cases .cv-featured-card__link:focus-visible {
    outline: 3px solid #2189ff;
    outline-offset: -4px;
    border-radius: 5px;
}

/* ---------------------------------------------------------
   10. HOVER
   --------------------------------------------------------- */

@media (hover: hover) {

    .cv-cases .cv-featured-card:hover {
        transform: translateY(-5px);
    }

    .cv-cases .cv-featured-card:hover
    .cv-featured-card__media img {
        transform: scale(1.04);
    }

}

/* ---------------------------------------------------------
   11. CAROUSEL NAVIGATION
   --------------------------------------------------------- */

/* Стрелки могут быть абсолютными */
.cv-cases .cv-featured-carousel__arrow {
    position: absolute;
    z-index: 10;

    top: 230px;
    transform: translateY(-50%);
}

/* Desktop pagination изначально скрыта */
@media (min-width: 861px) {
    .cv-cases .cv-architecture-pagination,
    .cv-cases .cv-interior-pagination {
        display: none;
    }
}

/* ---------------------------------------------------------
   12. INTERIOR DECORATION
   --------------------------------------------------------- */

.cv-cases--interior .cv-interior__background {
    display: none;
}

.cv-cases--interior .cv-interior__glyph {
    position: absolute;
    z-index: 3;

    top: auto;
    bottom: 15px;
    left: auto;
    right: 8%;

    width: 190px;
    height: auto;
    max-width: none;

    pointer-events: none;

    transform: rotate(-8deg);
    animation: none;
}

/* =========================================================
   MOBILE — ARCHITECTURE + INTERIOR
   ========================================================= */

@media (max-width: 860px) {

    /* -----------------------------------------------------
       1. SECTIONS
       ----------------------------------------------------- */
    .cv-cases.cv-cases--architecture,
    .cv-cases.cv-cases--interior {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 42px 0 40px;

        overflow: hidden;
    }

    /* -----------------------------------------------------
       2. HEAD / BUTTON ORDER
       ----------------------------------------------------- */
    /*
     * display: contents позволяет кнопке
     * участвовать в порядке секции.
     */
    .cv-cases .cv-featured-head,
    .cv-cases .cv-featured-head--interior {
        display: contents;
    }

    .cv-cases .cv-featured-head .cv-title {
        position: relative;
        z-index: 2;

        order: 0;
        align-self: stretch;

        top: auto;
        bottom: auto;
        left: auto;
        right: auto;

        width: auto;
        height: auto;
        max-width: 100%;

        margin: 0 20px 24px;
        padding: 0;

        font-size: 18px;
        line-height: 22px;
        font-weight: 700;

        text-align: left;
        white-space: normal;

        transform: none;
    }

    /* -----------------------------------------------------
       3. CAROUSEL
       ----------------------------------------------------- */
    .cv-cases .cv-featured-carousel,
    .cv-cases .cv-featured-carousel--interior {
        position: relative;
        z-index: 2;

        order: 1;

        top: auto;
        bottom: auto;
        left: auto;
        right: auto;

        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 0;

        overflow: visible;
        transform: none;
    }

    .cv-cases .cv-architecture-swiper,
    .cv-cases .cv-interior-swiper {
        position: relative;

        top: auto;
        bottom: auto;
        left: auto;
        right: auto;

        width: min(362px, calc(100% - 40px));
        height: auto;
        min-height: 0;

        margin: 0 auto;
        padding: 0;

        overflow: hidden;
        transform: none;
    }

    .cv-cases .cv-architecture-swiper .swiper-wrapper,
    .cv-cases .cv-interior-swiper .swiper-wrapper {
        height: auto !important;
        min-height: 0;
        align-items: stretch;
    }

    .cv-cases .cv-architecture-swiper .swiper-slide,
    .cv-cases .cv-interior-swiper .swiper-slide {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100% !important;
        height: auto !important;
        min-height: 0;

        margin: 0;
        padding: 0;

        box-sizing: border-box;
    }

    /* -----------------------------------------------------
       4. MOBILE CARDS
       ----------------------------------------------------- */
    .cv-cases .cv-featured-card,
    .cv-cases .swiper-slide-active .cv-featured-card {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        flex: 1 0 auto;

        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 9px 9px 24px;

        box-sizing: border-box;
        overflow: visible;

        border-radius: 5px;
        transform: none;
    }

    /* Архитектурный фон */
    .cv-cases--architecture .cv-featured-card,
    .cv-cases--architecture
    .swiper-slide-active .cv-featured-card {
        background: #bababa;
    }

    /* Интерьерный фон */
    .cv-cases--interior .cv-featured-card,
    .cv-cases--interior
    .swiper-slide-active .cv-featured-card {
        background: rgba(255, 255, 255, .65);
    }

    /* -----------------------------------------------------
       5. IMAGES
       ----------------------------------------------------- */
    .cv-cases .cv-featured-card__media,
    .cv-cases .swiper-slide-active
    .cv-featured-card__media {
        position: relative;

        top: auto;
        left: auto;
        right: auto;
        bottom: auto;

        display: block;
        flex: 0 0 auto;

        width: 100%;
        height: 220px;

        margin: 0 0 17px;
        padding: 0;

        overflow: hidden;
    }

    .cv-cases--interior .cv-featured-card__media,
    .cv-cases--interior
    .swiper-slide-active .cv-featured-card__media {
        height: 250px;
    }

    .cv-cases .cv-featured-card__media img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    /* -----------------------------------------------------
       6. TITLES
       ----------------------------------------------------- */
    .cv-cases .cv-featured-card h3,
    .cv-cases .swiper-slide-active .cv-featured-card h3,
    .cv-cases .swiper-slide-prev .cv-featured-card h3,
    .cv-cases .swiper-slide-next .cv-featured-card h3 {
        position: relative;

        top: auto;
        bottom: auto;
        left: auto;
        right: auto;

        display: block;
        flex: 0 0 auto;

        width: 100%;
        height: auto;

        margin: 0 0 18px;
        padding: 0;

        font-size: 18px;
        line-height: 22px;
        font-weight: 700;

        text-align: center;
        transform: none;
    }

    /* -----------------------------------------------------
       7. FULL DESCRIPTIONS
       ----------------------------------------------------- */
    .cv-cases .cv-featured-card__description,
    .cv-cases .swiper-slide-active
    .cv-featured-card__description {
        position: relative;

        top: auto;
        bottom: auto;
        left: auto;
        right: auto;

        display: -webkit-box;
        flex: 0 0 auto;

        width: 100%;
        height: auto;
        min-height: 0;
        max-height: 114px;

        margin: 0;
        padding: 0 10px;

        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        line-clamp: 6;

        opacity: 1;
        visibility: visible;

        font-size: 14px;
        line-height: 19px;
        font-weight: 400;

        color: #000;
        text-align: center;

        transform: none;
    }


    /* -----------------------------------------------------
       8. FULL CARD CLICK
       ----------------------------------------------------- */
    .cv-cases .cv-featured-card__link,
    .cv-cases .swiper-slide-active
    .cv-featured-card__link {
        position: absolute;
        z-index: 5;
        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .cv-cases .cv-featured-card__link span,
    .cv-cases .cv-featured-card__link i,
    .cv-cases .swiper-slide-active .cv-featured-card__link span,
    .cv-cases .swiper-slide-active .cv-featured-card__link i {
        display: none !important;
    }

    /* -----------------------------------------------------
       9. PAGINATION
       ----------------------------------------------------- */
    /* Архитектурная — отдельный элемент секции */
    .cv-cases.cv-cases--architecture
    > .cv-architecture-pagination {
        position: relative !important;

        order: 2;
        align-self: center;

        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;

        display: flex;
        justify-content: center;
        align-items: center;

        width: 100% !important;
        height: auto;

        margin: 20px 0 0;
        padding: 0;
        gap: 15px;

        transform: none !important;
    }

    /* Интерьерная — внутри карусели */
    .cv-cases.cv-cases--interior
    .cv-interior-pagination {
        position: relative !important;

        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;

        display: flex;
        justify-content: center;
        align-items: center;

        width: 100% !important;
        height: auto;

        margin: 20px auto 0;
        padding: 0;
        gap: 15px;

        transform: none !important;
    }

    /* -----------------------------------------------------
       10. VIEW ALL BUTTONS
       ----------------------------------------------------- */
    .cv-cases.cv-cases--architecture
    .cv-featured-head__all,
    .cv-cases.cv-cases--interior
    .cv-featured-head__all {
        position: relative !important;
        z-index: 5;

        order: 3;
        align-self: center;

        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;

        display: flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 auto;

        width: 125px;
        height: 24px;

        margin: 24px auto 0 !important;
        padding: 0;

        font-size: 12px;
        line-height: 12px;

        border-radius: 10px;
        transform: none !important;
    }

    .cv-cases--architecture
    .cv-featured-head__all {
        background: #fff;
        color: #000 !important;
    }

    .cv-cases--interior
    .cv-featured-head__all {
        background: #000;
        color: #fff !important;
    }

    .cv-cases .cv-featured-head__all i {
        display: none;
    }

    /* -----------------------------------------------------
       11. HIDE DESKTOP DECOR / NAVIGATION
       ----------------------------------------------------- */
    .cv-cases .cv-featured-carousel__arrow,
    .cv-cases--interior .cv-interior__glyph,
    .cv-cases--interior .cv-interior__background {
        display: none;
    }

}


/* =========================================================
   CRYSTALVISION PRODUCTS — FLEXIBLE LAYOUT
   ========================================================= */

/* ---------------------------------------------------------
   1. SECTION
   --------------------------------------------------------- */

.cv-products {
    position: relative;

    width: 100%;
    height: auto;
    min-height: 0;

    padding: 100px 0 115px;

    overflow: hidden;
    box-sizing: border-box;
}

/* Декоративные слои остаются под контентом */

.cv-products__glow {
    z-index: 0;
    pointer-events: none;
}

.cv-products::before {
    z-index: 1;
    pointer-events: none;
}

.cv-products__inner {
    position: relative;
    z-index: 2;

    height: auto;
    min-height: 0;
}

/* ---------------------------------------------------------
   2. HEADING
   --------------------------------------------------------- */

.cv-products .cv-title {
    position: relative;

    top: auto;
    left: auto;

    width: auto;
    max-width: 100%;

    margin: 0 0 12px;

    font-size: 37px;
    line-height: 1.05;
}

.cv-products__lead {
    position: relative;

    top: auto;
    left: auto;

    width: auto;
    max-width: 850px;

    height: auto;

    margin: 0 0 0 27px;

    font-size: 18px;
    line-height: 1.25;
}

/* ---------------------------------------------------------
   3. FLEX GRID
   Three cards per desktop row
   --------------------------------------------------------- */

.cv-products__grid {
    --cv-product-width: 248px;
    --cv-product-gap: 70px;

    position: relative;

    top: auto;
    bottom: auto;
    left: auto;
    right: auto;

    display: flex;
    flex-wrap: wrap;

    justify-content: center;
    align-items: stretch;
    align-content: flex-start;

    width: min(1054px, 100%);
    height: auto;
    min-height: 0;

    margin: 55px auto 0;
    padding: 0;

    column-gap: var(--cv-product-gap);
    row-gap: 45px;
}

/* ---------------------------------------------------------
   4. CARDS
   Reset original nth-child positioning
   --------------------------------------------------------- */

.cv-products .cv-product-card,
.cv-products .cv-product-card:nth-child(n) {
    position: relative;

    top: auto;
    bottom: auto;
    left: auto;
    right: auto;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;

    flex: 0 0 var(--cv-product-width);

    width: var(--cv-product-width);
    max-width: 100%;

    height: auto;
    min-height: 179px;

    margin: 0;
    padding: 18px 16px;

    box-sizing: border-box;

    border: 1px solid transparent;
    border-radius: 5px;

    background: rgba(255, 255, 255, .23);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);

    box-shadow: 0 2px 0 rgba(0, 0, 0, .25);

    color: #fff;
    text-decoration: none;

    cursor: pointer;

    transition: opacity .45s ease,
    transform .35s cubic-bezier(.22, .61, .36, 1),
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

/* Card content */

.cv-products .cv-product-card h3 {
    width: 100%;
    height: auto;

    margin: 0 0 20px;
    padding: 0;

    font-size: 22px;
    line-height: 1.1;
    font-weight: 700;

    overflow-wrap: anywhere;
}

.cv-products .cv-product-card p {
    width: 100%;
    height: auto;

    margin: auto 0 0;
    padding: 0;

    font-size: 13px;
    line-height: 1.25;
    font-weight: 400;

    overflow-wrap: break-word;
}

/* ---------------------------------------------------------
   5. INTERACTION
   --------------------------------------------------------- */

.cv-products .cv-product-card:link,
.cv-products .cv-product-card:visited,
.cv-products .cv-product-card:hover,
.cv-products .cv-product-card:focus-visible {
    color: #fff;
    text-decoration: none;
}

.cv-products .cv-product-card--no-link {
    cursor: default;
}

/* Появление карточек */

.cv-products .cv-product-card {
    opacity: 0;
    transform: translateY(12px);
}

.cv-products.is-visible .cv-product-card {
    opacity: 1;
    transform: translateY(0);
}

/* Hover */

@media (hover: hover) and (pointer: fine) {

    .cv-products.is-visible
    .cv-product-card:not(.cv-product-card--no-link):hover {
        transform: translateY(-5px);

        border-color: #fff;
        background: rgba(255, 255, 255, .30);

        box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
    }
}

/* Keyboard navigation */

.cv-products .cv-product-card:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* ---------------------------------------------------------
   6. TABLET
   --------------------------------------------------------- */

@media (min-width: 861px) and (max-width: 1100px) {

    .cv-products {
        padding: 85px 0 95px;
    }

    .cv-products__grid {
        --cv-product-gap: 24px;

        margin-top: 45px;
        row-gap: 25px;
    }

    .cv-products .cv-product-card,
    .cv-products .cv-product-card:nth-child(n) {
        flex-basis: min(248px, calc((100% - 48px) / 3));
        width: min(248px, calc((100% - 48px) / 3));
    }
}

/* =========================================================
   7. MOBILE
   One card per row
   ========================================================= */

@media (max-width: 860px) {

    .cv-products {
        position: relative;

        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 42px 20px 35px;

        overflow: hidden;
        box-sizing: border-box;

        /* Сохраняем мобильный фон */
        background-color: #7590a9;
        background-image: url('../img/products-bg.webp');
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: auto 100%;
    }

    .cv-products::before,
    .cv-products__glow {
        display: none;
    }

    .cv-products .cv-products__inner {
        position: relative;

        width: 100%;
        height: auto;

        margin: 0;
        padding: 0;
    }

    /* Заголовок */
    .cv-products .cv-title {
        width: 100%;
        max-width: 100%;

        margin: 0;

        font-size: 18px;
        line-height: 18px;
    }

    .cv-products__lead {
        width: 100%;
        max-width: 100%;

        margin: 10px 0 0;

        font-size: 14px;
        line-height: 1.15;
    }

    /* Вертикальный список */
    .cv-products__grid {
        position: relative;

        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;

        width: 100%;
        height: auto;

        margin: 22px 0 0;
        padding: 0;

        gap: 18px;
    }

    /* Сброс ВСЕХ старых nth-child правил */
    .cv-products .cv-product-card,
    .cv-products .cv-product-card:nth-child(n) {
        position: relative;

        top: auto;
        bottom: auto;
        left: auto;
        right: auto;

        display: flex;
        flex-direction: column;
        justify-content: center;

        flex: 0 0 auto;

        width: 100%;
        max-width: none;

        height: auto;
        min-height: 100px;

        margin: 0;
        padding: 18px 12px;

        box-sizing: border-box;
    }

    .cv-products .cv-product-card h3 {
        width: 100%;
        margin: 0 0 10px;

        font-size: 18px;
        line-height: 20px;
    }

    .cv-products .cv-product-card p {
        width: 100%;

        margin: 0;

        font-size: 14px;
        line-height: 17px;
    }

    /* Сохраняем плавное появление */
    .cv-products.is-visible .cv-product-card {
        transform: none;
    }
}


/* =========================================================
   CRYSTALVISION PRODUCTS — DESKTOP BACKGROUND FIX
   ========================================================= */

@media (min-width: 861px) {

    .cv-products {
        position: relative;

        height: auto;
        min-height: 0;

        padding: 100px 0 115px;

        overflow: hidden;

        /*
         * Фон теперь принадлежит самой секции.
         * Он растягивается при добавлении рядов.
         */
        background-color: #000209;
        background-image: url('../img/products-bg.webp');

        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }

    /*
     * Убираем старое изображение с фиксированной
     * высотой 751px, чтобы не было двух фонов.
     */
    .cv-products::before {
        display: none;
    }

    /*
     * Отключаем декоративный слой,
     * который мог перекрывать изображение.
     */
    .cv-products__glow {
        display: none;
    }

    /*
     * Карточки остаются поверх background.
     */
    .cv-products__inner {
        position: relative;
        z-index: 2;
    }
}