/* ==========================================================================
   Base
   ========================================================================== */
@font-face {
    font-family: "figTree";
    src: url("/template/default/fonts/Figtree-Light.ttf") format("truetype");
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: "figTree";
    src: url("/template/default/fonts/Figtree-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "figTree";
    src: url("/template/default/fonts/Figtree-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: "figTree";
    src: url("/template/default/fonts/Figtree-SemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: "figTree";
    src: url("/template/default/fonts/Figtree-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: "figTree";
    src: url("/template/default/fonts/Figtree-ExtraBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 800;
}

:root {
    --color-text-primary: #333333;
    --color-brand-blue: #0071e3;
    --color-hero-accent: #1d96ff;
    --color-hero-eyebrow: #d9d9d9;
    --color-white: #ffffff;

    --font-family: "figTree", sans-serif;

    --text-nav-brand: clamp(20px, 1.25vw, 24px);
    --text-nav-link: clamp(14px, 0.83vw, 16px);
    --text-nav-button: clamp(14px, 0.83vw, 16px);

    --text-hero-eyebrow: clamp(18px, 1.25vw, 24px);
    --text-hero-title: clamp(26px, 3.33vw, 64px);
    --text-hero-title-leading: clamp(36px, 2.6vw, 50px);
    --text-hero-subtitle: clamp(20px, 1.67vw, 32px);
    --text-hero-button: clamp(14px, 0.83vw, 16px);

    --text-pain-heading: clamp(24px, 2.5vw, 48px);
    --text-pain-card: clamp(16px, 1.04vw, 20px);

    --color-pain-card-bg: #e1e1e1;
    --color-ai-text: #242424;
    --color-progress-track: #e8ecf5;
    --color-progress-fill: #262626;
    --color-energy-bg: #f1f2f7;
    --color-energy-footnote: #b1b1b1;

    --text-energy-title: clamp(24px, 3.33vw, 64px);
    --text-energy-subtitle: clamp(14px, 1.67vw, 32px);
    --text-energy-label: clamp(16px, 1.15vw, 22px);
    --text-energy-value: clamp(28px, 2.08vw, 40px);
    --text-energy-unit: clamp(18px, 1.25vw, 24px);
    --text-energy-footnote: clamp(14px, 0.83vw, 16px);

    --color-low-salt-muted: #575757;
    --text-low-salt-hero-title: clamp(36px, 3.33vw, 64px);
    --text-low-salt-hero-subtitle: clamp(18px, 1.25vw, 24px);
    --text-low-salt-card-label: clamp(22px, 1.46vw, 28px);
    --text-low-salt-feature-title: clamp(18px, 1.15vw, 22px);
    --text-low-salt-feature-desc: clamp(12px, 0.73vw, 14px);
    --text-low-salt-turbo-title: clamp(36px, 3.33vw, 64px);
    --text-low-salt-turbo-desc: clamp(16px, 1.15vw, 22px);

    --color-ultra-slim-bg: #f5f5f7;
    --text-ultra-slim-title: clamp(36px, 3.33vw, 64px);
    --text-ultra-slim-subtitle: clamp(18px, 1.25vw, 24px);

    --text-visible-water-title: clamp(36px, 3.33vw, 64px);
    --text-visible-water-subtitle: clamp(22px, 1.67vw, 32px);
    --text-visible-water-desc: clamp(16px, 1.15vw, 22px);
    --text-visible-water-gauge: clamp(12px, 1.56vw, 30px);

    --text-pool-treatment-title: clamp(36px, 3.33vw, 64px);
    --text-pool-treatment-subtitle: clamp(18px, 1.25vw, 24px);
    --text-pool-treatment-label: clamp(16px, 1.15vw, 22px);

    --text-mini-ecosystem-title: clamp(36px, 3.33vw, 64px);
    --text-mini-ecosystem-subtitle: clamp(22px, 1.67vw, 32px);
    --text-mini-ecosystem-desc: clamp(16px, 1.15vw, 22px);

    --text-app-control-title: clamp(36px, 3.33vw, 64px);
    --text-app-control-subtitle: clamp(22px, 1.67vw, 32px);
    --text-app-control-desc: clamp(16px, 1.15vw, 22px);
    --text-app-control-feature-title: clamp(18px, 1.15vw, 22px);
    --text-app-control-feature-desc: clamp(14px, 0.83vw, 16px);
    --text-app-control-store: clamp(16px, 0.94vw, 18px);
    --color-app-control-divider: #ababab;

    --color-reliability-bg: #f1f1f3;
    --color-reliability-card-text: #262626;
    --text-reliability-title: clamp(36px, 3.33vw, 64px);
    --text-reliability-card-title: clamp(20px, 1.35vw, 26px);
    --text-reliability-card-desc: clamp(14px, 0.83vw, 16px);

    --text-garden-title: clamp(36px, 3.33vw, 64px);

    --text-in-the-box-title: clamp(36px, 3.33vw, 64px);
    --text-in-the-box-label: clamp(12px, 0.73vw, 14px);

    --text-specs-title: clamp(36px, 3.33vw, 64px);
    --text-specs-tab: clamp(14px, 1.04vw, 20px);
    --text-specs-cell: clamp(14px, 1.04vw, 20px);
    --color-specs-tab-inactive: #9d9d9d;
    --color-specs-label: #6e6e73;
    --color-specs-tab-indicator: #f4cc29;

    --text-ai-hero-title: clamp(24px, 3.33vw, 64px);
    --text-ai-hero-subtitle: clamp(14px, 1.25vw, 24px);
    --text-ai-measure: clamp(24px, 1.77vw, 34px);
    --text-ai-card-title: clamp(28px, 1.98vw, 38px);
    --text-ai-card-subtitle: clamp(18px, 1.25vw, 24px);

    --subnav-height: 60px;
    --subnav-offset-top: clamp(24px, 2.6vw, 50px);
    --subnav-scroll-offset: calc(var(--subnav-offset-top) + var(--subnav-height));
    --container-padding: clamp(20px, 5vw, 120px);
}

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

html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    /* font-family: "figTree"; */
    color: var(--color-text-primary);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
}

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

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    font-family: "figTree";
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

/* ==========================================================================
   Section 1: Subnav (Figma 170:382)
   ========================================================================== */

.subnav {
    position: sticky;
    top: var(--subnav-offset-top);
    z-index: 100;
    width: 100%;
    margin-top: var(--subnav-offset-top);
    background-color: var(--color-white);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

#ai-inverter,
#energy-saving,
#ultra-low-salt,
#visible-screen,
#app-control {
    scroll-margin-top: var(--subnav-scroll-offset);
}

#turbo {
    scroll-margin-top: calc(var(--subnav-scroll-offset) + 60px);
    /* scroll-margin-top: var(--subnav-scroll-offset) ; */
}

.subnav__inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1920px;
    min-height: var(--subnav-height);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    gap: clamp(16px, 2vw, 32px);
}

.subnav__brand {
    font-family: "figTree";
    flex-shrink: 0;
    font-size: var(--text-nav-brand);
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-primary);
}

.subnav__brand-logo {
    display: none;
}

.subnav__brand-text {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.subnav__nav {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.subnav__links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(20px, 2.5vw, 40px);
}

.subnav__link {
    font-family: "figTree";
    position: relative;
    display: inline-block;
    font-size: var(--text-nav-link);
    font-weight: 600;
    line-height: 1;
    color: var(--color-text-primary);
    white-space: nowrap;
    padding-block: 4px;
}

.subnav__link.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 50px;
    height: 1px;
    transform: translateX(-50%);
    background-color: var(--color-text-primary);
}

.subnav__cta {
    font-family: "figTree";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 40px;
    padding: 16px 24px;
    border: 1px solid var(--color-brand-blue);
    border-radius: 100px;
    background-color: var(--color-brand-blue);
    font-size: var(--text-nav-button);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.32px;
    color: var(--color-white);
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.subnav__cta:hover {
    opacity: 0.85;
}

.subnav__cta--menu {
    display: none;
}

.subnav__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin-left: auto;
    color: var(--color-text-primary);
}

.subnav__toggle-icon--close {
    display: none;
}

.subnav.is-menu-open .subnav__toggle-icon--open {
    display: none;
}

.subnav.is-menu-open .subnav__toggle-icon--close {
    display: block;
}

.page-main {
    min-height: 0;
    width: 100%;
    overflow-x: hidden;
}

/* ==========================================================================
   Section 2: Hero (Figma 170:394 画板1)
   ========================================================================== */

.hero {
    --hero-target-height: clamp(560px, 56.25vw, 1080px);
    --hero-viewport-height: calc(100vh - var(--subnav-scroll-offset));
    position: relative;
    width: 100%;
    overflow: hidden;
    height: min(var(--hero-target-height), var(--hero-viewport-height));
    min-height: min(var(--hero-target-height), var(--hero-viewport-height));
    max-height: var(--hero-viewport-height);
    background-color: var(--color-white);
}

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

.hero__background picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero__background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-top: clamp(48px, 4.69vw, 90px);
    padding-bottom: clamp(48px, 4.69vw, 90px);
    text-align: center;
}

