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

/* ── FLIK Logo (img-based) ── */
.logo-icon {
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0
}

html,
body {
    width: 100%;
    min-height: 100vh;
    background: #1a1a1a;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden
}

/* ── Utilities ── */
.hidden {
    display: none !important
}

.flex {
    display: flex
}

.flex-col {
    flex-direction: column
}

.items-center {
    align-items: center
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.relative {
    position: relative
}

.absolute {
    position: absolute
}

.inset-0 {
    inset: 0
}

.w-full {
    width: 100%
}

.h-full {
    height: 100%
}

.overflow-hidden {
    overflow: hidden
}

.shrink-0 {
    flex-shrink: 0
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.uppercase {
    text-transform: uppercase
}

.rounded-full {
    border-radius: 9999px
}

.shadow-lg {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12)
}

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

.img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block
}

/* ══════════════════════════════════════════
   STICKY NAVIGATION
══════════════════════════════════════════ */
.sticky-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: background 0.3s, box-shadow 0.3s
}

.sticky-nav.is-scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08)
}

.sticky-nav__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.sticky-nav__inner::-webkit-scrollbar {
    display: none
}

.sticky-nav__link {
    display: inline-block;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 9999px;
    white-space: nowrap;
    transition: color 0.25s, background 0.25s;
    position: relative
}

.sticky-nav__link:hover {
    color: #111827;
    background: rgba(0, 0, 0, 0.04)
}

.sticky-nav__link.active {
    color: #111827;
    background: #FACC15;
    font-weight: 700
}

/* Burger button — hidden on desktop */
.sticky-nav__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-left: auto;
    flex-shrink: 0;
    z-index: 10
}

.sticky-nav__burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #111827;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s
}

.sticky-nav__burger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg)
}

.sticky-nav__burger.is-open span:nth-child(2) {
    opacity: 0
}

.sticky-nav__burger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg)
}

/* Mobile nav overlay */
@media (max-width: 768px) {
    .sticky-nav__inner {
        flex-wrap: wrap;
        justify-content: center;
        padding: 10px 16px;
        gap: 0;
        overflow: visible
    }

    .sticky-nav__burger {
        display: flex
    }

    .sticky-nav__link {
        display: none;
        width: 100%;
        text-align: center;
        padding: 12px 16px;
        font-size: 14px;
        border-radius: 0;
        order: 1
    }

    .sticky-nav__inner.is-open .sticky-nav__link {
        display: block;
        animation: navLinkFade 0.3s ease-out forwards
    }

    .sticky-nav__inner.is-open {
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        border-radius: 0 0 16px 16px
    }

    @keyframes navLinkFade {
        from {
            opacity: 0;
            transform: translateY(-6px)
        }
        to {
            opacity: 1;
            transform: translateY(0)
        }
    }
}

/* Offset sections so they aren't hidden behind the sticky nav */
section[id^="sec"] {
    scroll-margin-top: 56px
}

/* ── App wrapper ── */
#app {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 60px rgba(0, 0, 0, .4);
    padding-top: 56px
}

/* ══════════════════════════════════════════
   SECTION 1  — Hello SMART  (aspect-video)
══════════════════════════════════════════ */
#sec1 {
    width: 100%;
    aspect-ratio: 16/9;
    position: relative;
    background: #F8FAFC;
    container-type: inline-size
}

.s1-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2cqw;
    overflow: hidden;
    position: relative
}

.s1-inner .hello-title {
    font-size: 5cqw;
    font-weight: 800;
    color: #8A8A8E;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1;
    margin-top: 2cqw;
    margin-bottom: 2cqw
}

.s1-logo-row {
    display: flex;
    align-items: center;
    gap: .8cqw;
    position: relative;
    margin-bottom: 1.5cqw
}

.s1-logo-row .logo-icon {
    width: 3cqw;
    height: 3.5cqw;
    color: #000
}

.s1-logo-row h1 {
    font-size: 2.5cqw;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #000;
    line-height: 1
}

.s1-underline {
    position: absolute;
    bottom: -.8cqw;
    left: -5%;
    width: 110%;
    height: 1cqw;
    pointer-events: none
}

.s1-subtitle {
    font-size: 1.8cqw;
    font-weight: 500;
    color: #000;
    line-height: 1.4;
    max-width: 70cqw;
    text-align: center;
    margin-top: .8cqw;
    margin-bottom: 1.5cqw
}

.s1-house {
    width: 100%;
    max-width: 70cqw;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center
}

.s1-house img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: bottom
}

/* ── Section 1: Mobile ── */
@media (max-width: 768px) {
    #sec1 {
        aspect-ratio: auto;
        min-height: auto
    }

    .s1-inner {
        padding: 24px 16px 0;
        justify-content: flex-start
    }

    .s1-inner .hello-title {
        font-size: 22px;
        margin-top: 12px;
        margin-bottom: 16px
    }

    .s1-logo-row {
        gap: 10px;
        margin-bottom: 12px
    }

    .s1-logo-row .logo-icon {
        width: 28px;
        height: 32px
    }

    .s1-logo-row h1 {
        font-size: 18px;
        letter-spacing: .12em
    }

    .s1-underline {
        bottom: -6px;
        height: 8px
    }

    .s1-subtitle {
        font-size: 14px;
        max-width: 100%;
        margin-top: 10px;
        margin-bottom: 16px;
        line-height: 1.5
    }

    .s1-house {
        max-width: 100%;
        height: 280px;
        flex: 0 0 auto
    }
}

/* ══════════════════════════════════════════
   SECTION 2  — Concept Carousel
══════════════════════════════════════════ */
#sec2 {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 4vh 0 0;
    background: #F8FAFC
}

.carousel-wrap {
    width: 85vw;
    max-width: 1440px;
    aspect-ratio: 5/3;
    min-height: 500px;
    position: relative;
    overflow: hidden;
    container-type: inline-size
}

/* shared slide header layout */
.slide-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2cqw;
    z-index: 10;
    width: 100%;
    flex-shrink: 0
}

.brand-row {
    display: flex;
    align-items: center;
    gap: 1.2cqw;
    color: #1f2937
}

.brand-row .logo-icon {
    width: 4cqw;
    height: 4cqw
}

.brand-row h1 {
    font-size: 3.5cqw;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #1f2937;
    line-height: 1
}

.slide-desc {
    font-size: 1.7vw;
    line-height: 1.35;
    font-weight: 500;
    color: #000;
    text-align: right;
    max-width: 50%;
    flex-shrink: 1
}

.blob-tr {
    position: absolute;
    top: 0;
    right: 0;
    width: 50cqw;
    height: 50cqw;
    background: rgba(249, 250, 251, .8);
    border-radius: 50%;
    filter: blur(4cqw);
    z-index: -1;
    transform: translate(25%, -25%)
}

.blob-bl {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40cqw;
    height: 40cqw;
    background: rgba(249, 250, 251, .8);
    border-radius: 50%;
    filter: blur(4cqw);
    z-index: -1;
    transform: translate(-25%, 25%)
}

/* yellow hand-drawn underline span */
.hl {
    position: relative;
    display: inline-block;
    margin-top: .5cqw
}

.hl svg {
    position: absolute;
    bottom: -.8cqw;
    left: -5%;
    width: 110%;
    height: 1.3cqw;
    color: #FACC15;
    pointer-events: none
}

/* Slide 1 & 3 — big image */
.slide-img-wrap {
    width: 100%;
    height: 44cqw;
    border-radius: 3cqw;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .08);
    position: relative;
    z-index: 10
}

.slide-img-wrap .flik-badge {
    position: absolute;
    bottom: 1.5cqw;
    right: 2.5cqw;
    display: flex;
    align-items: center;
    gap: .5cqw;
    color: #fff;
    opacity: .8;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5))
}

.slide-img-wrap .flik-badge .logo-icon {
    width: 2cqw;
    height: 2cqw
}

.slide-img-wrap .flik-badge span {
    font-size: 2cqw;
    font-weight: 700;
    letter-spacing: .1em
}

/* Slide 2 — 6 feature tiles */
.features-grid {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2cqw;
    width: 100%;
    margin-top: 8cqw;
    min-height: 0
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1cqw;
    flex: 1;
    min-height: 0
}

.feature-img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 3cqw;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    background: #fff;
    padding: .5cqw;
    flex-shrink: 0
}

.feature-img-inner {
    width: 100%;
    height: 100%;
    border-radius: 2.5cqw;
    overflow: hidden
}

.feature-img-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply
}

.feature-label {
    font-size: 1.8cqw;
    font-weight: 500;
    color: #111827;
    flex-shrink: 0
}

/* Generic carousel inner */
.carousel-track {
    width: 100%;
    height: 100%;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.carousel-track::-webkit-scrollbar {
    display: none
}

.carousel-slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    scroll-snap-align: center;
    container-type: inline-size;
    padding: 2.5cqw 8cqw;
    position: relative;
    background: transparent;
    overflow: hidden
}

.btn-prev,
.btn-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    transition: background .2s, opacity .2s;
    padding: 1cqw;
    width: 4cqw;
    height: 4cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0
}

.carousel-wrap:hover .btn-prev,
.carousel-wrap:hover .btn-next {
    opacity: 1
}

.btn-prev {
    left: 2cqw
}

.btn-next {
    right: 2cqw
}

.btn-prev svg,
.btn-next svg {
    width: 2cqw;
    height: 2cqw
}

.carousel-dots {
    position: absolute;
    bottom: 9cqw;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .8cqw;
    z-index: 50;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(8px);
    padding: .8cqw 1.5cqw;
    border-radius: 9999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1)
}

.dot {
    width: .8cqw;
    height: .8cqw;
    border-radius: 50%;
    background: #9ca3af;
    border: none;
    cursor: pointer;
    transition: all .3s;
    padding: 0
}

.dot.active {
    background: #111827;
    transform: scale(1.25)
}

/* ── Section 2: Mobile ── */
@media (max-width: 768px) {
    #sec2 {
        padding: 2vh 0 0
    }

    .carousel-wrap {
        width: 100%;
        aspect-ratio: auto;
        min-height: auto
    }

    .carousel-slide {
        padding: 24px 16px
    }

    .blob-tr,
    .blob-bl {
        display: none
    }

    .slide-header {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 16px;
        align-items: stretch
    }

    .brand-row {
        gap: 10px
    }

    .brand-row .logo-icon {
        width: 28px;
        height: 28px
    }

    .brand-row h1 {
        font-size: 20px
    }

    .slide-desc {
        font-size: 14px;
        text-align: justify;
        line-height: 1.5;
        width: 100%;
        max-width: 100%;
        flex-shrink: 1;
        align-self: stretch
    }

    .slide-desc-wrap {
        width: 100%;
        align-items: flex-start
    }

    .slide-desc--narrow {
        max-width: 100%
    }

    .hl svg {
        bottom: -4px;
        height: 8px
    }

    /* Slide 1 & 3 — image */
    .slide-img-wrap {
        height: 260px;
        border-radius: 16px
    }

    .slide-img-wrap .flik-badge .logo-icon {
        width: 16px;
        height: 16px
    }

    .slide-img-wrap .flik-badge span {
        font-size: 14px
    }

    .slide-img-wrap .flik-badge {
        bottom: 12px;
        right: 16px;
        gap: 4px
    }

    /* Slide 2 — 6 feature tiles → 3×2 grid */
    .features-grid {
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 20px
    }

    .feature-card {
        width: calc(33.333% - 8px);
        flex: none
    }

    .feature-img {
        border-radius: 16px;
        padding: 4px
    }

    .feature-img-inner {
        border-radius: 12px
    }

    .feature-label {
        font-size: 11px
    }

    /* Navigation arrows — always visible on mobile */
    .btn-prev,
    .btn-next {
        opacity: 1;
        width: 40px;
        height: 40px;
        padding: 8px
    }

    .btn-prev {
        left: 8px
    }

    .btn-next {
        right: 8px
    }

    .btn-prev svg,
    .btn-next svg {
        width: 20px;
        height: 20px
    }

    /* Dots */
    .carousel-dots {
        bottom: 12px;
        padding: 6px 14px;
        gap: 8px
    }

    .dot {
        width: 8px;
        height: 8px
    }
}

/* ══════════════════════════════════════════
   SECTION 3  — From Concrete to Ready
══════════════════════════════════════════ */
#sec3 {
    width: 100%;
    height: 110vh;
    min-height: 800px;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #f3f4f6;
    container-type: inline-size
}

.s3-bg {
    position: absolute;
    inset: 0;
    transition: transform 4s ease
}

#sec3:hover .s3-bg {
    transform: scale(1.05)
}

.s3-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .8))
}

.s3-title {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
    margin-top: -4cqw
}

.s3-title h2 {
    font-size: 3cqw;
    font-weight: 300;
    color: #fff;
    text-align: center;
    line-height: 1.6;
    letter-spacing: .15em
}

.s3-bar {
    position: absolute;
    bottom: 6cqw;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(12px);
    border-radius: 9999px;
    padding: 1.2cqw 4cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4cqw;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
    border: 1px solid rgba(255, 255, 255, .2);
    white-space: nowrap;
    z-index: 10;
    transition: background .5s;
    pointer-events: auto
}

.s3-bar:hover {
    background: rgba(255, 255, 255, .2)
}

.s3-bar span {
    font-size: 1.1cqw;
    font-weight: 300;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff
}

.s3-divider {
    width: 1px;
    height: 1.5cqw;
    background: rgba(255, 255, 255, .3);
    border-radius: 1px
}

/* ── Section 3: Desktop adaptive ── */
@media (max-width: 1200px) {
    .s3-bar {
        gap: 2cqw;
        padding: 1.2cqw 2.5cqw
    }

    .s3-bar span {
        font-size: max(1.1cqw, 14px)
    }
}

