/* ============================================================
   Base Reset
   ============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    padding-top: var(--navbar-height);
}

/* ============================================================
   Home page: Title font (index.tpl only)
   ============================================================ */

:root {
    --font-title: inherit;
}

.faq-title,
.widgets-title,
.theme-title,
.icon-title,
.wallpaper-title,
.island-title,
.showcase-title {
    font-family: inherit;
}

/* ============================================================
   Shared layout
   ============================================================ */
.hero-inner {
    /* 框：宽屏固定 64vw，窄屏用边距缩小，避免内容被二次挤压变形 */
    max-width: 64vw;
    width: min(80%, calc(100% - 8.333vw));
    margin: 0 auto;
    padding: 0;
}

.honors-bar {
    max-width: 64vw;
    width: min(80%, calc(100% - 8.333vw));
    margin: 0 auto;
    padding: 0;
}

/* ============================================================
   Hero Section
   ============================================================ */
.hero-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

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

/* 与下方 honors 共用同一套横向宽度（.is-pc 下由 --pc-frame-width / pc-frame-shell 决定），
   两列 1:1、无间距，分界线与 .honors-section 内容区水平中线对齐且随缩放保持居中 */
.hero-inner {
    height: 31.875vw;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
    overflow: visible; /* 允许右侧主视觉在版心外轻微外溢 */
}

.hero-left {
    min-width: 0; /* 允许内容在窄屏下正常收缩 */
    overflow: visible;
    position: relative;
    z-index: 2; /* 副标题向右延伸时可压过右侧手机区，避免被后绘制的列挡住 */
}

.hero-brand {
    display: flex;
    align-items: center;
    margin-top: 2.5vw;
    margin-bottom: 0.625vw;
    margin-left: calc(4.167vw * var(--nav-s, 1));
}

.hero-icon {
    height: auto;
    width: 18.229vw;
    display: block;
}

.hero-subtitle {
    font-family: var(--font-family);
    font-size: 1.053vw;
    font-weight: 500;
    color: #292929;
    line-height: 1.5;
    margin-bottom: 0.625vw;
    margin-left: calc(4.167vw * var(--nav-s, 1));
    /* 左列宽为版心一半：200% ≈ 整行版心宽；减去与 margin-left 相同的 indent，避免向右溢出版心 */
    max-width: none;
    width: 38vw;
    box-sizing: border-box;
}

.hero-desc {
    font-family: var(--font-family);
    font-size: 0.783vw;
    color: rgba(0, 0, 0, 0.5);
    line-height: 1.6;
    margin-bottom: 2.067vw;
    margin-left: calc(4.167vw * var(--nav-s, 1));
}

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 0.625vw;
    margin-left: calc(4.167vw * var(--nav-s, 1));
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.965vw;
    transition: opacity 0.2s ease;
    text-decoration: none;
}

.hero-btn:hover {
    opacity: 0.85;
}

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

.hero-right {
    width: 41.667vw;
    height: 31.875vw;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0; /* 允许电话容器在窄屏下正常收缩 */
    position: relative;
    z-index: 1;
    overflow: visible;
}

.hero-phone-wrapper {
    /* position: relative; */
    width: 41.667vw;
    height: 31.875vw;
}

.hero-phone-frame {
    width: auto;
    height: 31.875vw;
    display: block;
    position: relative;
    z-index: 1;
    pointer-events: none;
}

/* 正方形视频：边长 = wrapper 宽度的 50%，在 wrapper 内水平垂直居中 */
.hero-video-container {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -45%);
    width: 17.186vw;
    aspect-ratio: 1;
    overflow: hidden;
    /* background: #000; */
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 1.563vw;
}