.hero__eyebrow {
    font-family: "figTree";
    margin: 0 0 clamp(14px, 1.46vw, 28px);
    font-size: var(--text-hero-eyebrow);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-hero-eyebrow);
}

.hero__title {
    font-family: "figTree";
    margin: 0 0 clamp(14px, 1.25vw, 24px);
    max-width: 1097px;
    font-size: var(--text-hero-title);
    font-weight: 600;
    line-height: var(--text-hero-title-leading);
    letter-spacing: -0.02em;
    color: var(--color-white);
}

.hero__title-mobile {
    display: none;
}

.hero__title-desktop {
    display: block;
}

.hero__title-mobile-text {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}

@media (min-width: 768px) {
    font-family: "figTree";

    .hero__title {
        letter-spacing: -1.28px;
    }
}

.hero__subtitle {
    font-family: "figTree";
    margin: 0 0 clamp(24px, 2.4vw, 46px);
    font-size: var(--text-hero-subtitle);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-white);
}

@media (min-width: 768px) {
    .hero__subtitle {
        letter-spacing: -0.32px;
    }
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 2.08vw, 40px);
}

.hero__btn {
    font-family: "figTree";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: clamp(160px, 9.375vw, 180px);
    height: 48px;
    border-radius: 100px;
    font-size: var(--text-hero-button);
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(20, 96, 173, 0.1);
    transition: opacity 0.2s ease;
}

.hero__btn:hover {
    opacity: 0.88;
}

.hero__btn--play {
    background-color: var(--color-white);
    color: var(--color-hero-accent);
    box-shadow:
        0 4px 10px rgba(20, 96, 173, 0.1),
        inset 1px 1px 4px rgba(255, 255, 255, 0.25);
}

.hero__btn--inquire {
    background-color: var(--color-hero-accent);
    color: var(--color-white);
}

.hero__btn-icon {
    flex-shrink: 0;
}

/* ==========================================================================
   Section 3: Pain Points (Figma 170:407 画板2)
   ========================================================================== */

.pain-points {
    width: 100%;
    background-color: var(--color-white);
}

.pain-points__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-top: clamp(48px, 5.21vw, 100px);
    padding-bottom: clamp(48px, 5.21vw, 100px);
    gap: clamp(32px, 3.44vw, 66px);
}

.pain-points__heading {
    font-family: "figTree";
    margin: 0;
    max-width: 100%;
    font-size: var(--text-pain-heading);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    text-align: center;
}

.pain-points__heading--top {
    font-family: "figTree";
    font-weight: 600;
}

.pain-points__heading--bottom {
    font-family: "figTree";
    font-weight: 400;
}

@media (min-width: 768px) {

    .pain-points__heading {
        letter-spacing: -0.96px;
    }
}

.pain-points__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 1.72vw, 33px);
    width: 100%;
    max-width: 1200px;
}

.pain-card {
    width: 100%;
    max-width: 378px;
    margin-inline: auto;
}

.pain-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 378 / 492;
    overflow: hidden;
    border-radius: 20px;
    background-color: var(--color-pain-card-bg);
}

.pain-card__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.pain-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.pain-card:nth-child(1) .pain-card__image {
    object-position: center top;
}

.pain-card:nth-child(2) .pain-card__image {
    object-position: center 15%;
}

.pain-card:nth-child(3) .pain-card__image {
    object-position: 35% center;
}

/* absolute reason: caption overlay anchored to card bottom per Figma inset 5.29% / 4.67% */
.pain-card__caption {
    position: absolute;
    left: 5.29%;
    right: 5.29%;
    bottom: 4.67%;
    aspect-ratio: 338 / 144;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* backdrop-filter: blur(10px); */
}

.pain-card__caption::before {
    content: "";
    position: absolute;
    height: 90%;
    width: 100%;
    backdrop-filter: blur(10px);
    bottom: 0;
    border-radius: 24px;
}

.pain-card__caption-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Figma Vector 10: top ~6.94% within caption (10px / 144px), centered on notch */
.pain-card__caption-x {
    position: absolute;
    top: 6.94%;
    left: 50%;
    width: clamp(8px, 2.9%, 11px);
    height: auto;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.pain-card__text {
    font-family: "figTree";
    position: relative;
    z-index: 1;
    margin: 0;
    padding-top: clamp(8px, 0.83vw, 14px);
    font-size: var(--text-pain-card);
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text-primary);
}

/* ==========================================================================
   Section 4: AI Inverter Tech (Figma 170:425 画板3)
   ========================================================================== */

.ai-inverter {
    width: 100%;
    background-color: var(--color-white);
}

.ai-inverter__hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: clamp(520px, 52.08vw, 1000px);
}

.ai-inverter__hero picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.ai-inverter__hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.ai-inverter__hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-top: clamp(48px, 3.7vw, 71px);
    text-align: center;
}

.ai-inverter__title {
    font-family: "figTree";
    margin: 0;
    font-size: var(--text-ai-hero-title);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-ai-text);
}

@media (min-width: 768px) {


    .ai-inverter__title {
        letter-spacing: -1.28px;
    }
}

.ai-inverter__subtitle {
    font-family: "figTree";
    margin: clamp(16px, 1.56vw, 30px) 0 0;
    font-size: var(--text-ai-hero-subtitle);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-ai-text);
}

@media (min-width: 768px) {

    .ai-inverter__subtitle {
        letter-spacing: -0.24px;
    }
}

.ai-inverter__body-inner {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-bottom: clamp(48px, 5.21vw, 100px);
}

.ai-inverter__measure {
    font-family: "figTree";
    margin: clamp(48px, 5.89vw, 113px) 0 0;
    font-size: var(--text-ai-measure);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-ai-text);
}

.ai-inverter__carousel {
    margin-top: clamp(32px, 4.74vw, 91px);
}

.ai-inverter__viewport {
    overflow: hidden;
    width: 100%;
    cursor: grab;
    touch-action: pan-y;
}

.ai-inverter__viewport.is-dragging {
    cursor: grabbing;
}