/* ── Section 3: Mobile ── */
@media (max-width: 768px) {
    #sec3 {
        height: auto;
        min-height: 80vh
    }

    .s3-title {
        margin-top: 0;
        padding: 0 20px
    }

    .s3-title h2 {
        font-size: 28px;
        line-height: 1.5;
        letter-spacing: .1em
    }

    .s3-bar {
        bottom: 40px;
        left: 16px;
        right: 16px;
        transform: none;
        flex-direction: column;
        gap: 16px;
        padding: 24px 20px;
        border-radius: 20px;
        white-space: normal
    }

    .s3-bar span {
        font-size: 14px;
        text-align: center;
        letter-spacing: .08em
    }

    .s3-divider {
        width: 40px;
        height: 1px
    }
}

/* ══════════════════════════════════════════
   SECTION 4  — Included Items (slider like sec28)
══════════════════════════════════════════ */
#sec4 {
    padding: 60px 0 0;
    overflow: hidden;
    background: #f8f9fa
}

.s4-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px
}

.s4-title {
    display: flex;
    align-items: center;
    font-size: 42px;
    font-weight: 800;
    color: #8A8A8E;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: -1px
}

.s4-title-icon {
    width: 48px;
    height: 48px;
    margin-right: 15px;
    color: #8A8A8E
}

.s4-slider-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px
}

.s4-slide-track {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.s4-slide-track::-webkit-scrollbar {
    display: none
}

.s4-slide {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-snap-align: start
}

.s4-image-placeholder {
    width: 100%;
    height: 340px;
    border-radius: 24px;
    background-color: #e0e0e0;
    margin-bottom: 20px;
    overflow: hidden
}

.s4-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.s4-slide p {
    font-size: 18px;
    line-height: 1.3;
    text-align: center;
    font-weight: 500;
    color: #111
}

.s4-slide .s4-subtitle {
    font-size: 14px;
    color: #777;
    font-weight: 400;
    margin-top: 6px
}

.s4-slider-arrow {
    position: absolute;
    top: 170px;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
    color: #333
}

.s4-slider-arrow:hover {
    background: #f0f0f0;
    transform: translateY(-50%) scale(1.05)
}

.s4-slider-arrow:active {
    transform: translateY(-50%) scale(.95)
}

.s4-arrow-prev {
    left: -4px
}

.s4-arrow-next {
    right: -4px
}

.s4-slider-arrow svg {
    width: 24px;
    height: 24px;
    fill: currentColor
}

.s4-slider-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px
}

.s4-dot {
    width: 12px;
    height: 12px;
    background-color: #d1d1d1;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .3s, transform .3s;
    border: none;
    padding: 0
}

.s4-dot:hover {
    background-color: #a0a0a0
}

.s4-dot.active {
    background-color: #555;
    transform: scale(1.2)
}

@media (max-width: 768px) {
    #sec4 {
        padding: 40px 0 0
    }

    .s4-container {
        padding: 0 16px
    }

    .s4-title {
        font-size: 26px;
        margin-bottom: 28px;
        letter-spacing: -0.5px;
        flex-wrap: wrap
    }

    .s4-title-icon {
        width: 36px;
        height: 36px;
        margin-right: 10px
    }

    .s4-slider-wrapper {
        padding: 0 16px
    }

    .s4-slide {
        width: 280px
    }

    .s4-image-placeholder {
        height: 380px;
        border-radius: 16px
    }

    .s4-slide p {
        font-size: 15px
    }

    .s4-slide .s4-subtitle {
        font-size: 13px
    }

    .s4-slider-arrow {
        display: none
    }

    .s4-slider-dots {
        margin-top: 20px;
        gap: 8px
    }

    .s4-dot {
        width: 8px;
        height: 8px
    }
}

@media (max-width: 480px) {
    #sec4 {
        padding: 32px 0 0
    }

    .s4-container {
        padding: 0 12px
    }

    .s4-title {
        font-size: 22px;
        margin-bottom: 20px
    }

    .s4-title-icon {
        width: 30px;
        height: 30px;
        margin-right: 8px
    }

    .s4-slider-wrapper {
        padding: 0 12px
    }

    .s4-slide {
        width: 260px
    }

    .s4-image-placeholder {
        height: 340px;
        border-radius: 12px;
        margin-bottom: 14px
    }

    .s4-slide p {
        font-size: 14px
    }

    .s4-slide .s4-subtitle {
        font-size: 12px;
        margin-top: 4px
    }

    .s4-slider-dots {
        margin-top: 16px;
        gap: 6px
    }

    .s4-dot {
        width: 6px;
        height: 6px
    }
}

/* ══════════════════════════════════════════
   SECTION 5  — The Promise (Hero Card)
══════════════════════════════════════════ */
#sec5 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #f8fafc
}

.s5-hero {
    position: relative;
    width: 100%;
    max-width: 1280px;
    height: 85vh;
    min-height: 600px;
    max-height: 850px;
    border-radius: 48px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25)
}

@media (max-width: 640px) {
    .s5-hero {
        border-radius: 24px
    }
}

.s5-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease
}

.s5-hero:hover .s5-bg-img {
    transform: scale(1.05)
}

.s5-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1) 50%, transparent)
}

.s5-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 16px;
    z-index: 20
}

@media (min-width: 640px) {
    .s5-content {
        padding: 32px
    }
}

@media (min-width: 768px) {
    .s5-content {
        padding: 48px
    }
}

@media (min-width: 1024px) {
    .s5-content {
        padding: 48px
    }
}

/* Mobile top bar */
.s5-mobile-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 16px
}

@media (min-width: 768px) {
    .s5-mobile-top {
        display: none
    }
}

/* Desktop bottom bar */
.s5-desktop-bottom {
    display: none
}

@media (min-width: 768px) {
    .s5-desktop-bottom {
        display: flex;
        position: absolute;
        bottom: 48px;
        right: 48px;
        justify-content: space-between;
        align-items: center;
        gap: 32px
    }
}

/* Dots */
.s5-dots {
    display: flex;
    gap: 8px
}

.s5-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5)
}

.s5-dot--active {
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
}

@media (min-width: 768px) {
    .s5-dot {
        width: 10px;
        height: 10px
    }
}

/* Watermark */
.s5-watermark {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: .9
}

.s5-watermark span {
    color: #fff;
    font-weight: 700;
    letter-spacing: .1em;
    font-size: 12px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4)
}

.s5-watermark--desktop .logo-icon {
    width: 20px;
    height: 20px
}

.s5-watermark--desktop span {
    font-size: 14px
}

/* Glassmorphism card */
.s5-card {
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .2);
    padding: 14px;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
    max-width: 100%;
    animation: s5FadeInUp .8s ease-out forwards
}

@media (min-width: 640px) {
    .s5-card {
        padding: 18px
    }
}

@media (min-width: 768px) {
    .s5-card {
        width: 360px
    }
}

@media (min-width: 1024px) {
    .s5-card {
        width: 400px;
        padding: 24px
    }
}

@keyframes s5FadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* Card logo */
.s5-card-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px
}

.s5-card-logo .logo-icon {
    width: 28px;
    height: 28px
}

.s5-card-logo span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #fff
}

@media (min-width: 640px) {
    .s5-card-logo span {
        font-size: 14px
    }
}

/* Card text */
.s5-card-text {
    font-size: 16px;
    line-height: 1.35;
    font-weight: 500;
    color: #fff
}

.s5-card-text strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff
}

@media (min-width: 640px) {
    .s5-card-text {
        font-size: 17px
    }

    .s5-card-text strong {
        font-size: 20px
    }
}

@media (min-width: 1024px) {
    .s5-card-text {
        font-size: 18px
    }

    .s5-card-text strong {
        font-size: 22px
    }
}

.s5-sub {
    color: rgba(255, 255, 255, .85);
    font-weight: 400
}

/* Yellow marker highlight */
.s5-highlight {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    font-weight: 500;
    color: #fff;
    z-index: 1
}

.s5-underline-svg {
    position: absolute;
    bottom: -4px;
    left: -2%;
    width: 104%;
    height: 10px;
    pointer-events: none
}

/* ══════════════════════════════════════════
   SECTION 14  — Not a Service Set (Hero Card)
══════════════════════════════════════════ */
#sec14 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #f8fafc
}

.s14-hero {
    position: relative;
    width: 100%;
    max-width: 1280px;
    height: 85vh;
    min-height: 600px;
    max-height: 850px;
    border-radius: 48px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25)
}

@media (max-width: 640px) {
    .s14-hero {
        border-radius: 24px
    }
}

.s14-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease
}

.s14-hero:hover .s14-bg-img {
    transform: scale(1.05)
}

.s14-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1) 50%, transparent)
}

.s14-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 16px;
    z-index: 20
}

@media (min-width: 640px) {
    .s14-content {
        padding: 32px
    }
}

@media (min-width: 768px) {
    .s14-content {
        padding: 48px
    }
}

@media (min-width: 1024px) {
    .s14-content {
        padding: 48px
    }
}

/* Mobile top bar */
.s14-mobile-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 16px
}

@media (min-width: 768px) {
    .s14-mobile-top {
        display: none
    }
}

/* Desktop bottom bar */
.s14-desktop-bottom {
    display: none
}

@media (min-width: 768px) {
    .s14-desktop-bottom {
        display: flex;
        position: absolute;
        bottom: 48px;
        right: 48px;
        justify-content: space-between;
        align-items: center;
        gap: 32px
    }
}

/* Dots */
.s14-dots {
    display: flex;
    gap: 8px
}

.s14-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5)
}

.s14-dot--active {
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
}

@media (min-width: 768px) {
    .s14-dot {
        width: 10px;
        height: 10px
    }
}

/* Watermark */
.s14-watermark {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: .9
}

.s14-watermark span {
    color: #fff;
    font-weight: 700;
    letter-spacing: .1em;
    font-size: 12px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4)
}

.s14-watermark--desktop .logo-icon {
    width: 20px;
    height: 20px
}

.s14-watermark--desktop span {
    font-size: 14px
}

/* Glassmorphism card */
.s14-card {
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .2);
    padding: 14px;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
    max-width: 100%;
    animation: s14FadeInUp .8s ease-out forwards
}

@media (min-width: 640px) {
    .s14-card {
        padding: 18px
    }
}

@media (min-width: 768px) {
    .s14-card {
        width: 360px
    }
}

@media (min-width: 1024px) {
    .s14-card {
        width: 400px;
        padding: 24px
    }
}

@keyframes s14FadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* Card logo */
.s14-card-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px
}

.s14-card-logo .logo-icon {
    width: 28px;
    height: 28px
}

.s14-card-logo span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #111827
}

@media (min-width: 640px) {
    .s14-card-logo span {
        font-size: 14px
    }
}

/* Card text */
.s14-card-text {
    font-size: 16px;
    line-height: 1.35;
    font-weight: 500;
    color: #111827
}

.s14-card-text strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #111827
}

@media (min-width: 640px) {
    .s14-card-text {
        font-size: 17px
    }

    .s14-card-text strong {
        font-size: 20px
    }
}

@media (min-width: 1024px) {
    .s14-card-text {
        font-size: 18px
    }

    .s14-card-text strong {
        font-size: 22px
    }
}

/* Yellow marker highlight */
.s14-highlight {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    font-weight: 500;
    color: #111827;
    z-index: 1
}

.s14-underline-svg {
    position: absolute;
    bottom: -4px;
    left: -2%;
    width: 104%;
    height: 10px;
    pointer-events: none
}

/* ══════════════════════════════════════════
   SECTION 6  — Interior Styles (ZEN / DRIVE)
══════════════════════════════════════════ */
#sec6 {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 4cqw 0;
    background: #F1F5F9;
    border-top: 1px solid #f3f4f6;
    position: relative;
    overflow: hidden;
    container-type: inline-size
}

.s6-circle1 {
    position: absolute;
    top: 10%;
    left: 5%;
    width: 40cqw;
    height: 40cqw;
    border: .2cqw solid #f3f4f6;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none
}

.s6-circle2 {
    position: absolute;
    bottom: 10%;
    right: 5%;
    width: 60cqw;
    height: 60cqw;
    border: .2cqw solid #f3f4f6;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none
}

.s6-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 8cqw;
    position: relative;
    z-index: 1
}

.s6-header {
    display: flex;
    align-items: center;
    gap: 1.2cqw;
    margin-bottom: 3cqw;
    color: #1f2937
}

.s6-header .logo-icon {
    width: 2.8cqw;
    height: 2.8cqw
}

.s6-header h1 {
    font-size: 2.5cqw;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1;
    color: #1f2937
}

.s6-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3cqw;
    width: 100%
}

.style-card {
    background: #F8FAFC;
    border-radius: 2.5cqw;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
    border: 1px solid #e5e7eb
}

.style-card-text {
    display: flex;
    flex-direction: column;
    width: 50%;
    padding: 2.5cqw;
    padding-right: 1cqw;
    justify-content: space-between;
    position: relative;
    z-index: 10
}

.style-badge {
    display: inline-block;
    background: #fff;
    padding: .4cqw 1.5cqw;
    border-radius: 9999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    margin-bottom: 1cqw;
    font-size: 1.2cqw;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: .05em
}

/* Mobile badge inside image — hidden on desktop */
.style-badge--mobile {
    display: none
}

.style-card h3 {
    font-size: 1.4cqw;
    font-weight: 500;
    color: #111827;
    line-height: 1.3;
    margin-bottom: 1cqw
}

.style-card ul {
    display: flex;
    flex-direction: column;
    gap: .5cqw;
    list-style: none
}

.style-card ul li {
    display: flex;
    align-items: center;
    gap: .6cqw;
    font-size: 1.1cqw;
    color: #4b5563
}

.style-card ul li::before {
    content: '';
    width: .4cqw;
    height: .4cqw;
    border-radius: 50%;
    background: #9ca3af;
    flex-shrink: 0
}

