@keyframes marquee { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-50%); }
}


#header_ct{z-index: 10000;}

#ly_web_header_0001_0{top: 0;left: 0;width: 100%;z-index:10; background-color: #fff; transition: all 0.5s ease;} 

/* 顶部广告语 */
#ly_web_header_0001_0 .top_slogan{min-height: 38px; background-color: #000; gap: 0 8px; overflow: hidden;}
#ly_web_header_0001_0 .top_slogan ,
#ly_web_header_0001_0 .top_slogan .title{font-family: "Figtree"; font-size: 14px; line-height: 100%; color: #FBFBFD;}
#ly_web_header_0001_0 .top_slogan a{text-decoration: underline;}
#ly_web_header_0001_0 .top_slogan .countdown-grid,
#ly_web_header_0001_0 .top_slogan .countdown-item{gap: 0 5px;}
#ly_web_header_0001_0 .top_slogan .countdown-grid{margin: 0 5px;}
#ly_web_header_0001_0 .top_slogan .countdown-value{padding: 5px; border-radius: 5px; background-color: #fff; color: var(--color-text-primary); min-width: 26.5px; height: 30px; display: flex; align-items: center; justify-content: center;}
#ly_web_header_0001_0 .top_slogan .swiper{width: 100%; height: 38px;}
#ly_web_header_0001_0 .top_slogan .swiper-slide,
#ly_web_header_0001_0 .marquee-item{width: 100%; line-height: 38px; height: 38px; flex-shrink: 0; white-space: nowrap; display: flex; align-items: center; justify-content: center;}

/* 水平滚动 */
#ly_web_header_0001_0 .notice-swiper{ overflow: hidden; width: 100%;}
#ly_web_header_0001_0 .marquee-container { overflow: hidden; width: 100%;}
#ly_web_header_0001_0 .marquee-content { display: flex; width: max-content;}
#ly_web_header_0001_0 .marquee-item { width: max-content; margin-right: 80px; display: inline-flex; flex-shrink: 0; align-items: center;}
#ly_web_header_0001_0 .marquee-container.paused .marquee-content { animation-play-state: paused !important;}



/* 头部 */
#ly_web_header_0001_0 .header-box{height:48px;padding: 0 1.25%; }
#ly_web_header_0001_0 .logo{width:91px; height: auto;}
#ly_web_header_0001_0 .logo img:nth-child(2){opacity: 0;}

#ly_web_header_0001_0 .hnav .one-nav{height:100%; margin-right: 20px;}
#ly_web_header_0001_0 .hnav .one-nav:last-child{margin-right: 0px;}
#ly_web_header_0001_0 .hnav .one-nav .nav-a{font-family: "Figtree-Bold"; font-size: 14px; line-height: 48px; color: var(--color-text-primary);}

#ly_web_header_0001_0 .hnav .two-nav{height: 0; overflow: hidden; top: 100%; left: 0; z-index:3; background-color: rgba(255, 255, 255, .95); backdrop-filter: blur(48px)}
#ly_web_header_0001_0 .hnav .two-nav .hnavbg{height: auto;}
/* 产品下拉 */
#ly_web_header_0001_0 .hnav .pro-nav{width:100%; top: 48px;}
body:has(.top_slogan) #ly_web_header_0001_0 .hnav .pro-nav{top: 86px;}

#ly_web_header_0001_0 .hnav .pro-nav .box{width: 100%; padding: 64px 10.9375%;}
#ly_web_header_0001_0 .hnav .pro-nav .box>div{margin-top: 32px; }
#ly_web_header_0001_0 .hnav .pro-nav .box div:first-child{margin-top: 0; }
#ly_web_header_0001_0 .hnav .pro-nav .box .tnav-a{font-family: "Figtree-Medium"; font-size: 20px; line-height: 100%; color: var(--color-text-secondary);}
#ly_web_header_0001_0 .hnav .pro-nav .box .tnav-a:hover{text-decoration: underline; color: var(--color-text-primary);}

/* 其他下拉 */
#ly_web_header_0001_0 .hnav .other-nav {min-width: 127px; left: 50%; transform: translateX(-50%);}
#ly_web_header_0001_0 .hnav .other-nav .box{padding: 16px;}
#ly_web_header_0001_0 .hnav .other-nav .box .tnav-a{font-family: "Figtree-SemiBold"; font-size: 16px; line-height: 40px; text-align: center; white-space: nowrap;}

/* 右侧 */
#ly_web_header_0001_0 .hright{height:48px;}
#ly_web_header_0001_0 .hright .btn{margin-left: 24px; width: 24px; height: 24px; }
#ly_web_header_0001_0 .hright .btn:first-child{margin-left: 0;}
#ly_web_header_0001_0 .hright .btn .svg{fill: #000;}
#ly_web_header_0001_0 .hright .menu{margin-left: 24px; display:none;width: 24px;height: 24px;}


