@font-face {
    font-family: 'Futura Cyrillic Extra';
    src: url('../fonts/FuturaCyrillic-ExtraBold.eot');
    src: url('../fonts/FuturaCyrillic-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/FuturaCyrillic-ExtraBold.woff2') format('woff2'),
        url('../fonts/FuturaCyrillic-ExtraBold.woff') format('woff'),
        url('../fonts/FuturaCyrillic-ExtraBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fazer';
    src: url('../fonts/Fazer-Medium.eot');
    src: url('../fonts/Fazer-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Fazer-Medium.woff2') format('woff2'),
        url('../fonts/Fazer-Medium.woff') format('woff'),
        url('../fonts/Fazer-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fazer';
    src: url('../fonts/Fazer-SemiBold.eot');
    src: url('../fonts/Fazer-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Fazer-SemiBold.woff2') format('woff2'),
        url('../fonts/Fazer-SemiBold.woff') format('woff'),
        url('../fonts/Fazer-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --white: #FFFFFF;
    --black-100: #090909;
    --black-200: #1a1a1a;
    --gray-100: #F7F7F7;
    --gray-400: #949494;
    --red: #F74E2F;
    --font-heading: 'Futura Cyrillic Extra';
    --font-body: 'Fazer';
    /*inner page*/
    --figma-max-width: 1728px;
    --figma-h-padding: 164px;
    --figma-h-padding-medium: 80px;
    --figma-h-padding-mobile: 16px;
    --figma-nav-padding-y: 30px;
    --figma-nav-gap: 56px;
    --figma-nav-cta-width: 209px;
    --figma-nav-cta-height: 56px;
    --figma-nav-cta-radius: 12px;
    --figma-hero-title-size: 56px;
    --figma-hero-body-size: 16px;
    --figma-section-title-size: 56px;
    --figma-pill-gap: 32px;
    --figma-pill-gap-between: 124px;
    --figma-pill-radius: 40px;
    --figma-pill-text-size: 18px;
    --figma-pill-icon-size: 56px;
    --figma-color-white: #FFFFFF;
    --figma-color-black: #000000;
    --figma-color-soft: #F7F7F7;
    --figma-color-bg-alt: #F8F8F8;
    --figma-color-brand: #F74E2F;
    --figma-color-logo: #090909;
    --btn-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --btn-ease-snap: cubic-bezier(0.34, 1.2, 0.64, 1);
    --btn-shadow-sm:
        0 2px 8px rgba(9, 9, 9, 0.12),
        0 1px 3px rgba(9, 9, 9, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --btn-shadow-lift:
        0 20px 50px -12px rgba(9, 9, 9, 0.4),
        0 10px 28px rgba(9, 9, 9, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.06);
    --btn-shadow-lift-glow:
        0 20px 50px -12px rgba(9, 9, 9, 0.38),
        0 12px 32px rgba(9, 9, 9, 0.2),
        0 0 40px rgba(247, 78, 47, 0.12);
    --btn-shadow-press:
        0 2px 8px rgba(9, 9, 9, 0.2),
        inset 0 2px 4px rgba(0, 0, 0, 0.25);
    --btn-focus-ring: 0 0 0 3px rgba(247, 78, 47, 0.5);
}

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--black-100);
    background: var(--white);
    overflow-x: hidden;
}

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

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* =============================================
   NAV
   ============================================= */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 19px 164px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.nav.nav--hidden {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

nav.nav {
    backdrop-filter: blur(24px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);
}

nav.nav img.nav__logo-img {
    width: 150px;
    height: 25.5px;
}

.nav.nav--dark::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 100%);
}

.nav__logo,
.nav__links,
.nav__cta {
    position: relative;
    z-index: 2;
}

.nav__logo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 26px;
    line-height: 0.8em;
    text-transform: uppercase;
    color: var(--black-100);
    transition: color 0.4s ease;
}

.nav.nav--dark .nav__logo {
    color: var(--white);
}

.nav__links {
    display: flex;
    gap: 56px;
}

.nav__link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.2em;
    color: var(--black-100);
    transition: color 0.7s ease, opacity 0.7s ease;
}

.nav__link:hover {
    opacity: 0.6;
}

.nav.nav--dark .nav__link {
    color: var(--white);
}

.nav.nav--dark .nav__logo img.nav__logo-img {
    filter: invert(1);
}

.nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 209px;
    height: 56px;
    padding: 16px 32px;
    background: linear-gradient(180deg, #161616 0%, #090909 100%);
    color: var(--white);
    border-radius: 12px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2em;
    text-decoration: none;
    box-shadow: var(--btn-shadow-sm);
    transition:
        transform 0.22s var(--btn-ease),
        box-shadow 0.22s var(--btn-ease),
        background 0.35s ease,
        color 0.35s ease;
}

.nav__cta:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--btn-shadow-lift-glow);
    transition-timing-function: var(--btn-ease-snap);
}

.nav__cta:active {
    transform: translateY(-1px) scale(1.01);
    box-shadow: var(--btn-shadow-press);
    transition-duration: 0.1s;
    transition-timing-function: ease-out;
}

.nav__cta:focus-visible {
    outline: none;
    box-shadow: var(--btn-focus-ring), var(--btn-shadow-sm);
}

.nav.nav--dark .nav__cta {
    background: var(--white);
    color: var(--black-100);
}

.nav.nav--dark .nav__cta:hover {
    box-shadow:
        0 20px 44px -10px rgba(0, 0, 0, 0.28),
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 0 36px rgba(247, 78, 47, 0.1);
}