.style-palette {
    display: flex;
    gap: .8cqw;
    margin-top: auto
}

.swatch {
    width: 2.5cqw;
    height: 2.5cqw;
    border-radius: 50%;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1)
}

.style-card-img {
    width: 50%;
    height: 100%;
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%);
    mask-image: linear-gradient(to right, transparent, black 15%)
}

.style-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s
}

.style-card:hover .style-card-img img {
    transform: scale(1.05)
}

/* ══════════════════════════════════════════
   SECTION 7  — ZEN Showcase
══════════════════════════════════════════ */
#sec7 {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #f3f4f6;
    background: #f3f4f6;
    container-type: inline-size
}

#sec7 img.s7-bg {
    width: 100%;
    height: auto;
    display: block
}

.s7-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center
}

.s7-badge {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(4px);
    padding: 1.2vw 4vw;
    border-radius: 9999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    border: 1px solid rgba(255, 255, 255, .5);
    transition: transform .5s
}

.s7-badge:hover {
    transform: scale(1.05)
}

.s7-badge span {
    font-size: 3vw;
    font-weight: 700;
    color: #111827;
    letter-spacing: .3em;
    padding-left: .3em
}

.s7-logo {
    position: absolute;
    bottom: 2vw;
    right: 3vw;
    display: flex;
    align-items: center;
    gap: .5vw;
    color: #fff;
    opacity: .8;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
    mix-blend-mode: overlay;
    z-index: 10
}

.s7-logo .logo-icon {
    width: 2vw;
    height: 2vw
}

.s7-logo span {
    font-size: 1.5vw;
    font-weight: 700;
    letter-spacing: .1em
}

/* ── Section 7: Mobile ── */
@media (max-width: 768px) {
    #sec7 {
        height: auto;
        min-height: 80vh
    }

    #sec7 img.s7-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    .s7-badge {
        padding: 14px 48px;
        border-radius: 9999px
    }

    .s7-badge span {
        font-size: 28px;
        letter-spacing: .3em;
        padding-left: .3em
    }

    .s7-logo {
        bottom: 20px;
        right: 20px
    }

    .s7-logo .logo-icon {
        width: 20px;
        height: 20px
    }

    .s7-logo span {
        font-size: 16px
    }
}

/* ══════════════════════════════════════════
   SECTION 8  — Rooms Gallery
══════════════════════════════════════════ */
#sec8 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8cqw 0;
    background: #fff;
    position: relative;
    overflow: hidden;
    container-type: inline-size
}

.s8-bg1 {
    position: absolute;
    top: 10%;
    left: 5%;
    width: 40cqw;
    height: 40cqw;
    background: #F8FAFC;
    border-radius: 50%;
    filter: blur(4cqw);
    z-index: 0;
    pointer-events: none
}

.s8-bg2 {
    position: absolute;
    bottom: 20%;
    right: 10%;
    width: 50cqw;
    height: 50cqw;
    background: #F8FAFC;
    border-radius: 50%;
    filter: blur(5cqw);
    z-index: 0;
    pointer-events: none
}

.s8-tabs-wrap {
    width: 100%;
    max-width: 1440px;
    padding: 0 4cqw;
    margin-bottom: 5cqw;
    position: relative;
    z-index: 20
}

.s8-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5cqw;
    border-bottom: 1px solid #f3f4f6
}

.s8-tab {
    padding-bottom: 1cqw;
    padding-left: .5cqw;
    padding-right: .5cqw;
    font-size: 1.1cqw;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: #9ca3af;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color .3s;
    white-space: nowrap
}

.s8-tab.active {
    color: #111827
}

.s8-tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    height: .2cqw;
    background: #facc15;
    transition: width .3s, opacity .3s;
    width: 0;
    opacity: 0
}

.s8-tab.active::after {
    width: 100%;
    opacity: 1
}

.s8-tab:not(.active):hover::after {
    width: 50%;
    opacity: .5
}

.s8-content {
    width: 100%;
    max-width: 1440px;
    padding: 0 4cqw;
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    gap: 2cqw;
    align-items: start;
    position: relative;
    z-index: 10
}

.s8-text {
    display: flex;
    flex-direction: column;
    animation: fadeIn .5s ease-out;
    position: relative
}

.s8-text-header {
    display: flex;
    align-items: center;
    gap: 1.2cqw;
    margin-bottom: 2cqw;
    color: #1f2937;
    position: relative;
    z-index: 30;
    background: #fff
}

.s8-text-header .logo-icon {
    width: 4cqw;
    height: 4cqw
}

.s8-text-header h2 {
    font-size: 2.6cqw;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1;
    padding-top: .5cqw;
    white-space: nowrap
}

.s8-divider {
    width: 6cqw;
    height: .2cqw;
    background: #facc15;
    margin-bottom: 2cqw
}

.s8-paragraphs {
    display: flex;
    flex-direction: column;
    gap: .25cqw;
    font-size: 1.1cqw;
    color: #4b5563;
    line-height: 1.35;
    font-weight: 300;
    text-align: justify;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative
}

.s8-paragraphs::-webkit-scrollbar {
    display: none
}

.s8-paragraphs::after {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    flex-shrink: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, #fff);
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s
}

.s8-paragraphs.has-scroll::after {
    opacity: 1
}

.s8-paragraphs.scrolled-end::after {
    opacity: 0
}

.s8-paragraphs p {
    margin-bottom: .15cqw;
    text-indent: 1.5em
}

.s8-photos {
    height: 55cqw;
    width: 100%;
    animation: fadeIn .5s ease-out
}

.mosaic {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 1.5cqw;
    height: 100%;
    align-items: start
}

.mosaic-col {
    display: flex;
    flex-direction: column;
    gap: 1.5cqw;
    height: 92%
}

.mosaic-col .photo-frame:first-child {
    flex: 1.6
}

.mosaic-col .photo-frame:last-child {
    flex: 1
}

.mosaic-main {
    border-radius: 2.5cqw;
    overflow: hidden;
    height: 92%
}

/* 3 photos in a row — first photo is slightly shorter */
.three-cols {
    display: flex;
    gap: 1.5cqw;
    height: 100%;
    width: 100%;
    align-items: flex-end
}

.three-cols .photo-frame {
    flex: 1;
    height: 100%
}

.three-cols .photo-frame:first-child {
    height: 82%
}

.two-cols-sm-first {
    display: flex;
    gap: 1.5cqw;
    height: 100%;
    width: 100%;
    align-items: flex-end
}

.two-cols-sm-first .photo-frame {
    flex: 1;
    height: 100%
}

.two-cols-sm-first .photo-frame:first-child {
    height: 82%
}

.two-cols-wide-first {
    display: flex;
    gap: 1.5cqw;
    height: 100%;
    width: 100%
}

.two-cols-wide-first .photo-frame:first-child {
    flex: 1.8;
    height: 100%
}

.two-cols-wide-first .photo-frame:last-child {
    flex: 1;
    height: 100%
}

.two-cols-hallway {
    display: flex;
    gap: 1.5cqw;
    height: 100%;
    width: 100%;
    align-items: flex-end
}

.two-cols-hallway .photo-frame:first-child {
    flex: 0.8;
    height: 82%
}

.two-cols-hallway .photo-frame:last-child {
    flex: 1.5;
    height: 100%
}

.two-cols {
    display: flex;
    gap: 1cqw;
    height: 100%;
    width: 100%
}

.photo-frame {
    border-radius: 2.5cqw;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    flex: 1
}

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

.photo-placeholder {
    flex: 1;
    background: #f9fafb;
    border-radius: 2.5cqw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #f3f4f6;
    position: relative;
    overflow: hidden
}

.photo-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(249, 250, 251, .5), rgba(243, 244, 246, .5))
}

.photo-placeholder svg {
    color: #d1d5db;
    width: 4cqw;
    height: 4cqw;
    margin-bottom: 1cqw;
    position: relative;
    z-index: 1
}

.photo-placeholder span {
    font-size: 1cqw;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .1em;
    position: relative;
    z-index: 1
}

.s8-dots {
    grid-column: 1/-1;
    display: flex;
    justify-content: center;
    gap: 1cqw;
    margin-top: 4cqw;
    position: relative;
    z-index: 20
}

.s8-dot {
    width: 1cqw;
    height: 1cqw;
    border-radius: 50%;
    background: #e5e7eb;
    border: none;
    cursor: pointer;
    transition: all .3s;
    padding: 0
}

.s8-dot.active {
    background: #facc15;
    transform: scale(1.25);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15)
}

/* ── Section 8: Mobile ── */
@media (max-width: 768px) {
    #sec8 {
        padding: 40px 0
    }

    .s8-bg1,
    .s8-bg2 {
        display: none
    }

    /* Tabs: horizontal scroll */
    .s8-tabs-wrap {
        padding: 0 16px;
        margin-bottom: 24px
    }

    .s8-tabs {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch
    }

    .s8-tabs::-webkit-scrollbar {
        display: none
    }

    .s8-tab {
        font-size: 11px;
        padding: 8px 10px;
        padding-bottom: 10px;
        white-space: nowrap;
        letter-spacing: .08em
    }

    .s8-tab::after {
        height: 2px
    }

    /* Content: stack vertically */
    .s8-content {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 16px
    }

    /* Text block — reset max-height and scroll for mobile (single column) */
    .s8-text {
        animation: fadeIn .4s ease-out;
        max-height: none !important;
        overflow-y: visible !important
    }

    .s8-text-header {
        gap: 10px;
        margin-bottom: 14px
    }

    .s8-text-header .logo-icon {
        width: 28px;
        height: 28px
    }

    .s8-text-header h2 {
        font-size: 20px;
        letter-spacing: .03em;
        padding-top: 2px
    }

    .s8-divider {
        width: 40px;
        height: 2px;
        margin-bottom: 12px
    }

    .s8-paragraphs {
        font-size: 13px;
        line-height: 1.45;
        gap: 4px
    }

    .s8-paragraphs p {
        margin-bottom: 4px;
        text-indent: 1.2em
    }

    /* Photos container */
    .s8-photos {
        height: 300px;
        animation: fadeIn .4s ease-out
    }

    /* Photo frame */
    .photo-frame {
        border-radius: 12px
    }

    /* Mosaic layouts — all aligned to same top & bottom */
    .mosaic {
        grid-template-columns: 1fr 1.3fr;
        gap: 8px;
        align-items: stretch
    }

    .mosaic-col {
        gap: 8px;
        height: 100%;
        overflow: hidden
    }

    .mosaic-col .photo-frame:first-child {
        flex: 1.6
    }

    .mosaic-col .photo-frame:last-child {
        flex: 1
    }

    .mosaic-main {
        height: 100%;
        border-radius: 12px;
        overflow: hidden
    }

    /* Three equal columns */
    .three-cols {
        gap: 8px;
        align-items: stretch
    }

    .three-cols .photo-frame {
        height: 100% !important
    }

    /* Two cols: small first */
    .two-cols-sm-first {
        gap: 8px;
        align-items: stretch
    }

    .two-cols-sm-first .photo-frame {
        height: 100% !important
    }

    /* Two cols: wide first */
    .two-cols-wide-first {
        gap: 8px;
        align-items: stretch
    }

    .two-cols-wide-first .photo-frame {
        height: 100% !important
    }

    /* Hallway */
    .two-cols-hallway {
        gap: 8px;
        align-items: stretch
    }

    .two-cols-hallway .photo-frame {
        height: 100% !important
    }

    /* Generic two cols */
    .two-cols {
        gap: 8px;
        align-items: stretch
    }

    /* Dots */
    .s8-dots {
        margin-top: 40px;
        gap: 8px
    }

    .s8-dot {
        width: 10px;
        height: 10px
    }
}

@media (max-width: 480px) {
    #sec8 {
        padding: 28px 0
    }

    .s8-tabs-wrap {
        margin-bottom: 18px
    }

    .s8-tab {
        font-size: 10px;
        padding: 6px 8px;
        padding-bottom: 8px
    }

    .s8-text-header .logo-icon {
        width: 22px;
        height: 22px
    }

    .s8-text-header h2 {
        font-size: 17px
    }

    .s8-paragraphs {
        font-size: 12px;
        line-height: 1.4
    }

    .s8-photos {
        height: 240px
    }

    .photo-frame {
        border-radius: 10px
    }

    .mosaic,
    .three-cols,
    .two-cols-sm-first,
    .two-cols-wide-first,
    .two-cols-hallway,
    .two-cols {
        gap: 6px
    }

    .s8-dots {
        margin-top: 28px;
        gap: 6px
    }

    .s8-dot {
        width: 8px;
        height: 8px
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* SVG logo */
.logo-icon {
    flex-shrink: 0
}

/* ══════════════════════════════════════════
   SECTION 9  — DRIVE Showcase
══════════════════════════════════════════ */
#sec9 {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #f3f4f6;
    background: #f3f4f6;
    container-type: inline-size
}

#sec9 img.s9-bg {
    width: 100%;
    height: auto;
    display: block
}

.s9-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center
}

.s9-badge {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(4px);
    padding: 1.2vw 4vw;
    border-radius: 9999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    border: 1px solid rgba(255, 255, 255, .5);
    transition: transform .5s
}

.s9-badge:hover {
    transform: scale(1.05)
}

.s9-badge span {
    font-size: 3vw;
    font-weight: 700;
    color: #111827;
    letter-spacing: .3em;
    padding-left: .3em;
    text-transform: uppercase
}

.s9-logo {
    position: absolute;
    bottom: 2vw;
    right: 3vw;
    display: flex;
    align-items: center;
    gap: .5vw;
    color: #fff;
    opacity: .8;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
    mix-blend-mode: overlay;
    z-index: 10
}