.ai-inverter__track {
    display: flex;
    gap: clamp(16px, 1.72vw, 33px);
    will-change: transform;
}

.ai-inverter__track:hover {
    cursor: grab;
}

.ai-inverter__slide {
    flex: 0 0 clamp(280px, 41.67vw, 800px);
    min-width: 0;
}

.ai-inverter__slide-media {
    position: relative;
    width: 100%;
    aspect-ratio: 800 / 460;
    overflow: hidden;
    border-radius: 24px;
    background-color: var(--color-pain-card-bg);
}

.ai-inverter__slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.ai-inverter__slide--energy .ai-inverter__slide-image {
    object-position: 35% center;
}

.ai-inverter__slide--salt .ai-inverter__slide-image {
    object-position: center 20%;
}

.ai-inverter__slide-copy {
    position: absolute;
    top: clamp(20px, 2.08vw, 40px);
    left: clamp(20px, 2.86vw, 55px);
    z-index: 1;
    max-width: calc(100% - clamp(40px, 5.72vw, 110px));
}

.ai-inverter__slide-title {
    font-family: "figTree";
    margin: 0;
    font-size: var(--text-ai-card-title);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-ai-text);
}

.ai-inverter__slide-subtitle {
    font-family: "figTree";
    margin: clamp(8px, 0.78vw, 15px) 0 0;
    font-size: var(--text-ai-card-subtitle);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-ai-text);
}

.ai-inverter__slide-subtitle+.ai-inverter__slide-subtitle {
    margin-top: clamp(4px, 0.42vw, 8px);
}

.ai-inverter__progress {
    margin-top: clamp(24px, 1.35vw, 26px);
    max-width: 390px;
}

.ai-inverter__progress-track {
    position: relative;
    width: 100%;
    height: 10px;
    border-radius: 100px;
    background-color: var(--color-progress-track);
    overflow: hidden;
    pointer-events: none;
}

.ai-inverter__progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 98px;
    height: 10px;
    border-radius: 100px;
    background-color: var(--color-progress-fill);
    transform: translateX(0);
    transition: transform 0.45s ease;
}

/* ==========================================================================
   Section 5: 2X Energy Saving (Figma 170:462 画板4)
   ========================================================================== */

.energy-saving {
    width: 100%;
    background-color: var(--color-energy-bg);
}

.energy-saving__inner {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-top: clamp(48px, 5.21vw, 100px);
    /* padding-bottom: clamp(48px, 5.21vw, 100px); */
    padding-bottom: clamp(48px, 11.21vw, 200px);
}

.energy-saving__header {
    text-align: center;
}

.energy-saving__title {
    font-family: "figTree";
    margin: 0;
    font-size: var(--text-energy-title);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-ai-text);
}

@media (min-width: 768px) {
    font-family: "figTree";

    .energy-saving__title {
        letter-spacing: -1.28px;
    }
}

.energy-saving__subtitle {
    font-family: "figTree";
    margin: clamp(14px, 1.4vw, 27px) 0 0;
    font-size: var(--text-energy-subtitle);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-ai-text);
}

@media (min-width: 768px) {
    font-family: "figTree";

    .energy-saving__subtitle {
        letter-spacing: -0.32px;
    }
}

.energy-saving__stage {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    margin-top: clamp(32px, 4.2vw, 52px);
}

.energy-saving__forest {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 1440 / 645;
    border-radius: 20px;
    object-fit: cover;
    object-position: center bottom;
}

/* absolute reason: product overlaps forest per Figma 170:466 */
.energy-saving__product {
    position: absolute;
    z-index: 2;
    left: -5.89%;
    top: 4.7%;
    width: 110%;
    height: auto;
    pointer-events: none;
}

/* absolute reason: comparison panel overlays forest per Figma 353:129 */
.energy-saving__panel {
    position: absolute;
    z-index: 3;
    left: 54.44%;
    top: 27.91%;
    width: 38.96%;
    max-width: 447px;
}

/* Figma Layer: 353:130 Rectangle 40657 */
.energy-saving__panel-surface {
    container-type: inline-size;
    width: 100%;
    aspect-ratio: 447 / 270;
    border: 2px solid var(--color-white);
    border-radius: 14px;
    background-color: rgba(6, 51, 21, 0.5);
    box-shadow: inset 0 4.587px 4.587px 0 rgba(255, 255, 255, 0.25);
    overflow: hidden;
    backdrop-filter: blur(2px);
}

.energy-saving__panel-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    height: 100%;
    padding: 11.48% 9.4% 14.81%;
    color: var(--color-white);
    pointer-events: none;
}

.energy-saving__panel-block {
    display: flex;
    flex-direction: column;
    gap: 1.56%;
}

.energy-saving__stat-label {
    font-family: "figTree";
    margin: 0;
    font-size: 4.027cqi;
    font-weight: 500;
    line-height: 1.22;
}

.energy-saving__stat-value-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3.58cqi;
    margin: 0;
}

.energy-saving__stat-value {
    font-family: "figTree";
    font-size: 7.607cqi;
    font-weight: 700;
    line-height: 1;
}

.energy-saving__stat-unit {
    font-family: "figTree";
    flex-shrink: 0;
    font-size: 3.579cqi;
    font-weight: 700;
    line-height: 1;
}

/* ==========================================================================
   Progress Bar — Figma 353:132 track + 353:134 fill
   ========================================================================== */

/* Figma 353:132 Rectangle 40659 — 363×20, radius 16px, rgba(255,255,255,0.3) */
.progress-bar {
    --progress: 0%;

    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 363 / 20;
    padding-inline: 1.103%;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.3);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.12),
        inset 0 -1px 2px rgba(255, 255, 255, 0.28);
    overflow: hidden;
}

/* Figma 353:134 Rectangle 40660 — 257×14, radius 14.907px, #b7fe79 → #59eec1 */
.progress-bar__fill {
    width: var(--progress);
    height: 70%;
    border-radius: 999px;
    background: linear-gradient(90deg, #b7fe79 0%, #59eec1 100%);
    box-shadow:
        0 0 6px rgba(89, 238, 193, 0.45),
        0 0 12px rgba(183, 254, 121, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

.energy-saving__stat-bar {
    width: 100%;
    margin-top: 1.11%;
}

.energy-saving__footnote {
    font-family: "figTree";
    max-width: 1440px;
    margin: clamp(16px, 2.08vw, 33px) auto 0;
    font-size: var(--text-energy-footnote);
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-energy-footnote);
    text-align: right;
    padding-right: 100px;
}

@media(max-width:1560px) {
    .energy-saving__product {
        left: -7.89%;
        top: 8.7%;
        width: 110%;
    }
}

/* ==========================================================================
   Section 6: 1g/L Low-Salt Care (Figma 170:476 画板5)
   ========================================================================== */

.low-salt {
    width: 100%;
    background-color: var(--color-white);
    overflow: hidden;
}

.low-salt__hero {
    position: relative;
    min-height: clamp(480px, 50vw, 960px);
    overflow: hidden;
}

.low-salt__hero-bg {
    position: absolute;
    width: 110.4%;
    height: 124.3%;
    left: -6%;
    top: 0;
    max-width: none;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* absolute reason: Figma 170:478 — top 640px, h 624px, gradient to white at 42.788% */
.low-salt__hero-fade {
    position: absolute;
    left: 0;
    right: 0;
    top: 66.67%;
    height: 65%;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            #ffffff 42.788%);
    pointer-events: none;
}

.low-salt__hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1920px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-top: clamp(48px, 5.57vw, 107px);
    text-align: center;
}

.low-salt__title {
    font-family: "figTree";
    margin: 0;
    font-size: var(--text-low-salt-hero-title);
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.02em;
    color: var(--color-ai-text);
    text-shadow: 0 0 50px #ffffff;
}

@media (min-width: 768px) {
    font-family: "figTree";

    .low-salt__title {
        letter-spacing: -1.28px;
    }
}

.low-salt__subtitle {
    font-family: "figTree";
    margin: clamp(12px, 1.41vw, 27px) 0 0;
    font-size: var(--text-low-salt-hero-subtitle);
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.01em;
    color: var(--color-ai-text);
    text-shadow: 0 0 50px #ffffff;
}

@media (min-width: 768px) {
    font-family: "figTree";

    .low-salt__subtitle {
        letter-spacing: -0.24px;
    }
}

.low-salt__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 0;
    padding-bottom: clamp(48px, 6.2vw, 119px);
}

@media (max-width: 1240px) {
    .low-salt__content {
        padding-inline: var(--container-padding);
    }
}

.low-salt__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 1.88vw, 36px);
    margin-top: clamp(-80px, -6vw, -40px);
}

