:root {
    --c-bg: #ffffff;
    --c-text: #0f1720;
    --c-text-muted: #4a5b6a;
    --c-accent: #0ea5a4;
    --c-accent-2: #14b8a6;
    --c-accent-soft: #d9f2ef;
    --c-footer-bg: #2fa8a0;
    --c-line: #e4e9ee;
    --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    --font-serif: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    --font-mono: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    --font-inter: "Inter", var(--font-sans);
    --list-green: #006937;
    --list-muted: #696969;
    --list-badge-bg: #f7f7f7;
    /* Figma 274:4 · 画幅 1920×900；hero 移出缩放画板后，画板内保留高度 = 原 3073 − 原 hero 651 */
  --pl-hero-sec-h: 46.875vw;
    --pl-frame-min-h: 126.1458vw;
    --pl-after-hero-gap: 7.5521vw;
    /* 侧栏列宽 + 与产品区间距；产品栅格固定 1304px（400+16+1304=1720） */
    --pl-sidebar-w: 20.8333vw;
    --pl-main-gap: 0.8333vw;
    /* 基准宽（由 JS 按最长标题测算）+ 略向右延伸，标题与箭头留白 */
    --pl-acc-bar-w: 16.4583vw;
    --pl-acc-bar-extra: 0.8333vw;
    --pl-resp-lh: 3.5vw;
}

body {
    font-family: var(--font-sans);
    color: var(--c-text);
    position: relative;
    background-color: transparent;
    overflow-x: hidden;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    padding-top: 4.6875vw;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.pl-page {
    padding-top: 0
}

body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0
}

.page_hero{
    overflow: hidden;
}

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

ul {
    list-style: none
}

img {
    display: block;
    max-width: 100%
}

img.is-broken {
    display: none !important
}

/* ===== 弥散背景：底层固定渐变（轻）+ 光球（飘动、随鼠标） ===== */
.pl-diffuse-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-color: #fafdfd;
    background-image:
        radial-gradient(ellipse 1000px 760px at 8% 24%, color-mix(in srgb, var(--c-accent) 9%, transparent), transparent 62%),
        radial-gradient(ellipse 820px 640px at 20% 80%, color-mix(in srgb, var(--c-accent-2) 5%, transparent), transparent 58%),
        radial-gradient(circle min(70vw, 820px) at 98% 42%, color-mix(in srgb, var(--c-accent) 4%, transparent), transparent 55%),
        radial-gradient(ellipse 65% 50% at 50% 100%, color-mix(in srgb, var(--c-accent-soft) 16%, #fff), transparent 52%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.pl-diffuse-blob {
    position: absolute;
    width: min(88vmin, 1050px);
    height: min(88vmin, 1050px);
    border-radius: 50%;
    transform: translate3d(-50%, -50%, 0) translate3d(var(--blob-tx, 0px), var(--blob-ty, 0px), 0);
    filter: blur(56px);
    opacity: .48;
    will-change: transform;
    z-index: 1;
}

.pl-diffuse-blob.is-a {
    left: 12%;
    top: 24%;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c-accent) 34%, transparent) 0%, color-mix(in srgb, var(--c-accent) 8%, transparent) 40%, transparent 68%);
}

.pl-diffuse-blob.is-b {
    left: 86%;
    top: 38%;
    width: min(76vmin, 900px);
    height: min(76vmin, 900px);
    opacity: .4;
    filter: blur(52px);
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c-accent-2) 30%, transparent) 0%, color-mix(in srgb, var(--c-accent-2) 7%, transparent) 38%, transparent 65%);
}

.pl-diffuse-blob.is-c {
    left: 48%;
    top: 88%;
    width: min(82vmin, 980px);
    height: min(82vmin, 980px);
    opacity: .36;
    filter: blur(64px);
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c-accent-soft) 55%, transparent) 0%, color-mix(in srgb, var(--c-accent) 10%, transparent) 42%, transparent 62%);
}