/* =============================================
   INTRO
   ============================================= */

.intro {
    position: relative;
    width: 100%;
    height: 100vh;
    background: var(--red);
    overflow: hidden;
}

.intro__images {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.intro__img {
    position: absolute;
    left: var(--ix);
    top: var(--iy);
    width: var(--iw);
    height: var(--ih);
    overflow: hidden;
    opacity: 0;
    will-change: transform, opacity;
}

.intro__img[data-idx="0"] {
    opacity: 1;
}

.intro__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.intro__logo {
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 56px;
    line-height: 0.8em;
    text-transform: uppercase;
    color: var(--white);
    opacity: 0.5;
    z-index: 2;
    white-space: nowrap;
}

.intro__logo-img {
    width: clamp(168px, 15vw, 288px);
    height: auto;
}

.intro__pills {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.intro__pill {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px;
    border-radius: 82px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 24px;
    line-height: 0.8em;
    color: #B2ABED;
    background: var(--white);
    opacity: 0;
    will-change: transform, opacity;
}

.intro__pill svg {
    color: var(--black-100);
}

.intro__pill--taste {
    right: 8%;
    top: 15%;
}

.intro__pill--meets {
    left: 6%;
    top: 7%;
}

.intro__pill--where {
    left: 11%;
    bottom: 10%;
}

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

.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: var(--white);
    --hero-orbit-scale: 1;
}

.hero__bg {
    position: absolute;
    inset: -71px -17px;
    opacity: 0.4;
    pointer-events: none;
}

.hero__bg-vector {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__furniture {
    position: absolute;
    inset: 0;
    z-index: 1;
    will-change: opacity, transform;
}

.hero__furniture--a,
.hero__furniture--c,
.hero__furniture--b {
    opacity: 0;
}

.hero__furniture--a {
    margin-top: 31px;
}

.hero__furniture-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.hero__mobile-row {
    position: absolute;
    left: 0;
    z-index: 1;
    height: 20.5vw;
    width: auto;
    max-width: none;
    opacity: 0;
    will-change: opacity, transform;
}

.hero__mobile-row--top {
    top: 17.6%;
}

.hero__mobile-row--bottom {
    top: 76.4%;
}

.hero__orbit {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1728px;
    z-index: 2;
    pointer-events: none;
}

@keyframes hero-orbit-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes hero-orbit-spin-reverse {
    to {
        transform: rotate(-360deg);
    }
}

.hero__orbit-rotator {
    position: absolute;
    inset: 0;
    transform-origin: 50% 50%;
    will-change: transform;
    animation: hero-orbit-spin 100s linear infinite;
}

.hero__orbit-item {
    position: absolute;
    transform: translate(-50%, -50%) scale(var(--hero-orbit-scale));
    pointer-events: none;
    will-change: opacity;
    opacity: 0;
}

.hero__orbit-item img {
    --hero-orbit-img: clamp(52px, 7.2vw, 118px);
    width: var(--hero-orbit-img);
    height: var(--hero-orbit-img);
    object-fit: contain;
    object-position: center;
    display: block;
    will-change: transform;
    transform-origin: 50% 50%;
    animation: hero-orbit-spin-reverse 100s linear infinite;
}

/* Figma 1728×900 — five scatter pieces (desktop oval ring hidden; no Object 5 + Object-5 pair) */
.hero__orbit-item[data-orbit="0"] {
    left: 61.17%;
    top: 20.67%;
}

.hero__orbit-item[data-orbit="1"] {
    left: 87.90%;
    top: 44.44%;
}

.hero__orbit-item[data-orbit="2"] {
    left: 9.58%;
    top: 60.11%;
}

.hero__orbit-item[data-orbit="3"] {
    left: 53.39%;
    top: 87.67%;
}

.hero__orbit-item[data-orbit="4"] {
    left: 10.13%;
    top: 35.22%;
}

@media (prefers-reduced-motion: reduce) {

    .hero__orbit-rotator,
    .hero__orbit-item img {
        animation: none;
    }
}

.hero__oval {
    position: absolute;
    margin-top: 37px;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1728px;
    --hero-oval-thumb: clamp(52px, 7.2vw, 118px);
}

.hero__oval-item {
    position: absolute;
    /* width: var(--hero-oval-thumb); */
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    transform: translate(-50%, -50%);
    opacity: 0;
    will-change: opacity, transform;
}

@media (max-width: 768px) {
    .hero__oval {
        --hero-oval-thumb: clamp(40px, 16vw, 94px);
        top: 15px;
    }

    /* Mobile design uses 8 ovals only */
    .hero__oval-item[data-oval="8"],
    .hero__oval-item[data-oval="9"],
    .hero__oval-item[data-oval="10"],
    .hero__oval-item[data-oval="11"] {
        display: none;
    }
}

.hero__oval-item[data-oval="0"] {
    left: 54.9%;
    top: 79.1%;
}

.hero__oval-item[data-oval="1"] {
    left: 54.9%;
    top: 10.9%;
}

.hero__oval-item[data-oval="2"] {
    left: 79.5%;
    top: 64.9%;
}

.hero__oval-item[data-oval="3"] {
    left: 22.8%;
    top: 10.9%;
}

.hero__oval-item[data-oval="4"] {
    left: 79.5%;
    top: 24.5%;
}

.hero__oval-item[data-oval="5"] {
    left: 22.8%;
    top: 79.1%;
}

.hero__oval-item[data-oval="6"] {
    left: 0%;
    top: 64.9%;
}

.hero__oval-item[data-oval="7"] {
    left: 0%;
    top: 24.5%;
}

/* New oval slots (design has 12; this section now renders 0..11) */
.hero__oval-item[data-oval="8"] {
    left: 67.2%;
    top: 17.7%;
}

.hero__oval-item[data-oval="9"] {
    left: 67.2%;
    top: 72%;
}

.hero__oval-item[data-oval="10"] {
    left: 11.4%;
    top: 72%;
}

.hero__oval-item[data-oval="11"] {
    left: 11.4%;
    top: 17.7%;
}

@media (max-width: 768px) {

    /* Figma mobile (390×760) — 4 thumbs above copy, 4 below.
     Placed AFTER default positions to win cascade. */
    .hero__oval .hero__oval-item[data-oval="3"] {
        left: 33.08% !important;
        top: 16.18% !important;
    }

    /* white lamp */
    .hero__oval .hero__oval-item[data-oval="1"] {
        left: 65.13% !important;
        top: 16.18% !important;
    }

    /* yellow chair */
    .hero__oval .hero__oval-item[data-oval="7"] {
        left: 10.26% !important;
        top: 29.74% !important;
    }

    /* arc lamp */
    .hero__oval .hero__oval-item[data-oval="4"] {
        left: 89.74% !important;
        top: 29.74% !important;
    }

    /* lounger */

    .hero__oval .hero__oval-item[data-oval="6"] {
        left: 10.26% !important;
        top: 70.13% !important;
    }

    /* chrome lamp */
    .hero__oval .hero__oval-item[data-oval="2"] {
        left: 89.74% !important;
        top: 70.13% !important;
    }

    /* leather chair */
    .hero__oval .hero__oval-item[data-oval="5"] {
        left: 33.08% !important;
        top: 84.34% !important;
    }

    /* cabinet */
    .hero__oval .hero__oval-item[data-oval="0"] {
        left: 65.13% !important;
        top: 84.34% !important;
    }

    /* sofa */
}

@media (min-width: 769px) {
    .hero__mobile-row {
        display: none;
    }
}

.hero__text-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 0.3;
    pointer-events: none;
}

.hero__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 56px;
    line-height: 1em;
    text-transform: uppercase;
    text-align: center;
    color: var(--black-100);
    filter: blur(12px);
}