.low-salt__card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 582 / 300;
    /* background-color: var(--color-pain-card-bg);
    -webkit-mask-image: url("images/low-salt-card-mask.svg");
    mask-image: url("images/low-salt-card-mask.svg"); */
    /* -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat; */
}

.low-salt__card-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.low-salt__card-image {
    position: absolute;
    display: block;
    max-width: none;
    object-fit: cover;
    border-radius: 24px;
}

/* Figma 170:488 — mask position 136px 88px on 582×300 */
/* .low-salt__card--garden .low-salt__card-image {
    width: 146.56%;
    height: 158.67%;
    left: -23.37%;
    top: -29.33%;
    border-radius: 24px;
} */

.low-salt__card-label {
    font-family: "figTree";
    position: absolute;
    z-index: 2;
    top: clamp(16px, 1.67vw, 32px);
    left: clamp(16px, 1.77vw, 34px);
    margin: 0;
    font-size: var(--text-low-salt-card-label);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-white);
}

.low-salt__features {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: clamp(32px, 2.55vw, 49px);
    text-align: center;
}

.low-salt__feature {
    flex: 0 0 min(100%, clamp(200px, 13.96vw, 268px));
    width: min(100%, clamp(200px, 13.96vw, 268px));
    position: relative;
    min-height: clamp(200px, 14.01vw, 269px);
}

.low-salt__feature:nth-child(1) .low-salt__feature-content,
.low-salt__feature:nth-child(2) .low-salt__feature-content {
    bottom: clamp(22px, 2.5vw, 60px);
}

.low-salt__feature+.low-salt__feature {
    margin-left: clamp(20px, 3.8vw, 73px);
}

.low-salt__feature:nth-child(3) {
    margin-left: clamp(16px, 3.33vw, 64px);
}

.low-salt__feature-visual {
    position: relative;
    width: 100%;
    margin-inline: auto;
    aspect-ratio: 268 / 269;
}

.low-salt__feature-circle {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.low-salt__feature-icon {
    position: absolute;
    z-index: 1;
    height: auto;
    object-fit: contain;
}

/* Figma 170:508 — icon at 102px / 50px within 268×269 circle */
.low-salt__feature-icon--salinity {
    left: 38.06%;
    top: 18.59%;
    width: clamp(32px, 2.19vw, 42px);
}

/* Figma 170:501 — icon at 101px / 43px */
.low-salt__feature-icon--ph {
    left: 37.69%;
    top: 15.99%;
    width: clamp(33px, 2.24vw, 43px);
}

/* Figma 170:513 — icon at 103px / 48px */
.low-salt__feature-icon--precision {
    left: 38.43%;
    top: 17.84%;
    width: clamp(34px, 2.29vw, 44px);
}

.low-salt__feature-content {
    position: absolute;
    left: 50%;
    bottom: clamp(22px, 3vw, 60px);
    width: max-content;
    max-width: 100%;
    text-align: center;
    transform: translateX(-55%);
}

.low-salt__feature--precision .low-salt__feature-content {
    bottom: clamp(26px, 2.29vw, 44px);
}

@media (min-width: 1920px) {
    .low-salt__feature-content {
        bottom: 31px;
        transform: translateX(-60%);
    }

    .low-salt__feature--precision .low-salt__feature-content {
        bottom: 44px;
    }
}

.low-salt__feature-title {
    font-family: "figTree";
    margin: 0;
    font-size: var(--text-low-salt-feature-title);
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-ai-text);
}

.low-salt__feature--precision .low-salt__feature-title {
    font-family: "figTree";
    line-height: calc(24 / 22);
}

.low-salt__feature-desc {
    font-family: "figTree";
    /* margin: clamp(6px, 0.78vw, 15px) 0 0; */
    font-size: var(--text-low-salt-feature-desc);
    font-weight: 300;
    line-height: 1.35;
    color: var(--color-low-salt-muted);
}

.low-salt__turbo {
    margin-top: clamp(64px, 7.11vw, 175px);
    text-align: center;
}

.low-salt__turbo-title {
    font-family: "figTree";
    margin: 0;
    font-size: var(--text-low-salt-turbo-title);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-ai-text);
}

@media (min-width: 768px) {
    font-family: "figTree";

    .low-salt__turbo-title {
        letter-spacing: -1.28px;
    }
}

.low-salt__turbo-desc {
    font-family: "figTree";
    margin: clamp(16px, 1.25vw, 24px) auto 0;
    max-width: 902px;
    font-size: var(--text-low-salt-turbo-desc);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--color-low-salt-muted);
}

@media (min-width: 768px) {
    font-family: "figTree";

    .low-salt__turbo-desc {
        letter-spacing: -0.22px;
    }
}

.low-salt__turbo-media {
    position: relative;
    margin-top: clamp(28px, 2.92vw, 56px);
    width: 100%;
    aspect-ratio: 1200 / 600;
    overflow: hidden;
    border-radius: 24px;
    /* background-color: var(--color-pain-card-bg);
    -webkit-mask-image: url("images/low-salt-turbo-mask.png");
    mask-image: url("images/low-salt-turbo-mask.png");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat; */
}

/* Figma 170:494 — mask offset 0px 25px on 1200×600 */
.low-salt__turbo-image {
    position: absolute;
    width: 100%;
    height: 111.5%;
    left: 0;
    top: -4.17%;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   Section 7: Ultra Slim Pad Design (Figma 170:514 画板6)
   ========================================================================== */

.ultra-slim {
    width: 100%;
    background-color: var(--color-ultra-slim-bg);
}

.ultra-slim__inner {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 0;
    padding-top: clamp(48px, 6.25vw, 120px);
    padding-bottom: clamp(64px, 9.27vw, 178px);
}

@media (max-width: 1240px) {
    .ultra-slim__inner {
        padding-inline: var(--container-padding);
    }
}

.ultra-slim__header {
    text-align: center;
}

.ultra-slim__title {
    font-family: "figTree";
    margin: 0;
    font-size: var(--text-ultra-slim-title);
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.02em;
    color: var(--color-ai-text);
}

@media (min-width: 768px) {
    font-family: "figTree";

    .ultra-slim__title {
        letter-spacing: -1.28px;
    }
}

.ultra-slim__subtitle {
    font-family: "figTree";
    margin: clamp(16px, 1.25vw, 24px) 0 0;
    font-size: var(--text-ultra-slim-subtitle);
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.01em;
    color: var(--color-ai-text);
}

@media (min-width: 768px) {
    font-family: "figTree";

    .ultra-slim__subtitle {
        letter-spacing: -0.24px;
    }
}

.ultra-slim__media {
    margin: clamp(28px, 2.71vw, 52px) 0 0;
}

.ultra-slim__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 600;
}