/* 头部滚动时样式和鼠标移入时样式 */
@media screen and (min-width:751px) {
    /* #ly_web_header_0001_0.none{transform: translate3d(0px,-100%,0);} */
    /* #ly_web_header_0001_0.none{transform: translate3d(0px,-124px,0);} */
    header.pro_none {transform: translate3d(0px,-86px,0);}
    #ly_web_header_0001_0.cur .hright .menu,
    #ly_web_header_0001_0:hover .hright .menu{background-image:url(/module/ly-web/header/0001/images/menu-icon.png);}
    #ly_web_header_0001_0.cur .hright .menu.cur,
    #ly_web_header_0001_0:hover .hright .menu.cur{background-image:url(/module/ly-web/header/0001/images/m_close.png);}
    #ly_web_header_0001_0 .hright .menu.cur{background-image:url(/module/ly-web/header/0001/images/m_close2.png);}	

    /* 透明底 样式 */
    #ly_web_header_0001_0.white{background: transparent;}
    #ly_web_header_0001_0.white .hnav .one-nav .nav-a{color: #fff;}
    #ly_web_header_0001_0.white .hright .btn .svg{fill: #fff;}
    #ly_web_header_0001_0.white .logo img:nth-child(1){opacity: 0;}
    #ly_web_header_0001_0.white .logo img:nth-child(2){opacity: 1;}

    #ly_web_header_0001_0.cur,
    #ly_web_header_0001_0:hover{background:#fff;}
    #ly_web_header_0001_0.white.cur .logo img:nth-child(1),
    #ly_web_header_0001_0.white:hover .logo img:nth-child(1){opacity: 1;}
    #ly_web_header_0001_0.white.cur .logo img:nth-child(2),
    #ly_web_header_0001_0.white:hover .logo img:nth-child(2){opacity: 0;}
    #ly_web_header_0001_0.white.cur .hnav .one-nav .nav-a,
    #ly_web_header_0001_0.white:hover .hnav .one-nav .nav-a{color: #000;}
    #ly_web_header_0001_0.white.cur .hright .btn .svg,
    #ly_web_header_0001_0.white:hover .hright .btn .svg{fill: #000;}
}
@media screen and (max-width: 1440px) {
    #ly_web_header_0001_0 .top_slogan{font-size: 12px;}
    
    /* #ly_web_header_0001_0 .header-box{height: 80px;} */
    #ly_web_header_0001_0 .logo{width: 73px;}
    #ly_web_header_0001_0 .hnav {margin-right: 16px;}
    #ly_web_header_0001_0 .hnav .one-nav .nav-a{font-size: 12px; }
    #ly_web_header_0001_0 .hright .btn{width: 20px; height: 20px; }
    
    /*#ly_web_header_0001_0 .hnav .pro-nav{width:100%; top: 118px;}*/
}
@media (max-width: 1034px) {
    #ly_web_header_0001_0 .header-box{padding: 0 3.25%; }
}
/* 头部移动端 */
#ly_web_header_0001_0_m-nav,#ly_web_header_0001_0_m-header-blank{display: none;}
@media screen and (max-width: 1024px) {
    #ly_web_header_0001_0{background:#fff !important;}
    #ly_web_header_0001_0 .hnav{display:none;}
    
    #ly_web_header_0001_0 .header-box{padding: 0 2.25%; }
    #ly_web_header_0001_0 .header-box,
    #ly_web_header_0001_0 .hright{height: 56px;}
    #ly_web_header_0001_0 .logo img:nth-child(1){opacity: 1 !important;}
    #ly_web_header_0001_0 .logo img:nth-child(2){opacity: 0 !important;}
    #ly_web_header_0001_0 .hright .btn .svg{fill: #000 !important;}
    #ly_web_header_0001_0 .hright .menu{display:block;}

    #ly_web_header_0001_0_m-nav{display: block;width: 36.62%;height: 0;z-index:50;right: 0;right: 0;top: 94px; background: #fff;overflow-y: auto;}
    #ly_web_header_0001_0_m-nav.cur{height: calc(100vh - 94px);}
    
    #ly_web_header_0001_0_m-nav .top{margin-bottom: 8px; width: 100%; height: max-content; }
    #ly_web_header_0001_0_m-nav .top .icon{width: 50px; height: 50px;}

    #ly_web_header_0001_0_m-nav .nav .one-nav{line-height: 54px;  margin: 0 15px;border-bottom: 1px solid rgba(0,0,0,0.2);}
    #ly_web_header_0001_0_m-nav .nav .one-nav .one{cursor:pointer; background: url(/module/ly-web/header/0001/images/head-jt.svg) no-repeat right;}
    #ly_web_header_0001_0_m-nav .nav .one-nav.nobg .one{background: none;}
    #ly_web_header_0001_0_m-nav .nav .one-nav.cur .one{background-image:url(/module/ly-web/header/0001/images/head-jt2.svg);}
    #ly_web_header_0001_0_m-nav .nav .one-nav.cur.nobg .one{background: none;}
    #ly_web_header_0001_0_m-nav .nav .one-nav .one-a{font-family: "Figtree-SemiBold"; font-size: 14px; text-transform: capitalize; color:#333;}
    #ly_web_header_0001_0_m-nav .nav .one-nav .two-nav{width: 100%; padding: 0 25px;}
    #ly_web_header_0001_0_m-nav .nav .one-nav .two-nav .two-a{font-family: "Figtree-SemiBold"; font-size: 12px; line-height: 40px; vertical-align: middle; }
}
/* @media screen and (max-width: 992px) {
    #ly_web_header_0001_0 .hright .btn,
    #ly_web_header_0001_0 .hright .menu{margin-left: .1818rem; width: .1818rem; height: .1818rem; }
    
    #ly_web_header_0001_0 .top_slogan .title,
    #ly_web_header_0001_0_m-nav .nav .one-nav .one-a{font-size: .1061rem;}
    
    #ly_web_header_0001_0_m-nav .nav .one-nav{line-height: .4091rem;}
    #ly_web_header_0001_0_m-nav .nav .one-nav .two-nav .two-a{font-size: .0909rem; line-height: .303rem;}
    
    #ly_web_header_0001_0_m-nav .top .icon{width: .3788rem; height: .3788rem;}
} */
@media screen and (max-width: 768px) {
    
    header.pro_none {transform: translate3d(0px,-72px,0);}

    /*#ly_web_header_0001_0 .top_slogan{min-height: 24px; font-size: 12px; gap: 0 16px;}*/
    /*#ly_web_header_0001_0 .top_slogan .title{font-size: 12px;}*/
    
    #ly_web_header_0001_0 .top_slogan{min-height: 24px; gap: 0 4px;}
    #ly_web_header_0001_0 .top_slogan ,
    #ly_web_header_0001_0 .top_slogan .title{font-size: 12px;}
    #ly_web_header_0001_0 .top_slogan .countdown-value{padding: 3px; min-width: max-content;}
    #ly_web_header_0001_0 .top_slogan .countdown-grid,
    #ly_web_header_0001_0 .top_slogan .countdown-item{gap: 0 3px;}
    #ly_web_header_0001_0 .top_slogan .swiper{height: 24px;}
    #ly_web_header_0001_0 .top_slogan .swiper-slide,
    #ly_web_header_0001_0 .marquee-item{ line-height: 100%; height: 24px;}
    #ly_web_header_0001_0 .top_slogan .swiper[data-mode="horizontal"] .swiper-slide,
    #ly_web_header_0001_0 .marquee-item{margin-right: 40px;}
    #ly_web_header_0001_0 .top_slogan .countdown-value{height: 20px; border-radius: 2px;}
    
    #ly_web_header_0001_0 .header-box,
    #ly_web_header_0001_0 .hright{height: 48px;}

    #ly_web_header_0001_0 .header-box{padding: 0 4.5%; box-shadow: 0px 2px 4px 0px #0000001A;}
    #ly_web_header_0001_0 .hright .btn,
    #ly_web_header_0001_0 .hright .menu{margin-left: 16px; width: 24px; height: 24px; }

    
    #ly_web_header_0001_0_m-nav{top: calc(24px + 48px); width: 100%;}
    #ly_web_header_0001_0_m-nav.cur{height: calc(100vh - 72px);}

    #ly_web_header_0001_0_m-nav .top{padding: 16px 4.5% 0; margin-top: 0;}
    #ly_web_header_0001_0_m-nav .top .icon{width: 40px; height: 40px;}

    #ly_web_header_0001_0_m-nav .nav .one-nav{line-height: 54px; margin: 0 4.5%;}
    #ly_web_header_0001_0_m-nav .nav .one-nav .one{}
    #ly_web_header_0001_0_m-nav .nav .one-nav .one-a{font-size: 16px;}
    #ly_web_header_0001_0_m-nav .nav .one-nav .two-nav .two-a{font-size: 12px; line-height: 40px;}
    
}