/* 与光球同在弥散层内、位于所有正文/导航之下 */
.pl-cursor-glow {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse min(72vw, 640px) min(52vh, 480px) at var(--pl-gx, 50vw) var(--pl-gy, 45vh),
            rgba(14, 165, 164, .10) 0%,
            rgba(20, 184, 166, .045) 26%,
            transparent 44%);
}

@media (prefers-reduced-motion:reduce) {
    .pl-cursor-glow {
        display: none
    }

    .pl-diffuse-blob {
        filter: blur(56px);
        opacity: .32
    }

    .pl-acc-head,
    .pl-acc-panel,
    .pl-acc-chev svg,
    .pl-acc-sub,
    .pl-acc-panel li,
    .pl-acc-bul {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    .pl-card {
        transition: none;
        filter: none
    }

    .pl-card:hover {
        transform: none;
        filter: none
    }
}

/* ===== Figma 274:2 · 画板约 1920×3073；全宽 hero（274:4）已移出 pl-frame，画板内高见 --pl-frame-min-h ===== */
.list-page {
    background: transparent;
    position: relative;
    z-index: 2
}

/* .fig-wrap {
    max-width: 1920px;
    margin: 0 auto
} */

.frame-shell {
    width: 100%;
    height: auto;
    position: relative;
}

.pl-frame {
    position: relative;
    width: 100%;
    min-height: 0;
    margin: 0 auto;
    background: transparent;
}

/* Figma 274:4 / 275:3 — 1920×900 全宽横幅，导航叠在顶部 */
.pl-hero-sec {
    position: relative;
    z-index: 3;
    width: 100%;
    height: var(--pl-hero-sec-h);
    overflow: hidden;
    background: #d9d9d9;
}

.pl-hero-stage {
    position: relative;
    width: 100%;
    height: 100%;
    isolation: isolate;
}

.pl-hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #d9d9d9;
}

.pl-hero-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    max-width: none;
}

.pl-hero-grad {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(to top,
            rgba(28, 171, 163, 0.3) 0%,
            rgba(28, 171, 163, 0) 54.611%);
}

/* Figma 275:2 — banner 文案左/下各 100px */
.pl-hero-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    margin: 0 auto;
    pointer-events: none;
}

.pl-hero-copy {
    position: absolute;
       left: 5.208vw;
    bottom: 5.208vw;
    top: auto;
    width: 738px;
    max-width: calc(100% - 200px);
    display: flex;
    flex-direction: column;
    gap: 36px;
    color: #ffffff;
    pointer-events: auto;
}

/* Figma 274:6 */
.pl-hero-copy h1 {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 3.33vw;
    line-height: 2.083vw;
    letter-spacing: 0.033vw;
    text-transform: uppercase;
    color: #ffffff;
    /* min-height: 55px; */
    margin: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* Figma 274:7 */
.pl-hero-copy p {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 1.25vw;
    line-height: 1.5;
    letter-spacing: 0.014vw;
    color: #ffffff;
    /* max-width: 900px; */
    /* margin: 0; */
}

.pl-main {
    position: relative;
    width: 100%;
    padding: calc(var(--pl-after-hero-gap) + 2.5vw) 5.2083vw 5vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 1;
}

.pl-grid-wrap {
    flex: 0 0 auto;
    width: 100%;
    /* max-width: 83.4375vw; */
    min-width: 0;
    overflow: visible;
    --sol-car-gap: 2.2396vw;
    --sol-cols: 4;
    --pl-pimg-h: 12.9167vw;
    --pl-pimg-max-w: 20.9375vw;
    --pl-card-slot-w: calc((83.4375vw - (var(--sol-cols) - 1) * var(--sol-car-gap)) / var(--sol-cols));
    --pl-cat-block-gap: 1.875vw;
    --pl-hover-bleed-x: 0.2083vw;
    --pl-hover-bleed-y-top: 0.4167vw;
    --pl-hover-bleed-y-bottom: 2.0833vw;
    display: flex;
    flex-direction: column;
    gap: 5.2083vw;
    background: transparent;
}

.pl-cat-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--pl-cat-block-gap, 1.875vw);
    overflow: visible;
}