/* ==========================================================================
   Section 8: Visible Water Quality (Figma 170:522 画板7)
   ========================================================================== */

.visible-water {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-white);
}

.visible-water__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.visible-water__bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.visible-water__bg-image--overlay {
    transform: rotate(-0.21deg);
}

.visible-water__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1318px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-top: clamp(40px, 4.17vw, 80px);
    padding-bottom: clamp(48px, 5vw, 80px);
    min-height: clamp(560px, 56.25vw, 1080px);
}

.visible-water__header {
    text-align: center;
}

.visible-water__title {
    font-family: "figTree";
    margin: 0;
    font-size: var(--text-visible-water-title);
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.02em;
    color: var(--color-ai-text);
}

@media (min-width: 768px) {
    font-family: "figTree";

    .visible-water__title {
        letter-spacing: -1.28px;
    }
}

.visible-water__subtitle {
    font-family: "figTree";
    margin: clamp(12px, 0.83vw, 16px) 0 0;
    font-size: var(--text-visible-water-subtitle);
    font-weight: 500;
    line-height: normal;
    color: var(--color-ai-text);
}

.visible-water__desc {
    font-family: "figTree";
    margin: clamp(16px, 1.25vw, 24px) auto 0;
    max-width: 1265px;
    font-size: var(--text-visible-water-desc);
    font-weight: 300;
    line-height: normal;
    color: var(--color-low-salt-muted);
}

.visible-water__gauges {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
    margin-top: clamp(24px, 1.72vw, 33px);
    gap: clamp(24px, 4.2vw, 48px) clamp(32px, 16.93vw, 325px);
}

.visible-water__gauge {
    position: relative;
    flex: 0 0 min(100%, 223px);
    width: min(100%, 223px);
}

.visible-water__gauge-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 223 / 220;
}

.visible-water__gauge-arc {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.visible-water__gauge-label {
    font-family: "figTree";
    position: absolute;
    left: 50%;
    top: 56.73%;
    margin: 0;
    font-size: var(--text-visible-water-gauge);
    font-weight: 700;
    line-height: normal;
    color: var(--color-white);
    transform: translateX(-50%);
    white-space: nowrap;
}

.visible-water__gauge--perfect {
    width: min(100%, 222px);
    flex-basis: min(100%, 222px);
}

/* ==========================================================================
   Section 9: Pool Treatment Redefined (Figma 170:540 画板8)
   ========================================================================== */

.pool-treatment {
    width: 100%;
    background-color: var(--color-white);
}

.pool-treatment__inner {
    width: 100%;
    max-width: 932px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-top: clamp(48px, 6.25vw, 120px);
    padding-bottom: clamp(80px, 12.19vw, 234px);
}

.pool-treatment__header {
    text-align: center;
}

.pool-treatment__title {
    font-family: "figTree";
    margin: 0;
    font-size: var(--text-pool-treatment-title);
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.02em;
    color: var(--color-ai-text);
}

@media (min-width: 768px) {
    font-family: "figTree";

    .pool-treatment__title {
        letter-spacing: -1.28px;
    }
}

.pool-treatment__subtitle {
    font-family: "figTree";
    margin: clamp(16px, 1.25vw, 24px) 0 0;
    font-size: var(--text-pool-treatment-subtitle);
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.01em;
    color: var(--color-ai-text);
}

@media (min-width: 768px) {
    font-family: "figTree";

    .pool-treatment__subtitle {
        letter-spacing: -0.24px;
    }
}

.pool-treatment__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 180px));
    justify-content: center;
    gap: clamp(48px, 5.31vw, 102px) clamp(48px, 10.21vw, 196px);
    margin-top: clamp(48px, 4.74vw, 91px);
}

.pool-treatment__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pool-treatment__icon {
    width: min(100%, clamp(140px, 9.38vw, 180px));
    aspect-ratio: 180 / 181;
}

.pool-treatment__icon-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pool-treatment__label {
    font-family: "figTree";
    margin: clamp(12px, 0.86vw, 17px) 0 0;
    font-size: var(--text-pool-treatment-label);
    font-weight: 500;
    line-height: normal;
    color: var(--color-ai-text);
    white-space: nowrap;
}

.pool-treatment__item--ph .pool-treatment__label {
    max-width: 315px;
}

/* ==========================================================================
   Section 11: Smart Link Mini-Ecosystem (Figma 170:575 画板10)
   ========================================================================== */

.mini-ecosystem {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-white);
}

.mini-ecosystem__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mini-ecosystem__bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.mini-ecosystem__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-top: clamp(48px, 5.73vw, 110px);
    padding-bottom: clamp(48px, 5vw, 80px);
    min-height: clamp(560px, 56.25vw, 1080px);
}

.mini-ecosystem__header {
    text-align: center;
}

.mini-ecosystem__title {
    font-family: "figTree";
    margin: 0;
    font-size: var(--text-mini-ecosystem-title);
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.02em;
    color: var(--color-white);
}

@media (min-width: 768px) {
    font-family: "figTree";

    .mini-ecosystem__title {
        letter-spacing: -1.28px;
    }
}

.mini-ecosystem__subtitle {
    font-family: "figTree";
    margin: clamp(8px, 0.63vw, 12px) 0 0;
    font-size: var(--text-mini-ecosystem-subtitle);
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.01em;
    color: var(--color-white);
}

@media (min-width: 768px) {
    font-family: "figTree";

    .mini-ecosystem__subtitle {
        letter-spacing: -0.32px;
    }
}

.mini-ecosystem__desc {
    font-family: "figTree";
    margin: clamp(20px, 1.46vw, 28px) auto 0;
    max-width: 766px;
    font-size: var(--text-mini-ecosystem-desc);
    font-weight: 300;
    line-height: normal;
    color: var(--color-white);
}

/* ==========================================================================
   Section 12: iGarden App Control (Figma 170:582 画板11)
   ========================================================================== */

.app-control {
    width: 100%;
    background-color: var(--color-white);
}

.app-control__inner {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-top: clamp(48px, 5.73vw, 110px);
    padding-bottom: clamp(80px, 14.08vw, 99px);
}

.app-control__header {
    text-align: center;
}

.app-control__title {
    font-family: "figTree";
    margin: 0;
    font-size: var(--text-app-control-title);
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.02em;
    color: var(--color-ai-text);
}

@media (min-width: 768px) {
    font-family: "figTree";

    .app-control__title {
        letter-spacing: -1.28px;
    }
}

.app-control__subtitle {
    font-family: "figTree";
    margin: clamp(16px, 1.04vw, 20px) 0 0;
    font-size: var(--text-app-control-subtitle);
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.01em;
    color: var(--color-ai-text);
}

@media (min-width: 768px) {
    font-family: "figTree";

    .app-control__subtitle {
        letter-spacing: -0.32px;
    }
}

.app-control__desc {
    font-family: "figTree";
    margin: clamp(24px, 1.67vw, 32px) auto 0;
    max-width: 980px;
    font-size: var(--text-app-control-desc);
    font-weight: 300;
    line-height: normal;
    color: var(--color-low-salt-muted);
}

.app-control__stage {
    position: relative;
    width: 100%;
    margin-top: clamp(20px, 1.3vw, 25px);
}

.app-control__stage-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1440 / 809;
}