.hero__deciding {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
}

.hero__deciding-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 56px;
    line-height: 0.8em;
    text-transform: uppercase;
    color: var(--black-100);
    margin-bottom: 24px;
}

.hero__deciding-desc {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2em;
    color: var(--black-100);
    max-width: 412px;
    margin: 0 auto;
}

/* Store Button */

.store-btn {
    background-color: transparent;
    border: none;
    border-radius: 0;
    gap: 0;
    padding: 0;
    display: inline-block;
    cursor: pointer;
    transition: transform 0.22s var(--btn-ease), filter 0.22s ease, opacity 0.22s ease;
}

.store-btn:hover {
    transform: translateY(-4px) scale(1.04);
    filter: brightness(1.08) drop-shadow(0 12px 20px rgba(9, 9, 9, 0.18));
}

.store-btn:active {
    transform: translateY(-1px) scale(0.98);
    transition-duration: 0.1s;
}

.store-btn:focus-visible {
    outline: none;
    border-radius: 10px;
    box-shadow: var(--btn-focus-ring);
}

.store-btn img {
    height: 61px;
    display: block;
}

/* =============================================
   TASTE / SECTION 3
   ============================================= */

.taste {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: var(--white);
}

.taste__photo {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.taste__photo img {
    width: 100%;
    height: 126%;
    object-fit: cover;
    object-position: center;
    filter: blur(3px);
}

.taste__photo--second {
    z-index: 2;
    opacity: 0;
}

.taste__photo--second img {
    height: 100%;
    filter: blur(4px);
    /*transform: scale(0.92);*/
}

.taste__photo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.taste__title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 56px;
    line-height: 0.8em;
    text-transform: uppercase;
    text-align: center;
    color: var(--white);
    max-width: 612px;
    opacity: 0;
}

.taste__title--second {
    opacity: 0;
    max-width: 595px;
}

.taste__dot-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.4;
    pointer-events: none;
}

.taste__furniture-row {
    position: absolute;
    top: 13%;
    left: -10%;
    z-index: 1;
    width: 120%;
    max-width: 2200px;
    opacity: 0;
}

.taste__furniture-row img {
    width: 100%;
    height: auto;
}

.taste__row-mobile {
    display: none;
}

.taste__desc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4em;
    text-align: center;
    color: var(--black-100);
    max-width: 500px;
    opacity: 0;
}

.taste__desc--second {
    opacity: 0;
}

.taste__photo-strip {
    position: absolute;
    bottom: 6%;
    left: -10%;
    z-index: 1;
    width: 120%;
    max-width: 2200px;
    opacity: 0;
}

.taste__photo-strip img {
    width: 100%;
    height: auto;
}

.taste__final-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 36px;
    line-height: 1.2em;
    text-align: center;
    color: var(--black-100);
    max-width: 724px;
    opacity: 0;
}

/* =============================================
   PLATFORM / SECTION 4
   ============================================= */

.platform {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: visible;
    background: transparent;
    z-index: 10;
}

.platform__bg-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: #707AFD;
    z-index: 0;
    opacity: 0;
}

.platform__bg-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: #CCDCF6;
    z-index: 0;
    opacity: 0;
    overflow: hidden;
}

.platform__left {
    position: absolute;
    left: var(--figma-h-padding);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: min(40%, 640px);
    opacity: 0;
}