.s9-logo .logo-icon {
    width: 2vw;
    height: 2vw
}

.s9-logo span {
    font-size: 1.5vw;
    font-weight: 700;
    letter-spacing: .1em
}

/* ── Section 9: Mobile ── */
@media (max-width: 768px) {
    #sec9 {
        height: auto;
        min-height: 80vh
    }

    #sec9 img.s9-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    .s9-badge {
        padding: 14px 48px;
        border-radius: 9999px
    }

    .s9-badge span {
        font-size: 28px;
        letter-spacing: .3em;
        padding-left: .3em
    }

    .s9-logo {
        bottom: 20px;
        right: 20px
    }

    .s9-logo .logo-icon {
        width: 20px;
        height: 20px
    }

    .s9-logo span {
        font-size: 16px
    }
}

/* ══════════════════════════════════════════
   SECTION 10 — DRIVE Variants
══════════════════════════════════════════ */
#sec10 {
    width: 100%;
    background: #f0f2f5;
    container-type: inline-size;
    padding-bottom: 4cqw
}

.s10-header {
    display: flex;
    align-items: center;
    gap: 2vw;
    padding: 3vw 5vw 3vw
}

.s10-header-icon {
    width: 6.5vw;
    height: 6.5vw;
    flex-shrink: 0;
    color: #374151
}

.s10-title {
    font-size: 3.2vw;
    font-weight: 800;
    color: #1f2937;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: 0
}

.s10-grid {
    display: flex;
    gap: 1.5cqw;
    padding: 0 5vw;
    width: 100%
}


/* ═══════════════════════════════════════════════════════
       НАСТРОЙКА РАМОК SECTION 10 — МЕНЯЙТЕ ЗДЕСЬ
       ═══════════════════════════════════════════════════════
       --s10-scale : ширина изображения относительно одной рамки
                     400% = ровно 4 панели без пробелов
                     Увеличьте, если картинки «обрезаются» по краям

       --s10-top   : вертикальный сдвиг (сколько срезается сверху)
                     0% = потолок виден с самого верха
                     Увеличьте, чтобы опустить картинку вниз (обрезать больше потолка)

       --s10-x1…x4: горизонтальная позиция каждой из 4 панелей
                     Уменьшите, если панель «съехала» вправо; увеличьте — если влево
     ═══════════════════════════════════════════════════════ */
#sec10 {
    /* ОБЩИЙ МАСШТАБ (увеличьте до 415-420%, чтобы фото "заплывало" под скругления) */
    --s10-scale: 405%;

    /* ВЫСОТА (соотношение сторон) — уменьшайте число, чтобы укорачивать рамки */
    --s10-ratio: 1.4;

    /* ВЕРТИКАЛЬНЫЙ СДВИГ (0% — top, 100% — bottom) */
    --s10-top: 40%;

    /* ГОРИЗОНТАЛЬНАЯ ПОЗИЦИЯ ПАНЕЛЕЙ */
    --s10-x1: -0%;
    --s10-x2: 33%;
    --s10-x3: 67%;
    --s10-x4: 100%;

    /* ИНДИВИДУАЛЬНАЯ ШИРИНА РАМОК (верните 1, чтобы не искажать пропорции мебели) */
    --s10-w1: 0.9;
    --s10-w2: 0.9;
    --s10-w3: 0.9;
    --s10-w4: 0.9
}

/* Each div is a viewport showing one quarter of the composite image.
       background-position X% shifts to the correct panel horizontally. */
.s10-win {
    border-radius: 2.5cqw;
    overflow: hidden;
    position: relative;
    background-image: url('images/section_10/img17.jpg');
    background-repeat: no-repeat;
    width: 100%;
    /* Высота всей секции контролируется через ratio */
    aspect-ratio: 1 / var(--s10-ratio)
}

.s10-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* flex:N задаётся через nth-child ниже */
    min-width: 0
}

/* Horizontal + vertical position + width for each panel */
.s10-col:nth-child(1) {
    flex: var(--s10-w1)
}

.s10-col:nth-child(1) .s10-win {
    background-size: calc(var(--s10-scale) / var(--s10-w1)) auto;
    background-position: var(--s10-x1) var(--s10-top);
}

.s10-col:nth-child(2) {
    flex: var(--s10-w2)
}

.s10-col:nth-child(2) .s10-win {
    background-size: calc(var(--s10-scale) / var(--s10-w2)) auto;
    background-position: var(--s10-x2) var(--s10-top);
}

.s10-col:nth-child(3) {
    flex: var(--s10-w3)
}

.s10-col:nth-child(3) .s10-win {
    background-size: calc(var(--s10-scale) / var(--s10-w3)) auto;
    background-position: var(--s10-x3) var(--s10-top);
}

.s10-col:nth-child(4) {
    flex: var(--s10-w4)
}

.s10-col:nth-child(4) .s10-win {
    background-size: calc(var(--s10-scale) / var(--s10-w4)) auto;
    background-position: var(--s10-x4) var(--s10-top);
}

/* ─── DRIVE Section 10: Swatches Styling ─── */
.s10-swatches {
    margin-top: 1.5cqw;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0.8cqw;
    pointer-events: none
}

.s10-dot {
    width: 1.8cqw;
    height: 1.8cqw;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)
}

/* 
      ===============================================
      ЦВЕТА ДЛЯ КРУЖОЧКОВ (SECTION 10)
      ===============================================
      Ниже вы можете редактировать HEX-коды цветов (#...)
      для каждого из пяти кружков во всех четырех панелях.
    */

/* Панель 1 (Синяя) */
.win1 .dot1 {
    background: #D5C8C1
}

.win1 .dot2 {
    background: #1C4D78
}

.win1 .dot3 {
    background: #A45A33
}

.win1 .dot4 {
    background: #323A45
}

.win1 .dot5 {
    background: #1E2734
}

/* Панель 2 (Серая) */
.win2 .dot1 {
    background: #D9C3A0
}

.win2 .dot2 {
    background: #C9BFAC
}

.win2 .dot3 {
    background: #A4A19F
}

.win2 .dot4 {
    background: #6D7763
}

.win2 .dot5 {
    background: #434734
}

/* Панель 3 (Красная) */
.win3 .dot1 {
    background: #611818
}

.win3 .dot2 {
    background: #A45952
}

.win3 .dot3 {
    background: #D9C2AF
}

.win3 .dot4 {
    background: #C9A1A1
}

.win3 .dot5 {
    background: #4D5D78
}

/* Панель 4 (Желтая) */
.win4 .dot1 {
    background: #F0B130
}

.win4 .dot2 {
    background: #E6A140
}

.win4 .dot3 {
    background: #2C4D6B
}

.win4 .dot4 {
    background: #333A45
}

.win4 .dot5 {
    background: #0D0D0D
}

/* ─────────────────────────────────── */

/* ── Section 10: Mobile (swipe carousel with peek + dots) ── */
.s10-carousel-dots {
    display: none
}

@media (max-width: 768px) {
    #sec10 {
        padding-bottom: 0;
        overflow: hidden
    }

    .s10-header {
        gap: 12px;
        padding: 24px 16px 16px;
        align-items: center
    }

    .s10-header-icon {
        width: 40px;
        height: 40px
    }

    .s10-title {
        font-size: 18px;
        line-height: 1.2;
        letter-spacing: 0
    }

    .s10-carousel-wrapper {
        position: relative
    }

    .s10-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0;
        padding: 0 24px;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: 24px
    }

    .s10-grid::-webkit-scrollbar {
        display: none
    }

    .s10-col {
        flex: 0 0 calc(100vw - 72px);
        scroll-snap-align: start;
        padding: 0 6px
    }

    .s10-win {
        border-radius: 16px;
        aspect-ratio: 3 / 4
    }

    /* Override composite image with individual photos */
    .s10-col:nth-child(1) .s10-win {
        background-image: url('images/section_10/img17_1.webp');
        background-size: cover;
        background-position: center
    }

    .s10-col:nth-child(2) .s10-win {
        background-image: url('images/section_10/img17_2.webp');
        background-size: cover;
        background-position: center
    }

    .s10-col:nth-child(3) .s10-win {
        background-image: url('images/section_10/img17_3.webp');
        background-size: cover;
        background-position: center
    }

    .s10-col:nth-child(4) .s10-win {
        background-image: url('images/section_10/img17_4.webp');
        background-size: cover;
        background-position: center
    }

    .s10-swatches {
        margin-top: 12px;
        gap: 6px;
        padding-bottom: 4px
    }

    .s10-dot {
        width: 16px;
        height: 16px
    }

    /* Dots */
    .s10-carousel-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 16px 0 24px
    }

    .s10-carousel-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #d1d5db;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: background 0.25s, transform 0.25s
    }

    .s10-carousel-dot.active {
        background: #1f2937;
        transform: scale(1.25)
    }
}

@media (max-width: 480px) {
    .s10-header {
        gap: 8px;
        padding: 16px 12px 12px
    }

    .s10-header-icon {
        width: 32px;
        height: 32px
    }

    .s10-title {
        font-size: 15px
    }

    .s10-col {
        flex: 0 0 calc(100vw - 56px)
    }

    .s10-grid {
        padding: 0 16px;
        scroll-padding-left: 16px
    }

    .s10-win {
        border-radius: 12px
    }

    .s10-dot {
        width: 12px;
        height: 12px
    }

    .s10-carousel-dot {
        width: 8px;
        height: 8px
    }
}

/* ─────────────────────────────────── */

/* ══════════════════════════════════════════
   INLINE-STYLE REPLACEMENTS
   (moved from HTML to CSS per workspace rules)
══════════════════════════════════════════ */

/* Section 2: narrow slide description */
.slide-desc--narrow {
    max-width: 65%
}


/* Section 6: swatch colors */
.swatch--zen-1 {
    background: #e6ddd2
}

.swatch--zen-2 {
    background: #c2b3a3
}

.swatch--zen-3 {
    background: #7a644c
}

.swatch--drive-1 {
    background: #203154
}

.swatch--drive-2 {
    background: #b54a3e
}

.swatch--drive-3 {
    background: #3d3f42
}

.swatch--drive-4 {
    background: #d0d3d6
}

/* ── Section 6: Mobile (carousel) ── */
.s6-carousel-wrap {
    display: contents
}

.s6-arrow {
    display: none
}

@media (max-width: 768px) {
    #sec6 {
        padding: 32px 0;
        overflow: hidden
    }

    .s6-circle1,
    .s6-circle2 {
        display: none
    }

    .s6-inner {
        padding: 0 16px
    }

    .s6-header {
        gap: 10px;
        margin-bottom: 20px
    }

    .s6-header .logo-icon {
        width: 28px;
        height: 28px
    }

    .s6-header h1 {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -0.01em
    }

    .s6-carousel-wrap {
        display: block;
        position: relative
    }

    .s6-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 16px;
        padding-bottom: 8px;
        padding-left: 0;
        padding-right: 0
    }

    .s6-grid::-webkit-scrollbar {
        display: none
    }

    .style-card {
        width: 100%;
        height: 85vh;
        flex-shrink: 0;
        scroll-snap-align: center;
        flex-direction: column;
        border-radius: 20px;
        overflow: hidden
    }

    .style-card-text {
        width: 100%;
        padding: 24px 20px 16px;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        flex-shrink: 0
    }

    /* Hide original badge in text block on mobile */
    .style-card-text .style-badge {
        display: none
    }

    /* Show mobile badge overlaid on image */
    .style-badge--mobile {
        display: flex;
        position: absolute;
        top: 16px;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 36px;
        font-size: 28px;
        font-weight: 700;
        letter-spacing: 2px;
        background: #fff;
        border-radius: 9999px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
        z-index: 10;
        color: #1f2937
    }

    .style-card h3 {
        font-size: 22px;
        font-weight: 600;
        line-height: 1.2;
        margin-bottom: 12px;
        text-align: center;
        white-space: normal
    }

    .style-card ul {
        gap: 2px;
        align-items: center
    }

    .style-card ul li {
        font-size: 17px;
        gap: 6px;
        justify-content: center;
        text-align: center;
        line-height: 1.5
    }

    .style-card ul li::before {
        width: 4px;
        height: 4px
    }

    .style-palette {
        gap: 8px;
        margin-top: 14px;
        justify-content: center
    }

    .swatch {
        width: 24px;
        height: 24px
    }

    .style-card-img {
        width: 100%;
        flex: 1 1 0;
        min-height: 0;
        -webkit-mask-image: none;
        mask-image: none;
        border-radius: 0;
        overflow: hidden
    }

    .style-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block
    }

    /* Carousel arrows */
    .s6-arrow {
        display: flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(4px);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        color: #374151;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        align-items: center;
        justify-content: center;
        transition: background 0.2s, transform 0.2s
    }

    .s6-arrow:hover {
        background: #FACC15;
        transform: translateY(-50%) scale(1.1)
    }

    .s6-arrow svg {
        width: 20px;
        height: 20px
    }

    .s6-arrow--prev {
        left: 4px
    }

    .s6-arrow--next {
        right: 4px
    }
}

@media (max-width: 480px) {
    #sec6 {
        padding: 24px 0
    }

    .s6-inner {
        padding: 0 12px
    }

    .s6-header h1 {
        font-size: 15px
    }

    .style-card {
        width: 100%;
        height: 85vh;
        border-radius: 16px
    }

    .style-card-text {
        padding: 16px 12px 10px
    }

    .style-badge--mobile {
        font-size: 24px;
        padding: 8px 28px;
        top: 12px
    }

    .style-card h3 {
        font-size: 18px;
        margin-bottom: 8px
    }

    .style-card ul li {
        font-size: 15px
    }

    .swatch {
        width: 20px;
        height: 20px
    }

    .style-card-img {
        flex: 1;
        min-height: 0
    }

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

    .s6-grid {
        padding-left: 0;
        padding-right: 0;
        gap: 12px
    }

    .s6-arrow {
        width: 36px;
        height: 36px
    }

    .s6-arrow svg {
        width: 18px;
        height: 18px
    }
}