.ly_web_footer_0001_0Wrap{padding: 64px 0; background-color: #000;}

#ly_web_footer_0001_0Intro .logo{margin: 0 auto; width: 160px; height: 48px;}

#ly_web_footer_0001_0Top{padding: 40px 0 104px; gap: 0 6.837%;}
#ly_web_footer_0001_0Top .item{width: max-content; max-width: 19.39%;}
#ly_web_footer_0001_0Top .list_item{}
#ly_web_footer_0001_0Top .list_item .title{font-family: "Figtree-SemiBold"; font-size: 12px; line-height: 100%; color: var(--color-text-white);}
#ly_web_footer_0001_0Top .list_item .two_li{margin-top: 16px; font-family: "Figtree-Medium"; font-size: 12px; line-height: 100%;  color: #c1c1c1;}
#ly_web_footer_0001_0Top .contact{gap: 18px 0;}
#ly_web_footer_0001_0Top .contact .li{gap: 0 4px;}
#ly_web_footer_0001_0Top .contact .icon{width: 16px; height: 16px;}
#ly_web_footer_0001_0Top .contact .text{width: calc(100% - 20px);font-family: "Figtree-Medium"; font-size: 12px; line-height: 100%;  color: #c1c1c1;}
#ly_web_footer_0001_0Top .contact .text .dot{display: none;}

#ly_web_footer_0001_0Share{padding-bottom: 24px; gap: 0 12px; border-bottom: 1px solid rgba(123, 126, 134, 1);}
#ly_web_footer_0001_0Share .item{width: 24px; height: 24px;}
#ly_web_footer_0001_0Share .item .svg{width: 24px; height: 24px; fill: #fff;}


#ly_web_footer_0001_0Form{padding-top: 16px;}
#ly_web_footer_0001_0Form .left{gap: 10px 24px; max-width: 30%; flex-wrap: wrap;}
#ly_web_footer_0001_0Form .nav{font-family: "Figtree-Medium"; font-size: 12px; line-height: 100%; color: #C1C1C1; }
#ly_web_footer_0001_0Form .signup{gap: 0 16px;}
#ly_web_footer_0001_0Form .text{font-family: "Figtree-Bold"; font-size: 12px; line-height: 100%; color: var(--color-text-white);}
#ly_web_footer_0001_0Form .form{gap: 0 15px; padding: 2px 2px 2px 8px; min-width: 234px; height: max-content; background-color: var(--color-bg-card); border-radius: 100px;}
#ly_web_footer_0001_0Form .form label{display: block; width: 100%;}
#ly_web_footer_0001_0Form .form .input{width: 100%; height: 100%; padding-right: 8px; font-family: "Figtree-Medium"; font-size: 12px; line-height: 100%; }
#ly_web_footer_0001_0Form .signup .button{background:#000; color: var(--color-text-white); padding: 8px 16px; border-radius:100px; cursor: pointer; font-family: "Figtree-Medium"; font-size: 8px; line-height: 100%; white-space:nowrap; border: 0;}
#ly_web_footer_0001_0Form .world{gap: 0 4px; }
#ly_web_footer_0001_0Form .world span{font-family: "Figtree-Medium"; font-size: 12px; line-height: 100%; color: #C1C1C1;}
#ly_web_footer_0001_0Form .form-tip{left: 10px; top: calc(100% + 8px); z-index: 1;}
#ly_web_footer_0001_0Form .form-error{font-family: Poppins; font-size: 12px; line-height: 100%; color: #F94073;}
#ly_web_footer_0001_0Form .form-success{font-family: Poppins; font-size: 14px; line-height: 100%; color: #20B759;}

#ly_web_footer_0001_0_bottom{padding-top: 32px;}
#ly_web_footer_0001_0_bottom .box{flex-wrap: wrap;}
#ly_web_footer_0001_0_bottom *,
#ly_web_footer_0001_0_bottom a{font-family: "Figtree-Medium"; font-size: 12px; line-height: 100%;  text-align: center; color: #C1C1C1;}

@media (max-width: 1024px) {
    .ly_web_footer_0001_0Wrap .cw980{width: 74.6%;}
    
    #ly_web_footer_0001_0Top{padding: 40px 0 63px; gap: 0 1.837%;}
    #ly_web_footer_0001_0Top .item{width: 23.39%;}
    #ly_web_footer_0001_0Top .list_item .title{font-size: 14px;}
}
/* @media (max-width: 992px) {
    #ly_web_footer_0001_0Top{padding: .303rem 0 .4773rem;}
    #ly_web_footer_0001_0Top .list_item .title{font-size: .1061rem;}
    #ly_web_footer_0001_0Top .list_item .two_li{margin-top: .1212rem; font-size: 12px;}
    
    #ly_web_footer_0001_0Top .contact{gap: .1364rem 0;}
    #ly_web_footer_0001_0Top .contact .li{gap: 0 .0303rem;}
    #ly_web_footer_0001_0Top .contact .icon{width: .1212rem; height: .1212rem;}
    #ly_web_footer_0001_0Top .contact .text{width: calc(100% - .1515rem); font-size: .0909rem; }
    
    #ly_web_footer_0001_0Share{padding-bottom: .1818rem; gap: 0 .0909rem;}
    #ly_web_footer_0001_0Share .item{width: .1818rem; height: .1818rem;}
    #ly_web_footer_0001_0Share .item .svg{width: .1818rem; height: .1818rem; }
    
    #ly_web_footer_0001_0Form{padding-top: .1212rem;}
    #ly_web_footer_0001_0Form .left{gap: 0 .1818rem; }
    #ly_web_footer_0001_0Form .nav{font-size: .0909rem;}
    #ly_web_footer_0001_0Form .signup{gap: 0 .1212rem;}
    #ly_web_footer_0001_0Form .text{ font-size: .0909rem;}
    #ly_web_footer_0001_0Form .form{gap: 0 .1136rem; padding: .0152rem .0152rem .0152rem .0606rem; min-width: 1.7727rem; }
    #ly_web_footer_0001_0Form .form .input{padding-right: .0606rem; font-size: .0909rem;}
    #ly_web_footer_0001_0Form .signup .button{padding: .0606rem .1212rem; font-size: .0606rem; }
    #ly_web_footer_0001_0Form .world{gap: 0 .0303rem; }
    #ly_web_footer_0001_0Form .world span{font-size: .0909rem;}

    #ly_web_footer_0001_0_bottom{padding-top: .2424rem;}
    #ly_web_footer_0001_0_bottom *,
    #ly_web_footer_0001_0_bottom a{font-size: .0909rem;}
} */
@media (max-width: 768px) {
    .ly_web_footer_0001_0Wrap{padding: 48px 0;}
    .ly_web_footer_0001_0Wrap .cw980{width: 76.2%;}

    /* 列表 */
    #ly_web_footer_0001_0Top{padding: 20px 0; gap: 0; flex-wrap: wrap;}
    #ly_web_footer_0001_0Top .item{width: 100%; max-width: initial;}
    #ly_web_footer_0001_0Top .list_item {border-bottom: 1px solid rgba(255, 255, 255, .4); padding-bottom: 20px;}
    #ly_web_footer_0001_0Top .list_item .title{font-size: 14px; padding: 20px 0 0; display: flex; justify-content: space-between; align-items: center;}
    #ly_web_footer_0001_0Top .list_item .title .one-icon{display: block; width: 12px; height: 12px; position: relative;}
    #ly_web_footer_0001_0Top .list_item .title .one-icon i{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;}
    #ly_web_footer_0001_0Top .list_item .title .one-icon i:nth-child(1){width: 100%; height: 2px; background-color: #fff; border-radius: 5px; transition: all .5s ease;}
    #ly_web_footer_0001_0Top .list_item .title .one-icon i:nth-child(2){width: 2px; height: 100%; background-color: #fff; border-radius: 5px;}
    #ly_web_footer_0001_0Top .list_item.cur .title .one-icon{transform: rotate(90deg);}
    #ly_web_footer_0001_0Top .list_item.cur .title .one-icon i:nth-child(1){opacity: 0;}
    #ly_web_footer_0001_0Top .list_item .two_list{height: 0; overflow: hidden; transition: all .5s ease-in-out;}
    #ly_web_footer_0001_0Top .list_item .two{padding: 16px 0 0;}
    #ly_web_footer_0001_0Top .list_item .two_li{font-size: 14px !important; line-height: 100% !important; }
    #ly_web_footer_0001_0Top .list_item .two_li:first-child{margin-top: 0;}
    
    /* 分享 */
    #ly_web_footer_0001_0Share{display: none;}
    #ly_web_footer_0001_0Share.mb{margin-top: 28px; padding-bottom: 0; gap: 0 12px; display: flex; border: 0; justify-content: center;}
    #ly_web_footer_0001_0Share .item{width: 32px; height: 32px;}
    #ly_web_footer_0001_0Share .item .svg{width: 73%; height: 73%;}

    /* 表单 */
    #ly_web_footer_0001_0Form.mb{display: block; width: 100%; margin-top: 24px;}
    #ly_web_footer_0001_0Form.pc .signup{display: none;}
    #ly_web_footer_0001_0Form .signup{width: 100%; flex-direction: column;}
    #ly_web_footer_0001_0Form .signup .text{width: 100%; font-size: 12px; text-align: center;}
    #ly_web_footer_0001_0Form .signup .formBox {width: 91.13%;}
    #ly_web_footer_0001_0Form .signup .form{width: 100%; margin-top: 16px; gap: 0 10px; padding: 3px 6px 3px 10px; min-width: initial; justify-content: space-between;}
    #ly_web_footer_0001_0Form .form .input { padding-right: 10px; font-size: 12px;}
    #ly_web_footer_0001_0Form .signup .button { padding: 6.5px 10.5px; font-size: 12px; line-height: 160%;}

    /* 联系 */
    #ly_web_footer_0001_0Top .contact{margin-top: 18px; gap: 12px 0;}
    #ly_web_footer_0001_0Top .contact .li{gap: 0 6px;}
    #ly_web_footer_0001_0Top .contact .icon{width: 18px; height: 18px;}
    #ly_web_footer_0001_0Top .contact .icon img{transform: scale(1.3);}
    #ly_web_footer_0001_0Top .contact .text{width: calc(100% - 18px - 6px); font-size: 14px;}

    #ly_web_footer_0001_0Form.pc{padding-top: 4px; flex-wrap: wrap;}
    #ly_web_footer_0001_0Form .left{gap: 10px; width: 100%; max-width: 100%;}
    #ly_web_footer_0001_0Form .nav{font-size: 12px; line-height: 160%;}

    /* 语言选择 */
    #ly_web_footer_0001_0Form .world{display: none; gap: 0 6px; margin-top: 24px; width: 100%; justify-content: flex-start;}
    #ly_web_footer_0001_0Form .world img{transform: scale(1.4);}
    #ly_web_footer_0001_0Form .world span{font-size: 15px; line-height: 160%;}
    
    #ly_web_footer_0001_0_bottom{padding-top: 27px;}
    #ly_web_footer_0001_0_bottom .box{justify-content: flex-start;}
    #ly_web_footer_0001_0_bottom *,
    #ly_web_footer_0001_0_bottom a{font-size: 12px;}

    #ly_web_footer_0001_0Form .form-error{font-size: 12px;}
    #ly_web_footer_0001_0Form .form-success{font-size: 12px;}
} 
#ly_web_sidebar_0001_1{ bottom: 14.96%; right: 48px; width: 64px; z-index: 100; gap: 40px;}
#ly_web_sidebar_0001_1 .btn{ width: 100%; height: 64px; background: rgba(0, 0, 0, .5); border-radius: 50%; transition: all 0.5s ease;}
#ly_web_sidebar_0001_1 .btn:hover{background: var(--color-primary);}

 #launcher,
.zendesk-messenger-launcher,
iframe[src*="zendesk"][title*="launcher"] {display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important;}
iframe[title*="Messaging window"]{z-index: 10000 !important; max-height: 65vh !important; bottom: calc( 14.96% + 104px) !important; right: 120px !important;}

@media (max-width: 1920px) {
    #ly_web_sidebar_0001_1{gap: 30px;}
}
@media (max-width: 1024px) { 
    #ly_web_sidebar_0001_1{width: 40px; gap: 20px; bottom: 8%; right: 40px;}
    #ly_web_sidebar_0001_1 .btn{height: 40px;}
    #ly_web_sidebar_0001_1 .btn img{transform: scale(.7);}
    
    iframe[title*="Messaging window"]{bottom: calc( 8% + 80px) !important; right: 80px !important;}
}
@media (max-width: 992px) { 
    #ly_web_sidebar_0001_1{width: .303rem; gap: .1515rem; bottom: 8%; right: .303rem;}
    #ly_web_sidebar_0001_1 .btn{height: .303rem;}
}
@media (max-width: 768px) { 
    #ly_web_sidebar_0001_1{width: .6rem; gap: .2rem; bottom: 5%; right: .32rem;}
    #ly_web_sidebar_0001_1 .btn{height: .6rem;}
    
    iframe[title*="Messaging window"]{bottom: 0 !important; right: 0 !important; top: inherit !important;}
}
/* ==========================================================================
   Base
   ========================================================================== */
   @font-face {
    font-family: "figTree";
    src: url("/themes/default/css/font/Figtree-Light.ttf") format("truetype");
    font-style: normal;
    font-weight: 300;
}

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

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

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

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

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

.salt-page {
    --site-header-height: 70px;
    --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(24px, 3.33vw, 64px);
    --text-low-salt-hero-subtitle: clamp(12px, 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(24px, 3.33vw, 64px);
    --text-low-salt-turbo-desc: clamp(12px, 1.15vw, 22px);

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

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

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

    --text-mini-ecosystem-title: clamp(24px, 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(24px, 3.33vw, 64px);
    --text-app-control-subtitle: clamp(16px, 1.67vw, 32px);
    --text-app-control-desc: clamp(12px, 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, 28px);
    --text-reliability-card-desc: clamp(14px, 0.9vw, 22px);

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

    --text-box-kit-title: clamp(36px, 3.33vw, 64px);
    --text-box-kit-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: 64px;
    --subnav-offset-top: 0px;
    --subnav-scroll-offset: var(--subnav-height);
    --container-padding: clamp(20px, 5vw, 120px);
}

.salt-page .page-main,
.salt-page .page-main *,
.salt-page .page-main *::before,
.salt-page .page-main *::after,
.salt-page .hero-video-modal,
.salt-page .hero-video-modal *,
.salt-page .hero-video-modal *::before,
.salt-page .hero-video-modal *::after {
    box-sizing: border-box;
}

.salt-page {
    width: 100%;
    color: var(--color-text-primary);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
}

:where(.salt-page .page-main a, .salt-page .hero-video-modal a) {
    color: inherit;
    text-decoration: none;
}

:where(.salt-page .page-main ul, .salt-page .hero-video-modal ul) {
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(.salt-page .page-main button, .salt-page .hero-video-modal button) {
    font-family: "figTree";
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

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

.subnav-holder {
    position: relative;
    width: 100%;
    height: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 100;
    background: #fff;
}

.subnav-holder.is-revealed {
    height: var(--subnav-height);
    visibility: visible;
    pointer-events: auto;
}

.subnav {
    position: absolute;
    inset: 0 0 auto;
    z-index: 100;
    width: 100%;
    height: var(--subnav-height);
    padding-inline: max(24px, calc((100vw - 1312px) / 2));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.subnav.is-fixed {
    position: fixed;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

#ly_web_header_0001_0.salt-subnav-site-header-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    transition: none !important;
}

#ai-inverter,
#energy-saving,
#ultra-low-salt,
#visible-screen,
#app-control,
#salt-quote {
    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: 1312px;
    height: var(--subnav-height);
    margin-inline: auto;
    gap: 32px;
}

.subnav__brand {
    font-family: "figTree";
    flex-shrink: 0;
    font-size: var(--text-nav-brand);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.subnav__brand-logo {
    display: none;
}

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

.subnav__links-scroll {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.subnav__links-scroll::-webkit-scrollbar {
    display: none;
}

.subnav__links {
    display: flex;
    align-items: center;
    gap: 24px;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
}

.subnav__link {
    font-family: "figTree";
    position: relative;
    display: block;
    font-size: var(--text-nav-link);
    font-weight: 500;
    line-height: 16px;
    color: #999;
    white-space: nowrap;
    padding: 24px 0;
    transition: color 160ms ease;
}

.subnav__link:hover,
.subnav__link.is-active {
    color: var(--color-text-primary);
}

.subnav__link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-brand-blue);
}

.subnav__cta {
    font-family: "figTree";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 132px;
    height: 46px;
    padding: 0 26px;
    border-radius: 100px;
    background-color: var(--color-brand-blue);
    font-size: var(--text-nav-button);
    font-weight: 600;
    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__link:focus-visible,
.subnav__cta:focus-visible {
    outline: 2px solid var(--color-brand-blue);
    outline-offset: 3px;
}

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

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

.hero {
    --hero-viewport-height: calc(100vh - var(--site-header-height));
    position: relative;
    width: 100%;
    margin-top: var(--site-header-height);
    overflow: hidden;
    height: var(--hero-viewport-height);
    min-height: var(--hero-viewport-height);
    max-height: var(--hero-viewport-height);
    background-color: var(--color-white);
}

@supports (height: 100svh) {
    .hero {
        --hero-viewport-height: calc(100svh - var(--site-header-height));
    }
}

/* The shared quote form starts disabled and is enabled when Business is active. */
#salt-quote .m30-quote__form--business.is-active .m30-quote__product-trigger,
#salt-quote .m30-quote__form--business.is-active .m30-quote__product-trigger *,
#salt-quote .m30-quote__form--business.is-active .m30-quote__product-option,
#salt-quote .m30-quote__form--business.is-active .m30-quote__product-option * {
    cursor: pointer;
}

#salt-quote .m30-quote__form--business.is-active .m30-quote__product-dropdown,
#salt-quote .m30-quote__form--business.is-active .m30-quote__product-trigger,
#salt-quote .m30-quote__form--business.is-active .m30-quote__product-option {
    opacity: 1;
}

.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 calc(100% + 180px); */
    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, 60px);
    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 (max-width:1560px){
    .hero__background-image {
        object-position: center calc(100% + 130px);
    }
} */
@media (min-width: 768px) {

    .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;
}

.ai-inverter__controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: clamp(16px, 4vw, 24px);
}

.ai-inverter__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #e6e6e6;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ai-inverter__arrow:active {
    background-color: #666666;
}

.ai-inverter__arrow-icon {
    display: block;
    width: 24px;
    height: 24px;
    pointer-events: none;
}

@media (max-width: 767px) {
    .ai-inverter__hero::after {
        content: "";
        height: 100%;
        width: 100%;
        background: linear-gradient(0deg, #fff 0%, transparent 20%);
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }

    .ai-inverter__slide-media {
        border-radius: 4px;
    }

    .ai-inverter__slide-subtitle {
        color: #666;
    }

    .ai-inverter__measure {
        display: none;
    }

    .ai-inverter__carousel {
        margin-top: -20px;
    }
}

/* ==========================================================================
   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-surface {
    position: relative;
    border-radius: 14px;
    background: rgba(6, 51, 21, 0.5);
    backdrop-filter: blur(2px);
    container-type: inline-size;
    width: 100%;
    aspect-ratio: 447 / 270;
    overflow: hidden;
}

.energy-saving__panel-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    pointer-events: none;
    background: conic-gradient(from 180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.02));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

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

.energy-saving__panel-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.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%;
    }
}

@media (max-width: 767px) {
    .energy-saving {
        --energy-panel-top: 110px;
        --energy-panel-product-gap: 2px;
        background-color: #fff;
        padding-bottom: 40px;
    }

    .energy-saving__inner {
        padding-inline: 0;
        padding-top: 0;
    }

    .energy-saving__header {
        position: absolute;
        z-index: 2;
        left: 50%;
        transform: translate(-50%, 30px);
    }

    .energy-saving__header .energy-saving__title,
    .energy-saving__header .energy-saving__subtitle {
        color: #fff;
    }

    .energy-saving__forest {
        border-radius: 0;
        object-position: right bottom;
    }

    .energy-saving__stage {
        margin-bottom: 250px;
      }
      
      /* 600 ~ 767 */
      @media (max-width: 767px) and (min-width: 600px) {
        .energy-saving__stage {
          margin-bottom: 240px;
        }
      }
      
      /* 400 ~ 599 */
      @media (max-width: 599px) and (min-width: 400px) {
        .energy-saving__stage {
          margin-bottom: 140px;
        }
      }
      
      /* 小于400 */
      @media (max-width: 399px) {
        .energy-saving__stage {
          margin-bottom: 30px;
        }
      }
    

    .energy-saving__stage::after {
        content: "";
        height: 100%;
        width: 100%;
        background: linear-gradient(0deg, #fff 2%, transparent 80%);
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        pointer-events: none;
    }

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

    /* product top = panel top + panel height + fixed gap — keeps distance from panel-surface */
    .energy-saving__product {
        left: 50%;
        top: calc(
            var(--energy-panel-top) + min(92%, 447px) * 270 / 447 + var(--energy-panel-product-gap)
        );
        bottom: auto;
        width: 160%;
        max-width: unset;
        transform: translateX(-32%);
    }

    .energy-saving__stat-value {
        font-size: 28px;
    }

    .energy-saving__stat-label {
        font-size: 12px;
    }

    .energy-saving__stat-unit {
        font-size: 16px;
    }

    .energy-saving__footnote {
        display: none;
    }
}

/* ==========================================================================
   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 picture {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.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;
    bottom: 0;
    /* top: 35.67%; */
    height: 20%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    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(20px, 3vw, 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__card-label-mb {
    display: none;
}

.low-salt__features {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: clamp(24px, 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 .low-salt__feature-content {
    bottom: clamp(-30px, -1vw, -20px);
}

.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%);
}



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


}

.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(90px, 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;
}

@media (max-width: 767px) {
    .low-salt {
        padding-top: 60px;
        overflow: visible;
    }

    .low-salt__hero-inner {
        position: absolute;
        top: -120px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }

    .low-salt__hero {
        min-height: 0;
        aspect-ratio: 430 / 271;
        overflow: visible;
    }

    .low-salt__hero::after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 0;
        background: linear-gradient(0deg, #fff 10%, transparent 60%);
        z-index: 1;
    }

    .low-salt__hero-bg {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        object-fit: cover;
        object-position: center center;
    }

    .low-salt__subtitle {
        color: #666;
        margin-top: 4px;
    }

    .low-salt__feature .low-salt__feature-content {
        bottom: -30px;
    }

    .low-salt__card {
        aspect-ratio: 147 / 82;
        margin-top: 40px;
        overflow: visible;
    }

    .low-salt__card-label {
        display: none;
    }

    .low-salt__card-label-mb {
        display: flex;
        gap: 10px;
        justify-content: center;
        width: 100%;
        font-family: "figTree";
        font-size: 16px;
        font-weight: 600;
        color: #333;
        z-index: 1;
        position: absolute;
        top: -45px;
    }

    .low-salt__cards {
        grid-template-columns: 1fr;
    }

    .low-salt__card-media img {
        border-radius: 4px;
    }

    .low-salt__card-image {
        border-radius: 0;
        object-fit: contain;
        height: auto;
    }

    .low-salt__turbo-media {
        border-radius: 4px;
    }
}

/* ==========================================================================
   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%, 200px);
    width: min(100%, 200px);
}

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

.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%, 200px);
    flex-basis: min(100%, 200px);
}

@media (max-width: 767px) {
    .visible-water {
        margin-top: 180px;
        overflow: visible;
        min-height: 380px;
    }

    .visible-water__desc {
        width: 82%;
    }

    .visible-water__inner {
        overflow: visible;
    }

    .visible-water__header {
        top: -180px;
        position: absolute;
    }

    .visible-water__bg-image {
        height: auto;
    }

    .visible-water__bg::after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 200px;
        background: linear-gradient(180deg, #fff 0%, transparent 100%);
    }
}

@media (max-width: 430px) {
    .visible-water {
        min-height: 260px;
    }
}

/* ==========================================================================
   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);
}

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

@media (min-width: 768px) {
    .pool-treatment__grid {
        grid-template-columns: repeat(3, minmax(180px, max-content));
    }

    .pool-treatment__label {
        white-space: nowrap;
    }

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

/* ==========================================================================
   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 picture {
    display: block;
    width: 100%;
    height: 100%;
}

.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);
}

@media (max-width: 767px) {
    .mini-ecosystem {
        display: flex;
        flex-direction: column;
        overflow: visible;
        padding-bottom: 30px;
    }

    .mini-ecosystem__inner {
        order: 0;
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        padding-inline: 16px;
    }

    .mini-ecosystem__title {
        font-size: 24px;
        letter-spacing: -0.02em;
        color: #333;
    }

    .mini-ecosystem__subtitle {
        margin-top: 21px;
        font-size: 16px;
        letter-spacing: -0.01em;
        color: #333;
    }

    .mini-ecosystem__desc {
        margin-top: 11px;
        max-width: 398px;
        font-size: 12px;
        line-height: normal;
        color: #666;
    }

    .mini-ecosystem__bg {
        order: 1;
        position: static;
        inset: auto;
        width: 398px;
        max-width: calc(100% - 32px);
        height: 432px;
        margin: 24px auto 0;
        padding: 0;
        border-radius: 8px;
        overflow: hidden;
        background-color: #fff;
        pointer-events: none;
    }

    .mini-ecosystem__bg picture {
        width: 100%;
        height: 100%;
    }

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

/* ==========================================================================
   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(8px, 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;
}

/* Figma 442:753 — app-control mobile (430px fixed) */
@media (max-width: 767px) {
    .app-control__inner {
        padding-inline: 16px;
        padding-top: 0;
        padding-bottom: 48px;
    }

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

    .app-control__title {
        font-size: 24px;
        letter-spacing: -0.02em;
        color: #333;
    }

    .app-control__subtitle {
        margin-top: 21px;
        font-size: 16px;
        letter-spacing: -0.01em;
        color: #333;
    }

    .app-control__desc {
        margin: 11px auto 0;
        max-width: 328px;
        font-size: 12px;
        font-weight: 300;
        line-height: normal;
        color: #666;
    }

    .app-control__stage {
        position: static;
        display: flex;
        flex-direction: column;
        margin-top: 14px;
    }

    .app-control__stage-image-wrap {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        min-height: 262px;
        margin-inline: auto;
        transform: none;
        overflow: visible;
        background: transparent;
    }

    .app-control__stage-image-wrap::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 51px;
        z-index: 0;
        width: 100%;
        max-width: 430px;
        height: 211px;
        transform: translateX(-50%);
        background: linear-gradient(180deg, #fff 0%, #f1f1f3 100%);
        pointer-events: none;
    }

    .app-control__stage-image {
        position: relative;
        z-index: 1;
        width: 231px;
        height: 262px;
        margin: 0;
        transform: none;
        object-fit: contain;
        aspect-ratio: auto;
    }

    .app-control__overlay {
        position: static;
        display: flex;
        flex-direction: column;
        margin-top: 24px;
        padding: 0;
        pointer-events: auto;
    }

    .app-control__column--left,
    .app-control__column--right {
        display: grid;
        justify-content: center;
        padding: 0;
        gap: 16px;
        width: 100%;
    }

    .app-control__column--left {
        grid-template-columns: repeat(3, 115px);
    }

    .app-control__column--right {
        grid-template-columns: repeat(2, 115px);
        margin-top: 32px;
    }

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

    .app-control__divider {
        display: none;
    }

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

    .app-control__feature-title {
        font-size: 10px;
        font-weight: 600;
        line-height: normal;
        color: #333;
    }

    .app-control__feature-desc {
        margin-top: 6px;
        font-size: 8px;
        font-weight: 400;
        line-height: normal;
        color: #333;
    }

    .app-control__download {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: none;
        margin-top: 33px;
    }

    .app-control__qr {
        order: 1;
        width: 230px;
        height: 99px;
        aspect-ratio: auto;
        object-fit: contain;
    }

    .app-control__store-labels {
        order: 2;
        display: flex;
        justify-content: center;
        gap: 65px;
        width: auto;
        margin: 0;
        padding: 0;
    }

    .app-control__store-label {
        font-size: 14px;
        font-weight: 600;
        color: #333;
    }
}

/* ==========================================================================
   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__carousel {
    margin-top: clamp(32px, 2.66vw, 51px);
}

.reliability__controls {
    display: none;
}

.reliability__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #e6e6e6;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.reliability__arrow:active {
    background-color: #666666;
}

.reliability__arrow-icon {
    display: block;
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.reliability__viewport {
    width: 100%;
    overflow: visible;
}

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

.reliability__card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.reliability__card-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 386 / 532;
}

.reliability__card-copy {
    text-align: center;
    margin-top: clamp(10px, 1.75vw, 25px);
    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);
}

@media (min-width: 768px) {
    .reliability__cards {
        transform: none !important;
    }
}

@media (max-width: 767px) {
    .reliability__viewport {
        overflow: hidden;
        width: 100%;
        touch-action: pan-y pinch-zoom;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
    }

    .reliability__viewport.is-dragging {
        cursor: grabbing;
    }

    .reliability__viewport.is-dragging .reliability__card-image {
        pointer-events: none;
    }

    .reliability__cards {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        width: 100%;
        gap: 0;
        margin: 0;
        grid-template-columns: none;
        transition: transform 420ms ease;
        will-change: transform;
        transform: translate3d(0, 0, 0);
    }

    .reliability__card {
        flex: 0 0 100%;
        min-width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 0;
        cursor: grab;
    }

    .reliability__viewport.is-dragging .reliability__card {
        cursor: grabbing;
    }

    .reliability__card-image {
        width: 100%;
        height: auto;
        aspect-ratio: 61 / 40;
        object-fit: cover;
        border-radius: 8px;
        -webkit-user-drag: none;
        user-select: none;
        -webkit-user-select: none;
    }

    .reliability__controls {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
        margin-top: clamp(16px, 4vw, 24px);
    }

    .reliability__controls[hidden] {
        display: none;
    }

    .reliability__card-copy {
        text-align: left;
    }
}

/* ==========================================================================
   Section 14: Place it in Your Garden — 3D / AR Preview
   ========================================================================== */

.garden-place {
    --garden-preview-bg: #f5f5f7;
    --garden-preview-transition: all 0.3s ease;
    width: 100%;
    background-color: var(--color-white);
}

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

.garden-place__title {
    font-family: "figTree";
    margin: 0 0 clamp(32px, 3.13vw, 60px);
    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) {
    .garden-place__title {
        letter-spacing: -1.28px;
    }
}

.garden-place .tab-nav {
    display: flex;
    justify-content: center;
    max-width: 300px;
    margin: clamp(24px, 2.08vw, 40px) auto;
    list-style: none;
    padding: 0;
}

.garden-place .tab-item {
    flex: 1;
    font-family: "figTree";
    font-size: clamp(14px, 1.04vw, 20px);
    color: #9d9d9d;
    cursor: pointer;
    position: relative;
    padding: 0 0 clamp(12px, 1.04vw, 20px);
    transition: var(--garden-preview-transition);
}

.garden-place .tab-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: 4px;
    background-color: #f5f5f7;
    transition: var(--garden-preview-transition);
    transform: translateX(-50%);
}

.garden-place .tab-item.active::after {
    height: 8px;
    bottom: -2px;
}

.garden-place .tab-item.active {
    color: var(--color-ai-text);
    font-weight: 600;
}

.garden-place .tab-item.active::after {
    background-color: #F4CC29;
}

.garden-place__preview-main {
    width: 100%;
    max-width: 1440px;
    height: clamp(200px, 33.33vw, 640px);
    margin: 0 auto;
    position: relative;
}

.garden-place__tab-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--garden-preview-bg);
    border-radius: clamp(4px, 1.25vw, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--garden-preview-transition);
}