/* absolute reason: feature columns overlay gray panel margins per Figma 170:583 layout */
.app-control__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 25.28%) 1fr minmax(0, 25.42%);
    align-items: start;
    padding: 9.74% 0 0;
    box-sizing: border-box;
    pointer-events: none;
}

.app-control__column {
    display: flex;
    flex-direction: column;
}

.app-control__column--left {
    /* padding-left: 5.9%; */
    padding-top: clamp(20px, 1.58vw, 80px);
    padding-left: clamp(20px, 4.58vw, 80px);
    gap: clamp(40px, 4.58vw, 50px);
}

.app-control__column--center {
    min-height: 1px;
}

.app-control__column--right {
    align-items: flex-end;
    /* padding-right: 5.9%; */
    padding-top: clamp(20px, 1.58vw, 80px);
    padding-right: clamp(20px, 4.58vw, 80px);
    gap: clamp(40px, 4.58vw, 50px);
}

.app-control__feature-title {
    font-family: "figTree";
    margin: 0;
    font-size: var(--text-app-control-feature-title);
    font-weight: 600;
    line-height: normal;
    color: var(--color-ai-text);
}

.app-control__feature-desc {
    font-family: "figTree";
    margin: clamp(12px, 0.83vw, 16px) 0 0;
    font-size: var(--text-app-control-feature-desc);
    font-weight: 400;
    line-height: normal;
    color: var(--color-ai-text);
}

.app-control__column--right .app-control__feature {
    text-align: right;
}

.app-control__divider {
    display: block;
    width: 100%;
    max-width: 364px;
    height: 1px;
    flex-shrink: 0;
}

.app-control__divider--right {
    max-width: 366px;
}

.app-control__download {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    max-width: 271px;
    margin-top: -30px;
}

.app-control__store-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: clamp(8px, 0.69vw, 10px);
    padding: 0 15px;
}

.app-control__store-label {
    font-family: "figTree";
    font-size: var(--text-app-control-store);
    font-weight: 600;
    line-height: normal;
    color: var(--color-ai-text);
}

.app-control__qr {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 271 / 117;
}

/* ==========================================================================
   Section 13: Built for Reliability (Figma 170:611 画板12)
   ========================================================================== */

.reliability {
    width: 100%;
    background-color: var(--color-reliability-bg);
}

.reliability__inner {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-top: clamp(48px, 6.25vw, 120px);
    padding-bottom: clamp(64px, 7.29vw, 140px);
}

.reliability__title {
    font-family: "figTree";
    margin: 0;
    text-align: center;
    font-size: var(--text-reliability-title);
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.02em;
    color: var(--color-ai-text);
}

@media (min-width: 768px) {
    font-family: "figTree";

    .reliability__title {
        letter-spacing: -1.28px;
    }
}

.reliability__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 386px));
    justify-content: center;
    gap: clamp(16px, 1.09vw, 21px);
    margin-top: clamp(32px, 2.66vw, 51px);
}

.reliability__card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    aspect-ratio: 386 / 532;
    background-color: var(--color-white);
}

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

.reliability__card-copy {
    position: absolute;
    top: clamp(32px, 2.76vw, 53px);
    left: 0;
    right: 0;
    /* padding-inline: clamp(20px, 6.74vw, 101px); */
    text-align: center;
    pointer-events: none;
}

.reliability__card-title {
    font-family: "figTree";
    margin: 0;
    font-size: var(--text-reliability-card-title);
    font-weight: 700;
    line-height: normal;
    color: var(--color-reliability-card-text);
}

.reliability__card-desc {
    font-family: "figTree";
    margin: clamp(4px, 0.31vw, 6px) 0 0;
    font-size: var(--text-reliability-card-desc);
    font-weight: 400;
    line-height: normal;
    color: var(--color-reliability-card-text);
}

/* ==========================================================================
   Section 14: Place it in Your Garden (Figma 170:635 画板13)
   ========================================================================== */

.garden-place {
    width: 100%;
    background-color: var(--color-white);
}

.garden-place__inner {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-top: clamp(48px, 6.25vw, 120px);
    padding-bottom: clamp(64px, 6.25vw, 120px);
}

.garden-place__title {
    font-family: "figTree";
    margin: 0;
    text-align: center;
    font-size: var(--text-garden-title);
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.02em;
    color: var(--color-ai-text);
}

@media (min-width: 768px) {
    font-family: "figTree";

    .garden-place__title {
        letter-spacing: -1.28px;
    }
}

.garden-place__media {
    margin: clamp(48px, 5.75vw, 168px) 0 0;
    overflow: hidden;
    border-radius: clamp(16px, 1.25vw, 24px);
    position: relative;
}

.garden-place__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 600;
    object-fit: cover;
}

.garden-place__qr-code {
    position: absolute;
    top: 33%;
    left: 15%;
    max-width: clamp(60px, 10.8vw, 160px);
}

.garden-place__qr-code__text {
    font-family: "figTree";
    font-size: clamp(14px, 1.15vw, 26px);
    font-weight: 500;
    text-align: center;
    margin: 10px auto 0;
    color: #fff;
    white-space: nowrap;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* ==========================================================================
   Section 15: What's in the Box (Figma 170:648 画板14)
   ========================================================================== */

.in-the-box {
    width: 100%;
    background-color: var(--color-reliability-bg);
}

.in-the-box__inner {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-top: clamp(48px, 6.25vw, 120px);
    padding-bottom: clamp(64px, 7.29vw, 140px);
}

.in-the-box__title {
    font-family: "figTree";
    margin: 0;
    text-align: center;
    font-size: var(--text-in-the-box-title);
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.02em;
    color: var(--color-ai-text);
}

@media (min-width: 768px) {
    font-family: "figTree";

    .in-the-box__title {
        letter-spacing: -1.28px;
    }
}

.in-the-box__panel {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(32px, 8.44vw, 162px) clamp(24px, 4vw, 48px);
    margin-top: clamp(32px, 3.65vw, 70px);
    padding: clamp(32px, 3.18vw, 61px) clamp(24px, 6.25vw, 120px) clamp(40px, 4.27vw, 82px);
    border-radius: 20px;
    background-color: var(--color-white);
}

.in-the-box__main {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(24px, 2.5vw, 80px);
}

.in-the-box__accessories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: center;
    align-items: end;
    gap: clamp(32px, 4.58vw, 88px) clamp(24px, 3.7vw, 71px);
}

.in-the-box__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    text-align: center;
}

.in-the-box__image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.in-the-box__item--control .in-the-box__image {
    width: clamp(120px, 8.59vw, 165px);
    aspect-ratio: 165 / 302;
}

.in-the-box__item--electrolytic .in-the-box__image {
    width: clamp(200px, 17.29vw, 332px);
    aspect-ratio: 332 / 238;
}

.in-the-box__item--probe .in-the-box__image {
    width: clamp(100px, 7.08vw, 136px);
    aspect-ratio: 136 / 230;
}

.in-the-box__item--flow-switch .in-the-box__image {
    width: clamp(72px, 4.74vw, 91px);
    aspect-ratio: 91 / 119;
}

.in-the-box__item--accessories .in-the-box__image {
    width: clamp(88px, 5.78vw, 111px);
    aspect-ratio: 111 / 99;
}

.in-the-box__item--dry-contact .in-the-box__image {
    width: clamp(68px, 4.43vw, 85px);
    aspect-ratio: 85 / 113;
}

.in-the-box__item--pump-cable .in-the-box__image {
    width: clamp(44px, 2.86vw, 55px);
    aspect-ratio: 55 / 111;
}

