/* ============================================================
   零碳智邸 落地页专属样式 (zhizhai.css)
   ============================================================ */

/* 圆形播放按钮（视频区 / 逆变器区） */
.zhizhai-play {
    width: 90px; height: 90px;
    border-radius: 50%;
    background: #242424;
    border: none;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(94, 92, 88, .9);
    transition: transform .3s, background .3s;
    cursor: pointer;
}
.zhizhai-play:hover { transform: scale(1.08); background: #000; }
.zhizhai-play::after {
    content: ''; display: block;
    border-left: 22px solid #fff;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    margin-left: 6px;
}

/* 卖点图标项（颜色继承父级，适配深/浅底） */
.zhizhai-feat { text-align: center; }
.zhizhai-feat img { width: 56px; height: 56px; margin: 0 auto 14px; display: block; object-fit: contain; }
.zhizhai-feat span { font-size: var(--fs-body); font-weight: 600; line-height: 1.4; display: block; }

/* 全场景智慧储能 竖向要点列表 */
.scene-item { border-left: 2px solid rgba(255, 255, 255, .25); padding-left: 24px; }
.scene-item--first { border-left-width: 3px; border-image: linear-gradient(180deg, #00B2CD, #01B880) 1; }

/* 聚光APP 二维码 */
.app-qrcode { width: 150px; height: 150px; display: block; }

/* 聚光APP 下载块：白底配深色描边按钮 */
.zh-app-download__btn { width: auto; min-width: 0; height: 50px; padding: 0 20px; background: #fff; color: #333; border: 1px solid #333;  font-size: var(--fs-body-sm); font-weight: 600; }
/* .zh-app-download__btn:hover { background: #f6f6f6; color: #333; border-color: #c0c0c0; } */
.zh-app-download__btn::after { display: none; }   /* 该按钮不需要尾部箭头 */
.zh-app-download__btn:hover { transform: none; box-shadow: 0 2px 8px rgba(0,0,0,.06); }   /* 去掉基类 hover 动画 */
.zh-app-download .zh-app-download__btn { opacity: 1; pointer-events: auto; }
@media (hover: none) { .zh-app-download .zh-app-download__btn { opacity: 1; pointer-events: auto; } }

/* 渐变文字（首项标题） */
.text-gradient { background: linear-gradient(90deg, #00B2CD, #01B880); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (max-width: 768px) {
    .zhizhai-play { width: 64px; height: 64px; }
    .zhizhai-play::after { border-left-width: 15px; border-top-width: 10px; border-bottom-width: 10px; }
    .zhizhai-feat img { width: 42px; height: 42px; }
    .zhizhai-feat span { font-size: var(--fs-caption-16); }
    .app-qrcode { width: 110px; height: 110px; }
}

/* 视口 < 360px 时收紧“扫描二维码下载”按钮左右内边距 */
@media (max-width: 360px) {
    .zh-app-download__btn { padding-left: 10px; padding-right: 10px; border: none; }
}

/* ============================================================
   零碳智邸 全场景智慧储能 轮播
   ============================================================ */
.zh-carousel { position: relative; }
.zh-carousel__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.zh-carousel__slide.active { opacity: 1; }
.zh-carousel__slide img { width: 100%; height: 100%; object-fit: cover; }

.zh-carousel__nav { max-width: 720px; }
.zh-carousel__item { display: flex; align-items: flex-start; gap: 18px; width: 100%; background: none; border: none; text-align: left; cursor: pointer; padding: 24px 0; opacity: .65; transition: opacity .35s; }
.zh-carousel__item:hover { opacity: .9; }
.zh-carousel__item.active { opacity: 1; }
.zh-carousel__line { width: 3px; flex-shrink: 0; align-self: stretch; margin: -24px 0; background: rgba(255, 255, 255, .3); transition: background .35s; }
.zh-carousel__item.active .zh-carousel__line { background: linear-gradient(180deg, #00B2CD, #01B880); }
.zh-carousel__title { font-size: var(--fs-body-24); font-weight: 500; color: #fff; line-height: 1.4; transition: all .35s; }
.zh-carousel__item.active .zh-carousel__title { font-size: var(--fs-h5); font-weight: 700; background: linear-gradient(90deg, #00B2CD, #01B880); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zh-carousel__desc { font-size: var(--fs-body-sm-20); color: rgba(255, 255, 255, .85); line-height: 1.7; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s ease, opacity .45s ease, margin .45s; }
.zh-carousel__item.active .zh-carousel__desc { max-height: 90px; opacity: 1; margin-top: 10px; }

.zh-carousel__dots { display: flex; gap: 10px; }
.zh-carousel__dots button { width: 36px; height: 3px; background: rgba(255, 255, 255, .35); border: none; cursor: pointer; padding: 0; transition: background .3s, width .3s; }
.zh-carousel__dots button.active { background: #fff; width: 50px; }

@media (max-width: 768px) {
    .zh-carousel__title { font-size: var(--fs-body-sm); }
    .zh-carousel__item.active .zh-carousel__title { font-size: var(--fs-body-sm-20); }
    .zh-carousel__desc { font-size: var(--fs-caption-15); }
}