.garden-place__tab-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#salt-ar-panel {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    background-color: var(--garden-preview-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#salt-ar-panel.is-ar-bg-ready {
    background-color: transparent;
}

#salt-ar-panel .garden-place__ar-left {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    padding: 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

#salt-ar-panel .garden-place__qrcode {
    width: 33%;
    max-width: 250px;
    min-width: 100px;
}

#salt-ar-panel .garden-place__qrcode img {
    display: block;
    width: 100%;
    height: 100%;
}

#salt-ar-panel .garden-place__ar-left p {
    margin: 30px 0 0;
    font-family: "figTree";
    font-size: 36px;
    color: #ffffff;
}

.salt-3d-viewer {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: inherit;
}

.salt-3d-viewer model-viewer {
    width: 100%;
    height: 100%;
}

.salt-3d-viewer__hint,
.salt-3d-viewer__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 24px;
    font-family: "figTree";
    font-size: clamp(14px, 0.94vw, 18px);
    line-height: 1.4;
    color: #666;
    text-align: center;
    pointer-events: none;
}

.salt-3d-viewer.is-loading .salt-3d-viewer__hint {
    display: none;
}

.salt-3d-viewer.is-ready .salt-3d-viewer__hint,
.salt-3d-viewer.is-ready .salt-3d-viewer__loading {
    display: none;
}