.in-the-box__label {
    font-family: "figTree";
    margin: clamp(16px, 1.41vw, 27px) 0 0;
    font-size: var(--text-in-the-box-label);
    font-weight: 500;
    line-height: normal;
    color: var(--color-ai-text);
}

.in-the-box__item--flow-switch .in-the-box__label,
.in-the-box__item--accessories .in-the-box__label {
    margin-top: clamp(12px, 0.94vw, 18px);
}

/* ==========================================================================
   Section 16: AI Inverter Specs (Figma 170:666 画板15)
   ========================================================================== */

.specs {
    width: 100%;
    background-color: var(--color-white);
}

.specs__inner {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
    padding-top: clamp(48px, 5.21vw, 100px);
    padding-bottom: clamp(64px, 7.29vw, 140px);
}

.specs__title {
    font-family: "figTree";
    margin: 0;
    text-align: center;
    font-size: var(--text-specs-title);
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.02em;
    color: #000000;
}

@media (min-width: 768px) {
    font-family: "figTree";

    .specs__title {
        letter-spacing: -1.28px;
    }
}

.specs__tabs {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: clamp(16px, 2vw, 24px);
    width: 100%;
    max-width: 955px;
    margin-inline: auto;
    margin-top: clamp(32px, 3.44vw, 66px);
}

.specs__tabs::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    height: 2px;
    background-color: var(--color-progress-track);
}

.specs__tab {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: "figTree";
    cursor: pointer;
}

.specs__tab-label {
    font-family: "figTree";
    margin-bottom: clamp(16px, 1.25vw, 24px);
    font-size: var(--text-specs-tab);
    font-weight: 400;
    line-height: normal;
    color: var(--color-specs-tab-inactive);
    white-space: nowrap;
}

.specs__tab--active .specs__tab-label {
    font-family: "figTree";
    font-weight: 600;
    color: #000000;
}

.specs__tab-indicator {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: clamp(80px, 8.13vw, 156px);
    max-width: 100%;
    height: 4px;
    background-color: var(--color-specs-tab-indicator);
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.specs__tab--active .specs__tab-indicator {
    z-index: 1;
    opacity: 1;
}

.specs__panels {
    margin-top: clamp(20px, 4.47vw, 40px);
}

.specs__panel[hidden] {
    display: none;
}

.specs__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.specs__table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0 clamp(20px, 2.31vw, 44.44px);
    table-layout: fixed;
}

.specs__label,
.specs__value {
    font-family: "figTree";
    padding: clamp(8px, 0.58vw, 11.111px);
    font-size: var(--text-specs-cell);
    font-weight: 600;
    line-height: normal;
    vertical-align: middle;
}

.specs__label {
    font-family: "figTree";
    width: 40%;
    color: var(--color-specs-label);
    text-align: left;
    font-weight: 600;
}

.specs__value {
    width: 18.75%;
    color: #000000;
    text-align: center;
}

.specs__value--span {
    width: auto;
}

/* ==========================================================================
   Responsive: 1440px
   ========================================================================== */

@media (max-width: 1440px) {
    .subnav__links {
        gap: clamp(16px, 2vw, 32px);
    }

    .low-salt__feature+.low-salt__feature {
        margin-left: clamp(16px, 4.1vw, 59px);
    }

    .low-salt__feature:nth-child(3) {
        margin-left: clamp(12px, 3.6vw, 52px);
    }

    .low-salt__feature-content {
        transform: translateX(-52%);
    }

    .visible-water__gauges {
        gap: clamp(24px, 3.33vw, 48px) clamp(28px, 16.93vw, 243px);
    }

    .pool-treatment__grid {
        gap: clamp(40px, 5.31vw, 76px) clamp(40px, 10.21vw, 147px);
    }

    .mini-ecosystem__inner {
        min-height: clamp(520px, 75vw, 900px);
    }

    .app-control__overlay {
        padding-top: 22%;
    }

    .reliability__cards {
        gap: clamp(14px, 1.46vw, 16px);
    }
}

/* ==========================================================================
   Responsive: 767px — hamburger menu
   ========================================================================== */

@media (max-width: 767px) {
    :root {
        --subnav-height: 40px;
        --subnav-offset-top: 0px;
        --subnav-scroll-offset: calc(var(--subnav-offset-top) + var(--subnav-height));
    }

    #turbo {
        scroll-margin-top: calc(var(--subnav-scroll-offset) + 40px);
    }

    .subnav {
        margin-top: 0;
        top: 50px;
    }

    .subnav__inner {
        min-height: var(--subnav-height);
        padding-inline: 16px;
        gap: 8px;
    }

    .subnav__brand {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        min-width: 0;
        overflow: visible;
    }

    .subnav__brand-text {
        display: none;
    }

    .subnav__brand-logo {
        display: block;
        width: 82px;
        height: 18px;
        flex-shrink: 0;
    }

    .subnav__toggle {
        display: inline-flex;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        margin-left: auto;
    }

    .subnav__toggle-icon {
        width: 24px;
        height: 24px;
    }

    .subnav__cta--desktop {
        display: none;
    }

    .subnav__nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex: none;
        flex-direction: column;
        align-items: stretch;
        padding: 16px 16px 24px;
        background-color: var(--color-white);
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        max-height: calc(100dvh - var(--subnav-height));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .subnav.is-menu-open .subnav__nav {
        display: flex;
    }

    .subnav__links {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
    }

    .subnav__links li {
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .subnav__link {
        display: block;
        width: 100%;
        padding: 16px 0;
        white-space: normal;
    }

    .subnav__link.is-active::after {
        left: 0;
        bottom: 12px;
        transform: none;
    }

    .subnav__cta--menu {
        display: inline-flex;
        width: 100%;
        margin-top: 24px;
        height: 48px;
    }
}

/* ==========================================================================
   Responsive: 430px
   ========================================================================== */

@media (max-width: 430px) {
    .subnav__link {
        font-size: 14px;
    }

    .subnav__cta--menu {
        font-size: 14px;
    }
}

/* ==========================================================================
   Pain points & hero responsive
   ========================================================================== */