.platform__text {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 34px;
    line-height: 1.15em;
    color: var(--white);
    margin-bottom: 32px;
}

#platformText2 {
    display: none;
}

.platform__cta {
    opacity: 0;
    margin-top: 8px;
}

.platform__tags {
    position: absolute;
    left: calc(50% + 24px);
    right: var(--figma-h-padding);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
    gap: 14px;
    padding: 20px;
    opacity: 0;
    overflow: hidden;
}

.platform__tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 10px 10px;
    background: var(--white);
    border-radius: 52px;
    white-space: nowrap;
    will-change: transform;
}

.platform__tag img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.platform__tag span {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2em;
    color: var(--black-100);
}

.platform__phone {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    opacity: 1;
}

.platform__phone-straight {
    width: 260px;
    height: auto;
    border-radius: 40px;
}

.platform__phone-tilted,
.platform__phone-tilted-2 {
    width: 290px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    transform-origin: center center;
    opacity: 0;
}

.platform__phone-tilted {
    width: 227px;
}

.platform__phone-tilted-2 {
    width: 399px;
}

.platform__phone-mobile {
    position: absolute;
    left: 50%;
    top: 43%;
    transform: translateX(-50%);
    z-index: 3;
    opacity: 0;
    width: 97vw;
    max-width: none;
    height: auto;
    border-radius: 24px;
}

@media (min-width: 769px) {
    .platform__phone-mobile {
        display: none;
    }
}

.platform__meet-title {
    position: absolute;
    left: 164px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 49px;
    line-height: 0.95em;
    text-transform: uppercase;
    color: var(--white);
    max-width: 500px;
    opacity: 0;
}

.platform__final-desc {
    position: absolute;
    left: 164px;
    top: 38%;
    z-index: 5;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 36px;
    line-height: 1.2em;
    text-align: left;
    color: var(--white);
    max-width: 695px;
    opacity: 0;
}

/* =============================================
   CORE FEATURES / SECTION 5
   ============================================= */

.core-features {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: var(--white);
    z-index: 5;
}

@media (min-width: 769px) {
    .core-features {
        margin-top: -80vh;
    }
}

@media (min-width: 769px) {

    /* Ensure mobile-only Core Features overlay never appears on desktop/tablet */
    #coreFeatures .core-features__mobile {
        display: none;
    }

    .core-features-follow {
        display: none;
    }
}

.core-features__dot-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.4;
    pointer-events: none;
}

.core-features__title-wrap {
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 1;
    filter: blur(0px);
}

.core-features__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 56px;
    line-height: 0.8em;
    text-transform: uppercase;
    text-align: center;
    color: var(--black-100);
    white-space: nowrap;
}

.core-features__photo {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -100%;
    height: calc(100% - 32px);
    border-radius: 24px;
    overflow: hidden;
    z-index: 1;
}

.core-features__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =============================================
   FEATURE DETAILS
   ============================================= */

.feature-details {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.feature-details__bg-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    will-change: transform;
}

.feature-details__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-details__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
    opacity: 0;
}

.feature-details__vertical-line {
    position: absolute;
    left: 864px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--white);
    opacity: 0.2;
    z-index: 2;
}

.feature-details__left {
    position: absolute;
    left: 160px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    max-width: 695px;
}

.feature-details__description {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 43px;
    line-height: 1.1em;
    color: var(--white);
    margin-bottom: 100px;
}

.feature-details__tabs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.feature-details__tab {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2em;
    color: var(--white);
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.4s ease;
}

.feature-details__tab--active {
    opacity: 1;
}

.feature-details__outer {
    display: flex;
    align-items: center;
    width: 100%;
}

.feature-details__features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
    width: 100%;
}

.feature-details__outer .feature-details__cta {
    min-width: 200px;
}

.feature-details__item {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    opacity: 0.4;
    line-height: 1.2em;
    color: var(--white);
    opacity: 0.5;
    transition: opacity 0.4s ease;
}

.feature-details__item--active {
    opacity: 1;
}

.feature-details__right {
    position: absolute;
    right: 160px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.feature-details__phone {
    position: relative;
}

.feature-details__phone-img {
    width: 301px;
    height: auto;
    border-radius: 36px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.feature-details__phone-img--active {
    opacity: 1;
    position: relative;
}

/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 12px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5em;
    cursor: pointer;
    border: none;
    text-decoration: none;
    box-sizing: border-box;
    transition:
        transform 0.28s var(--btn-ease),
        box-shadow 0.28s var(--btn-ease),
        background 0.28s ease,
        background-color 0.28s ease,
        border-color 0.28s ease,
        color 0.22s ease,
        opacity 0.22s ease;
}

.btn--primary {
    background: linear-gradient(180deg, #161616 0%, #090909 100%);
    color: var(--white);
    box-shadow: var(--btn-shadow-sm);
}

.btn--primary:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: var(--btn-shadow-lift-glow);
    transition-timing-function: var(--btn-ease-snap);
}

.btn--primary:active {
    transform: translateY(-1px) scale(1.01);
    box-shadow: var(--btn-shadow-press);
    transition-duration: 0.1s;
    transition-timing-function: ease-out;
}

.btn--primary:focus-visible {
    outline: none;
    box-shadow: var(--btn-focus-ring), var(--btn-shadow-sm);
}

.btn--secondary {
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    color: var(--black-100);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.btn--secondary:hover {
    transform: translateY(-3px) scale(1.015);
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow:
        0 16px 40px -8px rgba(0, 0, 0, 0.14),
        0 6px 16px rgba(0, 0, 0, 0.08),
        0 0 28px rgba(247, 78, 47, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    transition-timing-function: var(--btn-ease-snap);
}

.btn--secondary:active {
    transform: translateY(-1px) scale(1.005);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.08),
        inset 0 1px 3px rgba(0, 0, 0, 0.06);
    transition-duration: 0.1s;
}

.btn--secondary:focus-visible {
    outline: none;
    box-shadow: var(--btn-focus-ring), 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* =============================================
   CTA
   ============================================= */

.cta {
    position: relative;
    width: 100%;
    padding: 0 164px;
    background: var(--white);
    padding-top: 40px;
    padding-bottom: 40px;
}

.cta__card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--red);
    border-radius: 20px;
    padding: 64px;
    overflow: hidden;
    min-height: 565px;
}

.cta__content {
    max-width: 613px;
    z-index: 1;
}

.cta__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 56px;
    line-height: 0.8em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 32px;
}