@media (min-width: 1025px) and (max-width: 1560px) {
    #salt-ar-panel .garden-place__ar-left {
        padding: 60px;
    }

    #salt-ar-panel .garden-place__ar-left p {
        font-size: 30px;
    }
}

@media (max-width: 1024px) {
    #salt-ar-panel .garden-place__ar-left {
        padding: 52px;
    }

    #salt-ar-panel .garden-place__ar-left p {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .garden-place__preview-main {
        height: 350px;
    }

    .garden-place .tab-item {
        font-size: 13px;
    }

    .garden-place__title {
        font-size: 24px;
        margin-bottom: 30px;
    }

    #salt-ar-panel .garden-place__ar-left {
        padding: 20px;
    }
}

@media (max-width: 430px) {
    .garden-place .tab-nav {
        margin-bottom: 30px;
    }

    .garden-place .tab-item {
        padding: 0 10px 20px;
    }

    .garden-place__title {
        font-size: 22px;
    }

    .garden-place__preview-main {
        height: 200px;
    }

    #salt-ar-panel .garden-place__ar-left p {
        margin-top: 20px;
        font-size: 16px;
    }
    #salt-ar-panel .garden-place__ar-left {
        justify-content: center;
    }
    .garden-place .tab-item::after {
        height: 2px;
    }
    
    .garden-place .tab-item.active::after {
        height: 4px;
        bottom: -1px;
    }
    .garden-place .tab-nav {
        max-width: 130px;
    }
}