.pl-cat-heading {
    margin: 0;
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 1.9792vw;
    line-height: 1.2;
    letter-spacing: -0.026vw;
    color: #000;
    text-align: left;
}

.pl-cat-body {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--pl-cat-block-gap, 1.875vw);
    overflow: visible;
}

.pl-cat-section.has-scroll .pl-cat-body {
    gap: 1.0417vw;
}

.pl-cat-row {
    display: flex;
    gap: var(--sol-car-gap);
    width: 100%;
    justify-content: flex-start;
}

.pl-cat-carousel {
    position: relative;
    width: 100%;
    z-index: 2;
    overflow: visible;
}

.pl-cat-viewport {
    position: relative;
    z-index: 1;
    width: calc(100% + 2 * var(--pl-hover-bleed-x, 0.4167vw));
    max-width: calc(100% + 2 * var(--pl-hover-bleed-x, 0.4167vw));
    margin-left: calc(-1 * var(--pl-hover-bleed-x, 0.4167vw));
    margin-right: calc(-1 * var(--pl-hover-bleed-x, 0.4167vw));
    margin-top: calc(-1 * var(--pl-hover-bleed-y-top, 0.5208vw));
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
    padding: var(--pl-hover-bleed-y-top, 0.5208vw) var(--pl-hover-bleed-x, 0.4167vw) var(--pl-hover-bleed-y-bottom, 0.8333vw);
    box-sizing: border-box;
}

.pl-cat-viewport.is-grabbing {
    cursor: grabbing;
}

.pl-cat-viewport.is-grabbing .pl-card {
    pointer-events: none;
}

.pl-cat-viewport::-webkit-scrollbar {
    display: none
}

.pl-cat-track {
    display: flex;
    gap: var(--sol-car-gap);
    width: max-content;
    align-items: flex-start;
    margin-inline: calc(-1 * var(--pl-hover-bleed-x, 0.5208vw));
    padding-inline: var(--pl-hover-bleed-x, 0.5208vw);
}

.pl-cat-arrow {
    position: absolute;
    top: calc(var(--pl-pimg-h) / 2);
    transform: translateY(-50%);
    z-index: 10;
    width: 2.5vw;
    height: 2.5vw;
    padding: 0;
    border-radius: 50%;
    border: 0.0521vw solid var(--c-accent);
    background: #fff;
    color: var(--c-accent);
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease, background .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease;
    box-shadow: 0 0.3125vw 1.25vw rgba(10, 30, 40, .1);
}

.pl-cat-section.has-scroll:hover .pl-cat-arrow,
.pl-cat-carousel.is-grabbing .pl-cat-arrow {
    opacity: 1;
    pointer-events: auto;
}

.pl-cat-arrow--prev {
    left: 0.625vw
}

.pl-cat-arrow--next {
    right: 0.625vw
}

.pl-cat-arrow:hover {
    background: var(--c-accent);
    color: #fff;
    box-shadow: 0 0.5208vw 1.4583vw color-mix(in srgb, var(--c-accent) 28%, transparent);
}

.pl-cat-arrow.is-disabled {
    opacity: 0 !important;
    pointer-events: none !important;
}

.pl-cat-arrow svg {
    width: 0.9375vw;
    height: 0.9375vw;
    display: block;
}

.pl-card-slot--empty {
    flex: 0 0 var(--pl-card-slot-w);
    min-width: 0;
    max-width: var(--pl-pimg-max-w);
    height: var(--pl-pimg-h);
    flex-shrink: 0;
    visibility: hidden;
    pointer-events: none;
}

.pl-cat-progress {
    width: 100%;
    padding-top: 0;
    position: relative;
    z-index: 1;
}