.cta__desc {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5em;
    color: var(--white);
    max-width: 272px;
    margin-bottom: 40px;
}

.cta__buttons {
    display: flex;
    gap: 12px;
}

.cta__phone {
    position: absolute;
    right: 64px;
    top: 64px;
    z-index: 1;
    flex-shrink: 0;
}

.cta__phone img {
    width: 357px;
    height: auto;
    border-radius: 40px;
}

/* =============================================
   FOOTER
   ============================================= */
.footer__logo img {
    max-width: 300px;
}

.footer {
    position: relative;
    width: 100%;
    background: var(--black-200);
    border-radius: 20px 20px 0 0;
    padding: 64px 164px;
}

.footer__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 80px;
}

.footer__store-buttons {
    display: flex;
    gap: 12px;
}

.footer__nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer__link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.2em;
    color: var(--gray-100);
    transition: opacity 0.3s ease;
}

.footer__link:hover {
    opacity: 0.6;
}

.footer__social {
    display: flex;
    gap: 16px;
    align-items: center;
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.footer__social-link:hover {
    opacity: 0.6;
}

.footer__logo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 221px;
    line-height: 0.8em;
    text-transform: uppercase;
    color: var(--gray-100);
    margin-bottom: 40px;
}

.footer__divider {
    width: 100%;
    height: 1px;
    background: rgba(247 247 247 / 20%);
    opacity: 0.2;
    margin-bottom: 32px;
}

.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer__copyright,
.footer__legal {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.2em;
    color: var(--gray-400);
}

.footer__legal {
    transition: opacity 0.3s ease;
}

.footer__legal:hover {
    opacity: 1;
    color: #fff;
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (min-width: 1400px) {
    .feature-details__left {
        min-height: 535px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .feature-details__outer {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .feature-details__left {
        margin-top: 45px;
    }

    .feature-details__right {
        margin-top: 39px;
    }
    .platform__phone-tilted {
        width: 237px;
    }
}


@media (max-width: 1440px) {

    .feature-details__left {
        left: 80px;
        padding-top: 49px;
    }

    .feature-details__right {
        right: 80px;
        padding-top: 49px;
    }

    .feature-details__vertical-line {
        left: 50%;
    }

    .cta {
        padding-left: 80px;
        padding-right: 80px;
    }

    .footer {
        padding: 48px 40px;
    }

    .footer__logo {
        font-size: 141px;
    }
}

@media (max-width: 1024px) {
    .nav {
        padding: 20px 40px;
    }

    .nav__links {
        gap: 32px;
    }

    .nav__cta {
        min-width: 160px;
        height: 48px;
        padding: 12px 24px;
    }


    .taste__title--second {
        max-width: 500px;
    }

    .platform__left {
        left: 4%;
        max-width: 380px;
    }

    .platform__meet-title {
        font-size: 40px;
        max-width: 380px;
    }

    .platform__final-desc {
        left: 80px;
        font-size: 28px;
        max-width: 500px;
    }

    .platform__tag {
        padding: 8px 14px 8px 8px;
        gap: 8px;
    }

    .platform__tag img {
        width: 36px;
        height: 36px;
    }

    .platform__tag span {
        font-size: 14px;
    }

    .core-features__title {
        font-size: 48px;
    }

    .feature-details__left {
        left: 40px;
        max-width: 50%;
    }


    .feature-details__right {
        right: 40px;
    }

    .feature-details__phone-img {
        width: 260px;
    }

    .feature-details__vertical-line {
        display: none;
    }

    .cta__phone {
        right: 40px;
        top: 128px;
    }

    .cta__phone img {
        width: 280px;
    }

    .footer {
        padding: 40px;
    }

    .footer__top {
        flex-wrap: wrap;
        gap: 32px;
    }
}

/* =============================================
   MOBILE MENU (base styles, hidden on desktop)
   ============================================= */

.nav__hamburger {
    display: none;
    position: relative;
    z-index: 2;
    background: none;
    border: none;
    cursor: pointer;
    width: 56px;
    height: 56px;
    border-radius: 100px;
    align-items: center;
    justify-content: center;
    color: var(--black-100);
    transition: color 0.4s ease;
    -webkit-tap-highlight-color: transparent;
}

.nav.nav--dark .nav__hamburger {
    color: var(--white);
}

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--white);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.mobile-menu--open {
    opacity: 1;
    visibility: visible;
}

.mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
}

.mobile-menu__logo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 26px;
    line-height: 0.8em;
    text-transform: uppercase;
    color: var(--black-100);
}