/* ==========================================================================
   Section 15b: What's in the Box Grid (Figma 353:340 画板14)
   ========================================================================== */

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

.box-kit__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);
}

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

@media (min-width: 768px) {
    .box-kit__title {
        letter-spacing: -1.28px;
    }
}

.box-kit__panel {
    margin-top: clamp(28px, 3.65vw, 70px);
    padding: clamp(48px, 4.53vw, 87px) clamp(24px, 5.26vw, 101px) clamp(40px, 4.27vw, 82px);
    border-radius: 20px;
    background-color: var(--color-white);
}

.box-kit__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(24px, 2.6vw, 40px) clamp(12px, 1.25vw, 24px);
    align-items: start;
}

.box-kit__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: start;
    margin: 0;
    min-width: 0;
    text-align: center;
}

.box-kit__media {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: clamp(120px, 12.86vw, 247px);
    min-height: clamp(120px, 12.86vw, 247px);
}

.box-kit__image {
    display: block;
    flex-shrink: 0;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.box-kit__item--control .box-kit__image {
    width: clamp(68px, 7.03vw, 135px);
    aspect-ratio: 135 / 247;
}

.box-kit__item--electrolytic .box-kit__image {
    width: clamp(106px, 10.99vw, 211px);
    aspect-ratio: 211 / 174;
}

.box-kit__item--probe .box-kit__image {
    width: clamp(62px, 6.46vw, 124px);
    aspect-ratio: 124 / 210;
}

.box-kit__item--flow .box-kit__image {
    width: clamp(82px, 8.49vw, 163px);
    aspect-ratio: 163 / 215;
}

.box-kit__item--orp .box-kit__image {
    width: clamp(56px, 5.83vw, 112px);
    aspect-ratio: 112 / 212;
}

.box-kit__item--ph .box-kit__image {
    width: clamp(55px, 5.73vw, 110px);
    aspect-ratio: 110 / 207;
}

.box-kit__label {
    font-family: "figTree";
    flex-shrink: 0;
    align-self: stretch;
    margin: clamp(16px, 1.46vw, 28px) 0 0;
    font-size: var(--text-box-kit-label);
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-ai-text);
    text-align: center;
}