/* ══════════════════════════════════════════
   SECTION 11 — Drive Rooms Gallery
══════════════════════════════════════════ */
#sec11 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8cqw 0;
    background: #fff;
    position: relative;
    overflow: hidden;
    container-type: inline-size
}

/* ── Section 11: compact text spacing ── */
#sec11 .s8-paragraphs {
    line-height: 1.35;
    gap: .25cqw
}

#sec11 .s8-paragraphs p {
    margin-bottom: .15cqw
}

/* ══════════════════════════════════════════
   SECTION 12 — Two Approaches
══════════════════════════════════════════ */
#sec12 {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #f3f4f6;
    background: #f3f4f6;
    container-type: inline-size
}

#sec12 img.s12-bg {
    width: 100%;
    height: auto;
    display: block
}

.s12-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center
}

.s12-badge {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(4px);
    padding: 1.8vw 4vw;
    border-radius: 9999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    border: 1px solid rgba(255, 255, 255, .5);
    transition: transform .5s
}

.s12-badge:hover {
    transform: scale(1.05)
}

.s12-badge span {
    display: block;
    font-size: 2.2vw;
    font-weight: 700;
    color: #111827;
    letter-spacing: .15em;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.4
}

.s12-logo {
    position: absolute;
    bottom: 2vw;
    right: 3vw;
    display: flex;
    align-items: center;
    gap: .5vw;
    color: #fff;
    opacity: .8;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
    mix-blend-mode: overlay;
    z-index: 10
}

.s12-logo .logo-icon {
    width: 2vw;
    height: 2vw
}

.s12-logo span {
    font-size: 1.5vw;
    font-weight: 700;
    letter-spacing: .1em
}

/* ── Section 12: Mobile ── */
@media (max-width: 768px) {
    #sec12 {
        height: auto;
        min-height: 80vh
    }

    #sec12 img.s12-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    .s12-badge {
        padding: 14px 36px;
        border-radius: 9999px
    }

    .s12-badge span {
        font-size: 28px;
        letter-spacing: .1em;
        line-height: 1.4
    }

    .s12-logo {
        bottom: 20px;
        right: 20px
    }

    .s12-logo .logo-icon {
        width: 20px;
        height: 20px
    }

    .s12-logo span {
        font-size: 16px
    }
}

/* ══════════════════════════════════════════
   SECTION 13 — Comparison (Design vs FLIK Smart)
══════════════════════════════════════════ */

#sec13 {
    --s13-text-dark: #1a1e26;
    --s13-text-light: #525a66;
    --s13-bg-body: #f8fafc;
    --s13-border-color: #0f172a;
    --s13-border-light: #94a3b8;
    --s13-left-icon-bg: #64748b;
    --s13-right-icon-bg: #ca8a04;
    --s13-highlight-yellow: #fcd34d;

    background-color: var(--s13-bg-body);
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.7) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.9) 0%, transparent 30%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px
}

.s13-main-wrapper {
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: column
}

.s13-comparison-container {
    display: flex;
    gap: 24px;
    width: 100%
}

.s13-column {
    flex: 1;
    display: flex;
    flex-direction: column
}

/* Column headers */
.s13-column-header {
    margin-bottom: 16px;
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 20px
}

.s13-column-header h2 {
    font-size: 24px;
    font-weight: 500;
    color: var(--s13-text-dark);
    position: relative
}

.s13-flik-header {
    display: flex;
    align-items: center;
    gap: 12px
}

.s13-flik-logo-icon {
    display: flex;
    align-items: center
}

.s13-flik-text-container {
    position: relative;
    display: inline-block
}

.s13-flik-text-container::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 4px;
    background-color: var(--s13-highlight-yellow);
    border-radius: 2px
}

/* Cards */
.s13-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid var(--s13-border-color);
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .04);
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

/* List items */
.s13-list-item {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--s13-border-light);
    transition: background-color .2s ease;
    flex-grow: 1
}

.s13-list-item:last-child {
    border-bottom: none
}

.s13-list-item:hover {
    background-color: rgba(0, 0, 0, .01)
}

/* Icon circles */
.s13-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-right: 20px
}

.s13-individual-design .s13-icon-circle {
    background-color: var(--s13-left-icon-bg);
    box-shadow: inset -4px -4px 8px rgba(0, 0, 0, .15), inset 4px 4px 8px rgba(255, 255, 255, .2)
}

.s13-flik-smart .s13-icon-circle {
    background-color: var(--s13-right-icon-bg);
    box-shadow: inset -4px -4px 8px rgba(0, 0, 0, .1), inset 4px 4px 8px rgba(255, 255, 255, .4)
}

.s13-icon-circle svg {
    width: 26px;
    height: 26px;
    stroke: #ffffff;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .95
}

.s13-icon-filled svg {
    fill: rgba(255, 255, 255, .25)
}

/* Text content */
.s13-text-content {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.s13-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--s13-text-light);
    text-transform: uppercase;
    letter-spacing: .5px
}

.s13-item-desc {
    font-size: 15px;
    font-weight: 400;
    color: var(--s13-text-dark);
    line-height: 1.4
}

/* Footer note */
.s13-footer-note {
    margin-top: 16px;
    color: var(--s13-border-light);
    font-size: 14px;
    text-align: left;
    padding-left: 20px
}

/* Responsive */
@media (max-width: 900px) {
    .s13-comparison-container {
        flex-direction: column;
        gap: 40px
    }

    .s13-column-header h2 {
        font-size: 22px
    }

    .s13-column-header {
        padding-left: 0;
        height: auto
    }

    .s13-footer-note {
        padding-left: 0;
        text-align: center;
        margin-top: 24px
    }
}


/* ══════════════════════════════════════════
   SECTION 16 — ШАГИ ДОРОЖНОЙ КАРТЫ
══════════════════════════════════════════ */
#sec16 {
    width: 100%;
    background-color: #f7f9fd;
    padding: 30px 0 50px;
    position: relative;
    border-top: 1px solid #f3f4f6
}

/* ── Tabs ── */
.s16-tabs {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    border-bottom: 2px solid #d0d0d0
}

.s16-tab {
    padding: 14px 32px;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    font-size: 16px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .05em;
    transition: color .3s, background .3s
}

.s16-tab::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #ffc542;
    opacity: 0;
    transition: opacity .3s
}

.s16-tab.active::after {
    opacity: 1
}

.s16-tab.active {
    color: #333
}

.s16-tab:not(.active):hover {
    background: rgba(0, 0, 0, .02);
    color: #555
}

/* ── Slides ── */
.s16-slides-wrapper {
    position: relative;
    overflow: hidden;
    padding-top: 28px
}

.s16-slide {
    display: none;
    animation: s16FadeIn .4s ease-out
}

.s16-slide.active {
    display: block
}

@keyframes s16FadeIn {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.s16-inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 40px;
    align-items: center
}

.s16-content-left {
    flex: 1
}

.s16-header {
    display: flex;
    align-items: center;
    font-size: 36px;
    font-weight: 800;
    color: #8A8A8E;
    margin-bottom: 24px;
    text-transform: uppercase;
    white-space: nowrap
}

.s16-title-icon {
    width: 40px;
    height: 40px;
    margin-right: 14px;
    flex-shrink: 0
}

.s16-title {
    font-size: 36px;
    font-weight: 800;
    color: #8A8A8E;
    margin: 0;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: -1px
}

.s16-highlight-wrap {
    position: relative;
    display: inline-block;
    margin-left: 10px
}

.s16-highlight-line {
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 14px;
    z-index: -1
}

.s16-timeline {
    flex: 1;
    border-top: 1px solid #c0c0c0;
    display: flex;
    flex-direction: column
}

.s16-timeline-item {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #c0c0c0;
    gap: 20px
}

.s16-icon-circle {
    width: 64px;
    height: 64px;
    background-color: #797c82;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0
}

.s16-icon-circle svg {
    width: 32px;
    height: 32px
}

.s16-item-text h3 {
    font-size: 20px;
    font-weight: 600;
    color: #111;
    margin-bottom: 8px
}

.s16-item-text p {
    font-size: 15px;
    font-weight: 400;
    color: #222;
    line-height: 1.4;
    max-width: 550px
}

.s16-image {
    width: 320px;
    height: 380px;
    flex-shrink: 0
}

.s16-image-placeholder {
    width: 100%;
    height: 380px;
    background-color: #e5e5e5;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px dashed #b0b0b0;
    color: #666;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    padding: 20px
}

/* ══════════════════════════════════════════
   SECTION 15 — Roadmap
══════════════════════════════════════════ */
#sec15 {
    width: 100%;
    height: 110vh;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #f3f4f6;
    background: #f3f4f6;
    container-type: inline-size
}

#sec15 img.s15-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.s15-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center
}

.s15-badge {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(4px);
    padding: 1.8vw 4vw;
    border-radius: 9999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    border: 1px solid rgba(255, 255, 255, .5);
    transition: transform .5s
}

.s15-badge:hover {
    transform: scale(1.05)
}

.s15-badge span {
    display: block;
    font-size: 2.2vw;
    font-weight: 700;
    color: #111827;
    letter-spacing: .15em;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.4
}

.s15-logo {
    position: absolute;
    bottom: 2vw;
    right: 3vw;
    display: flex;
    align-items: center;
    gap: .5vw;
    color: #fff;
    opacity: .8;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
    mix-blend-mode: overlay;
    z-index: 10
}

.s15-logo .logo-icon {
    width: 2vw;
    height: 2vw
}

.s15-logo span {
    font-size: 1.5vw;
    font-weight: 700;
    letter-spacing: .1em
}

/* ── Section 15: Mobile ── */
@media (max-width: 768px) {
    #sec15 {
        height: auto;
        min-height: 80vh
    }

    #sec15 img.s15-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    .s15-badge {
        padding: 14px 36px;
        border-radius: 9999px
    }

    .s15-badge span {
        font-size: 28px;
        letter-spacing: .1em;
        line-height: 1.4
    }

    .s15-logo {
        bottom: 20px;
        right: 20px
    }

    .s15-logo .logo-icon {
        width: 20px;
        height: 20px
    }

    .s15-logo span {
        font-size: 16px
    }
}

/* ══════════════════════════════════════════
   SECTION 16 — Responsive
══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .s16-inner {
        flex-direction: column;
        gap: 40px
    }

    .s16-image {
        width: 100%;
        max-width: 500px
    }

    .s16-image-placeholder {
        height: 400px
    }

    .s16-header {
        font-size: 28px;
        margin-bottom: 20px;
        white-space: normal
    }

    .s16-title {
        font-size: 28px
    }

    .s16-title-icon {
        width: 40px;
        height: 40px;
        margin-right: 10px
    }

    .s16-icon-circle {
        width: 70px;
        height: 70px
    }

    .s16-icon-circle svg {
        width: 36px;
        height: 36px
    }

    .s16-item-text h3 {
        font-size: 22px
    }

    .s16-item-text p {
        font-size: 16px
    }

    .s16-timeline-item {
        padding: 24px 0;
        gap: 20px
    }
}

@media (max-width: 768px) {
    #sec16 {
        padding: 24px 0 60px
    }

    .s16-tabs {
        flex-direction: column;
        border-bottom: none;
        gap: 0
    }

    .s16-tab {
        padding: 14px 20px;
        border-bottom: 1px solid #e0e0e0
    }

    .s16-tab::after {
        display: none
    }

    .s16-tab.active {
        background: rgba(255, 197, 66, .08)
    }

    .s16-header {
        font-size: 24px;
        margin-bottom: 20px
    }

    .s16-title {
        font-size: 24px
    }

    .s16-title-icon {
        width: 28px;
        height: 28px;
        margin-right: 10px
    }

    .s16-icon-circle {
        width: 56px;
        height: 56px
    }

    .s16-icon-circle svg {
        width: 28px;
        height: 28px
    }

    .s16-item-text h3 {
        font-size: 18px
    }

    .s16-item-text p {
        font-size: 14px
    }

    .s16-timeline-item {
        padding: 18px 0;
        gap: 16px
    }

    .s16-inner {
        padding: 0 16px;
        gap: 28px
    }

    .s16-image {
        max-width: 100%
    }

    .s16-image-placeholder {
        height: 300px
    }
}

/* SECTION 17 - For whom FLIK Smart */

#sec17 {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #f3f4f6;
    background: #f3f4f6;
    container-type: inline-size
}

#sec17 img.s17-bg {
    width: 100%;
    height: auto;
    display: block
}

.s17-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center
}

.s17-badge {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(4px);
    padding: 1.8vw 4vw;
    border-radius: 9999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    border: 1px solid rgba(255, 255, 255, .5);
    transition: transform .5s
}

.s17-badge:hover {
    transform: scale(1.05)
}

.s17-badge span {
    display: block;
    font-size: 2.2vw;
    font-weight: 700;
    color: #111827;
    letter-spacing: .15em;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.4
}

.s17-logo {
    position: absolute;
    bottom: 2vw;
    right: 3vw;
    display: flex;
    align-items: center;
    gap: .5vw;
    color: #fff;
    opacity: .8;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
    mix-blend-mode: overlay;
    z-index: 10
}

.s17-logo .logo-icon {
    width: 2vw;
    height: 2vw
}

.s17-logo span {
    font-size: 1.5vw;
    font-weight: 700;
    letter-spacing: .1em
}