.mobile-menu__close {
    background: none;
    border: none;
    cursor: pointer;
    width: 56px;
    height: 56px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black-100);
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.mobile-menu__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5em;
    color: var(--black-100);
    text-align: center;
    opacity: 0.8;
}

.mobile-menu__social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: auto;
    padding: 0 16px;
    color: var(--black-100);
}

.mobile-menu__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.mobile-menu__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 39px 20px 20px;
    height: 49px;
    background: linear-gradient(180deg, #161616 0%, #090909 100%);
    color: var(--white);
    border-radius: 12px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5em;
    text-decoration: none;
    box-shadow: var(--btn-shadow-sm);
    transition:
        transform 0.28s var(--btn-ease),
        box-shadow 0.28s var(--btn-ease),
        background 0.25s ease,
        color 0.25s ease;
}

.mobile-menu__cta:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--btn-shadow-lift-glow);
    transition-timing-function: var(--btn-ease-snap);
}

.mobile-menu__cta:active {
    transform: translateY(-1px) scale(1.01);
    box-shadow: var(--btn-shadow-press);
    transition-duration: 0.1s;
}

.mobile-menu__cta:focus-visible {
    outline: none;
    box-shadow: var(--btn-focus-ring), var(--btn-shadow-sm);
}

/* =============================================
   RESPONSIVE 768px
   ============================================= */

@media (min-width: 769px) {
    .nav__logo {
        min-width: 209px;
    }

    .hero__deciding-title {
        margin-top: 64px;
    }
}