@media (min-width: 768px) {
    .box-kit__label {
        white-space: nowrap;
    }
}

/* ==========================================================================
   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);
    } */

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

@media (min-width: 768px) and (max-width: 1440px) {
    .app-control__overlay {
        padding-top: 12%;
    }
}

@media (min-width: 768px) and (max-width: 821px) {
    .app-control__overlay {
        padding-top: 0%;
    }
}

@media (min-width: 768px) and (max-width: 1134px) {
    .app-control__inner{
        background-color: #f1f1f3;
    }
}

/* ==========================================================================
   Responsive: 767px — mobile horizontal subnav
   ========================================================================== */

@media (max-width: 767px) {
    .salt-page {
        --site-header-height: 74px;
        --subnav-height: 84px;
        --subnav-scroll-offset: var(--subnav-height);
    }

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

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

    .subnav-holder.is-revealed {
        height: var(--subnav-height);
    }

    .subnav {
        height: var(--subnav-height);
        padding-inline: 15px;
    }

    .subnav__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 48px 36px;
        gap: 0;
        height: var(--subnav-height);
        padding-inline: 0;
    }

    .subnav__brand {
        display: inline-flex;
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        align-items: center;
        min-width: 0;
        max-width: 100%;
        padding-top: 16px;
        overflow: hidden;
        font-size: inherit;
    }

    .subnav__brand-text {
        display: none;
    }

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

    .subnav__cta {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        justify-self: end;
        min-width: 0;
        height: 30px;
        margin-top: 9px;
        padding: 0 16px;
        font-size: 12px;
    }

    .subnav__links-scroll {
        grid-column: 1 / -1;
        grid-row: 2;
        width: calc(100% + 15px);
        height: 36px;
        padding-top: 7px;
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent 100%);
    }

    .subnav__links {
        flex-direction: row;
        align-items: center;
        gap: 18px;
        width: max-content;
        padding-right: 30px;
    }

    .subnav__link {
        display: block;
        width: auto;
        height: 28px;
        padding: 2px 0 12px;
        font-size: 14px;
        line-height: 14px;
        white-space: nowrap;
    }

    .subnav__link.is-active::after {
        bottom: 5px;
    }

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

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

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

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

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

    .hero__btn {
        width: clamp(120px, 9.375vw, 180px);
        height: 34px;
    }
}