.pl-cat-progress-track {
    position: relative;
    width: 100%;
    height: 0.2083vw;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-accent) 18%, var(--c-line));
    cursor: pointer;
    overflow: hidden;
}

.pl-cat-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    min-width: 2.5vw;
    border-radius: 999px;
    background: var(--c-accent);
    transition: width .12s ease, left .12s ease;
    will-change: left, width;
}

.pl-cat-section:not(.has-scroll) .pl-cat-progress,
.pl-cat-section:not(.has-scroll) .pl-cat-arrow {
    display: none;
}

.pl-cat-section:not(.has-scroll) .pl-cat-viewport {
    overflow-x: hidden;
    cursor: default;
}

.pl-card {
    --pl-card-stack: 0.7813vw;
    flex: 0 0 var(--pl-card-slot-w);
    min-width: 0;
    max-width: var(--pl-pimg-max-w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline-offset: 0.1563vw;
    position: relative;
    z-index: 1;
    border-radius: 0;
    transition: transform .38s cubic-bezier(0.22, 1, 0.36, 1), filter .38s ease;
    filter: drop-shadow(0 0.1042vw 0.4167vw rgba(15, 23, 32, .04));
}

@media (hover:hover) and (pointer:fine) {
    .pl-card:hover {
        transform: translateY(-5px);
        z-index: 5;
        filter:
            drop-shadow(0 14px 28px rgba(14, 165, 164, .10)) drop-shadow(0 28px 56px rgba(15, 23, 32, .05));
    }

    .pl-cat-viewport.is-grabbing .pl-card:hover {
        transform: none;
        z-index: 1;
        filter: drop-shadow(0 2px 8px rgba(15, 23, 32, .04));
    }
}

.pl-card-media {
    position: relative;
    width: 100%;
    height: var(--pl-pimg-h);
    overflow: hidden;
    border-radius: 1.0417vw;
    background: #fff;
    margin: 0 0 var(--pl-card-stack);
    box-shadow: 0 0.0521vw 0 rgba(15, 23, 32, .06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5208vw 0.7292vw;
    box-sizing: border-box;
}

.pl-card-media .thumb-a {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
    object-position: center center;
    background: #fff;
}

.pl-card-badge {
    position: absolute;
    left: 0.7813vw;
    top: 1.0417vw;
    height: 1.3542vw;
    min-width: 5.4688vw;
    padding: 0 0.5208vw;
    display: inline-flex;
    align-items: center;
    border-radius: 0.2083vw;
    border: 0.0521vw solid color-mix(in srgb, var(--c-accent) 55%, var(--c-line));
    background: var(--list-badge-bg);
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 0.5208vw;
    line-height: 0.625vw;
    letter-spacing: 0.0313vw;
    text-transform: uppercase;
    color: var(--c-accent);
    z-index: 2;
}

.pl-card-title {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 1.0417vw;
    line-height: 1.25;
    letter-spacing: 0.0146vw;
    color: #000;
    margin: 0;
    max-width: var(--pl-pimg-max-w);
    min-height: 2.6042vw;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    position: relative;
    z-index: 3;
    padding-bottom: 0.1042vw;
}



@media (max-width:768px) {
    body.pl-page {
        padding-top: 72px;
    }

    /* ===== 弥散背景适配 ===== */
    .pl-diffuse-blob {
        width: min(88vmin, 400px);
        height: min(88vmin, 400px);
        filter: blur(40px);
    }

    .pl-diffuse-blob.is-a {
        left: 10%;
        top: 20%;
    }

    .pl-diffuse-blob.is-b {
        left: 80%;
        top: 35%;
        width: min(76vmin, 350px);
        height: min(76vmin, 350px);
        filter: blur(36px);
    }

    .pl-diffuse-blob.is-c {
        left: 50%;
        top: 85%;
        width: min(82vmin, 380px);
        height: min(82vmin, 380px);
        filter: blur(48px);
    }

    /* ===== Hero 区域适配 ===== */
    .pl-hero-sec {
        height: clamp(280px, 75vw, 420px);
    }

    .pl-hero-copy {
        left: 24px;
        right: 24px;
        bottom: 24px;
        width: auto;
        max-width: none;
        gap: 16px;
    }

    .pl-hero-copy h1 {
        font-size: clamp(22px, 6.2vw, 32px);
        line-height: 1.12;
        letter-spacing: .02em;
        white-space: normal;
    }

    .pl-hero-copy p {
        font-size: clamp(13px, 3.6vw, 16px);
        line-height: 1.55;
        letter-spacing: .01em;
    }

    /* ===== 主内容区域适配 ===== */
    .pl-main {
        padding: 30px 24px 40px;
        display: block;
    }

    .pl-grid-wrap {
        --sol-car-gap: 12px;
        --sol-cols: 2;
        --pl-pimg-h: 28vw;
        --pl-pimg-max-w: 45vw;
        --pl-card-slot-w: calc((100% - (var(--sol-cols) - 1) * var(--sol-car-gap)) / var(--sol-cols));
        --pl-cat-block-gap: 16px;
        --pl-hover-bleed-x: 4px;
        --pl-hover-bleed-y-top: 4px;
        --pl-hover-bleed-y-bottom: 12px;
        gap: 32px;
    }

    /* ===== 分类区块适配 ===== */
    .pl-cat-heading {
        font-size: clamp(18px, 5vw, 22px);
        line-height: 1.25;
        letter-spacing: -.02em;
    }

    .pl-cat-row {
        gap: var(--sol-car-gap);
        flex-wrap: wrap;
    }

    .pl-cat-viewport {
        width: calc(100% + 2 * var(--pl-hover-bleed-x));
        max-width: calc(100% + 2 * var(--pl-hover-bleed-x));
        margin-left: calc(-1 * var(--pl-hover-bleed-x));
        margin-right: calc(-1 * var(--pl-hover-bleed-x));
        margin-top: calc(-1 * var(--pl-hover-bleed-y-top));
        padding: var(--pl-hover-bleed-y-top) var(--pl-hover-bleed-x) var(--pl-hover-bleed-y-bottom);
    }

    .pl-cat-track {
        gap: 30px;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1,1fr);
    }

    .pl-cat-arrow {
        width: 36px;
        height: 36px;
        border-width: 1px;
        box-shadow: 0 4px 12px rgba(10, 30, 40, .1);
    }

    .pl-cat-arrow svg {
        width: 14px;
        height: 14px;
    }

    .pl-cat-arrow--prev {
        left: 4px;
    }

    .pl-cat-arrow--next {
        right: 4px;
    }

    .pl-cat-progress-track {
        height: 4px;
    }

    /* ===== 产品卡片适配 ===== */
    .pl-card {
        --pl-card-stack: 8px;
        flex: 0 0 var(--pl-card-slot-w);
        width: 100%;
        max-width: inherit;
    }

    .pl-card-media {
        height: auto;
        border-radius: 15px;
        margin: 0 0 var(--pl-card-stack);
        padding: 8px;
    }

    .pl-card-badge {
        left: 15px;
        top: 15px;
        height: 20px;
        min-width: 60px;
        padding: 0 8px;
        border-radius: 2px;
        border-width: 1px;
        font-size: 14px;
        line-height: 12px;
        letter-spacing: .02em;
    }

    .pl-card-title {
        font-size: clamp(16px, 3.6vw, 15px);
        line-height: 1.3;
        letter-spacing: .01em;
        min-height: 34px;
        padding-bottom: 2px;
        max-width: inherit;
        text-align: center;
    }

    .pl-card-slot--empty {
        flex: 0 0 var(--pl-card-slot-w);
        max-width: var(--pl-pimg-max-w);
        height: var(--pl-pimg-h);
        display: none;
    }
}