@media (max-width: 767px) {

    .pain-points__cards {
        grid-template-columns: 1fr;
        max-width: 378px;
    }

    .pain-card {
        max-width: 100%;
    }

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

    .hero__title {
        letter-spacing: -0.01em;
    }

    .hero__title-desktop {
        display: none;
    }

    .hero__title-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(8px, 2.2vw, 12px);
        width: 100%;
        max-width: 360px;
    }

    .hero__title-logo {
        display: block;
        width: 105px;
        height: 23px;
        flex-shrink: 0;
    }

    .hero__title-mobile-text {
        display: block;
    }

    .hero__actions {
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 320px;

    }

    .hero__btn {
        width: 100%;
    }

    .ai-inverter__slide {
        flex-basis: min(100%, 378px);
    }

    .ai-inverter__progress {
        max-width: 100%;
    }

    .energy-saving__product {
        left: 50%;
        top: auto;
        bottom: 34%;
        width: 62%;
        max-width: 420px;
        transform: translateX(-58%);
    }

    .energy-saving__panel {
        left: 50%;
        top: auto;
        bottom: 6%;
        width: min(92%, 447px);
        transform: translateX(-50%);
    }

    .energy-saving__footnote {
        text-align: left;
    }

    .low-salt__cards {
        grid-template-columns: 1fr;
        margin-top: clamp(-48px, -8vw, -24px);
    }

    .low-salt__features {
        flex-direction: column;
        align-items: center;
        gap: clamp(32px, 6vw, 48px);
        max-width: min(100%, 360px);
        margin-inline: auto;
    }

    .low-salt__feature {
        flex: none;
        width: min(100%, 268px);
        min-height: 0;
    }

    .low-salt__feature+.low-salt__feature,
    .low-salt__feature:nth-child(3) {
        margin-left: 0;
    }

    /* .low-salt__feature-content {
        position: static;
        width: 100%;
        max-width: none;
        transform: none;
        margin-top: clamp(12px, 3.2vw, 20px);
    } */

    /* .low-salt__feature--precision .low-salt__feature-content {
        bottom: auto;
    } */

    .low-salt__turbo-desc br {
        display: none;
    }

    .ultra-slim__inner {
        padding-top: clamp(40px, 8vw, 72px);
        padding-bottom: clamp(48px, 10vw, 96px);
    }

    .ultra-slim__media {
        margin-top: clamp(24px, 5vw, 40px);
    }

    .visible-water__inner {
        min-height: auto;
        padding-top: clamp(32px, 6vw, 56px);
        padding-bottom: clamp(40px, 8vw, 64px);
    }

    .visible-water__gauges {
        /* flex-direction: column; */
        align-items: center;
        gap: clamp(24px, 5vw, 36px);
    }

    .visible-water__gauge,
    .visible-water__gauge--perfect {
        width: min(100%, 200px);
        flex-basis: min(100%, 200px);
    }

    .pool-treatment__grid {
        grid-template-columns: repeat(2, minmax(0, 160px));
        gap: clamp(32px, 6vw, 48px) clamp(24px, 8vw, 40px);
    }

    .pool-treatment__inner {
        padding-top: clamp(40px, 8vw, 64px);
        padding-bottom: clamp(64px, 12vw, 96px);
    }

    .mini-ecosystem__inner {
        min-height: auto;
        padding-top: clamp(40px, 8vw, 64px);
        padding-bottom: clamp(40px, 10vw, 72px);
    }

    .mini-ecosystem__desc br {
        display: none;
    }

    .app-control__overlay {
        position: static;
        display: flex;
        flex-direction: column;
        gap: clamp(32px, 6vw, 48px);
        margin-top: clamp(24px, 5vw, 40px);
        padding-top: 0;
        pointer-events: auto;
    }

    .app-control__column--left,
    .app-control__column--right {
        padding-inline: 0;
        gap: clamp(24px, 4vw, 32px);
    }

    .app-control__column--center {
        display: none;
    }

    .app-control__column--right .app-control__feature {
        text-align: left;
    }

    .app-control__download {
        align-items: flex-start;
    }

    .app-control__inner {
        padding-bottom: clamp(64px, 12vw, 96px);
    }

    .reliability__cards {
        grid-template-columns: minmax(0, 386px);
    }

    .reliability__inner {
        padding-bottom: clamp(48px, 10vw, 80px);
    }

    .in-the-box__panel {
        flex-direction: column;
        align-items: center;
        padding-inline: clamp(20px, 5vw, 40px);
    }

    .in-the-box__main {
        flex-direction: column;
        align-items: center;
    }

    .in-the-box__accessories {
        width: 100%;
        max-width: 280px;
    }

    .specs__tabs {
        justify-content: flex-start;
        gap: clamp(16px, 4vw, 32px);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .specs__tabs::-webkit-scrollbar {
        display: none;
    }

    .specs__panels .specs__table-wrap {
        margin-inline: calc(var(--container-padding) * -1);
        padding-inline: var(--container-padding);
    }
}

@media (max-width: 430px) {
    .hero__background-image {
        object-position: center bottom;
    }

    .hero__inner {
        padding-top: clamp(32px, 8vw, 48px);
    }

    .hero__eyebrow {
        font-size: 14px;
    }

    .hero__subtitle {
        font-size: 18px;
    }

    .pain-points__cards {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .pain-card__caption::before {
        content: none;
    }

    .pain-points__cards .pain-card .pain-card__caption {
        align-items: flex-end;
        justify-content: flex-start;
    }

    .pain-points__cards .pain-card .pain-card__caption .pain-card__text {
        color: #fff;
        text-align: left;
    }

    .pain-points__cards .pain-card .pain-card__caption-shape,
    .pain-points__cards .pain-card .pain-card__caption-x {
        display: none;
    }

    .pain-points__cards .pain-card:nth-child(1) {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
    }

    .pain-points__cards .pain-card:nth-child(1) .pain-card__media,
    .pain-points__cards .pain-card:nth-child(3) .pain-card__media {
        aspect-ratio: 192 / 209;
    }


    .pain-points__cards .pain-card:nth-child(2) {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .pain-points__cards .pain-card:nth-child(2) .pain-card__media {
        aspect-ratio: 398 / 208;
    }

    .pain-points__cards .pain-card:nth-child(3) {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
    }

    .pain-points__heading--bottom {
        color: #666;
        margin-top: 8px;
    }

    .ai-inverter__slide {
        flex-basis: 100%;
    }

    .ai-inverter__subtitle {
        color: #666;
    }

    .visible-water__gauge-visual {
        max-width: 85px;
    }

    .energy-saving__product {
        width: 78%;
        bottom: 38%;
        transform: translateX(-52%);
    }

    .energy-saving__panel {
        width: 94%;
    }

    .low-salt__hero {
        min-height: clamp(400px, 110vw, 520px);
    }

    .low-salt__feature {
        width: min(100%, 220px);
    }

    .low-salt__feature-visual {
        width: 100%;
    }

    .low-salt__feature:nth-child(1) .low-salt__feature-content, 
    .low-salt__feature:nth-child(2) .low-salt__feature-content, 
    .low-salt__feature--precision .low-salt__feature-content{
        /* margin-top: 10px; */
        bottom: 68px;
    }

    .low-salt__feature-desc br {
        display: none;
    }

    .ultra-slim__title {
        letter-spacing: -0.02em;
    }

    .ultra-slim__subtitle {
        letter-spacing: -0.01em;
    }

    .visible-water__gauge,
    .visible-water__gauge--perfect {
        /* width: min(100%, 180px);
        flex-basis: min(100%, 180px); */
            width: min(100%, 85px);
        flex-basis: min(100%, 85px);
    }

    .pool-treatment__grid {
        grid-template-columns: minmax(0, 180px);
    }
    .app-control__download {
     margin-top: 0;
    }
    .app-control__column--right{
        align-items: flex-start;
    }
}

/* ==========================================================================
   Hero Video Modal
   ========================================================================== */

html.ig-x-series-hero-video-modal-open,
body.ig-x-series-hero-video-modal-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.hero-video-modal__trigger {
    cursor: pointer;
}

.hero-video-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    touch-action: none;
}

.hero-video-modal.is-open {
    display: flex;
}

.hero-video-modal__dialog {
    display: flex;
    flex-direction: column;
    width: calc(100vw - 32px);
    max-width: 960px;
    border-radius: clamp(10px, 1.042vw, 20px);
    overflow: hidden;
    background: #1a1a1a;
}

.hero-video-modal__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: clamp(12px, 1.25vw, 24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-video-modal__copy {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.417vw, 8px);
    min-width: 0;
}

.hero-video-modal__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(14px, 1.25vw, 24px);
    font-weight: 600;
    line-height: 1.2;
}

.hero-video-modal__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: clamp(10px, 0.833vw, 16px);
    font-weight: 400;
    line-height: 1.2;
}

.hero-video-modal__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.hero-video-modal__close:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.hero-video-modal__close-icon {
    display: block;
    width: 24px;
    height: 24px;
}

.hero-video-modal__frame-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
}

.hero-video-modal__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000000;
}