/* ── Section 17: Mobile ── */
@media (max-width: 768px) {
    #sec17 {
        height: auto;
        min-height: 80vh
    }

    #sec17 img.s17-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    .s17-badge {
        padding: 14px 36px;
        border-radius: 9999px
    }

    .s17-badge span {
        font-size: 28px;
        letter-spacing: .1em;
        line-height: 1.4
    }

    .s17-logo {
        bottom: 20px;
        right: 20px
    }

    .s17-logo .logo-icon {
        width: 20px;
        height: 20px
    }

    .s17-logo span {
        font-size: 16px
    }
}

/* ══════════════════════════════════════════
   SECTION 18 — Target Audience Details
══════════════════════════════════════════ */
#sec18.target-audience {
    padding: 80px 20px;
    background-color: #ffffff;
    overflow: visible
}

/* ── Section 18: Slider ── */
.s18-slider-wrap {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none
}

.s18-slide {
    display: none;
    animation: s18FadeIn .4s ease-out
}

.s18-slide.active {
    display: block
}

@keyframes s18FadeIn {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* ── Section 18: Arrows ── */
.s18-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 6px 28px rgba(0, 0, 0, .22);
    border: 3px solid #e5e7eb;
    cursor: pointer;
    color: #1f2937;
    transition: transform .2s, background .2s, box-shadow .2s;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center
}

.s18-arrow:hover {
    transform: translateY(-50%) scale(1.08);
    background: #facc15;
    color: #111827;
    border-color: #facc15;
    box-shadow: 0 8px 32px rgba(250, 204, 21, .4)
}

.s18-arrow svg {
    width: 36px;
    height: 36px
}

.s18-arrow--prev {
    left: -15px
}

.s18-arrow--next {
    right: -15px
}

/* ── Section 18: Dot indicators ── */
.s18-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
    position: relative;
    z-index: 100
}

.s18-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e5e7eb;
    border: none;
    cursor: pointer;
    transition: all .3s;
    padding: 0
}

.s18-dot.active {
    background: #facc15;
    transform: scale(1.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15)
}

#sec18 .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px
}

#sec18 .text-content {
    flex: 0 0 45%
}

#sec18 .header-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px
}

#sec18 .logo-placeholder img {
    width: 120px;
    height: 120px;
    object-fit: contain
}

#sec18 .main-title {
    display: flex;
    flex-direction: column;
    color: #8A8A8E;
    line-height: 1.05
}

#sec18 .line-one {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -1px
}

#sec18 .line-two {
    font-size: 54px;
    font-weight: 800;
    letter-spacing: -1px;
    position: relative;
    display: inline-block
}

#sec18 .yellow-line {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 105%;
    height: 4px;
    background-color: #f6c84c;
    border-radius: 4px;
    transform: rotate(-1deg)
}

#sec18 .subtitle {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 30px;
    color: #000000
}

#sec18 .features-list {
    list-style-type: disc;
    padding-left: 20px
}

#sec18 .features-list li {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 12px;
    color: #1a1a1a
}

#sec18 .image-grid {
    flex: 0 0 50%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 240px 300px;
    gap: 15px;
    position: relative;
    z-index: 1
}

#sec18 .bg-shape {
    position: absolute;
    top: -30px;
    left: -40px;
    width: 115%;
    height: 115%;
    background-color: #f0f4f8;
    border-radius: 40px;
    z-index: -1;
    transform: rotate(-2deg)
}

#sec18 .img-wrapper {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
    background-color: #e0e0e0
}

#sec18 .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

#sec18 .img-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2
}

#sec18 .img-2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2
}

#sec18 .img-3 {
    grid-column: 1 / 3;
    grid-row: 2 / 3
}

@media (max-width: 992px) {
    #sec18 .container {
        flex-direction: column
    }

    #sec18 .text-content,
    #sec18 .image-grid {
        flex: 0 0 100%;
        width: 100%
    }

    #sec18 .image-grid {
        margin-top: 40px;
        grid-template-rows: 200px 250px
    }

    #sec18 .bg-shape {
        top: -15px;
        left: -15px;
        width: 105%;
        height: 105%
    }
}

@media (max-width: 576px) {
    #sec18.target-audience {
        padding: 30px 16px
    }

    #sec18 .container {
        gap: 0
    }

    #sec18 .header-wrapper {
        margin-bottom: 16px;
        gap: 10px
    }

    #sec18 .logo-placeholder img {
        width: 50px;
        height: 50px
    }

    #sec18 .line-one {
        font-size: 28px
    }

    #sec18 .line-two {
        font-size: 34px
    }

    #sec18 .subtitle {
        font-size: 16px;
        margin-bottom: 14px
    }

    #sec18 .features-list li {
        font-size: 14px;
        margin-bottom: 6px
    }

    .s18-arrow {
        display: none
    }

    #sec18 .image-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 250px;
        margin-top: 0
    }

    #sec18 .img-1,
    #sec18 .img-3 {
        display: none
    }

    #sec18 .img-2 {
        grid-column: 1;
        grid-row: 1
    }

    #sec18 .bg-shape {
        display: none
    }
}

/* ══════════════════════════════════════════
   SECTION 19 — The Promise (Hero Card)
══════════════════════════════════════════ */
#sec19 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #f8fafc
}

.s19-hero {
    position: relative;
    width: 100%;
    max-width: 1280px;
    height: 85vh;
    min-height: 600px;
    max-height: 850px;
    border-radius: 48px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25)
}

@media (max-width: 640px) {
    .s19-hero {
        border-radius: 24px
    }
}

.s19-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease
}

.s19-hero:hover .s19-bg-img {
    transform: scale(1.05)
}

.s19-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1) 50%, transparent)
}

.s19-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 16px;
    z-index: 20
}

@media (min-width: 640px) {
    .s19-content {
        padding: 32px
    }
}

@media (min-width: 768px) {
    .s19-content {
        padding: 48px
    }
}

@media (min-width: 1024px) {
    .s19-content {
        padding: 48px
    }
}

/* Mobile top bar */
.s19-mobile-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 16px
}

@media (min-width: 768px) {
    .s19-mobile-top {
        display: none
    }
}

/* Desktop bottom bar */
.s19-desktop-bottom {
    display: none
}

@media (min-width: 768px) {
    .s19-desktop-bottom {
        display: flex;
        position: absolute;
        bottom: 48px;
        right: 48px;
        justify-content: space-between;
        align-items: center;
        gap: 32px
    }
}

/* Dots */
.s19-dots {
    display: flex;
    gap: 8px
}

.s19-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5)
}

.s19-dot--active {
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
}

@media (min-width: 768px) {
    .s19-dot {
        width: 10px;
        height: 10px
    }
}

/* Watermark */
.s19-watermark {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: .9
}

.s19-watermark span {
    color: #fff;
    font-weight: 700;
    letter-spacing: .1em;
    font-size: 12px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4)
}

.s19-watermark--desktop .logo-icon {
    width: 20px;
    height: 20px
}

.s19-watermark--desktop span {
    font-size: 14px
}

/* Glassmorphism card */
.s19-card {
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .2);
    padding: 14px;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
    max-width: 100%;
    animation: s19FadeInUp .8s ease-out forwards
}

@media (min-width: 640px) {
    .s19-card {
        padding: 18px
    }
}

@media (min-width: 768px) {
    .s19-card {
        width: 360px
    }
}

@media (min-width: 1024px) {
    .s19-card {
        width: 400px;
        padding: 24px
    }
}

@keyframes s19FadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* Card logo */
.s19-card-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px
}

.s19-card-logo .logo-icon {
    width: 28px;
    height: 28px
}

.s19-card-logo span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #ffffff
}

@media (min-width: 640px) {
    .s19-card-logo span {
        font-size: 14px
    }
}

/* Card text */
.s19-card-text {
    font-size: 16px;
    line-height: 1.35;
    font-weight: 500;
    color: #ffffff
}

.s19-card-text strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #ffffff
}

@media (min-width: 640px) {
    .s19-card-text {
        font-size: 17px
    }

    .s19-card-text strong {
        font-size: 20px
    }
}

@media (min-width: 1024px) {
    .s19-card-text {
        font-size: 18px
    }

    .s19-card-text strong {
        font-size: 22px
    }
}

/* Yellow marker highlight */
.s19-highlight {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    font-weight: 500;
    color: #FFFFFF;
    z-index: 1
}

.s19-underline-svg {
    position: absolute;
    bottom: -4px;
    left: -2%;
    width: 104%;
    height: 10px;
    pointer-events: none
}

/* Section 19: mobile adjustments */
@media (max-width: 768px) {
    #sec19 {
        padding: 12px;
        align-items: flex-start;
        padding-top: 16px
    }

    .s19-hero {
        height: 80vh;
        min-height: 500px;
        border-radius: 20px
    }

    .s19-card-text strong {
        font-size: 24px
    }

    .s19-card-text {
        font-size: 16px
    }
}

@media (max-width: 480px) {
    #sec19 {
        padding: 8px;
        padding-top: 12px
    }

    .s19-hero {
        height: 75vh;
        min-height: 450px;
        border-radius: 16px
    }

    .s19-card {
        padding: 20px;
        border-radius: 20px
    }

    .s19-card-logo {
        gap: 8px;
        margin-bottom: 14px
    }

    .s19-card-logo .logo-icon {
        width: 22px;
        height: 22px
    }

    .s19-card-logo span {
        font-size: 13px
    }

    .s19-card-text strong {
        font-size: 20px;
        margin-bottom: 6px
    }

    .s19-card-text {
        font-size: 14px;
        line-height: 1.4
    }

    .s19-underline-svg {
        height: 10px;
        bottom: -3px
    }

    .s19-content {
        padding: 12px
    }

    .s19-mobile-top {
        margin-bottom: 10px
    }
}

/* ══════════════════════════════════════════
   SECTION 20 — Инженерия
══════════════════════════════════════════ */
#sec20 {
    width: 100%;
    height: 90vh;
    /* ← высота секции */
    min-height: 800px;
    /* ← минимальная высота */
    position: relative;
    overflow: hidden;
    border-top: 1px solid #f3f4f6;
    background: #f3f4f6;
    container-type: inline-size
}

#sec20 img.s20-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ← заполняет всю область, обрезая лишнее */
    display: block
}

.s20-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center
}

.s20-badge {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(4px);
    padding: 1.2vw 4vw;
    border-radius: 9999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    border: 1px solid rgba(255, 255, 255, .5);
    transition: transform .5s
}

.s20-badge:hover {
    transform: scale(1.05)
}

.s20-badge span {
    font-size: 3vw;
    font-weight: 700;
    color: #111827;
    letter-spacing: .3em;
    padding-left: .3em
}

.s20-logo {
    position: absolute;
    bottom: 2vw;
    right: 3vw;
    display: flex;
    align-items: center;
    gap: .5vw;
    color: #fff;
    opacity: .8;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
    mix-blend-mode: overlay;
    z-index: 10
}

.s20-logo .logo-icon {
    width: 2vw;
    height: 2vw
}

.s20-logo span {
    font-size: 1.5vw;
    font-weight: 700;
    letter-spacing: .1em
}

/* ── Section 20: Mobile ── */
@media (max-width: 768px) {
    #sec20 {
        height: auto;
        min-height: 80vh
    }

    #sec20 img.s20-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

    .s20-badge {
        padding: 14px 36px;
        border-radius: 9999px
    }

    .s20-badge span {
        font-size: 28px;
        letter-spacing: .15em;
        line-height: 1.4
    }

    .s20-logo {
        bottom: 20px;
        right: 20px
    }

    .s20-logo .logo-icon {
        width: 20px;
        height: 20px
    }

    .s20-logo span {
        font-size: 16px
    }
}

/* ==================== SECTION 21: Инженерия ==================== */
#sec21 {
    background-color: #f4f7fb;
    background-image:
        radial-gradient(circle at 0% 0%, #ffffff 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, #ffffff 0%, transparent 50%);
    padding: 4rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center
}

.s21-container {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    padding: 3rem 4rem;
    max-width: 1200px;
    width: 100%
}

.s21-header {
    margin-bottom: 2rem
}

.s21-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    letter-spacing: 0.05em;
    color: #8A8A8E
}

.s21-brand-text {
    color: #8A8A8E;
    display: inline-flex;
    align-items: center;
    gap: 10px
}

.s21-brand-icon {
    width: 50px;
    height: 50px;
    fill: #8A8A8E;
    vertical-align: middle
}

.s21-highlight-wrapper {
    position: relative;
    display: inline-block;
    white-space: nowrap
}

.s21-highlight-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 100%;
    height: 6px;
    background-color: #fcd572;
    border-radius: 10px;
    z-index: 1
}

.s21-highlight-text {
    position: relative;
    z-index: 2
}

.s21-subtitle {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 3rem;
    color: #111
}

.s21-images-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    background-color: #fafbfc;
    padding: 2rem;
    border-radius: 20px
}

.s21-image-slot {
    position: relative;
    background-color: #ffffff;
    border: 2px dashed #d1d5db;
    border-radius: 16px;
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: all 0.3s ease
}

.s21-image-slot:hover {
    border-color: #fbbd08;
    background-color: #fffdf7;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05)
}

.s21-image-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5
}

/* Адаптивность секции 21 */
@media (max-width: 992px) {
    .s21-title {
        font-size: 1.8rem
    }

    .s21-images-grid {
        gap: 1rem
    }

    .s21-image-slot {
        height: 350px
    }

    .s21-container {
        padding: 2rem
    }
}

@media (max-width: 768px) {
    .s21-container {
        padding: 1.5rem 1rem
    }

    .s21-title {
        font-size: 1.6rem
    }

    .s21-subtitle {
        font-size: 1.15rem;
        margin-bottom: 1.5rem
    }

    .s21-brand-icon {
        width: 40px;
        height: 40px
    }

    .s21-images-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 0.75rem;
        border-radius: 12px
    }

    .s21-image-slot {
        height: 160px;
        border-width: 1px;
        border-radius: 10px
    }

    .s21-highlight-wrapper::after {
        height: 4px;
        bottom: 2px
    }
}