@media (max-width: 767px) {

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

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

    .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;
    }

    .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: 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 {
        display: none;
    }

    .low-salt__features {
        align-items: center;
        gap: 32px;
        max-width: 360px;
        margin-inline: auto;
    }

    .low-salt__feature {
        flex: none;
        width: 100px;
        min-height: 0;
    }

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

    .low-salt__turbo-desc {
        width: 82%;
        color: #666;
        margin-top: 8px;
    }

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

    .ultra-slim__subtitle {
        margin-top: 8px;
        color: #666;
    }

    .ultra-slim__inner {
        padding-top: 0;
        padding-bottom: 96px;
        background-color: #fff;
    }

    .ultra-slim__image {
        border-radius: 12px;
    }

    .ultra-slim__media {
        margin-top: 24px;
    }

    .visible-water__inner {
        min-height: auto;
        padding-top: 56px;
        padding-bottom: 64px;
    }

    .visible-water__gauges {
        align-items: center;
        gap: 36px;
        justify-content: space-around;
        top: -66px;
        width: 100%;
        transform: translateY(-110%);
    }

    .visible-water__gauge,
    .visible-water__gauge--perfect {
        width: 100px;
        flex-basis: 100px;
    }

    .pool-treatment__grid {
        grid-template-columns: repeat(3, minmax(0, 160px));
        gap: 48px 40px;
    }

    .pool-treatment__inner {
        padding-top: 96px;
        padding-bottom: 96px;
    }

    .reliability__inner {
        padding-bottom: 80px;
    }

    .box-kit__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px 24px;
    }

    .box-kit__media {
        height: 180px;
        min-height: 180px;
    }

    .box-kit__inner {
        padding-bottom: 80px;
    }

    .specs__tabs {
        justify-content: flex-start;
        gap: 32px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

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

    .specs__panels .specs__table-clip {
        position: relative;
        margin-inline: calc(var(--container-padding) * -1);
        isolation: isolate;
    }

    .specs__panels .specs__table-clip::before,
    .specs__panels .specs__table-clip::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: var(--container-padding);
        z-index: 10;
        pointer-events: none;
        background-color: #ffffff;
    }

    .specs__panels .specs__table-clip::before {
        left: 0;
    }

    .specs__panels .specs__table-clip::after {
        right: 0;
    }

    .specs__panels .specs__table-wrap {
        position: relative;
        z-index: 1;
        padding-inline: var(--container-padding);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .specs {
        --specs-label-w: 126px;
        --specs-label-mask: 16px;
    }

    .specs__table {
        border-spacing: 0 20px;
    }

    .specs__label,
    .specs__value {
        font-size: 14px;
        padding: 8px;
    }

    .specs__label {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        z-index: 4;
        box-sizing: border-box;
        width: var(--specs-label-w);
        min-width: var(--specs-label-w);
        max-width: var(--specs-label-w);
        background-color: #ffffff;
    }

    .specs__label::after {
        content: "";
        position: absolute;
        top: 0;
        right: calc(-1 * var(--specs-label-mask));
        width: var(--specs-label-mask);
        height: 100%;
        pointer-events: none;
        background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    }

    .specs__value {
        width: 135px;
        min-width: 135px;
    }
}

@media (max-width: 430px) {

    .hero__inner {
        padding-top: 48px;
    }

    .hero__eyebrow {
        font-size: 14px;
    }

    .hero__subtitle {
        font-size: 18px;
    }

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

    .ai-inverter__subtitle {
        color: #666;
    }

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

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

    .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: 85px;
        flex-basis: 85px;
    }
}

/* ==========================================================================
   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;
}