:root {
        --font-montserrat: "Montserrat", Arial, sans-serif;
        --font-inter: "Inter", Arial, sans-serif;

        --black: #111111;
        --white: #ffffff;
        --blue: #0063ce;
        --assortment-blue: #0060ca;
        --ease: cubic-bezier(0.16, 1, 0.3, 1);

        --menu: 500 15px / 1 var(--font-montserrat);
        --text-3xl: 500 40px / 1.2 var(--font-montserrat);
        --text-2xl: 500 32px / 1.2 var(--font-montserrat);
        --text-1xl: 500 24px / 1.2 var(--font-montserrat);
        --text-xl: 500 20px / 1.2 var(--font-montserrat);
        --text-l: 400 18px / 1.3 var(--font-inter);
        --text-l-bold: 500 18px / 1.3 var(--font-inter);
        --text-m: 400 16px / 1.2 var(--font-inter);
        --text-s: 400 14px / 1.2 var(--font-inter);
        --caps-s: 600 13px / 1.3 var(--font-inter);
        --paragraph-2: 400 16px / 1.5 var(--font-inter);
        --button-m: 500 18px / 1 var(--font-montserrat);
        --button-s: 500 15px / 1 var(--font-montserrat);

        --container-padding: 20px;
        --card-column-width: calc((min(100vw, 2056px) - (var(--container-padding) * 2) - 60px) / 4);
      }

      @media (min-width: 1440px) {
        :root {
          --container-padding: 40px;
        }
      }

      @media (min-width: 1600px) {
        :root {
          --container-padding: 80px;
        }
      }

      @media (min-width: 1920px) {
        :root {
          --container-padding: 240px;
        }
      }

      @media (max-width: 767px) {
        :root {
          --text-3xl: 500 20px / 1.2 var(--font-montserrat);
          --text-2xl: 500 20px / 1.2 var(--font-montserrat);
          --text-1xl: 500 20px / 1.2 var(--font-montserrat);
          --text-xl: 500 18px / 1.2 var(--font-montserrat);
          --text-l: 400 14px / 1.3 var(--font-inter);
          --text-l-bold: 500 14px / 1.3 var(--font-inter);
          --text-m: 400 14px / 1.2 var(--font-inter);
          --text-s: 400 12px / 1.2 var(--font-inter);
          --caps-s: 600 12px / 1.3 var(--font-inter);
          --paragraph-2: 400 14px / 1.5 var(--font-inter);
          --button-m: 500 16px / 1 var(--font-montserrat);
          --button-s: 500 14px / 1 var(--font-montserrat);
          --container-padding: 16px;
        }
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        min-height: 100%;
      }

      body {
        margin: 0;
        color: var(--black);
        background: var(--white);
        font: var(--paragraph-2);
        overflow-x: hidden;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      button {
        font: inherit;
      }

      .page {
        min-height: 100%;
        background: var(--white);
      }

      .container {
        width: min(100%, 2056px);
        margin-right: auto;
        margin-left: auto;
        padding-right: var(--container-padding);
        padding-left: var(--container-padding);
      }

      .hero {
        position: relative;
        min-height: 100vh;
        overflow: hidden;
        color: var(--white);
        background: var(--blue);
      }

      .hero::before {
        position: absolute;
        inset: 0;
        content: "";
        background-image: var(--hero-image, url("../images/hero-desktop.webp"));
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }

      .hero::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 120px;
        content: "";
        background: var(--white);
        border-radius: 48px 48px 0 0;
      }

      .hero-inner {
        position: relative;
        z-index: 20;
        display: grid;
        min-height: 100vh;
        grid-template-rows: auto 1fr;
        pointer-events: none;
      }

      .header {
        position: fixed;
        z-index: 10;
        top: 0;
        left: 50%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        width: min(100%, 2056px);
        height: 96px;
        padding-right: var(--container-padding);
        padding-left: var(--container-padding);
        gap: 32px;
        transform: translateX(-50%);
        isolation: isolate;
        transition: color 240ms ease;
        pointer-events: auto;
      }

      .header::before {
        position: absolute;
        z-index: -1;
        top: 0;
        right: calc((100vw - 100%) / -2);
        bottom: 0;
        left: calc((100vw - 100%) / -2);
        content: "";
        background: var(--white);
        box-shadow: 0 1px 0 rgb(17 17 17 / 8%);
        transform: translateY(-100%);
        transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .header.is-light {
        color: var(--black);
      }

      .header.is-light::before {
        transform: translateY(0);
      }

      .main-nav {
        display: flex;
        align-items: center;
        gap: 20px;
        min-width: 0;
        color: var(--white);
        font: var(--menu);
        white-space: nowrap;
      }

      .main-nav a,
      .phone {
        position: relative;
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        transition: color 220ms ease;
      }

      .main-nav a::after,
      .phone::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        content: "";
        background: currentColor;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 240ms ease;
      }

      .main-nav a:hover::after,
      .phone:hover::after {
        transform: scaleX(1);
        transform-origin: left;
      }

      .header.is-light .main-nav,
      .header.is-light .header-actions {
        color: var(--black);
      }

      .header.is-light .main-nav a:hover,
      .header.is-light .phone:hover {
        color: var(--blue);
      }

      .logo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .logo picture {
        display: inline-flex;
      }

      .logo img {
        display: block;
        width: auto;
        height: 70px;
        transition: filter 240ms ease;
      }

      .header.is-light .logo img {
        filter: brightness(0) saturate(100%) invert(22%) sepia(91%) saturate(2732%) hue-rotate(201deg) brightness(96%) contrast(101%);
      }

      .header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 40px;
        min-width: 0;
        color: var(--white);
        font: var(--menu);
        white-space: nowrap;
      }

      .burger-button {
        display: none;
      }

      .contact-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        padding: 0 24px;
        color: var(--white);
        background: rgb(0 0 0 / 20%);
        border: 0;
        border-radius: 12px;
        -webkit-backdrop-filter: blur(36px);
        backdrop-filter: blur(36px);
        cursor: pointer;
        font: var(--button-s);
        transition: background-color 220ms ease;
      }

      .contact-button:hover {
        background: rgb(0 0 0 / 36%);
      }

      .header.is-light .contact-button {
        color: var(--white);
        background: rgb(0 99 206 / 100%);
      }

      .header.is-light .contact-button:hover {
        background: rgb(0 99 206 / 86%);
      }

      .header--technical {
        color: var(--black);
      }

      .header--technical::before {
        transform: translateY(0);
      }

      .header--technical .main-nav,
      .header--technical .header-actions {
        color: var(--black);
      }

      .header--technical .main-nav a:hover,
      .header--technical .phone:hover {
        color: var(--blue);
      }

      .header--technical .contact-button {
        color: var(--white);
        background: rgb(0 99 206 / 100%);
      }

      .header--technical .contact-button:hover {
        background: rgb(0 99 206 / 86%);
      }

      .header--technical .logo img {
        filter: brightness(0) saturate(100%) invert(22%) sepia(91%) saturate(2732%) hue-rotate(201deg) brightness(96%) contrast(101%);
      }

      .hero-title-wrap {
        align-self: start;
        width: min(710px, 100%);
        margin-top: 112px;
        pointer-events: auto;
      }

      .hero-title {
        margin: 0;
        font: var(--text-3xl);
        letter-spacing: -0.02em;
      }

      .production-card {
        align-self: end;
        width: min(538px, 100%);
        margin-bottom: 200px;
        pointer-events: auto;
      }

      .production-title {
        margin: 0 0 16px;
        font: var(--text-xl);
        letter-spacing: -0.02em;
      }

      .video-frame {
        position: relative;
        width: 100%;
        aspect-ratio: 538 / 326;
        overflow: hidden;
        background:
          linear-gradient(135deg, rgb(0 74 155 / 70%), rgb(17 17 17 / 88%)),
          var(--blue);
        border-radius: 16px;
        cursor: pointer;
      }

      .video-frame video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .video-frame video:not([src]) {
        display: none;
      }

      .play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 56px;
        height: 56px;
        transform: translate(-50%, -50%);
        pointer-events: none;
      }

      body.is-hero-video-open {
        overflow: hidden;
      }

      .hero-video-modal {
        position: fixed;
        z-index: 220;
        inset: 0;
        display: grid;
        visibility: hidden;
        place-items: center;
        padding: 56px;
        opacity: 0;
        pointer-events: none;
        transition:
          opacity 240ms ease,
          visibility 240ms ease;
      }

      .hero-video-modal.is-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
      }

      .hero-video-modal__overlay {
        position: absolute;
        inset: 0;
        background: rgb(0 0 0 / 86%);
        backdrop-filter: blur(10px);
      }

      .hero-video-modal__player {
        position: relative;
        z-index: 1;
        width: min(100%, 1180px);
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: var(--black);
        border-radius: 16px;
        box-shadow: 0 24px 90px rgb(0 0 0 / 34%);
      }

      .hero-video-modal__player video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .hero-video-modal__close {
        position: fixed;
        z-index: 2;
        top: 24px;
        right: 24px;
        width: 44px;
        height: 44px;
        padding: 0;
        background: rgb(255 255 255 / 14%);
        border: 1px solid rgb(255 255 255 / 22%);
        border-radius: 50%;
        cursor: pointer;
        backdrop-filter: blur(12px);
      }

      .hero-video-modal__close::before,
      .hero-video-modal__close::after {
        position: absolute;
        top: 20px;
        left: 12px;
        width: 20px;
        height: 2px;
        content: "";
        background: var(--white);
        border-radius: 2px;
      }

      .hero-video-modal__close::before {
        transform: rotate(45deg);
      }

      .hero-video-modal__close::after {
        transform: rotate(-45deg);
      }

      .assortment {
        position: relative;
        z-index: 2;
        margin-top: -120px;
        padding-top: 53px;
        padding-bottom: 0;
        background: var(--white);
        border-radius: 48px 48px 0 0;
      }

      .section-head {
        position: relative;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: 30px;
      }

      .section-title {
        margin: 0;
        color: var(--black);
        font: var(--text-2xl);
        letter-spacing: -0.02em;
      }

      .assortment-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--assortment-blue);
        font: var(--button-s);
        white-space: nowrap;
      }

      .assortment-link-icon,
      .slider-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #eaf4fe;
        transition:
          background-color 220ms ease,
          border-color 220ms ease,
          opacity 220ms ease;
      }

      .assortment-link-icon {
        width: 21px;
        height: 21px;
        border-radius: 24px;
      }

      .assortment-link-icon img {
        display: block;
        width: 21px;
        height: 21px;
        transition: filter 220ms ease;
      }

      .assortment-link:hover .assortment-link-icon {
        background: var(--assortment-blue);
      }

      .assortment-link:hover .assortment-link-icon img,
      .slider-button:hover img {
        filter: brightness(0) invert(1);
      }

      .slider-shell {
        position: relative;
        --card-width: calc((min(100vw, 2056px) - (var(--container-padding) * 2) - 60px) / 4);
        --photo-height: calc(var(--card-width) * 420 / 345);
      }

      .slider-viewport {
        overflow: hidden;
      }

      .assortment-track {
        display: grid;
        grid-auto-columns: calc((100% - 60px) / 4);
        grid-auto-flow: column;
        gap: 20px;
        transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
      }

      .assortment-card {
        min-width: 0;
      }

      .product-photo {
        position: relative;
        width: 100%;
        aspect-ratio: 345 / 420;
        overflow: hidden;
        background:
          linear-gradient(135deg, rgb(234 244 254 / 100%), rgb(236 236 236 / 100%));
        border-radius: 16px;
      }

      .product-photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .product-title {
        margin: 20px 0 0;
        font: var(--text-xl);
        letter-spacing: -0.02em;
      }

      .product-meta-label {
        margin-top: 20px;
        color: rgb(17 17 17 / 56%);
        font: var(--text-s);
      }

      .size-pill {
        display: inline-flex;
        align-items: center;
        min-height: 25px;
        padding: 0 8px;
        background: #f4f4f4;
        border-radius: 4px;
        color: var(--black);
        font: var(--caps-s);
        letter-spacing: -0.02em;
        text-transform: uppercase;
      }

      .size-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
      }

      .slider-button {
        position: absolute;
        z-index: 2;
        top: calc((var(--photo-height) / 2) - 28px);
        width: 56px;
        height: 56px;
        padding: 16px;
        background: #ececec;
        border: 2px solid var(--white);
        border-radius: 56px;
        cursor: pointer;
      }

      .slider-button img {
        display: block;
        width: 24px;
        height: 24px;
        transition: filter 220ms ease;
      }

      .slider-button:hover {
        background: var(--assortment-blue);
      }

      .slider-button.is-prev {
        left: -28px;
        transform: rotate(180deg);
      }

      .slider-button.is-next {
        right: -28px;
      }

      .slider-button[hidden] {
        display: none;
      }

      .slider-button:disabled {
        cursor: default;
        opacity: 0.4;
      }

      .comparison {
        padding: 160px 0 160px;
        background: var(--white);
      }

      .comparison-title {
        max-width: 1080px;
        margin: 0;
        color: var(--black);
        font: var(--text-3xl);
        letter-spacing: -0.02em;
      }

      .comparison-title span {
        color: var(--assortment-blue);
      }

      .comparison-grid {
        display: grid;
        grid-template-columns: 345px minmax(0, 710px) 365px;
        align-items: stretch;
        justify-content: space-between;
        gap: 32px;
        margin-top: 80px;
      }

      .regular-card {
        width: 345px;
        padding: 20px;
        background: #eaf4fe;
        border-radius: 16px;
      }

      .compare-heading {
        margin: 0;
        font: var(--text-1xl);
        letter-spacing: -0.02em;
      }

      .regular-list {
        display: grid;
        margin-top: 30px;
      }

      .regular-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 77px;
        grid-template-areas:
          "icon photo"
          "text photo";
        align-items: end;
        column-gap: 15px;
        row-gap: 12px;
        padding: 20px 0;
        border-bottom: 1px solid #d3e2f2;
      }

      .regular-item:first-child {
        padding-top: 0;
      }

      .regular-item:last-child {
        padding-bottom: 0;
        border-bottom: 0;
      }

      .regular-icon {
        grid-area: icon;
        display: block;
        width: 24px;
        height: 24px;
        align-self: start;
      }

      .regular-text {
        grid-area: text;
      }

      .regular-text,
      .dream-feature-text,
      .person-role,
      .person-quote {
        font: var(--text-s);
      }

      .regular-photo {
        grid-area: photo;
        align-self: end;
        width: 77px;
        height: 80px;
        overflow: hidden;
        background: #dbeeff;
        border-radius: 8px;
      }

      .regular-photo img,
      .comparison-photo img,
      .person-photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .comparison-photo {
        align-self: center;
        width: min(100%, 710px);
        aspect-ratio: 710 / 555;
        overflow: visible;
        background: linear-gradient(135deg, #eaf4fe, #f4f4f4);
        border-radius: 24px;
      }

      .comparison-scene {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: visible;
        outline: none;
        cursor: pointer;
        isolation: isolate;
      }

      .comparison-scene-back,
      .comparison-scene-front {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 24px;
      }

      .comparison-scene-front {
        z-index: 3;
      }

      .comparison-clouds {
        position: absolute;
        z-index: 2;
        inset: 0 10% 18%;
        pointer-events: none;
      }

      .comparison-clouds img {
        position: absolute;
        bottom: 38%;
        left: 50%;
        display: block;
        width: var(--cloud-size, 86px);
        height: auto;
        filter: drop-shadow(0 12px 22px rgb(0 96 202 / 16%));
        opacity: 0;
        transform: translate(calc(-50% + var(--cloud-x-start, 0px)), var(--cloud-y-start, 28px)) scale(.38);
        will-change: opacity, transform;
      }

      .comparison-clouds img:nth-child(1) { --cloud-size: 130px; --cloud-x-start: -78px; --cloud-x-mid: -128px; --cloud-x-end: -156px; --cloud-y-end: -238px; animation-delay: -.9s; }
      .comparison-clouds img:nth-child(2) { --cloud-size: 84px; --cloud-x-start: -18px; --cloud-x-mid: -8px; --cloud-x-end: -34px; --cloud-y-end: -286px; animation-delay: -.45s; }
      .comparison-clouds img:nth-child(3) { --cloud-size: 108px; --cloud-x-start: 58px; --cloud-x-mid: 92px; --cloud-x-end: 122px; --cloud-y-end: -250px; animation-delay: 0s; }
      .comparison-clouds img:nth-child(4) { --cloud-size: 70px; --cloud-x-start: -132px; --cloud-x-mid: -174px; --cloud-x-end: -196px; --cloud-y-end: -190px; animation-delay: .35s; }
      .comparison-clouds img:nth-child(5) { --cloud-size: 88px; --cloud-x-start: 122px; --cloud-x-mid: 156px; --cloud-x-end: 184px; --cloud-y-end: -212px; animation-delay: .7s; }
      .comparison-clouds img:nth-child(6) { --cloud-size: 64px; --cloud-x-start: 10px; --cloud-x-mid: 26px; --cloud-x-end: 6px; --cloud-y-end: -322px; animation-delay: 1.05s; }
      .comparison-clouds img:nth-child(7) { --cloud-size: 98px; --cloud-x-start: -42px; --cloud-x-mid: -82px; --cloud-x-end: -112px; --cloud-y-end: -206px; animation-delay: 1.4s; }
      .comparison-clouds img:nth-child(8) { --cloud-size: 74px; --cloud-x-start: 84px; --cloud-x-mid: 118px; --cloud-x-end: 142px; --cloud-y-end: -304px; animation-delay: 1.75s; }

      .comparison-scene:hover .comparison-clouds img,
      .comparison-scene:focus-visible .comparison-clouds img {
        animation-name: comparisonCloudFloat;
        animation-duration: 2.9s;
        animation-timing-function: cubic-bezier(.2, .68, .2, 1);
        animation-iteration-count: infinite;
      }

      @keyframes comparisonCloudFloat {
        0% {
          opacity: 0;
          transform: translate(calc(-50% + var(--cloud-x-start)), 34px) rotate(-2deg) scale(.34);
        }
        12% {
          opacity: .9;
        }
        54% {
          opacity: .62;
          transform: translate(calc(-50% + var(--cloud-x-mid)), calc(var(--cloud-y-end) * .55)) rotate(3deg) scale(.78);
        }
        100% {
          opacity: 0;
          transform: translate(calc(-50% + var(--cloud-x-end)), var(--cloud-y-end)) rotate(8deg) scale(1.08);
        }
      }

      .dream-card {
        display: flex;
        width: 365px;
        min-height: 100%;
        flex-direction: column;
        padding: 20px 0;
      }

      .dream-list {
        display: grid;
        gap: 10px;
        margin-top: 30px;
      }

      .dream-feature {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .dream-feature img {
        display: block;
        width: 21px;
        height: 21px;
        flex: 0 0 auto;
      }

      .person-dialog {
        display: grid;
        gap: 24px;
        margin-top: auto;
        padding-top: 48px;
      }

      .person-profile {
        display: grid;
        gap: 16px;
      }

      .person-photo {
        width: 100px;
        height: 110px;
        overflow: hidden;
        background: #eaf4fe;
        border-radius: 16px;
      }

      .person-name {
        margin: 0;
        font: var(--text-l-bold);
      }

      .person-role {
        margin-top: 4px;
        color: #777777;
      }

      .person-quote {
        margin: 0;
      }

      .oem-process {
        position: relative;
        height: calc(300vh + 608px);
        color: var(--white);
        background: var(--black);
      }

      .oem-sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
      }

      .oem-video,
      .oem-video video,
      .oem-video::before,
      .oem-video::after {
        position: absolute;
        right: 0;
        left: 0;
      }

      .oem-video {
        inset: 0;
        background: var(--blue);
      }

      .oem-video video {
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .oem-video::before,
      .oem-video::after {
        z-index: 1;
        content: "";
        pointer-events: none;
      }

      .oem-video::before {
        top: 0;
        height: 260px;
        background: linear-gradient(180deg, rgb(0 0 0 / 40%), rgb(0 0 0 / 0%));
      }

      .oem-video::after {
        bottom: 0;
        height: 390px;
        background: linear-gradient(0deg, rgb(0 0 0 / 60%), rgb(0 0 0 / 0%));
      }

      .oem-content {
        position: relative;
        z-index: 2;
        display: grid;
        min-height: 100vh;
        grid-template-columns: minmax(0, 1fr) 575px;
        gap: 48px;
        pointer-events: none;
      }

      .oem-copy {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 112px;
        padding-bottom: 80px;
      }

      .oem-title {
        max-width: 760px;
        margin: 0;
        font: var(--text-3xl);
        letter-spacing: -0.02em;
      }

      .oem-description {
        width: min(430px, 100%);
        margin: 0;
        font: var(--text-l);
      }

      .oem-card-stage {
        position: relative;
        min-height: 100vh;
        pointer-events: auto;
      }

      .oem-cards {
        position: absolute;
        top: 0;
        right: 135px;
        width: 440px;
        height: 100%;
        will-change: transform;
      }

      .oem-card {
        position: absolute;
        top: calc(50% - 170px + (var(--i) * (50vh + 152px)));
        right: 0;
        display: flex;
        width: 440px;
        height: 340px;
        flex-direction: column;
        padding: 30px;
        color: var(--black);
        background: var(--white);
        border-radius: 16px;
      }

      .oem-card-number {
        position: absolute;
        top: -24px;
        left: 50%;
        display: grid;
        width: 48px;
        height: 48px;
        place-items: center;
        color: var(--black);
        background: var(--white);
        border: 1px solid #f3f3f3;
        border-radius: 50%;
        font: var(--text-l-bold);
        transform: translateX(-50%);
      }

      .oem-card-title {
        margin: 0;
        font: var(--text-1xl);
        letter-spacing: -0.02em;
      }

      .oem-card-list {
        display: grid;
        gap: 4px;
        margin: 20px 0 0;
        padding: 0;
        color: #585858;
        font: var(--text-m);
        list-style: none;
      }

      .oem-card-list li {
        display: grid;
        grid-template-columns: 4px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
      }

      .oem-card-list li::before {
        width: 4px;
        height: 4px;
        content: "";
        background: var(--blue);
      }

      .oem-card-time {
        display: inline-flex;
        align-items: center;
        align-self: flex-start;
        justify-content: center;
        min-height: 40px;
        margin-top: auto;
        padding: 0 14px;
        color: var(--white);
        background: var(--blue);
        border-radius: 40px;
        font: var(--text-xl);
        letter-spacing: -0.02em;
      }

      .life-section {
        padding: 160px 0;
        background: var(--white);
      }

      .life-title {
        max-width: 1060px;
        margin: 0;
        font: var(--text-3xl);
        letter-spacing: -0.02em;
      }

      .life-slider {
        margin-top: 80px;
      }

      .life-slider .assortment-track {
        cursor: grab;
      }

      .life-slider .assortment-track:active {
        cursor: grabbing;
      }

      .life-card {
        min-width: 0;
      }

      .life-description {
        margin: 20px 0 0;
        color: #585858;
        font: var(--text-s);
      }

      .audience-section {
        padding: 0 0 160px;
        background: var(--white);
      }

      .audience-grid {
        display: grid;
        grid-template-columns: var(--card-column-width) var(--card-column-width) minmax(0, 1fr);
        gap: 20px;
        align-items: start;
      }

      .audience-intro {
        width: var(--card-column-width);
      }

      .audience-title {
        margin: 0;
        font: var(--text-2xl);
        letter-spacing: -0.02em;
      }

      .audience-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 62px;
        margin-top: 30px;
        padding: 0 24px;
        color: var(--white);
        background: var(--blue);
        border-radius: 12px;
        font: var(--button-m);
        transition: background-color 220ms ease;
      }

      .audience-button:hover {
        background: #004a9b;
      }

      .audience-preview {
        width: var(--card-column-width);
      }

      .audience-card-slider {
        display: none;
      }

      .audience-photo {
        width: 100%;
        aspect-ratio: 1;
        overflow: hidden;
        background: linear-gradient(135deg, #eaf4fe, #f4f4f4);
        border-radius: 16px;
      }

      .audience-photo img {
        display: block;
        width: 100%;
        height: 100%;
        opacity: 0;
        object-fit: cover;
        transition: opacity 220ms ease;
      }

      .audience-photo img.is-loaded {
        opacity: 1;
      }

      .audience-description {
        width: 100%;
        margin: 20px 0 0;
        color: #585858;
        font: var(--text-m);
      }

      .audience-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 20px;
      }

      .audience-list {
        display: grid;
        gap: 0;
      }

      .audience-item {
        display: flex;
        align-items: center;
        min-height: 50px;
        padding: 0;
        color: var(--black);
        background: transparent;
        border: 0;
        cursor: pointer;
        font: var(--text-xl);
        letter-spacing: -0.02em;
        text-align: left;
        transition: color 220ms ease;
      }

      .audience-item:hover,
      .audience-item.is-active {
        color: var(--blue);
      }

      .audience-item-icon {
        display: inline-flex;
        width: 26px;
        height: 26px;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
      }

      .audience-item-icon img {
        display: block;
        width: 26px;
        height: 26px;
      }

      .offers-section {
        position: relative;
        overflow: hidden;
        padding: 120px 0;
        color: var(--white);
        background: linear-gradient(180deg, #7cb3f0 0%, #024c9d 100%);
      }

      .offers-section::before {
        position: absolute;
        inset: -40%;
        content: "";
        background:
          radial-gradient(circle at 20% 20%, rgb(255 255 255 / 28%), transparent 28%),
          radial-gradient(circle at 80% 30%, rgb(124 179 240 / 42%), transparent 34%),
          radial-gradient(circle at 45% 85%, rgb(0 74 155 / 50%), transparent 38%);
        animation: gradientFlow 14s var(--ease) infinite alternate;
      }

      @keyframes gradientFlow {
        0% {
          transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1);
        }

        50% {
          transform: translate3d(4%, 3%, 0) rotate(8deg) scale(1.08);
        }

        100% {
          transform: translate3d(-2%, 5%, 0) rotate(-6deg) scale(1.04);
        }
      }

      .offers-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: var(--card-column-width) minmax(0, 1fr) minmax(0, 1fr);
        gap: 20px;
        align-items: stretch;
      }

      .offers-cards {
        display: contents;
      }

      .offers-quote {
        width: 279px;
        color: var(--white);
      }

      .offers-quote .person-role {
        color: rgb(255 255 255 / 70%);
      }

      .offer-card {
        display: flex;
        min-height: 520px;
        flex-direction: column;
        padding: 30px;
        color: var(--black);
        background: rgb(255 255 255 / 92%);
        border-radius: 16px;
      }

      .offer-title {
        margin: 0;
        font: var(--text-2xl);
        letter-spacing: -0.02em;
      }

      .offer-subtitle {
        margin: 20px 0 0;
        font: var(--text-l);
      }

      .offer-list {
        display: grid;
        gap: 4px;
        margin: 20px 0 0;
        padding: 0;
        color: #585858;
        font: var(--text-m);
        list-style: none;
      }

      .offer-list li {
        display: grid;
        grid-template-columns: 4px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
      }

      .offer-list li::before {
        width: 4px;
        height: 4px;
        content: "";
        background: var(--blue);
      }

      .offer-button {
        display: inline-flex;
        align-items: center;
        align-self: flex-start;
        justify-content: center;
        height: 54px;
        margin-top: auto;
        padding: 0 24px;
        color: var(--white);
        background: #004a9b;
        border-radius: 12px;
        font: var(--button-m);
      }

      .features-section {
        padding: 160px 0;
        background: var(--white);
      }

      .footer {
        padding: 0 0 48px;
        background: var(--white);
      }

      .footer-grid {
        display: grid;
        grid-template-columns: var(--card-column-width) var(--card-column-width) minmax(0, 1fr);
        column-gap: 20px;
        row-gap: 0;
      }

      .footer-cta {
        width: 475px;
        max-width: 100%;
        grid-column: 1 / 2;
        text-align: left;
      }

      .footer-cta-title {
        margin: 0;
        font: var(--text-2xl);
        letter-spacing: -0.02em;
      }

      .footer-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 62px;
        margin-top: 30px;
        padding: 0 24px;
        color: var(--white);
        background: #004a9b;
        border-radius: 12px;
        font: var(--button-m);
        transition: background-color 220ms ease;
      }

      .footer-button:hover {
        background: var(--blue);
      }

      .footer-main {
        display: grid;
        grid-column: 3 / 4;
      }

      .footer-nav {
        display: grid;
        gap: 0;
        align-content: start;
        grid-auto-rows: max-content;
        justify-items: start;
      }

      .footer-nav a {
        font: var(--text-2xl);
        letter-spacing: -0.02em;
        line-height: 1.2;
        transition: color 220ms ease;
      }

      .footer-nav a:hover {
        color: var(--blue);
      }

      .footer-nav a:not(:last-child) {
        margin-bottom: 6px;
      }

      .footer-contacts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        margin-top: 80px;
      }

      .footer-block-label {
        color: #666666;
        font: var(--caps-s);
        letter-spacing: -0.02em;
        text-transform: uppercase;
      }

      .footer-block-value {
        margin-top: 8px;
        font: var(--text-l-bold);
        transition: color 220ms ease;
      }

      .footer-contacts > div:hover .footer-block-value,
      .footer-address:hover .footer-block-value {
        color: var(--blue);
      }

      .footer-address {
        margin-top: 80px;
      }

      .footer-bottom {
        display: grid;
        grid-column: 1 / 4;
        grid-template-columns: var(--card-column-width) var(--card-column-width) minmax(0, 1fr);
        gap: 20px;
        align-items: end;
        margin-top: 80px;
      }

      .footer-copy,
      .footer-policy {
        color: #666666;
        font: var(--text-s);
      }

      .footer-policy {
        grid-column: 3 / 4;
        transition: color 220ms ease;
      }

      .footer-policy:hover {
        color: var(--blue);
      }

      .technical-page {
        padding: 92px 0 160px;
        background: var(--white);
      }

      .breadcrumbs {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        color: #666666;
        font: var(--text-s);
      }

      .breadcrumbs a {
        color: #666666;
      }

      .technical-title {
        width: min(100%, 980px);
        margin: 60px auto 0;
        font: var(--text-3xl);
        letter-spacing: -0.02em;
        text-align: center;
      }

      .technical-content {
        width: min(100%, 820px);
        margin: 80px auto 0;
        font: var(--paragraph-2);
      }

      .technical-content > *:first-child {
        margin-top: 0;
      }

      .technical-content > *:last-child {
        margin-bottom: 0;
      }

      .technical-content h2,
      .technical-content h3 {
        margin: 48px 0 16px;
        font: var(--text-xl);
        letter-spacing: -0.02em;
      }

      .technical-content p,
      .technical-content ul,
      .technical-content ol {
        margin: 0 0 18px;
      }

      .technical-content ul,
      .technical-content ol {
        padding-left: 1.3em;
      }

      .cookie-popup {
        position: fixed;
        z-index: 180;
        right: 20px;
        bottom: 20px;
        display: grid;
        width: min(420px, calc(100vw - 40px));
        gap: 16px;
        padding: 20px;
        background: var(--white);
        border: 1px solid rgb(17 17 17 / 8%);
        border-radius: 16px;
        box-shadow: 0 16px 60px rgb(0 0 0 / 14%);
      }

      .cookie-popup[hidden] {
        display: none;
      }

      .cookie-popup p {
        margin: 0;
        color: var(--black);
        font: var(--text-s);
      }

      .cookie-popup button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        justify-self: start;
        height: 44px;
        padding: 0 20px;
        color: var(--white);
        background: var(--blue);
        border: 0;
        border-radius: 12px;
        cursor: pointer;
        font: var(--button-s);
      }

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

      .request-modal {
        position: fixed;
        z-index: 200;
        inset: 0;
        display: grid;
        visibility: hidden;
        place-items: center;
        padding: 20px;
        opacity: 0;
        pointer-events: none;
        transition:
          opacity 240ms ease,
          visibility 240ms ease;
      }

      .request-modal.is-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
      }

      .request-modal__overlay {
        position: absolute;
        inset: 0;
        background: rgb(0 0 0 / 48%);
        backdrop-filter: blur(8px);
      }

      .request-modal__dialog {
        position: relative;
        width: min(100%, 520px);
        padding: 34px;
        background: var(--white);
        border-radius: 16px;
        box-shadow: 0 24px 80px rgb(0 0 0 / 18%);
        transform: translateY(16px) scale(0.98);
        transition: transform 240ms ease;
      }

      .request-modal.is-open .request-modal__dialog {
        transform: translateY(0) scale(1);
      }

      .request-modal__close {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 34px;
        height: 34px;
        padding: 0;
        background: #f4f4f4;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
      }

      .request-modal__close::before,
      .request-modal__close::after {
        position: absolute;
        top: 16px;
        left: 9px;
        width: 16px;
        height: 2px;
        content: "";
        background: var(--black);
        border-radius: 2px;
      }

      .request-modal__close::before {
        transform: rotate(45deg);
      }

      .request-modal__close::after {
        transform: rotate(-45deg);
      }

      .request-modal__title {
        margin: 0 48px 26px 0;
        font: var(--text-2xl);
        letter-spacing: -0.02em;
      }

      .request-form {
        display: grid;
        gap: 14px;
      }

      .request-field {
        display: grid;
        gap: 8px;
        color: #666666;
        font: var(--caps-s);
        letter-spacing: -0.02em;
        text-transform: uppercase;
      }

      .request-field input {
        width: 100%;
        height: 56px;
        padding: 0 16px;
        color: var(--black);
        background: #f4f4f4;
        border: 1px solid transparent;
        border-radius: 12px;
        font: var(--text-m);
        outline: 0;
        transition:
          background 180ms ease,
          border-color 180ms ease;
      }

      .request-field input:focus {
        background: var(--white);
        border-color: var(--blue);
      }

      .request-submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 62px;
        margin-top: 8px;
        padding: 0 24px;
        color: var(--white);
        background: #004a9b;
        border: 0;
        border-radius: 12px;
        cursor: pointer;
        font: var(--button-m);
      }

      .request-consent {
        max-width: 390px;
        margin: 0;
        color: #777777;
        font: var(--text-xs);
      }

      .request-status {
        margin: 0;
        color: var(--blue);
        font: var(--text-s-bold);
      }

      .reveal {
        --reveal-x: 0px;
        --reveal-y: 78px;
        --reveal-scale: 0.985;
        --reveal-delay: 0s;
        opacity: 0;
        filter: blur(12px);
        transform: translate3d(var(--reveal-x), var(--reveal-y), 0) scale(var(--reveal-scale));
        transition:
          opacity 1.25s var(--ease) var(--reveal-delay),
          filter 1.25s var(--ease) var(--reveal-delay),
          transform 1.35s var(--ease) var(--reveal-delay);
      }

      .reveal.is-visible {
        --reveal-y: 0px;
        --reveal-scale: 1;
        opacity: 1;
        filter: blur(0);
      }

      .assortment-card.reveal,
      .life-card.reveal {
        --reveal-y: 96px;
        --reveal-scale: 0.94;
      }

      .assortment-card.reveal.is-visible,
      .life-card.reveal.is-visible {
        --reveal-y: 0px;
        --reveal-scale: 1;
      }

      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
          transition-duration: 0.01ms !important;
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
        }

        .reveal,
        .reveal > * {
          opacity: 1;
          filter: none;
          clip-path: none;
          transform: none;
        }
      }

      @media (max-width: 1080px) {
        .header {
          grid-template-columns: 1fr auto;
          gap: 24px;
        }

        .main-nav {
          display: none;
        }

        .logo {
          justify-content: flex-start;
        }

        .header-actions {
          gap: 18px;
        }

        .production-card {
          margin-bottom: 176px;
        }

        .comparison {
          padding-top: 96px;
        }

        .comparison-grid {
          grid-template-columns: 1fr;
          gap: 32px;
          margin-top: 48px;
        }

        .regular-card,
        .dream-card,
        .comparison-photo {
          width: 100%;
        }

        .comparison-photo {
          order: -1;
        }

        .oem-process {
          height: auto;
        }

        .oem-sticky {
          position: relative;
          min-height: auto;
        }

        .oem-content {
          grid-template-columns: 1fr;
          gap: 40px;
          padding-top: 96px;
          padding-bottom: 96px;
        }

        .oem-copy {
          min-height: auto;
          gap: 48px;
          padding: 0;
        }

        .oem-card-stage {
          min-height: auto;
          margin-right: 0;
        }

        .oem-cards {
          position: relative;
          display: grid;
          width: 100%;
          gap: 28px;
          height: auto;
          right: auto;
          transform: none !important;
        }

        .oem-card {
          position: relative;
          top: auto;
          width: min(100%, 440px);
          height: auto;
          min-height: 360px;
        }

        .life-slider {
          margin-top: 48px;
        }

        .audience-grid {
          grid-template-columns: 1fr;
        }

        .audience-intro,
        .audience-preview,
        .audience-description,
        .audience-photo {
          width: min(100%, 345px);
        }

        .offers-grid {
          grid-template-columns: 1fr;
        }

        .offers-quote {
          width: min(100%, 345px);
        }

        .offer-card {
          min-height: 420px;
        }

        .footer-grid,
        .footer-bottom {
          grid-template-columns: 1fr;
        }

        .footer-cta,
        .footer-main,
        .footer-nav,
        .footer-contacts,
        .footer-address,
        .footer-bottom,
        .footer-policy {
          grid-column: auto;
        }

        .footer-contacts {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 767px) {
        :root {
          --container-padding: 12px;
        }

        html,
        body {
          width: 100%;
          max-width: 100%;
          overflow-x: hidden;
        }

        .page {
          width: 100%;
          overflow-x: hidden;
        }

        .reveal {
          opacity: 1;
          filter: none;
          transform: none;
          transition: none;
        }

        .reveal > * {
          opacity: 1;
          filter: none;
          transform: none;
        }

        .hero::before {
          background-image: var(--hero-image-mobile, url("../images/hero-mobile.webp"));
          background-position: center;
        }

        .hero {
          min-height: 460px;
          margin-top: 64px;
          margin-bottom: calc(40px + 16px + 18px + ((100vw - 24px) * 326 / 538) + 80px);
          overflow: visible;
        }

        .hero::after {
          display: none;
        }

        .assortment {
          margin-top: 0;
          padding-top: 0;
          border-radius: 0;
        }

        .hero-inner {
          min-height: 460px;
          grid-template-rows: 1fr;
        }

        .header {
          z-index: 100;
          top: 0;
          grid-template-columns: auto auto;
          justify-content: space-between;
          width: 100%;
          height: 76px;
          padding-right: 12px;
          padding-left: 12px;
          gap: 16px;
          color: var(--black);
          background: var(--white);
          box-shadow: 0 1px 0 rgb(17 17 17 / 8%);
        }

        .header::before {
          display: none;
        }

        .logo {
          justify-content: flex-start;
        }

        .logo img {
          height: 60px;
          filter: none !important;
        }

        .header-actions {
          justify-content: flex-end;
          gap: 0;
          color: var(--black);
        }

        .phone,
        .contact-button {
          display: none;
        }

        .burger-button {
          display: inline-flex;
          width: 44px;
          height: 44px;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 6px;
          padding: 0;
          background: transparent;
          border: 0;
          cursor: pointer;
        }

        .burger-button span {
          display: block;
          width: 24px;
          height: 2px;
          background: var(--black);
          border-radius: 2px;
          transition: transform 220ms ease, opacity 220ms ease;
        }

        .header.is-menu-open .burger-button span:first-child {
          transform: translateY(4px) rotate(45deg);
        }

        .header.is-menu-open .burger-button span:last-child {
          transform: translateY(-4px) rotate(-45deg);
        }

        .header.is-menu-open .main-nav {
          position: absolute;
          top: 100%;
          right: 0;
          left: 0;
          display: grid;
          gap: 0;
          padding: 18px 12px 22px;
          color: var(--black);
          background: var(--white);
          box-shadow: 0 16px 28px rgb(17 17 17 / 10%);
          white-space: normal;
        }

        .header.is-menu-open .main-nav a {
          min-height: 44px;
          justify-content: flex-start;
          border-bottom: 1px solid #ececec;
          font: var(--text-xl);
          letter-spacing: -0.02em;
        }

        .header.is-menu-open .main-nav a:last-child {
          border-bottom: 0;
        }

        body.is-mobile-menu-open {
          overflow: hidden;
        }

        .hero-title-wrap {
          width: 100%;
          margin-top: 40px;
        }

        .production-card {
          position: absolute;
          top: calc(100% + 40px);
          right: 12px;
          left: 12px;
          width: auto;
          margin-bottom: 0;
          color: var(--black);
        }

        .hero-video-modal {
          padding: 64px 12px 24px;
        }

        .hero-video-modal__player {
          border-radius: 12px;
        }

        .hero-video-modal__close {
          top: 16px;
          right: 12px;
        }

        .production-title {
          margin-bottom: 16px;
        }

        .section-head {
          align-items: flex-start;
          flex-direction: column;
          gap: 16px;
        }

        .assortment-link {
          display: none;
        }

        .slider-shell {
          max-width: 100%;
          overflow: hidden;
        }

        .slider-viewport {
          width: calc(100% + 24px);
          max-width: none;
          overflow-x: auto;
          overflow-y: hidden;
          margin-right: -12px;
          margin-left: -12px;
          padding-right: 12px;
          padding-left: 12px;
          overscroll-behavior-x: contain;
          scroll-padding-right: 12px;
          scroll-padding-left: 12px;
          scroll-snap-type: x mandatory;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
        }

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

        .assortment-track {
          grid-auto-columns: min(320px, calc(100vw - 24px));
          gap: 10px;
          transform: none !important;
          transition: none;
        }

        .assortment-card,
        .life-card {
          width: min(320px, calc(100vw - 24px));
          scroll-snap-align: start;
          scroll-snap-stop: always;
        }

        .slider-button {
          display: none;
        }

        .comparison {
          padding: 80px 0 0;
        }

        .comparison-grid {
          display: grid;
          gap: 0;
          align-items: start;
          margin-top: 20px;
        }

        .regular-card {
          order: 1;
          width: 100%;
          padding: 20px;
          overflow: hidden;
        }

        .regular-list {
          display: grid;
          grid-auto-columns: 245px;
          grid-auto-flow: column;
          gap: 10px;
          overflow-x: auto;
          overflow-y: hidden;
          width: 100%;
          margin-right: 0;
          margin-left: 0;
          padding-right: 20px;
          padding-left: 0;
          margin-top: 20px;
          scroll-padding-right: 20px;
          scroll-padding-left: 0;
          scroll-snap-type: x mandatory;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
        }

        .regular-list::-webkit-scrollbar {
          display: none;
        }

        .regular-item {
          width: 245px;
          height: 200px;
          grid-template-columns: 1fr;
          grid-template-rows: 24px auto 1fr 80px;
          grid-template-areas:
            "icon"
            "text"
            "."
            "photo";
          row-gap: 0;
          padding: 0;
          border-bottom: 0;
          scroll-snap-align: start;
          scroll-snap-stop: always;
        }

        .regular-icon {
          align-self: start;
        }

        .regular-text {
          margin-top: 20px;
        }

        .regular-photo {
          align-self: end;
        }

        .comparison-photo {
          order: 2;
          margin-top: 20px;
        }

        .dream-card {
          order: 3;
          width: 100%;
          min-height: 0;
          margin-top: 20px;
          padding: 0;
        }

        .dream-list {
          margin-top: 30px;
        }

        .person-dialog {
          margin-top: 40px;
          padding-top: 0;
        }

        .oem-process {
          padding: 80px 0 0;
          color: var(--black);
          background: var(--white);
        }

        .oem-sticky {
          display: flex;
          overflow: visible;
          flex-direction: column;
        }

        .oem-content {
          display: contents;
          padding: 0;
        }

        .oem-copy {
          order: 1;
          gap: 0;
          padding: 0 12px;
          color: var(--black);
        }

        .oem-description {
          width: 100%;
          margin: 15px 0 0;
        }

        .oem-video {
          position: relative;
          order: 2;
          inset: auto;
          width: 100vw;
          max-width: none;
          aspect-ratio: 1 / 1;
          height: auto;
          margin: 20px 0 0 50%;
          overflow: hidden;
          border-radius: 0;
          transform: translateX(-50%);
        }

        .oem-video video {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
        }

        .oem-video::before,
        .oem-video::after {
          display: none;
        }

        .oem-card-stage {
          order: 3;
          width: 100%;
          min-height: 376px;
          margin-top: -124px;
          padding: 0;
          overflow-x: auto;
          overflow-y: visible;
          overscroll-behavior-x: contain;
          scroll-padding-right: 12px;
          scroll-padding-left: 12px;
          scroll-snap-type: x mandatory;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
        }

        .oem-cards {
          display: grid;
          grid-auto-columns: min(320px, calc(100vw - 24px));
          grid-auto-flow: column;
          gap: 10px;
          overflow: visible;
          width: max-content;
          min-height: 376px;
          margin-right: 0;
          margin-left: 0;
          padding: 24px 12px 32px;
        }

        .oem-card-stage::-webkit-scrollbar {
          display: none;
        }

        .oem-card {
          width: min(320px, calc(100vw - 24px));
          max-width: 100%;
          height: 320px;
          min-height: 320px;
          padding: 36px 15px 15px;
          box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
          transform: translateZ(0);
          scroll-snap-align: start;
          scroll-snap-stop: always;
        }

        .life-section {
          padding: 80px 0 96px;
        }

        .life-slider {
          margin-top: 20px;
        }

        .audience-section {
          padding: 0 0 80px;
        }

        .audience-grid {
          display: flex;
          flex-direction: column;
        }

        .audience-intro {
          display: contents;
        }

        .audience-title {
          order: 1;
          margin-bottom: 20px;
        }

        .audience-button {
          order: 3;
          width: 100%;
          margin-top: 20px;
        }

        .audience-preview,
        .audience-list {
          display: none;
        }

        .audience-card-slider {
          order: 2;
          display: block;
          width: calc(100% + 24px);
          max-width: none;
          margin: 0 -12px;
          overflow-x: auto;
          overflow-y: hidden;
          padding: 0 12px;
          overscroll-behavior-x: contain;
          scroll-padding-right: 12px;
          scroll-padding-left: 12px;
          scroll-snap-type: x mandatory;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
        }

        .audience-card-slider::-webkit-scrollbar {
          display: none;
        }

        .audience-card-track {
          display: grid;
          grid-auto-columns: min(320px, calc(100vw - 24px));
          grid-auto-flow: column;
          gap: 10px;
        }

        .audience-card {
          width: min(320px, calc(100vw - 24px));
          scroll-snap-align: start;
          scroll-snap-stop: always;
        }

        .audience-card .audience-photo {
          width: 100%;
        }

        .offers-section {
          overflow: visible;
          padding: 80px 0;
          color: var(--black);
          background: var(--white);
        }

        .offers-section::before {
          display: none;
        }

        .offers-grid {
          display: flex;
          flex-direction: column;
          gap: 0;
        }

        .offers-quote {
          order: 1;
          width: 100%;
          color: var(--black);
        }

        .offers-quote .person-dialog {
          justify-items: center;
          margin-top: 0;
          text-align: center;
        }

        .offers-quote .person-profile {
          justify-items: center;
        }

        .offers-quote .person-quote {
          max-width: 320px;
          font-size: 16px;
          line-height: 1.2;
        }

        .offers-quote .person-role {
          color: #777777;
        }

        .offers-cards {
          position: relative;
          order: 2;
          display: grid;
          gap: 10px;
          margin: 40px -12px 0;
          overflow: hidden;
          padding: 40px 12px;
          background: linear-gradient(180deg, #7cb3f0 0%, #024c9d 100%);
        }

        .offers-cards::before {
          position: absolute;
          inset: -40%;
          content: "";
          background:
            radial-gradient(circle at 20% 20%, rgb(255 255 255 / 28%), transparent 28%),
            radial-gradient(circle at 80% 30%, rgb(124 179 240 / 42%), transparent 34%),
            radial-gradient(circle at 45% 85%, rgb(0 74 155 / 50%), transparent 38%);
          animation: gradientFlow 14s var(--ease) infinite alternate;
        }

        .offers-cards .offer-card {
          position: relative;
          z-index: 1;
          padding: 20px;
        }

        .features-section {
          padding: 0 0 80px;
        }

        .footer {
          padding: 0 0 40px;
        }

        .technical-page {
          padding: 84px 0 80px;
        }

        .technical-title {
          margin-top: 60px;
          text-align: center;
        }

        .technical-content {
          margin-top: 80px;
        }

        .cookie-popup {
          right: 20px;
          bottom: 20px;
          width: calc(100vw - 40px);
        }

        .footer-grid {
          display: block;
        }

        .footer-cta {
          width: 100%;
        }

        .footer-cta-title {
          max-width: 100%;
          overflow-wrap: anywhere;
        }

        .footer-button {
          width: 100%;
          margin-top: 30px;
        }

        .footer-main {
          display: block;
          margin-top: 30px;
        }

        .footer-nav {
          display: none;
        }

        .footer-contacts {
          display: grid;
          grid-template-columns: 1fr;
          gap: 15px;
          margin-top: 0;
        }

        .footer-address {
          margin-top: 15px;
        }

        .footer-block-label {
          font-size: 12px;
          line-height: 1.3;
        }

        .footer-block-value {
          max-width: 100%;
          overflow-wrap: anywhere;
        }

        .footer-bottom {
          display: grid;
          grid-template-columns: 1fr;
          gap: 15px;
          margin-top: 30px;
        }

        .footer-policy {
          grid-column: auto;
        }

        .request-modal {
          align-items: center;
          padding: 12px;
        }

        .request-modal__dialog {
          padding: 28px 20px 22px;
          border-radius: 16px;
        }

        .request-modal__title {
          margin-bottom: 22px;
          font: var(--text-2xl);
        }

        .request-field input {
          height: 54px;
        }

        .request-submit {
          height: 56px;
        }

      }

      @media (max-width: 420px) {
        .header {
          grid-template-columns: auto auto;
        }

        .header-actions {
          display: flex;
        }

        .production-card {
          margin-bottom: 0;
        }
      }