@media (max-width: 480px) {
    .s21-container {
        padding: 1rem 0.75rem
    }

    .s21-title {
        font-size: 1.35rem
    }

    .s21-subtitle {
        font-size: 1rem
    }

    .s21-brand-icon {
        width: 32px;
        height: 32px
    }

    .s21-images-grid {
        gap: 8px;
        padding: 0.5rem
    }

    .s21-image-slot {
        height: 130px;
        border-radius: 8px
    }
}

/* ══════════════════════════════════════════
   SECTION 22 — Электрика
══════════════════════════════════════════ */
#sec22 {
    --s22-text-main: #4A4A4A;
    --s22-text-dark: #333333;
    --s22-line-color: #8C8C8C;
    --s22-accent-yellow: #FDC652;
    --s22-bg-body: #FFFFFF;
    --s22-bg-placeholder: #EAEAEA;

    width: 100%;
    background-color: var(--s22-bg-body);
    color: var(--s22-text-dark);
    display: flex;
    justify-content: center;
    padding: 40px 20px
}

.s22-container {
    max-width: 1200px;
    width: 100%
}

/* HEADER SECTION */
.s22-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
    border-bottom: 1.5px solid var(--s22-text-dark);
    padding-bottom: 20px
}

.s22-header-left {
    display: flex;
    flex-direction: column;
    position: relative
}

.s22-title-wrapper {
    display: flex;
    align-items: center;
    gap: 15px
}

.s22-logo-icon {
    width: 56px;
    height: 56px;
    fill: #8A8A8E
}

.s22-main-title {
    font-size: 56px;
    font-weight: 800;
    color: #8A8A8E;
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 1
}

.s22-yellow-line {
    height: 4px;
    background-color: var(--s22-accent-yellow);
    width: 80%;
    border-radius: 2px;
    margin-top: 10px;
    margin-left: 55px;
    transform: rotate(-1deg);
    transform-origin: left center
}

.s22-subtitle {
    font-size: 26px;
    font-weight: 400;
    color: var(--s22-text-dark);
    line-height: 1.2;
    max-width: 400px
}

/* MAIN CONTENT SECTION */
.s22-content {
    display: flex;
    gap: 40px
}

/* LEFT COLUMN: LIST */
.s22-features-list {
    flex: 1;
    display: flex;
    flex-direction: column
}

.s22-feature-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--s22-line-color)
}

.s22-feature-item:last-child {
    border-bottom: 1px solid var(--s22-text-dark)
}

.s22-check-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background-color: #707070;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .2)
}

.s22-check-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: white;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round
}

.s22-feature-text {
    font-size: 18px;
    font-weight: 400;
    color: var(--s22-text-dark)
}

/* RIGHT COLUMN: IMAGES GRID */
.s22-images-grid {
    flex: 1.1;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    align-content: start
}

.s22-image-box {
    background-color: var(--s22-bg-placeholder);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    border-radius: 20px
}

.s22-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 2
}

.s22-image-box::after {
    content: 'Место для фото';
    position: absolute;
    color: #999;
    font-size: 14px
}

.s22-img-scheme {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    height: 200px
}

.s22-img-pipes {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    height: 250px
}

.s22-img-panel {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    height: 100%;
    min-height: 470px
}

/* Tabs */
.s22-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--s22-line-color);
    margin-bottom: 30px
}

.s22-tab {
    padding: 14px 36px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .05em;
    position: relative;
    transition: color .3s
}

.s22-tab::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--s22-accent-yellow);
    opacity: 0;
    transition: opacity .3s
}

.s22-tab.active::after {
    opacity: 1
}

.s22-tab.active {
    color: var(--s22-text-dark)
}

.s22-tab:not(.active):hover {
    color: #666
}

/* Slides */
.s22-slide {
    display: none;
    animation: s22FadeIn .4s ease-out
}

.s22-slide.active {
    display: block
}

@keyframes s22FadeIn {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* Slide 2 images grid — 2 equal columns */
.s22-images-grid--water {
    flex: 0.8;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.s22-images-grid--water .s22-image-box {
    height: 100%;
    min-height: 480px
}

/* Slider wrapper */
.s22-slider-wrap {
    position: relative;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none
}

.s22-arrow {
    display: none
}

.s22-arrow:hover {
    background: var(--s22-accent-yellow);
    color: #333;
    border-color: var(--s22-accent-yellow)
}

.s22-arrow svg {
    width: 22px;
    height: 22px
}

.s22-arrow--prev {
    left: -24px
}

.s22-arrow--next {
    right: -24px
}

/* Slide 2 overrides (Водоснабжение) */
.s22-main-title--water {
    font-size: 52px
}

.s22-yellow-line--water {
    width: 85%;
    margin-left: 100px
}

.s22-subtitle--water {
    max-width: 420px
}

.s22-content--water {
    gap: 50px
}

.s22-features-list--water {
    flex: 1.2
}

/* Адаптивность секции 22 */
/* ══════════════════════════════════════════
   SECTION 23 — Гарантии и сервис
   ══════════════════════════════════════════
   Высота секции настраивается через height / min-height
══════════════════════════════════════════ */
#sec23 {
    width: 100%;
    height: 120vh;
    /* ← высота секции (меняйте при необходимости) */
    min-height: 600px;
    /* ← минимальная высота */
    position: relative;
    overflow: hidden;
    border-top: 1px solid #f3f4f6;
    background: #f3f4f6;
    container-type: inline-size
}

#sec23 img.s23-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.s23-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center
}

.s23-badge {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(4px);
    padding: 1.2vw 4vw;
    border-radius: 9999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    border: 1px solid rgba(255, 255, 255, .5);
    transition: transform .5s
}

.s23-badge:hover {
    transform: scale(1.05)
}

.s23-badge span {
    font-size: 3vw;
    font-weight: 700;
    color: #111827;
    letter-spacing: .3em;
    padding-left: .3em
}

.s23-logo {
    position: absolute;
    bottom: 2vw;
    right: 3vw;
    display: flex;
    align-items: center;
    gap: .5vw;
    color: #fff;
    opacity: .8;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
    mix-blend-mode: overlay;
    z-index: 10
}

.s23-logo .logo-icon {
    width: 2vw;
    height: 2vw
}

.s23-logo span {
    font-size: 1.5vw;
    font-weight: 700;
    letter-spacing: .1em
}

/* ── Section 23: Mobile ── */
@media (max-width: 768px) {
    #sec23 {
        height: auto;
        min-height: 80vh
    }

    .s23-badge span {
        font-size: 28px;
        letter-spacing: .15em;
        line-height: 1.4
    }

    .s23-logo {
        bottom: 20px;
        right: 20px
    }

    .s23-logo .logo-icon {
        width: 20px;
        height: 20px
    }

    .s23-logo span {
        font-size: 16px
    }
}

/* ══════════════════════════════════════════
   SECTION 22 — Responsive
══════════════════════════════════════════ */
@media (max-width: 992px) {
    .s22-content {
        flex-direction: column
    }

    .s22-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px
    }

    .s22-main-title {
        font-size: 36px
    }

    .s22-main-title--water {
        font-size: 28px
    }

    .s22-logo-icon {
        width: 32px;
        height: 32px
    }

    .s22-title-wrapper {
        gap: 10px
    }

    .s22-subtitle {
        max-width: 100%;
        font-size: 20px
    }

    .s22-arrow--prev {
        left: 0
    }

    .s22-arrow--next {
        right: 0
    }
}

@media (max-width: 480px) {
    .s22-main-title {
        font-size: 26px
    }

    .s22-main-title--water {
        font-size: 20px
    }

    .s22-logo-icon {
        width: 24px;
        height: 24px
    }

    .s22-title-wrapper {
        gap: 8px
    }

    .s22-subtitle {
        font-size: 16px
    }
}

/* ══════════════════════════════════════════
   SECTION 24 — Гарантии и сервис (Hero Card)
══════════════════════════════════════════ */
#sec24 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #f8fafc
}

.s24-hero {
    position: relative;
    width: 100%;
    max-width: 1280px;
    height: 85vh;
    min-height: 600px;
    max-height: 850px;
    border-radius: 48px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25)
}

@media (max-width: 640px) {
    .s24-hero {
        border-radius: 24px
    }
}

.s24-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease
}

.s24-hero:hover .s24-bg-img {
    transform: scale(1.05)
}

.s24-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1) 50%, transparent)
}

.s24-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 16px;
    z-index: 20
}

@media (min-width: 640px) {
    .s24-content {
        padding: 32px
    }
}

@media (min-width: 768px) {
    .s24-content {
        padding: 48px
    }
}

@media (min-width: 1024px) {
    .s24-content {
        padding: 48px
    }
}

/* Mobile top bar */
.s24-mobile-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 16px
}

@media (min-width: 768px) {
    .s24-mobile-top {
        display: none
    }
}

/* Desktop bottom bar */
.s24-desktop-bottom {
    display: none
}

@media (min-width: 768px) {
    .s24-desktop-bottom {
        display: flex;
        position: absolute;
        bottom: 48px;
        right: 48px;
        justify-content: space-between;
        align-items: center;
        gap: 32px
    }
}

/* Dots */
.s24-dots {
    display: flex;
    gap: 8px
}

.s24-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5)
}

.s24-dot--active {
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
}

@media (min-width: 768px) {
    .s24-dot {
        width: 10px;
        height: 10px
    }
}

/* Watermark */
.s24-watermark {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: .9
}

.s24-watermark span {
    color: #fff;
    font-weight: 700;
    letter-spacing: .1em;
    font-size: 12px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4)
}

.s24-watermark--desktop .logo-icon {
    width: 20px;
    height: 20px
}

.s24-watermark--desktop span {
    font-size: 14px
}

/* Glassmorphism card */
.s24-card {
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .2);
    padding: 14px;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
    max-width: 100%;
    animation: s24FadeInUp .8s ease-out forwards
}

@media (min-width: 640px) {
    .s24-card {
        padding: 18px
    }
}

@media (min-width: 768px) {
    .s24-card {
        width: 380px
    }
}

@media (min-width: 1024px) {
    .s24-card {
        width: 420px;
        padding: 24px
    }
}

@keyframes s24FadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* Card logo */
.s24-card-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px
}

.s24-card-logo .logo-icon {
    width: 28px;
    height: 28px
}

.s24-card-logo span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #111827
}

@media (min-width: 640px) {
    .s24-card-logo span {
        font-size: 14px
    }
}

/* Card text */
.s24-card-text {
    font-size: 16px;
    line-height: 1.35;
    font-weight: 500;
    color: #111827
}

.s24-card-text strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #111827
}

@media (min-width: 640px) {
    .s24-card-text {
        font-size: 17px
    }

    .s24-card-text strong {
        font-size: 20px
    }
}

@media (min-width: 1024px) {
    .s24-card-text {
        font-size: 18px
    }

    .s24-card-text strong {
        font-size: 22px
    }
}

/* Yellow marker highlight */
.s24-highlight {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    font-weight: 500;
    color: #111827;
    z-index: 1
}

.s24-underline-svg {
    position: absolute;
    bottom: -4px;
    left: -2%;
    width: 104%;
    height: 10px;
    pointer-events: none
}

/* Section 24: mobile adjustments */
@media (max-width: 768px) {
    #sec24 {
        padding: 12px;
        align-items: flex-start;
        padding-top: 16px
    }

    .s24-hero {
        height: 80vh;
        min-height: 500px;
        border-radius: 20px
    }

    .s24-card-text strong {
        font-size: 24px
    }

    .s24-card-text {
        font-size: 16px
    }
}

@media (max-width: 480px) {
    #sec24 {
        padding: 8px;
        padding-top: 12px
    }

    .s24-hero {
        height: 75vh;
        min-height: 450px;
        border-radius: 16px
    }

    .s24-card {
        padding: 20px;
        border-radius: 20px
    }

    .s24-card-logo {
        gap: 8px;
        margin-bottom: 14px
    }

    .s24-card-logo .logo-icon {
        width: 22px;
        height: 22px
    }

    .s24-card-logo span {
        font-size: 13px
    }

    .s24-card-text strong {
        font-size: 20px;
        margin-bottom: 6px
    }

    .s24-card-text {
        font-size: 14px;
        line-height: 1.4
    }

    .s24-underline-svg {
        height: 10px;
        bottom: -3px
    }

    .s24-content {
        padding: 12px
    }

    .s24-mobile-top {
        margin-bottom: 10px
    }
}

/* ══════════════════════════════════════════
   SECTION 27 — Почему нам можно доверять
   (аналог секции 23: полноэкранная картинка,
    белый скруглённый бейдж с текстом внизу)
══════════════════════════════════════════ */
#sec27 {
    width: 100%;
    height: 110vh;
    min-height: 600px;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #f3f4f6;
    background: #f3f4f6;
    container-type: inline-size
}

#sec27 img.s27-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.s27-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 6cqw
}

.s27-badge {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(4px);
    padding: 1.2vw 4vw;
    border-radius: 9999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    border: 1px solid rgba(255, 255, 255, .5);
    transition: transform .5s
}

.s27-badge:hover {
    transform: scale(1.05)
}

.s27-badge span {
    font-size: 3vw;
    font-weight: 700;
    color: #111827;
    letter-spacing: .15em;
    text-transform: uppercase;
    white-space: nowrap
}

.s27-logo {
    position: absolute;
    bottom: 2vw;
    right: 3vw;
    display: flex;
    align-items: center;
    gap: .5vw;
    color: #fff;
    opacity: .8;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
    mix-blend-mode: overlay;
    z-index: 10
}

.s27-logo .logo-icon {
    width: 2vw;
    height: 2vw
}

.s27-logo span {
    font-size: 1.5vw;
    font-weight: 700;
    letter-spacing: .1em
}