.hero-video {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* ============================================================
   Honors / Awards Bar
   ============================================================ */
.honors-section {
    text-align: center;
    padding: 2.083vw 0 2.5vw;
    background: #fff;
}

.honors-tagline-wrapper {
    font-family: var(--font-nav);
    max-width: 64vw;
    width: min(80%, calc(100% - 8.333vw));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.042vw;
    font-weight: 350;
    margin-bottom: 1.667vw;
    color: #C4CAD0;
    font-style: normal;
    text-transform: none;
}

.honors-line {
    display: block;
    width: 27.083vw;
    height: 0px;
    border-style: solid;
    border-width: 0.5px 0 0 0;
}

.honors-line-left {
    border-image: linear-gradient(270deg, rgba(196.00000351667404, 202.00000315904617, 208.0000028014183, 0.5), rgba(196.00000351667404, 202.00000315904617, 208.0000028014183, 0)) 1 1;
}

.honors-line-right {
    border-image: linear-gradient(90deg, rgba(196.00000351667404, 202.00000315904617, 208.0000028014183, 0.5), rgba(196.00000351667404, 202.00000315904617, 208.0000028014183, 0)) 1 1;
}

.honors-tagline {
    font-family: var(--font-nav);
    font-size: 0.833vw;
    color: #C4CAD0;
    font-style: normal;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.honors-bar img {
    width: 100%;
    max-width: 60vw;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ============================================================
   FAQ Section
   ============================================================ */
.faq-section {
    background: #F5F7F8;
    padding: 4.833vw 0 3.333vw;
}

/* 与 .hero-inner / honors 同一版心宽度 */
.faq-outer {
    max-width: 64vw;
    width: min(80%, calc(100% - 8.333vw));
    margin: 0 auto;
    position: relative;
}

.faq-inner {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.faq-title {
    font-family: inherit !important;
    text-align: center;
    margin-bottom: 3.125vw;
    font-size: 2.604vw;
    font-weight: 700;
    color: var(--color-text-dark);
}

.faq-list {
    width: 67%;
    display: flex;
    flex-direction: column;
    gap: 1.042vw;
    position: relative;
}

.faq-bg-icon {
    position: absolute;
    top: 0;
    right: -3.5%;
    width: 5.208vw;
    height: auto;
    transform: translate(100%, -100%);
    pointer-events: none;
    user-select: none;
}

.faq-item {
    background: #fff;
    border-radius: 1.25vw;
    padding: 1.867vw ;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.faq-question {
    font-family: var(--font-family);
    font-size: 1.042vw;
    font-weight: 700;
    color: var(--color-text-dark);
    color: rgba(41, 41, 41, 1);
    margin: 0.521vw 0;
}

.faq-answer {
    
    font-family: var(--font-family);
    font-size: 0.833vw;
    font-weight: 400;
    color: #9E9E9E;
    margin:auto;
    line-height: 1.19;
}

.faq-view-more {
    display: inline-block;
    margin-top: 2.083vw;
    padding: 0.521vw 2.5vw;
    background: rgba(0, 140, 255, 0.05);
    border-radius: 5.208vw;
    border: 1px solid rgba(0, 140, 255, 0.3);
    font-family: var(--font-family);
    font-size: 0.729vw;
    font-weight: 500;
    color: rgba(0, 140, 255, 1);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.faq-view-more:hover {
    background: rgba(0, 140, 255, 1);
    color: #fff;
}



/* ============================================================
   Creative Widgets Section
   ============================================================ */
.widgets-section {
    background: #fff;
    padding: 4.833vw 0 3.333vw;
    text-align: center;
    overflow: hidden;
}

.widgets-inner {
    max-width: 80vw;
    width: min(80%, calc(100% - 8.333vw));
    margin: 0 auto;
    padding: 0;
}

.widgets-title {
    font-family: inherit !important;
    font-size: 2.604vw;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 0.625vw;
}

.widgets-subtitle {
    font-family: var(--font-family);
    font-size: 1.042vw;
    color: #292929;
    margin-bottom: 2.5vw;
}

.widgets-marquee {
    /* 用 100% 而非 100vw，避免纵向滚动条存在时 vw 略宽导致整页横向滚动 */
    width: 100%;
    margin-left: 0;
    overflow: hidden;
    /* 独立合成层，减轻纵向滚动时 mask + 横向动画 + 动图 叠加重绘导致的闪烁 */
    isolation: isolate;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* PC：跑马灯与「宽模块」同宽（见文末 --pc-wide-width-px），无 @media */
.is-pc .widgets-marquee {
    width: 100%;
    margin-left: 0;
    max-width: none;
    margin-right: 0;
    /*
     * PC 上 widgets 的高度由多层 vw 计算，部分分辨率会出现 1px 级别的向下溢出，
     * 在 marquee 的 overflow:hidden 下会被裁掉（常见于底部图片/阴影边缘）。
     * 这里给一个很小的安全区，避免视觉裁切。
     */
    padding-bottom: 6px;
    box-sizing: border-box;
}

.widgets-track {
    display: flex;
    --widgets-group-gap: 1.563vw; /* 组与组之间距离为当前的一半（原 1.563vw） */
    gap: var(--widgets-group-gap);
    width: max-content;
    animation: widgets-scroll 120s linear infinite;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

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

.widgets-group {
    display: grid;
    /* --wg-cols / --wg-rows：由 widgets-layout.js 写入，与下发 width×height 一致 */
    --wg-cols: 3;
    --wg-rows: 3;
    --wg-gap: 1.563vw;
    /* 组间距统一由 .widgets-track 的 gap 控制，这里不再用 padding 叠加 */
    --wg-pad: 0px;
    /*
     * 以 3×3 时的整体尺寸为基准，推导单格尺寸，并把 gap 纳入计算。
     * 这样在 2×2 / 3×2 等规格时不会因 gap 造成单格被“挤压”变形。
     */
    --wg-base: 31.252vw;
    --wg-cell: calc((var(--wg-base) - (3 - 1) * var(--wg-gap)) / 3);
    grid-template-columns: repeat(var(--wg-cols), minmax(0, 1fr));
    grid-template-rows: repeat(var(--wg-rows), minmax(0, 1fr));
    gap: var(--wg-gap);
    flex-shrink: 0;
    /* width: calc(min(28vw, 420px) * 0.75 * var(--wg-cols) / 3);
    height: calc(min(28vw, 420px) * 0.75 * var(--wg-rows) / 3); */
    width: calc(
        var(--wg-cell) * var(--wg-cols) +
        (var(--wg-cols) - 1) * var(--wg-gap) +
        2 * var(--wg-pad)
    );
    height: calc(
        var(--wg-cell) * var(--wg-rows) +
        (var(--wg-rows) - 1) * var(--wg-gap) +
        2 * var(--wg-pad)
    );
    box-sizing: border-box;
    overflow: visible;
}

.wg-item {
    border-radius: 1.094vw;
    overflow: hidden;
    box-shadow:
        0 0.417vw 1.25vw rgba(53, 68, 99, 0.10),
        0 0.104vw 0.417vw rgba(0, 0, 0, 0.06);
    animation: wg-item-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--wg-i, 0) * 0.055s);
    /* border: 1px solid rgba(0, 0, 0, 0.06);
    background: #f5f5f5; */
}

@media (prefers-reduced-motion: reduce) {
    .wg-item {
        animation: none;
    }
}

@keyframes wg-item-enter {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(6px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.wg-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* border-radius: 5.6vw; */
    background-color: #fff;
    -webkit-user-drag: none;
}

/* Grid sizes */
.wg1x1 { grid-column: span 1; grid-row: span 1; }
.wg2x1 { grid-column: span 2; grid-row: span 1; }
.wg3x1 { grid-column: span 3; grid-row: span 1; }
.wg1x2 { grid-column: span 1; grid-row: span 2; }
.wg2x2 { grid-column: span 2; grid-row: span 2; }
.wg2x3 { grid-column: span 2; grid-row: span 3; }
.wg3x3 { grid-column: span 3; grid-row: span 3; }

/* Grid placement */
.r1c1 { grid-row-start: 1; grid-column-start: 1; }
.r1c2 { grid-row-start: 1; grid-column-start: 2; }
.r1c3 { grid-row-start: 1; grid-column-start: 3; }
.r2c1 { grid-row-start: 2; grid-column-start: 1; }
.r2c2 { grid-row-start: 2; grid-column-start: 2; }
.r2c3 { grid-row-start: 2; grid-column-start: 3; }
.r3c1 { grid-row-start: 3; grid-column-start: 1; }
.r3c2 { grid-row-start: 3; grid-column-start: 2; }
.r3c3 { grid-row-start: 3; grid-column-start: 3; }

.widgets-view-more {
    display: inline-block;
    margin-top: 2.5vw;
    padding: 0.521vw 2.5vw;
    background: rgba(0, 140, 255, 0.05);
    border-radius: 5.208vw;
    border: 1px solid rgba(0, 140, 255, 0.3);
    font-family: var(--font-family);
    font-size: 0.729vw;
    font-weight: 500;
    color: rgba(0, 140, 255, 1);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.widgets-view-more:hover {
    background: rgba(0, 140, 255, 0.1);
}


/* ============================================================
   Theme Section
   ============================================================ */
.theme-section {
    background: #F5F7F8;
    padding: 4.833vw 0 3.125vw;
    text-align: center;
    /* 主题模块在 carousel 内部处理裁切与阴影空间，这里保持默认，避免溢出规则冲突 */
}

.theme-inner {
    max-width: 80vw;
    width: min(80%, calc(100% - 8.333vw));
    margin: auto;
}

.theme-title {
    font-family: inherit !important;
    font-size: 2.604vw;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 0.625vw;
}

.theme-subtitle {
    font-family: var(--font-family);
    font-size: 1.042vw;
    color: #292929;
    margin: auto;
}

/* Carousel container — 与 widgets-marquee 同：通栏用 100%，避免 100vw 引发整页横向滚动 */
.theme-carousel {
    width: 100%;
    margin-left: 0;
    /*
     * 注意：overflow-x:hidden + overflow-y:visible 在浏览器里常会把 visible 计算成 auto，
     * 仍然会发生纵向裁切。这里用 overflow:hidden，并通过增加容器底部空间容纳阴影。
     */
    overflow: hidden;
    /* theme-phone 阴影向下溢出（offset+blur≈3.125vw），预留更充足的安全距离 */
    padding-bottom: 3.125vw;
    position: relative;
}

.is-pc .theme-carousel {
    width: 100%;
    margin-left: 0;
    max-width: none;
    margin-right: 0;
}

.theme-track {
    display: flex;
    gap: 0.833vw;
    align-items: center;
    will-change: transform;
    /* 预留 active 最大高度，避免容器高度不够导致底部被裁切 */
    min-height: calc(16.823vw * 539 / 262);
    /* 为 theme-phone 的 box-shadow（offset+blur ≈ 3.125vw）预留下方空间 */
    padding: 2.083vw 0 3.125vw;
}

/* Each slide */
.theme-slide {
    flex-shrink: 0;
    width: 16.823vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Active / center slide */
/* Phone frame */
.theme-phone {
    /* 避免图片缩放/子像素计算导致边缘露底色形成“白边” */
    background: #000;
    /* 外圈“无缝圆角边框”不占内容区域 */
    box-shadow:
        0 0 0 0.417vw #000,
        0px 1.823vw 1.302vw 0px rgba(0, 0, 0, 0.15);
    border-radius: 2.188vw;
    overflow: hidden;
    /* 固定最大布局尺寸，避免 active 切换时触发布局抖动；缩放用 transform 完成 */
    width: 16.823vw;
    height: calc((16.823vw * 539 / 262) * 1.03);
    position: relative;
    transform-origin: center center;
    /* 13.646 / 16.823 = 0.811... */
    transform: scale(0.811);
    transition: transform 0.4s ease;
    will-change: transform;
}

.theme-track.theme-resetting .theme-phone {
    transition: none;
}

.theme-slide-active .theme-phone {
    transform: scale(1);
}

.theme-phone img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    /* 轻微放大吃掉子像素缝，避免边框/圆角处出现白边 */
    transform: translate(-50%, -50%) scale(1);
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Only play animation on active slide's video/animated content */
.theme-slide:not(.theme-slide-active) video,
.theme-slide:not(.theme-slide-active) .theme-animated {
    animation-play-state: paused !important;
}
.theme-slide-active video,
.theme-slide-active .theme-animated {
    animation-play-state: running !important;
}

/* View More button */
.theme-view-more {
    display: inline-block;
    margin-top: auto;
    padding: 0.521vw 2.5vw;
    background: rgba(0, 140, 255, 0.05);
    border-radius: 5.208vw;
    border: 1px solid rgba(0, 140, 255, 0.3);
    font-family: var(--font-family);
    font-size: 0.833vw;
    font-weight: 500;
    color: rgba(0, 140, 255, 1);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.theme-view-more:hover {
    background: rgba(0, 140, 255, 0.1);
}

/* ============================================================
   Wallpaper Section (PC only; H5 use home-h5.css)
   ============================================================ */
.is-pc .wallpaper-section {
    background: #F5F7F8;
    padding: 4.833vw 0 2.833vw;
    text-align: center;
    /* Wallpaper 边框使用 drop-shadow/阴影，允许纵向溢出显示 */
    overflow-x: hidden;
    overflow-y: visible;
}

.is-pc .wallpaper-inner {
    max-width: 80vw;
    width: min(80%, calc(100% - 8.333vw));
    margin: 0 auto;
    padding: 0;
}

.is-pc .wallpaper-title {
    font-family: inherit !important;
    font-size: 2.604vw;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 0.625vw;
}

.is-pc .wallpaper-subtitle {
    font-family: var(--font-family);
    font-size: 1.042vw;
    color: #292929;
    margin:auto;
    /* margin-bottom: 2.5vw; */
}

/* Carousel container — 与 theme-carousel / widgets-marquee 同：通栏用 100% */
.is-pc .wallpaper-carousel {
    width: 100%;
    margin-left: 0;
    /* 仅裁切横向，避免裁切底部阴影 */
    overflow-x: hidden;
    overflow-y: visible;
    position: relative;
    max-width: none;
    margin-right: 0;
    /* PC 端放大中间机框（与 bg/border 一致），避免被容器高度限制 */
    height: calc(25.208vw * 854 / 484);
}

/* 中间黑色框 — 底图和边框分离 */
.is-pc .wallpaper-frame-bg,
.is-pc .wallpaper-frame-border {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18.906vw;
    height: 33.385vw;
    display: block;
    pointer-events: none;
}

.is-pc .wallpaper-frame-bg,
.is-pc .wallpaper-frame-border {
    width: 25.208vw;
    height: calc(25.208vw * 854 / 484);
}

.is-pc .wallpaper-frame-bg {
    z-index: 2;
}

.is-pc .wallpaper-frame-border {
    z-index: 10;
    filter: drop-shadow(0px 1.302vw 1.302vw rgba(0,0,0,0.2));
}

.is-pc .wallpaper-frame-border {
    filter: drop-shadow(0px 1.736vw 1.736vw rgba(0,0,0,0.2));
}

/* 舞台：和 carousel 同尺寸 */
.is-pc .wallpaper-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 每张壁纸 slide — 绝对定位，JS 控制位移和缩放 */
.is-pc .wallpaper-slide {
    position: absolute;
    top: 50%;
    width: 13.542vw;
    /* scale 由 JS 实时计算，这里只做 translate 居中 */
    transform: translate(-50%, -50%) scale(0.72);
    transition: left 2.4s ease, opacity 2.4s ease;
    opacity: 1;
    will-change: left, transform, opacity;
}

.is-pc .wallpaper-slide {
    /* 与机框 484 基准同比（壁纸内容宽 338） */
    width: calc(25.208vw * 338 / 484);
    /* JS 会实时覆盖 transform；这里仅用于初始渲染/未量到宽度前的兜底 */
    transform: translate(-50%, -50%) scale(0.8);
}

/* 居中活跃态 */
.is-pc .wallpaper-slide-active {
    opacity: 1;
}

/* 壁纸手机壳 */
.is-pc .wallpaper-phone {
    /* 按机框开窗比例校准圆角，避免内容被多裁出“缝” */
    border-radius: 2.083vw;
    overflow: hidden;
    aspect-ratio: 260 / 530;
}

.is-pc .wallpaper-phone {
    /* 与机框开窗一致：border 素材透明区域为 338x700（居中） */
    box-sizing: border-box;
    aspect-ratio: 338 / 700;
    /* 避免边框透明/抗锯齿边缘露出背景色形成“缝” */
    background: #000;
    line-height: 0;
    /*
     * 这里曾做过轻微放大来“吃掉开窗像素误差”，但会导致部分壁纸在居中展示时被裁掉一小条。
     * 改为不缩放，确保壁纸内容完整展示。
     */
    transform: scale(1.012);
    transform-origin: center center;
}

.is-pc .wallpaper-phone img,
.is-pc .wallpaper-phone video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 动图仅在活跃时播放 */
.is-pc .wallpaper-slide:not(.wallpaper-slide-active) video {
    animation-play-state: paused !important;
}
.is-pc .wallpaper-slide-active video {
    animation-play-state: running !important;
}

/* View More button */
.is-pc .wallpaper-view-more {
    display: inline-block;
    margin-top: 1.25vw;
    padding: 0.521vw 2.5vw;
    background: rgba(0, 140, 255, 0.05);
    border-radius: 5.208vw;
    border: 1px solid rgba(0, 140, 255, 0.3);
    font-family: var(--font-family);
    font-size: 0.883vw;
    font-weight: 500;
    color: rgba(0, 140, 255, 1);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.is-pc .wallpaper-view-more:hover {
    background: rgba(0, 140, 255, 0.1);
}

/* ============================================================
   Icon Section
   ============================================================ */
.icon-section {
    background: #fff;
    padding: 4.833vw 0 3.333vw;
    text-align: center;
    overflow: hidden;
}

.icon-inner {
    max-width: 80vw;
    width: min(80%, calc(100% - 8.333vw));
    margin: 0 auto;
    padding: 0;
}

.icon-title {
    font-family: inherit !important;
    font-size: 2.604vw;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 0.625vw;
}

.icon-subtitle {
    font-family: var(--font-family);
    font-size: 1.042vw;
    color: #292929;
    margin-bottom: 0;
}

.icon-content {
    max-width: 80vw;
    width: min(80%, calc(100% - 8.333vw));
    margin: 0 auto;
    position: relative;
}

.icon-content img {
    width: 100%;
    max-width: 80vw;
    height: auto;
    display: block;
}

/* View More button — positioned inside image at bottom center */
.icon-view-more {
    position: absolute;
    bottom: 1.25vw;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.521vw 2.5vw;
    background: rgba(0, 140, 255, 0.05);
    border-radius: 5.208vw;
    border: 1px solid rgba(0, 140, 255, 0.3);
    font-family: var(--font-family);
    font-size: 0.729vw;
    font-weight: 500;
    color: rgba(0, 140, 255, 1);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.icon-view-more:hover {
    background: rgba(0, 140, 255, 0.1);
}


/* ============================================================
   Dynamic Island Section
   ============================================================ */
.island-section {
    /* background: #fff; */
    padding: 1vw 0 1vw;
    /* text-align: center; */
    overflow: hidden;
}

.island-inner {
    max-width: 80vw;
    width: min(80%, calc(100% - 8.333vw));
    margin: 0 auto;
    padding: 0;
}

.island-title {
    font-family: inherit !important;
    font-size: 2.604vw;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 0.625vw;
}

.island-subtitle {
    font-family: var(--font-family);
    font-size: 1.042vw;
    color: #292929;
    margin-bottom: 2.5vw;
}

/* Showcase: 用相对定位 + left:50% + transform 确保整体居中，
   超出 section 的部分被 overflow:hidden 裁切 */
.island-showcase {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: max-content;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
}

/* Side columns: 3 columns (一行三个) × 2 rows */
.island-side {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(3, auto);
    /* 列距加大：第二行 .island-card-second 三张之间不再挤；行距略增与第一行拉开 */
    row-gap: 1.667vw;
    column-gap: 1.667vw;
    flex-shrink: 0;
    position: relative;
    top: -1.042vw;
    /* 首行 .island-card-first 整体下移量（仅视觉，不改栅格占位）— 要再调只改这个 */
    --island-card-first-shift-y: 0.8vw;
}

/* Card base styles */
.island-card {
    position: relative;
    overflow: visible;
}

/* first 类型卡片：小卡片，白底圆角带边框（整体尺寸 110%） */
.island-card-first {
    padding: 0.25vw 0;
    width: 14.792vw;
    height: 7.1875vw;
    background: #FFFFFF;
    border-radius: calc(0.833vw * 1.1);
    border: calc(0.104vw * 1.1) solid rgba(0, 0, 0, 0.1);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 calc(0.417vw * 1.1) calc(1.25vw * 1.1) rgba(0, 0, 0, 0.15);
    transform: translateY(var(--island-card-first-shift-y));
}

/* second 类型卡片：宽卡片（整体尺寸 110%） */
.island-card-second {
    padding: 0.25vw 0;
    width: 14.792vw;
    height: 10.104vw;
    border-radius: calc(0.833vw * 1.1);
    border: calc(0.104vw * 1.1) solid rgba(0, 0, 0, 0.1);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 calc(0.417vw * 1.1) calc(1.25vw * 1.1) rgba(0, 0, 0, 0.15);
    transform: translateY(var(--island-card-first-shift-y));
}

/* 图片允许超出卡片边界 */
.island-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

/* Center phone：center1 / center2 分开写样式；宽度相对 .island-phone-stack（与 .island-phone 同宽） */
.island-center {
    flex-shrink: 0;
    width: 28.542vw;
    /* center2 占手机图宽度；center1 宽度 = center2 ÷ 5（见 .island-phone-float--1） */
    --island-center2-width-pct: 71%;
    /* center1：偏上；center2：其下。百分比相对栈高度 */
    --island-center1-top: 5%;
    --island-center2-top: 20%;
    --island-center1-nudge-x: 0px;
    --island-center2-nudge-x: 0px;
    --island-center1-nudge-y: 0px;
    --island-center2-nudge-y: 0px;
}

.island-phone-stack {
    position: relative;
    width: 100%;
    line-height: 0;
}

.island-phone {
    position: relative;
    z-index: 1;
    max-width: 60vw;
    width: 100%;
    height: auto;
    display: block;
}

/* ---------- center1（上，小） ---------- */
.island-phone-float--1 {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: calc(var(--island-center1-top) + var(--island-center1-nudge-y));
    width: auto;
    height: auto;
    max-width: calc(var(--island-center2-width-pct) / 2.5);
    object-fit: contain;
    pointer-events: none;
    transform: translateX(calc(-50% + var(--island-center1-nudge-x)));
}

/* ---------- center2（下，宽 = 手机图 70%） ---------- */
.island-phone-float--2 {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: calc(var(--island-center2-top) + var(--island-center2-nudge-y));
    width: auto;
    height: auto;
    max-width: var(--island-center2-width-pct);
    object-fit: contain;
    pointer-events: none;
    transform: translateX(calc(-50% + var(--island-center2-nudge-x)));
}

/* View More button */
.island-view-more {
    display: inline-block;
    /* margin-top: 2.5vw; */
    padding: 0.521vw 2.5vw;
    background: rgba(0, 140, 255, 0.05);
    border-radius: 5.208vw;
    border: 1px solid rgba(0, 140, 255, 0.3);
    font-family: var(--font-family);
    font-size: 0.833vw;
    font-weight: 500;
    color: rgba(0, 140, 255, 1);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.island-view-more:hover {
    background: rgba(0, 140, 255, 0.1);
}


/* ============================================================
   Download Bar
   ============================================================ */
.download-section {
    background: #F5F7F8;
    padding: 1.667vw 0;
}

.download-bar {
    max-width: 69.792vw;
    width: 69.792vw;
    height: 20.365vw;
    margin: 0 auto;
}

.download-bar-bg {
    position: relative;
    background: #1A8CFF;
    border-radius: 1.25vw;
    /* 蓝底在 download-bar 内再缩进两侧各 50px */
    margin: 0 2.604vw;
    padding: 4.202vw 2.083vw;
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.download-bar-logo {
    position: absolute;
    top: 0.833vw;
    right: 1.042vw;
    width: 10.25vw;
    height: auto;
    opacity: 0.35;
}

.download-bar-title {
    font-family: inherit !important;
    font-size: 2.604vw;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.417vw;
}

.download-bar-subtitle {
    font-family: var(--font-family);
    font-size: 1.042vw;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.25vw;
}

.download-bar-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.833vw;
}

.download-bar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 4.167vw;
    transition: opacity 0.2s ease;
    text-decoration: none;
}

.download-bar-btn:hover {
    opacity: 0.85;
}

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


/* ============================================================
   Showcase Section
   ============================================================ */
.showcase-section {
    /*
     * PC 端 .showcase-inner 内手机+文案的基准缩放（1 = 原设计）。
     * 修改展示块整体大小时只改这一处；下方 showcase-* 与 .is-pc .showcase-cluster 的 --showcase-fit-base 会跟它联动。
     * 原稿 px → vw：calc(像素 * 100vw / 1920)，与全页 1920 宽幅设计一致。
     */
    --showcase-scale: 1;
    background: #fff url('../images/home/case-bg.png') no-repeat center center;
    background-size: cover;
    padding: 0;
}

.showcase-inner {
    max-width: 80vw;
    width: min(80%, calc(100% - 8.333vw));
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    column-gap: 0;
    row-gap: 0;
}

/*
 * H5 下 .showcase-inner 为纵向排版：用 display:contents 让 phone/info 仍是 inner 的直接 flex 子项。
 * PC 下 .is-pc .showcase-cluster 覆盖为 flex 行，与 zoom 组成「整块等比装入版心」。
 */
.showcase-cluster {
    display: contents;
}

/* Phone frame */
.showcase-phone {
    flex-shrink: 0;
    text-align: center;
    margin-left: 0;
    margin-right: 0;
}

.showcase-phone-frame {
    position: relative;
    width: calc(510 * 100vw / 1920 * var(--showcase-scale));
    aspect-ratio: 394 / 670;
    background: url('../images/home/faq-section-bg@2x.png') no-repeat center center;
    background-size: 90%;
}

.showcase-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58.6%;
    height: 74%;
    object-fit: cover;
    border-radius: calc(40 * 100vw / 1920 * var(--showcase-scale));
    opacity: 0;
    transition: opacity 0.8s ease;
}

.showcase-slide-active {
    opacity: 1;
}

.showcase-phone-label {
    font-family: var(--font-family);
    font-size: calc(11 * 100vw / 1920 * var(--showcase-scale));
    color: #999;
    margin-top: calc(0.625vw * var(--showcase-scale));
}

/* Info side：不占满剩余宽度，便于与手机合并为一组后整体居中 */
.showcase-info {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: vw;
}

.showcase-title {
    font-family: inherit !important;
    font-size: 2.5vw;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: calc(0.833vw * var(--showcase-scale));
}


.showcase-desc {
    font-family: var(--font-family);
    font-size: 0.833vw;
    color: #292929;
    font-weight: 400;
    line-height: 1.8;
    max-width: 34.56vw;
    margin-bottom: 3.125vw;
}

.showcase-tag-label {
    font-family: var(--font-family);
    font-size: 0.833vw;
    color: #9E9E9E;
    max-width: calc(29.167vw * var(--showcase-scale));
    margin-bottom: 0.729vw;
}

.showcase-tags {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.729vw * var(--showcase-scale));
    max-width: 35vw;
}

.showcase-tag {
    display: inline-block;
    padding: calc(0.417vw * var(--showcase-scale)) calc(0.833vw * var(--showcase-scale));
    border-radius: calc(5.208vw * var(--showcase-scale));
    font-family: var(--font-family);
    font-size: 0.729vw;
    font-weight: 400;
    background: rgba(0,140,255,0.05);
    border-radius: calc(0.417vw * var(--showcase-scale));
    border: calc(1 * 100vw / 1920 * var(--showcase-scale)) solid #008CFF;
}

.tag-pink {
    border: 1px solid #FF69B1;
    color: #FF69B1;
    background: rgba(255, 105, 177, 0.05);
}

.tag-orange {
    border: 1px solid #FF8E47;
    color: #FF8E47;
    background: rgba(255, 142, 71, 0.05);
}

.tag-green {
    border: 1px solid #1AC860;
    color: #1AC860;
    background: rgba(26, 200, 96, 0.05);
}

.tag-blue {
    border: 1px solid #008CFF;
    color: #008CFF;
    background: rgba(0, 140, 255, 0.05);
}

/* ============================================================
   PC Unified Frame Width（无 @media，由 index.tpl 脚本驱动）
   - 白边各 ≥50px 时：--pc-core-width-px = 顶栏/首屏/honors/FAQ 版心；
     --pc-wide-width-px = 视口宽 − 100px，仅用于 widgets / theme / wallpaper / Dynamic Island。
   - 核心版心无法同时保留 50px 双边白边时：pc-frame-compressed，两变量均 = 视口−100px，
     下方 icon / download / showcase 等也收紧到同一宽度。
   ============================================================ */
.is-pc .hero-section > .pc-frame-shell {
    /*
     * 右侧主视觉允许溢出 navbar-inner 的版心宽度；
     * 横向滚动由 .hero-section 的 overflow:hidden 负责兜底。
     */
    overflow: visible;
}

.is-pc .hero-section > .pc-frame-shell .hero-inner {
    width: 100%;
    max-width: none;
}

/* PC：右侧主视觉（home-top-bg）允许超出版心宽度 */
.is-pc .hero-section .hero-right {
    justify-content: flex-start;
}

.is-pc .hero-section .hero-phone-wrapper {
    max-width: none;
    width: calc(100% + 10vw);
    /* 让外溢主要发生在右侧 */
    margin-right: -10vw;
}

.is-pc .honors-bar,
.is-pc .honors-tagline-wrapper,
.is-pc .faq-outer {
    max-width: none;
    width: var(--pc-core-width-px, var(--pc-frame-width, min(80%, calc(100% - 8.333vw))));
}

/* 宽模块：未压缩时比核心更宽；压缩时 --pc-wide-width-px 与 core 相同 */
.is-pc .widgets-inner,
.is-pc .theme-inner,
.is-pc .wallpaper-inner,
.is-pc .island-inner {
    max-width: none;
    width: var(--pc-wide-width-px, calc(100vw - 100px));
}

/* PC：与 island-inner 同宽、用 margin 居中；避免 max-width + left/transform 叠用导致整体偏移 */
.is-pc .island-section {
    text-align: center;
}

.is-pc .island-showcase {
    width: min(max-content, var(--pc-wide-width-px, calc(100vw - 100px)));
    margin-left: auto;
    margin-right: auto;
    left: auto;
    transform: none;
}

/* Showcase：手机 + 文案同一行；版心窄于内容「设计宽度」时整块 zoom 缩小（zoom 会缩小布局占位，避免 transform 留白） */
.is-pc .showcase-inner {
    container-type: inline-size;
    container-name: showcase;
}

.is-pc .showcase-cluster {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    /* 与放大后的最大内容宽约 1:1，窄版心时 zoom 仍正确；基数原 1800px（≈93.75vw@1920）对应 --showcase-scale:1 时的经验值 */
    --showcase-fit-base: calc(1800 * 100vw / 1920 * var(--showcase-scale));
    zoom: min(1, calc((100cqw - 8 * 100vw / 1920) / var(--showcase-fit-base)));
}

.is-pc.pc-frame-compressed .icon-inner,
.is-pc.pc-frame-compressed .icon-content,
.is-pc.pc-frame-compressed .download-bar,
.is-pc.pc-frame-compressed .showcase-inner {
    max-width: none;
    width: var(--pc-core-width-px, var(--pc-frame-width, calc(100vw - 100px)));
}