@media (max-width: 768px) {

    /* Mobile viewport stability + overflow containment (prevents address-bar jump + sideways scroll) */
    .intro,
    .hero,
    .taste,
    .platform,
    .core-features,
    .feature-details {
        height: 100vh;
        height: 100svh;
        height: 100dvh;
        min-height: 100dvh;
        overflow-x: clip;
    }

    body {
        overflow-x: clip;
    }

    .nav {
        padding: 12px 16px;
    }

    .nav__links {
        display: none;
    }

    .nav__cta {
        display: none;
    }

    .nav__hamburger {
        display: flex;
    }

    .nav__logo {
        font-size: 26px;
    }

    .intro__img {
        border-radius: 4px;
        overflow: hidden;
    }

    .intro__img[data-idx="0"] {
        left: 12.82%;
        top: 24.21%;
        width: 29vw;
        height: 22.69vw;
    }

    .intro__img[data-idx="1"] {
        left: 12.82%;
        top: 63.68%;
        width: 29vw;
        height: 22.69vw;
    }

    .intro__img[data-idx="2"] {
        left: 27.44%;
        top: 15.92%;
        width: 32.82vw;
        height: 25.64vw;
    }

    .intro__img[data-idx="3"] {
        left: 27.44%;
        top: 71%;
        width: 32.82vw;
        height: 25.64vw;
    }

    .intro__img[data-idx="4"] {
        left: 51.79%;
        top: 17.5%;
        width: 29vw;
        height: 22.69vw;
    }

    .intro__img[data-idx="5"] {
        left: 53.08%;
        top: 70.26%;
        width: 29vw;
        height: 22.69vw;
    }

    .intro__img[data-idx="6"] {
        left: 72.82%;
        top: 32.63%;
        width: 29vw;
        height: 22.69vw;
    }

    .intro__img[data-idx="7"] {
        left: 72.82%;
        top: 55.79%;
        width: 29vw;
        height: 22.69vw;
    }

    .intro__img[data-idx="8"] {
        left: -6.67%;
        top: 32.63%;
        width: 29vw;
        height: 22.69vw;
    }

    .intro__img[data-idx="9"] {
        left: -6.67%;
        top: 54.21%;
        width: 29vw;
        height: 22.69vw;
    }

    .intro__img[data-idx="10"] {
        left: 59.74%;
        top: 24.21%;
        width: 26.25vw;
        height: 20.45vw;
    }

    .intro__img[data-idx="11"] {
        left: 59.74%;
        top: 62.74%;
        width: 26.25vw;
        height: 20.45vw;
    }

    .intro__img[data-idx="12"] {
        left: 87.69%;
        top: 43.55%;
        width: 31.79vw;
        height: 24.87vw;
    }

    .intro__img[data-idx="13"] {
        left: -19.74%;
        top: 43.55%;
        width: 29.23vw;
        height: 22.82vw;
    }

    .intro__img[data-idx="14"] {
        display: none;
    }

    .intro__img[data-idx="15"] {
        display: none;
    }

    .intro__logo {
        font-size: 32px;
        top: 50%;
    }

    .intro__logo-img {
        width: clamp(152px, 42vw, 184px);
    }

    .intro__pill {
        font-size: 13px;
        padding: 7px 17px;
        gap: 7px;
    }

    .intro__pill svg {
        width: 11px;
        height: 11px;
    }

    .hero__bg {
        inset: -20px -10px;
    }

    .hero__furniture {
        display: none;
    }

    .hero__title {
        font-size: 32px;
        line-height: 0.9em;
        filter: none !important;
    }

    .hero__deciding {
        width: calc(100% - 32px);
        max-width: 358px;
    }

    .hero__deciding-title {
        font-size: 32px;
    }

    .hero__deciding-desc {
        font-size: 16px;
        max-width: 320px;
    }

    .taste__title {
        font-size: 32px;
        max-width: 358px;
        width: calc(100% - 32px);
    }

    .taste__title--second {
        max-width: 358px;
    }

    .taste__desc {
        max-width: 358px;
        width: calc(100% - 32px);
    }

    .taste__final-text {
        font-size: 24px;
        max-width: 358px;
        width: calc(100% - 32px);
        line-height: 1.3em;
    }

    .taste__row-desktop {
        display: none;
    }

    .taste__row-mobile {
        display: block;
    }

    .taste__furniture-row {
        width: auto;
        max-width: none;
        top: 17%;
        left: 5.1%;
        transform: none;
        height: 20.5vw;
    }

    .taste__furniture-row img {
        width: auto;
        height: 100%;
        max-width: none;
    }

    .taste__photo-strip {
        width: auto;
        max-width: none;
        bottom: auto;
        top: 77.6%;
        left: 5.1%;
        transform: none;
        height: 20.5vw;
    }

    .taste__photo-strip img {
        width: auto;
        height: 100%;
        max-width: none;
    }

    .platform__phone-tilted,
    .platform__phone-tilted-2 {
        display: none;
    }

    .platform__phone-straight {
        width: 56vw;
        border-radius: 28px;
    }

    .platform__phone {
        display: none;
    }

    .platform__meet-title {
        font-size: 32px;
        max-width: calc(100% - 32px);
        left: 16px;
        top: 13.7%;
        transform: none;
        line-height: 0.9em;
    }

    .platform__final-desc {
        font-size: 20px;
        line-height: 1.3em;
        max-width: none;
        left: 16px;
        width: calc(100% - 32px);
        top: 12.5%;
    }

    .platform__phone-mobile {
        width: 55vw;
        top: 33%;
        left: 50%;
        right: auto;
        margin-left: 0;
        transform: translateX(-50%);
        z-index: 4;
    }

    .platform__left {
        left: 16px;
        right: 16px;
        max-width: none;
        top: 66%;
        bottom: auto;
        transform: none;
        z-index: 6;
        width: calc(100vw - 32px);
    }

    /* Keep top copy above the phone on mobile (prevents overlap while scrubbing) */
    .platform__final-desc {
        z-index: 6;
    }

    .platform__text {
        font-size: 18px;
        line-height: 1.3em;
    }

    .platform__tags {
        left: 50%;
        transform: translateX(-50%);
        top: 17%;
        bottom: auto;
        width: 183vw;
        max-width: none;
        height: auto;
        padding: 32px 0;
        gap: 32px;
        justify-content: center;
        align-content: center;
    }

    .platform__tag {
        padding: 8px;
        gap: 8px;
        border-radius: 52px;
    }

    .platform__tag img {
        width: 32px;
        height: 32px;
        border-radius: 21px;
    }

    .platform__tag span {
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 12px;
        line-height: 0.8em;
    }

    .platform__cta {
        width: calc(100% - 34px);
        height: 49px;
    }

    .core-features__title {
        font-size: 32px;
    }

    .core-features__photo {
        left: 8px;
        right: 8px;
        height: calc(100% - 16px);
    }

    /* Core features (mobile) — match Figma layout without touching desktop */
    #coreFeatures .core-features__photo {
        border-radius: 24px;
    }

    #coreFeatures .feature-details__overlay {
        opacity: 0;
        background: rgba(0, 0, 0, 0.2);
    }

    #coreFeatures .core-features__title-wrap,
    #coreFeatures .feature-details__left,
    #coreFeatures .feature-details__right {
        display: none;
    }

    #coreFeatures .core-features__mobile {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 4;
        color: var(--white);
    }

    #coreFeatures .core-features__mobile-heading {
        position: absolute;
        left: 16px;
        right: 16px;
        width: auto;
        top: clamp(180px, 38vh, 360px);
        transform: none;
        font-family: var(--font-heading);
        font-weight: 800;
        font-size: 32px;
        line-height: 0.9em;
        text-transform: uppercase;
        text-align: left;
        color: var(--black-100);
        will-change: filter, opacity;
        text-align: center;
    }

    #coreFeatures .core-features__mobile-list {
        position: absolute;
        left: 16px;
        right: 16px;
        top: clamp(64px, 12vh, 96px);
        bottom: 0;
        margin-top: 0;
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
        z-index: 6;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    #coreFeatures #coreFeaturesMobile.core-features__mobile.core-features__mobile--list-visible .core-features__mobile-list {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    #coreFeatures #coreFeaturesMobile.core-features__mobile.core-features__mobile--list-visible.core-features__mobile--last-active .core-features__mobile-list {
        top: clamp(48px, 9vh, 72px);
    }

    /* When the mobile cards are visible, the "CORE FEATURES" heading should NOT sit on top of the photo */
    #coreFeatures #coreFeaturesMobile.core-features__mobile.core-features__mobile--list-visible .core-features__mobile-heading {
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
    }

    #coreFeatures .core-features__mobile-item {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.25s ease;
        align-self: start;
    }

    /* Pending items will be rendered below as normal scroll (see .core-features-follow) */

    #coreFeatures .core-features__mobile-item img.core-features__mobile-img {
        max-width: 208px;
        margin: 24px auto;
    }

    #coreFeatures #coreFeaturesMobile.core-features__mobile.core-features__mobile--last-active .core-features__mobile-item--active img.core-features__mobile-img {
        max-width: 170px;
        margin: 12px auto;
    }

    #coreFeatures .core-features__mobile-item--active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        overflow-y: auto;
        padding-bottom: 24px;
        -webkit-overflow-scrolling: touch;
    }

    #coreFeatures .core-features__mobile-item:last-of-type {
        margin-top: 30px;
    }

    #coreFeatures .core-features__mobile-copy {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    #coreFeatures .core-features__mobile-title {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 16px;
        line-height: 1.2em;
        color: var(--white);
    }

    #coreFeatures .core-features__mobile-desc {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 19px;
        line-height: 1.3em;
        color: var(--white);
    }

    #coreFeatures .core-features__mobile-arrow {
        flex: 0 0 auto;
        color: var(--white);
        margin-top: 2px;
    }

    #coreFeatures .core-features__mobile-cta {
        width: 100%;
        height: 49px;
        padding: 0 20px;
        margin-top: 29px;
    }

    /* Mobile-only follow-up list (normal scroll) */
    .core-features-follow {
        position: relative;
        padding: 20px 16px 32px;
        background: var(--white);
    }

    .core-features-follow__item {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 18px 16px;
        border-radius: 18px;
        background: rgba(9, 9, 9, 0.92);
        color: var(--white);
        box-shadow: 0 18px 44px rgba(9, 9, 9, 0.18);
    }

    .core-features-follow__item+.core-features-follow__item {
        margin-top: 14px;
    }

    .core-features-follow__kicker {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 14px;
        line-height: 1.2em;
        opacity: 0.9;
    }

    .core-features-follow__title {
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 18px;
        line-height: 1.2em;
    }

    .core-features-follow__desc {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 16px;
        line-height: 1.35em;
        opacity: 0.92;
    }

    .core-features-follow__img {
        width: min(240px, 70vw);
        margin: 6px auto 0;
        height: auto;
    }

    .feature-details__left {
        left: 16px;
        right: 16px;
        max-width: none;
        top: 6%;
        transform: none;
    }

    .feature-details__description {
        font-size: 17px;
        margin-bottom: 16px;
        line-height: 1.3em;
    }

    .feature-details__tabs {
        gap: 6px;
        margin-bottom: 14px;
    }

    .feature-details__tab {
        font-size: 14px;
    }

    .feature-details__features {
        gap: 6px;
        margin-bottom: 14px;
    }

    .feature-details__item {
        font-size: 14px;
    }

    .feature-details__right {
        display: block;
        position: absolute;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        top: auto;
        bottom: 17px;
        z-index: 3;
    }

    .feature-details__phone-img {
        width: 180px;
        border-radius: 24px;
    }

    .feature-details__vertical-line {
        display: none;
    }

    .feature-details__outer .feature-details__cta {
        min-width: 127px;
    }

    .feature-details__cta {
        font-size: 13px;
        padding: 12px 10px;
    }

    .cta {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .cta__card {
        flex-direction: column;
        padding: 40px 24px 0;
        min-height: auto;
        gap: 32px;
        align-items: flex-start;
    }

    .cta__content {
        max-width: none;
    }

    .cta__title {
        font-size: 32px;
    }

    .cta__desc {
        font-size: 16px;
        max-width: none;
    }

    .cta__phone {
        position: relative;
        right: auto;
        top: auto;
        align-self: center;
        height: 300px;
    }

    .cta__phone img {
        width: 230px;
        border-radius: 28px;
    }

    /* Mobile: keep phone tight to top so no "empty space" */
    .cta__phone {
        margin-top: 0;
    }

    .cta__buttons {
        flex-wrap: wrap;
        gap: 8px;
    }

    .footer {
        padding: 32px 24px;
        border-radius: 18px 18px 0 0;
    }

    .footer__top {
        flex-direction: column;
        gap: 32px;
    }

    .footer__store-buttons {
        gap: 8px;
    }

    .footer__nav {
        gap: 20px;
    }

    .footer__link {
        font-size: 16px;
    }

    .footer__logo {
        font-size: 29vw;
        line-height: 0.8em;
        text-align: center;
    }

    .footer__bottom {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 16px;
    }

    .footer__copyright,
    .footer__legal {
        font-size: 14px;
    }

    .footer__logo img {
        max-width: 100%;
    }

    .platform {
        overflow: hidden;
        height: 100vh;
        height: 100svh;
        height: 100dvh;
        min-height: 100dvh;
    }

    .hero__oval img.hero__oval-item {
        width: 86px;
    }

    .hero__title {
        filter: blur(0) !important;
    }

    .footer__bottom span.footer__copyright {
        order: 3;
        white-space: nowrap;
    }

    .footer__bottom .footer__legal:last-child {
        order: 1;
    }

    .footer__bottom .footer__legal:nth-child(2) {
        order: 4;
        text-align: right;
    }

    .footer__bottom .footer__legal:nth-child(3) {
        order: 2;
        text-align: right;
    }
}

@media (prefers-reduced-motion: reduce) {

    .btn,
    .btn--primary,
    .btn--secondary,
    .nav__cta,
    .mobile-menu__cta,
    .store-btn {
        transition-duration: 0.01ms;
    }

    .btn:hover,
    .btn:active,
    .nav__cta:hover,
    .nav__cta:active,
    .mobile-menu__cta:hover,
    .mobile-menu__cta:active,
    .store-btn:hover,
    .store-btn:active {
        transform: none;
    }

    .pricing-plan__btn,
    .pricing-billing__store-btn,
    .form-success-modal__btn {
        transition-duration: 0.01ms;
    }

    .pricing-plan__btn:hover,
    .pricing-plan__btn:active,
    .pricing-billing__store-btn:hover,
    .pricing-billing__store-btn:active,
    .form-success-modal__btn:hover,
    .form-success-modal__btn:active {
        transform: none;
    }

    .pricing-faqs__list .pricing-faq-item button:hover,
    .pricing-faqs__list .pricing-faq-item button:active,
    .features-how__arrow:hover,
    .features-how__arrow:active {
        transform: none;
    }
}