/* ── Section 27: Mobile ── */
@media (max-width: 768px) {
    #sec27 {
        height: auto;
        min-height: 80vh
    }

    .s27-badge {
        max-width: calc(100vw - 40px);
        padding: 14px 28px;
        border-radius: 9999px;
        text-align: center
    }

    .s27-badge span {
        font-size: 28px;
        letter-spacing: .15em;
        line-height: 1.4;
        white-space: normal;
        text-align: center
    }

    .s27-logo {
        bottom: 20px;
        right: 20px
    }

    .s27-logo .logo-icon {
        width: 20px;
        height: 20px
    }

    .s27-logo span {
        font-size: 16px
    }
}

/* ══════════════════════════════════════════
   SECTION 28 — Почему нам можно доверять (слайдер)
══════════════════════════════════════════ */
#sec28 {
    padding: 60px 0;
    overflow: hidden;
    background: #f8f9fa
}

.s28-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px
}

.s28-title {
    display: flex;
    align-items: center;
    font-size: 32px;
    font-weight: 800;
    color: #8A8A8E;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: -1px
}

.s28-title-icon {
    width: 32px;
    height: 32px;
    margin-right: 15px;
    color: #8A8A8E
}

/* Обертка слайдера */
.s28-slider-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px
}

/* Контейнер с карточками */
.s28-slide-track {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.s28-slide-track::-webkit-scrollbar {
    display: none
}

/* Карточка */
.s28-slide {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-snap-align: start
}

.s28-image-placeholder {
    width: 100%;
    height: 340px;
    border-radius: 24px;
    background-color: #e0e0e0;
    margin-bottom: 20px;
    overflow: hidden
}

.s28-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.s28-slide p {
    font-size: 18px;
    line-height: 1.3;
    text-align: center;
    font-weight: 500;
    color: #111
}

/* Стрелки */
.s28-slider-arrow {
    position: absolute;
    top: 170px;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
    color: #333
}

.s28-slider-arrow:hover {
    background: #f0f0f0;
    transform: translateY(-50%) scale(1.05)
}

.s28-slider-arrow:active {
    transform: translateY(-50%) scale(.95)
}

.s28-arrow-prev {
    left: -4px
}

.s28-arrow-next {
    right: -4px
}

.s28-slider-arrow svg {
    width: 24px;
    height: 24px;
    fill: currentColor
}

/* Точки */
.s28-slider-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px
}

.s28-dot {
    width: 12px;
    height: 12px;
    background-color: #d1d1d1;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .3s, transform .3s;
    border: none;
    padding: 0
}

.s28-dot:hover {
    background-color: #a0a0a0
}

.s28-dot.active {
    background-color: #555;
    transform: scale(1.2)
}

/* Мобилка */
@media (max-width: 768px) {
    .s28-title {
        font-size: 24px
    }

    .s28-slide {
        width: 240px
    }

    .s28-image-placeholder {
        height: 310px
    }

    .s28-slide p {
        font-size: 16px
    }

    .s28-slider-arrow {
        display: none
    }
}

/* ══════════════════════════════════════════
   SECTION 29 — Контактная карточка
══════════════════════════════════════════ */
#sec29 {
    width: 100%;
    background-color: #f8f9fa;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(40px, 6vh, 80px) clamp(20px, 4vw, 60px)
}

.s29-card-container {
    padding: 0;
    max-width: 1200px;
    width: 100%;
    display: flex;
    gap: clamp(30px, 5vw, 60px);
}

/* ЛЕВАЯ КОЛОНКА */
.s29-left-column {
    flex: 1;
    display: flex;
    flex-direction: column
}

.s29-header-section {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.5vw, 24px);
    margin-bottom: clamp(20px, 3vw, 35px)
}

.s29-main-logo-placeholder {
    width: clamp(60px, 6vw, 90px);
    height: clamp(60px, 6vw, 90px);
    background-color: #f8f9fa;
    border-radius: 14px;
    flex-shrink: 0
}

.s29-title {
    font-size: clamp(24px, 4vw, 40px);
    color: #000;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -1px
}

.s29-description-bold {
    font-size: clamp(18px, 2.2vw, 24px);
    color: #000;
    font-weight: 600;
    margin-bottom: 16px;
    line-height: 1.4
}

.s29-description-text {
    font-size: clamp(16px, 2vw, 20px);
    color: #000;
    line-height: 1.5;
    margin-bottom: clamp(24px, 4vw, 40px)
}

.s29-links-section {
    display: flex;
    gap: clamp(12px, 2vw, 20px);
    margin-top: auto
}

.s29-link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px
}

.s29-qr-img {
    width: clamp(100px, 12vw, 180px);
    height: clamp(100px, 12vw, 180px);
    object-fit: contain;
    border-radius: clamp(14px, 1.5vw, 20px);
    display: block;
    transition: transform .2s
}

.s29-link-item a:first-child:hover .s29-qr-img {
    transform: scale(1.05)
}

.s29-link-item a {
    color: #000;
    text-decoration: underline;
    font-size: 16px;
    font-weight: 500
}

.s29-link-item a:hover {
    text-decoration: none
}

/* ПРАВАЯ КОЛОНКА */
.s29-right-column {
    width: clamp(260px, 30vw, 400px);
    display: flex;
    flex-direction: column;
    flex-shrink: 0
}

.s29-portrait-placeholder {
    width: 100%;
    height: clamp(300px, 38vw, 480px);
    background-color: #e0e0e0;
    border-radius: clamp(16px, 2vw, 24px);
    margin-bottom: clamp(14px, 2vw, 24px)
}

.s29-person-info h2 {
    font-size: clamp(18px, 2.5vw, 24px);
    color: #000;
    margin-bottom: 5px
}

.s29-role {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 15px
}

.s29-phone {
    display: block;
    font-size: clamp(18px, 2.2vw, 24px);
    color: #000;
    font-weight: 600;
    text-decoration: none
}

/* Адаптивность секции 29 */
@media (max-width: 850px) {
    .s29-card-container {
        flex-direction: column
    }

    .s29-right-column {
        width: 100%;
        align-items: center;
        text-align: center
    }

    .s29-portrait-placeholder {
        max-width: 360px;
        height: clamp(280px, 50vw, 380px)
    }

    .s29-links-section {
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 30px
    }
}

@media (max-width: 600px) {
    #sec29 {
        padding: 30px 16px
    }

    .s29-header-section {
        flex-direction: column;
        align-items: flex-start
    }

    .s29-portrait-placeholder {
        max-width: 300px
    }

    .s29-link-item a {
        font-size: 14px
    }
}

@media (max-width: 480px) {
    #sec29 {
        padding: 24px 12px
    }

    .s29-portrait-placeholder {
        max-width: 280px
    }
}

/* ══════════════════════════════════════════
   FLOATING CONTACT BUTTON & FORM
══════════════════════════════════════════ */
.floating-chat-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #FACC15;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
    cursor: pointer;
    z-index: 10000;
    transition: transform .25s, box-shadow .25s;
    border: none;
    padding: 0
}

.floating-chat-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .3)
}

.floating-chat-btn svg {
    width: 28px;
    height: 28px;
    fill: #1a1a1a
}

/* Popup form */
.chat-form-popup {
    position: fixed;
    bottom: 105px;
    right: 30px;
    width: 340px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
    z-index: 10000;
    font-family: 'Inter', sans-serif;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(.95);
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden
}

.chat-form-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1)
}

.chat-form-header {
    background-color: #1a1a1a;
    color: #fff;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .02em
}

.chat-close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    opacity: .7;
    transition: opacity .2s
}

.chat-close-btn:hover {
    opacity: 1
}

.chat-form-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.chat-form-body input,
.chat-form-body textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    transition: border-color .2s, box-shadow .2s;
    outline: none
}

.chat-form-body input:focus,
.chat-form-body textarea:focus {
    border-color: #FACC15;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, .15)
}

.chat-form-body textarea {
    resize: none;
    height: 90px
}

.chat-form-body button[type="submit"] {
    background-color: #FACC15;
    color: #1a1a1a;
    border: none;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    transition: background-color .2s, transform .1s
}

.chat-form-body button[type="submit"]:hover {
    background-color: #eab308
}

.chat-form-body button[type="submit"]:active {
    transform: scale(.98)
}

.chat-form-body button:disabled {
    background-color: #d1d5db;
    cursor: not-allowed;
    color: #9ca3af
}

#chat-status-message {
    text-align: center;
    font-size: 13px;
    color: #333;
    min-height: 16px
}

/* Mobile */
@media (max-width: 480px) {
    .chat-form-popup {
        width: calc(100vw - 20px);
        right: 10px;
        bottom: 100px
    }

    .floating-chat-btn {
        bottom: 20px;
        right: 20px;
        width: 54px;
        height: 54px
    }

    .floating-chat-btn svg {
        width: 24px;
        height: 24px
    }
}

/* Fix: mobile override for slide-desc--narrow (must be after desktop rule) */
@media (max-width: 768px) {
    .slide-desc--narrow {
        max-width: 100%
    }
}

/* Section 5: mobile adjustments */
@media (max-width: 768px) {
    #sec5 {
        padding: 12px;
        align-items: flex-start;
        padding-top: 16px
    }

    .s5-hero {
        height: 80vh;
        min-height: 500px;
        border-radius: 20px
    }

    .s5-card-text strong {
        font-size: 24px
    }

    .s5-card-text {
        font-size: 16px
    }
}

@media (max-width: 480px) {
    #sec5 {
        padding: 8px;
        padding-top: 12px
    }

    .s5-hero {
        height: 75vh;
        min-height: 450px;
        border-radius: 16px
    }

    .s5-card {
        padding: 20px;
        border-radius: 20px
    }

    .s5-card-logo {
        gap: 8px;
        margin-bottom: 14px
    }

    .s5-card-logo .logo-icon {
        width: 22px;
        height: 22px
    }

    .s5-card-logo span {
        font-size: 13px
    }

    .s5-card-text strong {
        font-size: 20px;
        margin-bottom: 6px
    }

    .s5-card-text {
        font-size: 14px;
        line-height: 1.4
    }

    .s5-underline-svg {
        height: 10px;
        bottom: -3px
    }

    .s5-content {
        padding: 12px
    }

    .s5-mobile-top {
        margin-bottom: 10px
    }
}

/* Section 14: mobile adjustments (hero card) */
@media (max-width: 768px) {
    #sec14 {
        padding: 12px;
        align-items: flex-start;
        padding-top: 16px
    }

    .s14-hero {
        height: 80vh;
        min-height: 500px;
        border-radius: 20px
    }

    .s14-card-text strong {
        font-size: 24px
    }

    .s14-card-text {
        font-size: 16px
    }
}

@media (max-width: 480px) {
    #sec14 {
        padding: 8px;
        padding-top: 12px
    }

    .s14-hero {
        height: 75vh;
        min-height: 450px;
        border-radius: 16px
    }

    .s14-card {
        padding: 20px;
        border-radius: 20px
    }

    .s14-card-logo {
        gap: 8px;
        margin-bottom: 14px
    }

    .s14-card-logo .logo-icon {
        width: 22px;
        height: 22px
    }

    .s14-card-logo span {
        font-size: 13px
    }

    .s14-card-text strong {
        font-size: 20px;
        margin-bottom: 6px
    }

    .s14-card-text {
        font-size: 14px;
        line-height: 1.4
    }

    .s14-underline-svg {
        height: 10px;
        bottom: -3px
    }

    .s14-content {
        padding: 12px
    }

    .s14-mobile-top {
        margin-bottom: 10px
    }
}

/* ══ SECTION 10: Mobile version ══ */
.s10-mobile {
    display: none;
}

@media (max-width: 768px) {
    /* Hide desktop carousel, show mobile cards */
    .s10-carousel-wrapper.s10-desktop {
        display: none !important;
    }

    .s10-mobile {
        display: block;
    }

    .s10-mobile-track {
        display: flex;
        gap: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 16px;
    }

    .s10-mobile-track::-webkit-scrollbar {
        display: none;
    }

    .s10-mobile-card {
        flex: 0 0 85%;
        min-width: 85%;
        scroll-snap-align: center;
        padding: 0 6px;
        box-sizing: border-box;
    }

    .s10-mobile-img {
        border-radius: 20px;
        overflow: hidden;
        aspect-ratio: 3/4;
        margin-bottom: 14px;
    }

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

    .s10-mobile-swatches {
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    .s10-mswatch {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 2px solid rgba(0, 0, 0, 0.08);
    }

    .s10-mobile-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 24px;
    }

    .s10-mdot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid #ccc;
        background: transparent;
        cursor: pointer;
        padding: 0;
        transition: all 0.3s;
    }

    .s10-mdot.active {
        background: #1a1a2e;
        border-color: #1a1a2e;
    }
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.site-footer {
    width: 100%;
    background: #1a1a1a;
    padding: 60px 40px 48px;
    color: #fff
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.3fr;
    gap: 60px
}
.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px
}
.footer-logo .logo-icon { width: 32px; height: 32px }
.footer-logo span {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff
}
.footer-slogan {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #9ca3af
}
.footer-heading {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b7280;
    margin-bottom: 20px
}
.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 12px
}
.footer-nav a {
    font-size: 14px;
    font-weight: 500;
    color: #d1d5db;
    text-decoration: none;
    transition: color .2s
}
.footer-nav a:hover { color: #FACC15 }
.footer-contacts {
    display: flex;
    flex-direction: column;
    gap: 14px
}
.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #d1d5db;
    text-decoration: none;
    transition: color .2s
}
.footer-contact-item:hover { color: #FACC15 }
.footer-contact-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: .7
}
.footer-contact-item:hover svg { opacity: 1 }

/* ── Footer responsive ── */
@media (max-width: 768px) {
    .site-footer { padding: 40px 20px 36px }
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 36px
    }
}